/* ============================================================
   WoodExpress: shared styles for the plugin-rendered pages.
   Scoped entirely under .wx-projekti-page so nothing here can leak
   onto the rest of the live site (Elementor, other plugins, or the
   theme's own markup use plenty of generic class names like
   .container/.gallery/.card, an unscoped rule here would silently
   restyle those elsewhere on the site).
   ============================================================ */

:root {
  --wx-primary: #522F20;
  --wx-primary-dark: #3B2115;
  --wx-accent: #CFB98E;
  --wx-accent-hover: #C0A671;
  --wx-secondary: #54595F;
  --wx-text: #222020;
  --wx-cream: #F1ECDF;
  --wx-cream-soft: #F7F4EB;
  --wx-white: #FFFFFF;
  --wx-char: #171412;
  --wx-char-2: #221D19;

  --font-head: "Montserrat", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* Type scale: resized 2026-07-31 onto the reference scale from
     etepek-typography-system.md (sizes only — WoodExpress keeps its own
     fonts/colors/weights). 8 tokens now, up from 6: --fs-small and
     --fs-h4 are new. Every font-size on the site should reference one
     of these 8 tokens - no one-off values. Headings are fluid
     (rem+vw, never pure vw so browser zoom still works); caption/
     small/body are fixed per the reference (not fluid there either). */
  --fs-caption: 0.75rem;                                    /* 12px */
  --fs-small:   0.875rem;                                   /* 14px */
  --fs-body:    1rem;                                       /* 16px */
  --fs-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.25rem);        /* 17.6 -> 20px */
  --fs-h4:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);      /* 20 -> 24px */
  --fs-h3:      clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);      /* 24 -> 36px */
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.5vw, 2.625rem);    /* 28 -> 42px */
  --fs-h1:      clamp(2.25rem, 1.3rem + 4.5vw, 3.5rem);      /* 36 -> 56px */
  --ls-heading: -0.02em;
  --ls-caps:    0.08em;

  --wx-container: 1200px;
  --wx-radius: 10px;
  --wx-shadow-soft: 0 10px 30px rgba(59, 33, 21, .10);
}

/* Header Footer Elementor's sitewide "Skip to main content" link (class is
   HFE's own, unique, zero collision risk - deliberately left unscoped
   unlike the rest of this file, since the link itself renders on every
   page, not just .wx-projekti-page templates). Only overrides the visual
   theme (HFE's own default is generic browser blue/white) - the reveal
   mechanism (position/clip on focus) stays exactly as HFE ships it. */
.hfe-skip-link:focus {
  background: var(--wx-primary) !important;
  color: var(--wx-white) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  outline-color: var(--wx-accent) !important;
}

.wx-projekti-page button { -webkit-tap-highlight-color: transparent; }
.wx-projekti-page {
  width: 100%;
  font-family: var(--font-body);
  color: var(--wx-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wx-projekti-page * { box-sizing: border-box; }
.wx-projekti-page img { max-width: 100%; display: block; }
.wx-projekti-page h1, .wx-projekti-page h2, .wx-projekti-page h3, .wx-projekti-page h4 {
  font-family: var(--font-head);
  color: var(--wx-primary);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--ls-heading);
}
.wx-projekti-page a { color: inherit; }

.wx-projekti-page .container {
  max-width: var(--wx-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ----------
   Matches the homepage hero's button style (same flat, uppercase,
   letter-spaced look site-wide - see .pagehero__actions .button in the
   homepage's own Elementor HTML widget). Colors were already the same
   design tokens (--wx-accent/--wx-primary-dark = the hero's --sand/
   --wood-deep), so this is mostly a shape/typography change. */
.wx-projekti-page .btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 45px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body); /* etepek button spec: 16px */
  letter-spacing: normal;
  text-transform: none;
  padding: 0 19px;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: .2s ease;
}
.wx-projekti-page .btn--tan { background: var(--wx-accent); color: var(--wx-primary-dark); }
.wx-projekti-page .btn--tan:hover { background: #F0DDBB; }
.wx-projekti-page .btn--brown { background: var(--wx-primary); color: #fff; }
.wx-projekti-page .btn--brown:hover,
.wx-projekti-page .btn--brown:focus-visible { background: var(--wx-primary-dark); color: #fff; }
/* Default .btn--outline: for light-background contexts (e.g. the project
   modal's nav buttons). The hero's own secondary button is white-on-dark-
   photo, which would be illegible reused here, so it's scoped to .hero
   below instead of being the default. */
.wx-projekti-page .btn--outline {
  background: transparent;
  color: var(--wx-primary);
  border-color: var(--wx-primary);
}
.wx-projekti-page .btn--outline:hover { background: var(--wx-primary); color: #fff; }
/* Hero CTAs sit on a dark photo (see .hero's inline gradient+image
   background) - here the outline button matches the homepage hero's
   .button--secondary exactly: white text, translucent white border. */
.wx-projekti-page .hero .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
.wx-projekti-page .hero .btn--outline:hover { background: #fff; color: var(--wx-primary); }
@media (max-width: 560px) {
  .wx-projekti-page .btn { min-height: 42px; padding: 0 14px; }
}

/* ---------- Cenas banner ---------- */
.wx-projekti-page .wx-cenas {
  background: var(--wx-cream);
  border-radius: var(--wx-radius);
  padding: 44px 48px;
  display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap;
  margin: 70px auto;
}
.wx-projekti-page .wx-cenas__text { flex: 1 1 420px; }
.wx-projekti-page .wx-cenas__text h2 { font-size: var(--fs-h3); margin-bottom: 10px; }
.wx-projekti-page .wx-cenas__actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.wx-projekti-page .wx-cenas__phone {
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--fs-lead); color: var(--wx-primary);
  text-decoration: none; text-align: center;
}

/* ---------- Reveal on scroll ----------
   Unscoped (not .wx-projekti-page-only): also used by the homepage's
   own raw-HTML widget content, e.g. .trust-rail. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .wx-projekti-page .wx-cenas { padding: 34px 26px; }
}

/* ============================================================
   Gallery (Projekti)
   ============================================================ */
.wx-projekti-page .filters {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding: 26px 24px 8px;
}
.wx-projekti-page .chip {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; /* etepek button spec: 16px */
  padding: 9px 20px; border-radius: 100px; cursor: pointer;
  border: 1.5px solid #D8CBB2; background: transparent; color: var(--wx-text);
  transition: all .2s ease;
}
.wx-projekti-page .chip:hover { border-color: var(--wx-accent); }
.wx-projekti-page .chip.on { background: var(--wx-primary); border-color: var(--wx-primary); color: #fff; }

.wx-projekti-page .gallery {
  max-width: 1360px; margin: 34px auto 90px; padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 18px;
}
.wx-projekti-page .tile {
  position: relative; overflow: hidden; border-radius: var(--wx-radius);
  cursor: pointer; border: none; padding: 0; text-align: left;
  background: var(--wx-cream); white-space: normal;
}
.wx-projekti-page .tile--wide { grid-column: span 2; }
.wx-projekti-page .tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.wx-projekti-page .tile:hover img { transform: scale(1.045); }
.wx-projekti-page .tile__meta {
  position: absolute; inset: auto 0 0 0;
  padding: 44px 22px 18px;
  background: linear-gradient(to top, rgba(23, 16, 12, .82), transparent);
  color: #fff;
}
.wx-projekti-page .tile__meta h3 { color: #fff; font-size: var(--fs-body); font-weight: 600; line-height: 1.25; }
.wx-projekti-page .tile.hidden { display: none; }

@media (max-width: 900px) {
  .wx-projekti-page .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
}
@media (max-width: 560px) {
  .wx-projekti-page .gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}

/* ============================================================
   Project modal
   ============================================================ */
.wx-projekti-page .pm {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.wx-projekti-page .pm.open { display: flex; }
.wx-projekti-page .pm__overlay { position: absolute; inset: 0; background: rgba(23, 16, 12, .78); }
.wx-projekti-page .pm__box {
  position: relative; background: #fff; border-radius: 14px;
  max-width: 1160px; width: 100%; max-height: 90vh; overflow: hidden;
  display: grid; grid-template-columns: 1.3fr 1fr;
}
.wx-projekti-page .pm__left { padding: 30px 32px; overflow-y: auto; }
.wx-projekti-page .pm__cat {
  display: inline-block; font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--wx-accent-hover); margin-bottom: 10px;
}
.wx-projekti-page .pm__left h2 { font-size: var(--fs-h4); margin-bottom: 6px; }
.wx-projekti-page .pm__place { font-size: var(--fs-caption); color: var(--wx-secondary); margin-bottom: 14px; }
.wx-projekti-page .pm__desc { font-size: var(--fs-body); line-height: 1.6; color: #4b4441; }
.wx-projekti-page .pm__materials { margin-top: 16px; font-size: var(--fs-small); }
.wx-projekti-page .pm__materials strong { font-family: var(--font-head); color: var(--wx-primary); }
.wx-projekti-page .pm__nav { display: flex; gap: 12px; margin-top: 22px; }
.wx-projekti-page .pm__right { padding: 24px; background: var(--wx-cream-soft); }
.wx-projekti-page .pm__main { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; }
/* ponytail: no flex-wrap - WX_PROJECT_MAX_IMAGES caps this at 6, and a fixed
   84px width wrapped a 6th thumbnail onto its own half-empty row. flex:1 with
   a max-width lets 1-6 thumbnails always share one row edge-to-edge instead. */
.wx-projekti-page .pm__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.wx-projekti-page .pm__thumbs img {
  flex: 1 1 0; min-width: 0; max-width: 84px; height: 62px; object-fit: cover; border-radius: 6px;
  cursor: pointer; opacity: .65; border: 2px solid transparent;
  transition: opacity .2s ease;
}
.wx-projekti-page .pm__thumbs img.on { opacity: 1; border-color: var(--wx-accent); }
.wx-projekti-page .pm__close {
  position: absolute; top: 20px; right: 20px; z-index: 310;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  background: rgba(23, 16, 12, .55); border: none; border-radius: 50%;
  font-size: 26px; color: #fff; cursor: pointer; line-height: 1;
  transition: background .18s ease;
}
.wx-projekti-page .pm__close:hover,
.wx-projekti-page .pm__close:focus-visible { background: rgba(23, 16, 12, .8); }

/* ---------- Spec / sizing table ---------- */
.wx-projekti-page .pm__specs { margin-top: 18px; }
.wx-projekti-page .pm__specs h3 {
  font-family: var(--font-head); font-size: var(--fs-small); font-weight: 700;
  color: var(--wx-primary); letter-spacing: .02em; margin-bottom: 10px;
}
.wx-projekti-page .spec-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-small);
  border: 1px solid #E4DAC6;
}
.wx-projekti-page .spec-table th {
  background: var(--wx-cream); color: var(--wx-primary);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-small);
  letter-spacing: .02em; text-align: left;
  padding: 7px 11px; border: 1px solid #E4DAC6; white-space: nowrap;
}
.wx-projekti-page .spec-table td {
  padding: 7px 11px; border: 1px solid #EDE6D6; color: #4b4441; white-space: nowrap;
}
.wx-projekti-page .spec-table tbody tr:nth-child(even) td { background: #FBF9F3; }
.wx-projekti-page .pm__specs-note { font-size: var(--fs-caption); color: #6b6258; margin-top: 8px; }

/* Standalone sizing table (product pages: dedzināti, krāsoti) */
.wx-projekti-page .specs-section { padding: 40px 0 16px; }
.wx-projekti-page .specs-section h2 { font-size: var(--fs-h2); margin-bottom: 8px; }
.wx-projekti-page .specs-section .specs-lead { color: #4b4441; margin-bottom: 24px; max-width: 640px; }
.wx-projekti-page .spec-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(34,32,32,.18), rgba(34,32,32,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(34,32,32,.18), rgba(34,32,32,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.wx-projekti-page .spec-table-wrap .spec-table { font-size: var(--fs-small); }
.wx-projekti-page .spec-table-wrap .spec-table th { font-size: var(--fs-small); padding: 12px 16px; }
.wx-projekti-page .spec-table-wrap .spec-table td { padding: 12px 16px; }
.wx-projekti-page .spec-table-hint { display: none; }
.wx-projekti-page .specs-note { font-size: var(--fs-caption); color: #6b6258; margin-top: 12px; }
.wx-projekti-page .specs-section__pdf { margin-top: 20px; }

/* Slightly smaller type for the reused spec-table inside the modal column.
   table-layout:fixed + forced white-space:normal used to squeeze this into
   a fixed width (wrapping header text mid-word); now it scrolls
   horizontally instead, same as the main page's spec-table-wrap (whose
   .spec-table-hint swipe cue is reused here too, so behavior must match). */
.wx-projekti-page .pm__specs .spec-table { font-size: var(--fs-small); }
.wx-projekti-page .pm__specs .spec-table th,
.wx-projekti-page .pm__specs .spec-table td { padding: 7px 10px; }

/* Category filter row for a spec-table with multiple thead/tbody groups.
   Reuses .chip/.chip.on (already styled for the Projekti gallery filters);
   this just left-aligns them in a single non-wrapping row. */
.wx-projekti-page .spec-filter { display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; }
.wx-projekti-page .spec-filter .chip { flex: 0 0 auto; white-space: nowrap; }
.wx-projekti-page .spec-table thead[hidden],
.wx-projekti-page .spec-table tbody[hidden] { display: none; }

@media (max-width: 900px) {
  .wx-projekti-page .pm__box { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .wx-projekti-page .pm__left { overflow-y: visible; }
  .wx-projekti-page .pm__right { order: -1; }
  .wx-projekti-page .pm__main { height: 280px; }
  .wx-projekti-page .spec-table { font-size: var(--fs-small); }
  .wx-projekti-page .spec-table th, .wx-projekti-page .spec-table td { padding: 7px 9px; }
  .wx-projekti-page .spec-table-hint {
    display: block; text-align: center; font-size: var(--fs-caption); color: #a89c8a;
    margin: 6px 0 0; letter-spacing: .02em;
  }
}

/* ============================================================
   Dedzināti dēļi: premium dark product page
   ============================================================ */
.wx-projekti-page .dark { background: var(--wx-char); color: #D9CFC2; }
.wx-projekti-page .dark h1, .wx-projekti-page .dark h2, .wx-projekti-page .dark h3 { color: #F3EBDD; }

.wx-projekti-page .hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: flex-end;
  background:
    linear-gradient(to top, rgba(23, 20, 18, 1) 4%, rgba(23, 20, 18, .35) 55%, rgba(23, 20, 18, .55)),
    url('/wp-content/uploads/2025/04/shou-sugi-ban-dedzinati-deli-1024x771.webp') center / cover no-repeat;
}
.wx-projekti-page .hero__inner {
  max-width: var(--wx-container); margin: 0 auto; width: 100%;
  padding: 120px 24px 84px;
}
/* Compact hero: Produkti/Projekti listing pages - same look, ~half the
   height, title+description only (no eyebrow/CTAs). */
.wx-projekti-page .hero.hero--compact { min-height: 44vh; align-items: center; }
.wx-projekti-page .hero.hero--compact .hero__inner { padding: 64px 24px; }
.wx-projekti-page .hero.hero--compact .hero__inner p { margin-bottom: 0; }
@media (max-width: 560px) {
  .wx-projekti-page .hero.hero--compact { min-height: 38vh; aspect-ratio: auto; }
  /* Same gutter-consistency fix as the plain .hero__inner rule above
     (20px -> 24px), just for the --compact variant, which is MORE
     specific (two classes) and so was still winning here even after
     that edit - missed on the first pass, caught by re-measuring
     produkti specifically (the only current --compact user) after
     deploying, not by assuming the first edit was sufficient. */
  .wx-projekti-page .hero.hero--compact .hero__inner { padding: 32px 24px; }
}
.wx-projekti-page .hero .eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  letter-spacing: .34em; color: var(--wx-accent);
  margin-bottom: 22px;
}
.wx-projekti-page .hero .eyebrow .seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 7px;
  background: #8E2B22; color: #F3EBDD;
  font-size: 19px; letter-spacing: 0; font-weight: 500;
}
.wx-projekti-page .hero h1 {
  font-size: var(--fs-h1);
  font-weight: 600; letter-spacing: var(--ls-heading); line-height: 1.08;
  max-width: 800px;
}
.wx-projekti-page .hero h1 em { font-style: normal; color: var(--wx-accent); }
.wx-projekti-page .hero p {
  max-width: 560px; margin: 26px 0 36px;
  font-size: var(--fs-body); color: #C9BDAE;
}
.wx-projekti-page .hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

.wx-projekti-page .bene { border-top: 1px solid #2E2822; border-bottom: 1px solid #2E2822; background: var(--wx-char-2); }
.wx-projekti-page .bene__inner {
  max-width: var(--wx-container); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.wx-projekti-page .bene__item { padding: 34px 26px; border-left: 1px solid #2E2822; }
.wx-projekti-page .bene__item:first-child { border-left: none; }
.wx-projekti-page .bene__item strong {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-body); color: #F3EBDD; margin-bottom: 6px;
}
.wx-projekti-page .bene__item span { font-size: var(--fs-body); color: #fff; }
.wx-projekti-page .dark .bene { background: #171310; }

.wx-projekti-page .story { padding: 96px 0; }
.wx-projekti-page .story__grid {
  max-width: var(--wx-container); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center;
}
.wx-projekti-page .story__img {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
}
.wx-projekti-page .story__img img { width: 100%; height: 520px; object-fit: cover; }
.wx-projekti-page .story h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.wx-projekti-page .story p { color: #B4A794; margin-bottom: 16px; }
.wx-projekti-page .steps { margin-top: 36px; display: grid; gap: 0; }
.wx-projekti-page .step {
  display: flex; gap: 22px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid #2E2822;
}
.wx-projekti-page .step__n {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-caption);
  color: var(--wx-accent); letter-spacing: .1em; min-width: 34px;
}
.wx-projekti-page .step strong { font-family: var(--font-head); color: #F3EBDD; font-size: var(--fs-body); }
.wx-projekti-page .step p { font-size: var(--fs-body); margin: 4px 0 0; color: #A2937F; }

.wx-projekti-page .uses { padding: 20px 0 96px; }
.wx-projekti-page .uses__head { max-width: var(--wx-container); margin: 0 auto 34px; padding: 0 24px; }
.wx-projekti-page .uses__head h2 { font-size: var(--fs-h2); }
.wx-projekti-page .uses__grid {
  max-width: var(--wx-container); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.wx-projekti-page .use {
  position: relative; height: 320px; border-radius: 10px; overflow: hidden;
}
.wx-projekti-page .use img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; filter: saturate(.85); }
.wx-projekti-page .use:hover img { transform: scale(1.06); }
.wx-projekti-page .use::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 11, 9, .85) 10%, transparent 55%);
}
.wx-projekti-page .use h3 {
  position: absolute; bottom: 18px; left: 20px; z-index: 2;
  color: #F3EBDD; font-size: var(--fs-body); font-weight: 600; letter-spacing: .02em;
}

.wx-projekti-page .palette-sec { padding: 90px 0 100px; background: var(--wx-char-2); border-top: 1px solid #2E2822; }
.wx-projekti-page .palette-sec .head {
  max-width: var(--wx-container); margin: 0 auto 14px; padding: 0 24px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.wx-projekti-page .palette-sec h2 { font-size: var(--fs-h2); }
.wx-projekti-page .palette-sec .head p { max-width: 520px; color: #A2937F; font-size: var(--fs-body); margin-top: 12px; }

.wx-projekti-page .seg {
  display: inline-flex; border: 1px solid #4A4136; border-radius: 100px; padding: 4px;
  background: rgba(0,0,0,.25);
}
.wx-projekti-page .seg button {
  font-family: var(--font-head); font-size: var(--fs-body); font-weight: 600; letter-spacing: .05em; /* etepek button spec: 16px */
  padding: 10px 26px; border-radius: 100px; border: none; cursor: pointer;
  background: transparent; color: #A2937F;
  transition: all .25s ease;
}
.wx-projekti-page .seg button.on { background: var(--wx-accent); color: #2E1F14; }

.wx-projekti-page .palette {
  max-width: var(--wx-container); margin: 40px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px;
}
.wx-projekti-page .sw { text-align: center; }
.wx-projekti-page .sw__chip {
  --c: var(--cb);
  --img: var(--imgb);
  position: relative;
  height: 130px; border-radius: 9px; overflow: hidden;
  cursor: pointer;
  background-color: var(--c);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.35);
  transition: transform .25s ease;
}
.wx-projekti-page .sw__chip::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 60% at 30% 15%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(120% 50% at 75% 90%, rgba(0,0,0,.22), transparent 60%);
}
.wx-projekti-page .sw:hover .sw__chip { transform: translateY(-4px); }
.wx-projekti-page .palette.light .sw__chip { --c: var(--cl); --img: var(--imgl); }
.wx-projekti-page .sw__name {
  display: block; margin-top: 11px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-caption); color: #E8DECD;
}
.wx-projekti-page .sw__var { font-size: var(--fs-caption); color: #8F816D; letter-spacing: .05em; }
.wx-projekti-page .palette-note {
  max-width: var(--wx-container); margin: 34px auto 0; padding: 0 24px;
  font-size: var(--fs-caption); color: #8F816D;
}

.wx-projekti-page .tail { background: var(--wx-white); padding-top: 10px; color: var(--wx-text); }
.wx-projekti-page .tail h2 { color: var(--wx-primary); }
.wx-projekti-page .tail .wx-cenas__text p { color: #4b4441; }

@media (max-width: 1100px) {
  .wx-projekti-page .palette { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
  .wx-projekti-page .bene__inner { grid-template-columns: 1fr 1fr; }
  .wx-projekti-page .bene__item { border-left: none; border-top: 1px solid #2E2822; }
  .wx-projekti-page .story__grid { grid-template-columns: 1fr; gap: 40px; }
  .wx-projekti-page .story__img img { height: 340px; }
  .wx-projekti-page .uses__grid { grid-template-columns: 1fr 1fr; }
  .wx-projekti-page .use { height: 240px; }
  .wx-projekti-page .palette { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .wx-projekti-page .hero { min-height: 0; aspect-ratio: 1 / 1; }
  /* Horizontal padding only: was 20px, the one section on this page
     that didn't match its own siblings' mobile gutter (story/uses/specs
     are all a flat 24px via .container's shared padding:0 24px pattern -
     found while auditing spacing consistency across the site, only the
     hero diverged). Vertical (32/28) untouched, not part of that finding.
     This rule also reaches Produkti's hero, which shares this exact
     component (its raw-HTML hero widget wraps its own markup in
     .wx-projekti-page specifically so it can reuse this shared CSS -
     confirmed via the live DOM ancestor chain, not a guess). */
  .wx-projekti-page .hero__inner { padding: 32px 24px 28px; }
  .wx-projekti-page .palette { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wx-projekti-page .uses__grid { grid-template-columns: 1fr; }
  .wx-projekti-page .bene__item { padding: 20px 18px; }
  .wx-projekti-page .bene__item strong { margin-bottom: 0; }
  .wx-projekti-page .bene__item span { display: none; }
}

/* ============================================================
   Krāsoti apdares dēļi: category product page
   ============================================================ */
.wx-projekti-page .cathero {
  max-width: 1360px; margin: 0 auto; padding: 64px 28px 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.wx-projekti-page .cathero__img { border-radius: var(--wx-radius); overflow: hidden; box-shadow: var(--wx-shadow-soft); }
.wx-projekti-page .cathero__img img { width: 100%; height: 430px; object-fit: cover; }
.wx-projekti-page .cathero h1 { font-size: var(--fs-h1); margin-bottom: 20px; }
.wx-projekti-page .cathero p { color: #4b4441; margin-bottom: 14px; }
.wx-projekti-page .cathero .btn { margin-top: 14px; }

.wx-projekti-page .chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.wx-projekti-page .chipc {
  height: 160px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
  position: relative; overflow: hidden;
}
.wx-projekti-page .chipc::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.22) 40%, transparent 65%);
  pointer-events: none;
}
.wx-projekti-page .chipc::after {
  content: attr(data-l);
  position: absolute; left: 8px; bottom: 6px; z-index: 1;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Light counterpart of .dark: same hero/bene/story/palette-sec structure,
   recolored. Scoped under .wx-light so .dark (Dedzināti) is untouched. */
.wx-projekti-page .wx-light { background: var(--wx-white); color: var(--wx-text); }
.wx-projekti-page .wx-light .hero h1,
.wx-projekti-page .wx-light .hero h1 em {
  color: #E7E4DF; /* white, slightly greyed down rather than stark #fff */
  /* max-width intentionally NOT overridden here anymore - it was widened to
     1000px (base .hero h1 is 800px) purely to stop old, longer copy from
     wrapping to a 3rd line. Copy is now short enough for the shared 800px
     box; keeping one shared value is the actual fix, not a wider box. */
}
.wx-projekti-page .wx-light .hero p {
  /* was a dark tone that relied on the hero's old cream overlay for
     contrast; with the overlay removed it sits straight on the photo,
     so it needs to be light like the heading instead */
  color: #D9D5CE;
  margin-bottom: 52px; /* shared rule's 36px + 16px more room before the CTA buttons */
}
.wx-projekti-page .wx-light .hero__inner {
  /* extra bottom padding pushes the flex-end-aligned content up ~40px so
     the paragraph's last line lands on the photo's brown band instead of
     spilling onto the white band below it; scoped to this page only, the
     dark Dedzināti hero's own image doesn't have this problem */
  padding-bottom: 124px;
}
@media (max-width: 560px) {
  .wx-projekti-page .wx-light .hero__inner { padding-bottom: 28px; }
}

.wx-projekti-page .wx-light .bene { background: var(--wx-cream); border-top-color: #E4DAC6; border-bottom-color: #E4DAC6; }
.wx-projekti-page .wx-light .bene__item { border-left-color: #E4DAC6; }
.wx-projekti-page .wx-light .bene__item strong { color: var(--wx-primary); }
.wx-projekti-page .wx-light .bene__item span { color: #6b6259; }

.wx-projekti-page .wx-light .story__img { box-shadow: var(--wx-shadow-soft); }
.wx-projekti-page .wx-light .story p { color: #4b4441; }
.wx-projekti-page .wx-light .step { border-top-color: #E4DAC6; }
.wx-projekti-page .wx-light .step__n { color: var(--wx-primary); }
.wx-projekti-page .wx-light .step strong { color: var(--wx-primary); }
.wx-projekti-page .wx-light .step p { color: #6b6259; }

.wx-projekti-page .wx-light .palette-sec { background: var(--wx-cream-soft); border-top-color: #E4DAC6; }
.wx-projekti-page .wx-light .palette-sec .head p { color: #6b6259; }

@media (max-width: 900px) {
  .wx-projekti-page .cathero { grid-template-columns: 1fr; gap: 34px; padding-top: 40px; }
  .wx-projekti-page .cathero__img img { height: 280px; }
  .wx-projekti-page .chips { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .wx-projekti-page .chips { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Story process: hover-swap the shared preview image
   (works on both the dark Dedzināti and light Krāsoti pages)
   ============================================================ */
.wx-projekti-page .story__img img { transition: opacity .2s ease, transform .5s ease; }
.wx-projekti-page .story__img img.is-changing { opacity: .25; transform: scale(1.02); }
.wx-projekti-page .story .step { cursor: pointer; padding-left: 14px; padding-right: 14px; border-radius: 9px; transition: background .18s ease; outline: none; }
.wx-projekti-page .dark .story .step.is-active { background: rgba(207,185,142,.09); }
.wx-projekti-page .wx-light .story .step.is-active { background: var(--wx-cream); }

/* ============================================================
   Video peek carousel (structogram-style), both product pages.
   --wx-video-bg drives the section background AND the edge fades,
   so one override under .dark themes the whole thing.
   ============================================================ */
.wx-projekti-page .wx-video { --wx-video-bg: var(--wx-cream-soft); background: var(--wx-video-bg); padding: 90px 0; }
.wx-projekti-page .dark .wx-video { --wx-video-bg: var(--wx-char-2); border-top: 1px solid #2E2822; }

.wx-projekti-page .wx-video__head { max-width: var(--wx-container); margin: 0 auto; padding: 0 24px; }
.wx-projekti-page .wx-video__head h2 { font-size: var(--fs-h2); }
.wx-projekti-page .wx-video__lead { max-width: 620px; margin-top: 12px; color: #857b6d; }
.wx-projekti-page .dark .wx-video__lead { color: #A2937F; }

.wx-projekti-page .wx-video__layout {
  max-width: var(--wx-container); margin: 36px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: stretch;
}

.wx-projekti-page .wx-video__stage { position: relative; overflow: hidden; height: 520px; }
.wx-projekti-page .wx-video__reel { display: flex; align-items: center; justify-content: center; gap: 16px; height: 100%; }
.wx-projekti-page .wx-video__tile {
  position: relative; overflow: hidden; background: #111; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; transition: opacity .25s ease;
}
.wx-projekti-page .wx-video__tile--main { flex: 0 0 300px; height: 520px; }
.wx-projekti-page .wx-video__tile--side { flex: 0 0 230px; height: 415px; }
.wx-projekti-page .wx-video__tile.is-changing { opacity: .3; }
.wx-projekti-page .wx-video__tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.wx-projekti-page .wx-video__fade { position: absolute; top: 0; bottom: 0; width: 160px; pointer-events: none; z-index: 3; }
.wx-projekti-page .wx-video__fade--left { left: 0; background: linear-gradient(to right, var(--wx-video-bg) 28%, transparent); }
.wx-projekti-page .wx-video__fade--right { right: 0; background: linear-gradient(to left, var(--wx-video-bg) 28%, transparent); }

.wx-projekti-page .wx-video__play {
  position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, opacity .2s ease;
}
.wx-projekti-page .wx-video__play::after {
  content: ''; border-left: 18px solid var(--wx-primary);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px;
}
.wx-projekti-page .wx-video__tile:hover .wx-video__play { transform: scale(1.1); }
.wx-projekti-page .wx-video__tile.is-playing .wx-video__play { opacity: 0; pointer-events: none; }
.wx-projekti-page .wx-video__tile.is-playing:hover .wx-video__play { opacity: 1; pointer-events: auto; }
.wx-projekti-page .wx-video__tile.is-playing .wx-video__play::after {
  border: 0; width: 14px; height: 14px; margin-left: 0;
  background: linear-gradient(to right, var(--wx-primary) 0 5px, transparent 5px 9px, var(--wx-primary) 9px 14px);
}

.wx-projekti-page .wx-video__text { display: flex; flex-direction: column; justify-content: center; }
.wx-projekti-page .wx-video__counter {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--wx-accent-hover); margin-bottom: 16px;
}
.wx-projekti-page .wx-video__icon {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wx-accent); color: var(--wx-primary);
}
.wx-projekti-page .wx-video__title { font-size: var(--fs-h4); margin: 0 0 12px; transition: opacity .22s ease, transform .22s ease; }
.wx-projekti-page .wx-video__title.is-changing { opacity: 0; transform: translateY(8px); }
.wx-projekti-page .wx-video__desc { margin: 0; color: #857b6d; transition: opacity .22s ease, transform .22s ease; }
.wx-projekti-page .dark .wx-video__desc { color: #B4A794; }
.wx-projekti-page .wx-video__desc.is-changing { opacity: 0; transform: translateY(8px); }

.wx-projekti-page .wx-video__nav { display: flex; gap: 12px; margin-top: 28px; }
.wx-projekti-page .wx-video__btn {
  appearance: none; -webkit-appearance: none;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; background: transparent; outline: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wx-projekti-page .wx-video__btn svg { display: block; }
.wx-projekti-page .dark .wx-video__btn { border: 1.5px solid #4A4136; color: #D9CFC2; }
.wx-projekti-page .wx-light .wx-video__btn { border: 1.5px solid #D8CBB2; color: var(--wx-primary); }
.wx-projekti-page .wx-video__btn:hover,
.wx-projekti-page .wx-video__btn:focus-visible,
.wx-projekti-page .wx-video__btn:active { background: var(--wx-accent); color: var(--wx-primary); border-color: var(--wx-accent); }

@media (max-width: 900px) {
  .wx-projekti-page .wx-video__layout { grid-template-columns: 1fr; gap: 22px; }
  .wx-projekti-page .wx-video__text { order: 2; }
  .wx-projekti-page .wx-video__stage { order: 1; height: auto; margin: 0 -24px; }
  .wx-projekti-page .wx-video__reel { height: auto; }
  .wx-projekti-page .wx-video__tile--main { flex: 0 0 70%; aspect-ratio: 9 / 16; height: auto; }
  .wx-projekti-page .wx-video__tile--side { flex: 0 0 54%; aspect-ratio: 9 / 16; height: auto; }
  .wx-projekti-page .wx-video__fade { width: 44px; }
}

/* ============================================================
   Profiles: searchable card grid + enlarge-on-click modal
   ([woodexpress_profiles] shortcode, light theme)
   ============================================================ */
.wx-projekti-page .wx-profiles { max-width: var(--wx-container); margin: 0 auto; padding: 20px 24px 40px; }
.wx-projekti-page .wx-profiles__head h2 { font-size: var(--fs-h2); margin-bottom: 10px; }
.wx-projekti-page .wx-profiles__head p { max-width: 620px; color: #4b4441; margin-bottom: 22px; }

.wx-projekti-page .wx-profiles__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  overflow: hidden;
}
.wx-projekti-page .wx-profiles__toggle {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 11px 24px; border-radius: 100px;
  border: 1.5px solid #D8CBB2; background: transparent;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; color: var(--wx-primary); /* etepek button spec: 16px */
  cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.wx-projekti-page .wx-profiles__toggle:hover,
.wx-projekti-page .wx-profiles__toggle:focus-visible { border-color: var(--wx-primary); background: var(--wx-primary); color: #fff; }
.wx-projekti-page .wx-profiles__toggle svg { transition: transform .25s ease; }
.wx-projekti-page .wx-profiles__toggle.is-open svg { transform: rotate(180deg); }
.wx-projekti-page .wx-pf-card {
  appearance: none; -webkit-appearance: none;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 16px 16px; cursor: pointer; text-align: center; outline: none;
  background: var(--wx-white); border: 1px solid #E4DAC6; border-radius: 12px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wx-projekti-page .wx-pf-card:hover,
.wx-projekti-page .wx-pf-card:focus,
.wx-projekti-page .wx-pf-card:active {
  background: var(--wx-cream-soft); border-color: var(--wx-accent); box-shadow: var(--wx-shadow-soft); transform: translateY(-3px);
}
.wx-projekti-page .wx-pf-card__draw { width: 100%; height: 84px; display: flex; align-items: center; justify-content: center; }
.wx-projekti-page .wx-pf-card__draw img { max-width: 100%; max-height: 100%; }
.wx-projekti-page .wx-pf-card__code {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-caption);
  letter-spacing: .04em; color: var(--wx-primary);
}
.wx-projekti-page .wx-profiles__empty { color: #857b6d; padding: 20px 0; }

.wx-projekti-page .wx-pf-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; }
.wx-projekti-page .wx-pf-modal.is-open { display: flex; }
.wx-projekti-page .wx-pf-modal__overlay { position: absolute; inset: 0; background: rgba(23, 16, 12, .74); }
.wx-projekti-page .wx-pf-modal__box {
  position: relative; background: var(--wx-white); border-radius: 14px;
  max-width: 680px; width: 100%; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 1fr;
}
.wx-projekti-page .wx-pf-modal__draw { background: var(--wx-cream-soft); padding: 40px; display: flex; align-items: center; justify-content: center; }
.wx-projekti-page .wx-pf-modal__draw img { max-width: 100%; max-height: 300px; }
.wx-projekti-page .wx-pf-modal__meta { padding: 34px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.wx-projekti-page .wx-pf-modal__meta h3 { font-family: var(--font-head); font-size: var(--fs-h4); color: var(--wx-primary); margin-bottom: 10px; letter-spacing: .03em; }
.wx-projekti-page .wx-pf-modal__meta p { font-size: var(--fs-body); color: #4b4441; margin-bottom: 20px; }
.wx-projekti-page .wx-pf-modal__close {
  position: absolute; top: 12px; right: 16px; z-index: 2;
  appearance: none; -webkit-appearance: none;
  background: none; border: none; border-radius: 50%;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; color: var(--wx-primary); cursor: pointer;
  transition: background .18s ease;
}
.wx-projekti-page .wx-pf-modal__close:hover,
.wx-projekti-page .wx-pf-modal__close:focus-visible,
.wx-projekti-page .wx-pf-modal__close:active {
  background: var(--wx-cream-soft);
}

@media (max-width: 900px) {
  .wx-projekti-page .wx-profiles__grid { grid-template-columns: repeat(3, 1fr); }
  .wx-projekti-page .wx-pf-modal__box { grid-template-columns: 1fr; max-width: 420px; }
  .wx-projekti-page .wx-pf-modal__draw { padding: 30px; }
  .wx-projekti-page .wx-pf-modal__meta { padding: 24px; }
}
@media (max-width: 560px) {
  .wx-projekti-page .wx-profiles__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Site-wide chrome: sticky/hide-on-scroll header + a header nav-menu fix.
   NOT scoped under .wx-projekti-page (loads on every page via
   inc/page-templates.php).
   The header used to be `position: sticky` with a shrink-on-scroll
   effect; both were pulled per the client's explicit call after
   repeated flicker bugs at the shrink size threshold. This is a
   deliberately different mechanism (see wx-projekti-shared.js):
   fixed position, no size change, just a translateY show/hide keyed
   off scroll direction — nothing to flicker at a threshold boundary.

   Also site-wide: no paragraph text should end with a 1-2 word orphan
   on its own line. This is a secondary/defensive layer only — the
   actual fix is `wx_widow_fix()` (inc/product-pages.php), which joins
   the last two words of every paragraph with a non-breaking space at
   render time (or for CPT-driven content, wxWidowFix() in JS at
   display time). That works in every browser at any width. This CSS
   rule just adds Chromium's native version on top; harmless where the
   real fix already applies, and free coverage for the (in practice,
   none known) spots it doesn't yet reach.
   ============================================================ */
p, .bene__item span {
  text-wrap: pretty;
}
body {
  padding-top: var(--wx-header-h, 0px);
}
#masthead {
  /* !important: Header Footer Elementor ships `.ehf-header #masthead {
     position: relative }`, which outranks a plain #masthead selector on
     specificity (ID+class beats ID alone) no matter the load order. */
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 16, 12, .08);
  transition: transform .3s ease;
  will-change: transform;
}
#masthead.wx-header--hidden {
  transform: translateY(-100%);
}

/* Desktop nav menu (Sākums/Produkti/Projekti/Kontakti) occasionally wraps
   onto two lines. Root cause: Elementor/HFE sizes the nav <ul> to its own
   content's natural width (currently ~387px) rather than the ~610px its
   column actually has free, centering that narrow box — so it's a "just
   barely fits" layout with no real margin, and the <ul> itself still has
   `flex-wrap: wrap`. Any small rendering variance (font load timing, page
   zoom, browser differences) tips it over into wrapping even though
   there's ~220px of unused space sitting right next to it. Forcing
   `nowrap` is safe specifically because that spare room already exists;
   this isn't shrinking anything else to make space. */
@media (min-width: 1025px) {
  #masthead .hfe-nav-menu-layout,
  #masthead ul.hfe-nav-menu {
    flex-wrap: nowrap !important;
  }
}

/* ============================================================
   Krāsoti-noliktava colour swatches + lightbox.
   ============================================================ */
.wx-projekti-page .wx-swatch-cell { text-align: center; width: 64px; }
.wx-projekti-page .wx-swatch-cell--empty { color: #b9b0a4; }
.wx-projekti-page .wx-swatch {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.wx-projekti-page .wx-swatch img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(82, 47, 32, .18);
  box-shadow: 0 2px 6px rgba(23, 16, 12, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wx-projekti-page .wx-swatch:hover img,
.wx-projekti-page .wx-swatch:focus-visible img {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(23, 16, 12, .22);
}

.wx-swatch-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(23, 16, 12, .78);
  padding: 24px;
}
.wx-swatch-lightbox.is-open { display: flex; }
.wx-swatch-lightbox__box {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.wx-swatch-lightbox__img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  background: #f1ecdf;
}
.wx-swatch-lightbox__cap {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #522F20;
  text-align: center;
  padding: 16px 20px;
  font-size: var(--fs-body);
}
.wx-swatch-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #522F20;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* Copy-company-details button (contact block on Sākums / Produkti / Kontakti).
   ponytail: scoped under .wxh2 because those pages ship an inline
   `.wxh2 button { font:inherit; }` reset that would otherwise out-specify this. */
.wxh2 .wx-copy-details {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(82, 47, 32, .22);
  border-radius: 999px;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-body); /* etepek button spec: 16px */
  font-weight: 600;
  line-height: 1;
  color: #522F20;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* ponytail: Elementor's global kit ships `.elementor-kit-6 button:hover{color:#FFFFFF}`
   at higher specificity (0,2,1) than this rule was (0,2,0) - it silently won the
   `color` property even though this rule visually "looked like" it owned hover,
   giving white text on the light #F1ECDF hover background. Redeclaring color here
   brings this rule to (0,3,0), which wins. */
.wxh2 .wx-copy-details:hover { background: #F1ECDF; border-color: #CFB98E; color: #522F20; }
.wxh2 .wx-copy-details.is-copied { background: #522F20; border-color: #522F20; color: #F1ECDF; }
.wxh2 .wx-copy-details svg { flex: 0 0 auto; }

/* Launch: Projekti listing page is Draft until the client has real projects
   to show (see woodexpress-production-status memory, 2026-08-12). Homepage's
   "Realizētie projekti" section is hardcoded fake content that links there,
   so it's hidden too rather than shipping fake projects with dead links.
   Remove this rule once real projects exist and Projekti is republished. */
.home #projekti { display: none; }

/* Contact form success modal (site-wide, printed via wp_footer in
   inc/contact-form.php). Pattern from claude_work/structogram 2's
   success-overlay/success-modal, restyled with this site's own tokens. */
.wx-success-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(23, 20, 18, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wx-success-overlay.show { display: flex; animation: wxBackdropIn .3s ease forwards; }
.wx-success-overlay.closing { animation: wxBackdropOut .2s ease forwards; }
.wx-success-modal {
  position: relative;
  background: var(--wx-white);
  border: 1px solid rgba(82, 47, 32, .16);
  border-radius: 20px;
  padding: 44px 40px 40px;
  width: min(420px, 90vw);
  text-align: center;
  box-shadow: 0 32px 80px rgba(23, 20, 18, .25);
  animation: wxScaleIn .28s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.wx-success-overlay.closing .wx-success-modal { animation: wxScaleOut .18s ease forwards; }
.wx-success-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 1.1rem;
  line-height: 1;
  color: #8a7f70;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.wx-success-modal__close:hover { color: var(--wx-primary); background: rgba(82, 47, 32, .06); }
.wx-success-modal__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wx-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--wx-primary);
}
.wx-success-modal__icon svg { width: 26px; height: 26px; }
.wx-success-modal__title {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--wx-primary);
  margin: 0 0 10px;
  letter-spacing: var(--ls-heading);
}
.wx-success-modal__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--wx-secondary);
  line-height: 1.6;
  margin: 0;
}
body.wx-modal-open { overflow: hidden; }

@keyframes wxBackdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wxBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes wxScaleIn  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes wxScaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.85); } }

/* Persistent success note under the (restored, still-visible) contact
   form after a successful submit - see wx-tracking.js. */
.wx-form-success-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--wx-cream);
  border: 1px solid rgba(82, 47, 32, .16);
  border-radius: 9px;
  color: var(--wx-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ============================================================
   Site header cleanup (Header Footer Elementor template, post 16):
   phone numbers in one row with a divider, filled Facebook icon,
   plain-text language switcher (no flags) with a dropdown chevron.
   Targets Elementor's own per-widget .elementor-element-{id} classes
   rather than the template's stored data, so this survives any
   future header edits made in the Elementor editor.
   ============================================================ */
.elementor-element.elementor-element-9d40392 .elementor-icon-list-item { margin: 0 !important; }

/* [wx_language_switcher] shortcode output (inc/language-switcher.php) -
   replaced GTranslate's [gtranslate] shortcode and its .gtranslate_wrapper
   markup these rules originally targeted; renamed to match. */
.elementor-element-598c7dd .wx-lang-switcher {
  display: flex !important; white-space: nowrap; flex-shrink: 0;
}
.elementor-element-598c7dd .wx-lang-switcher__link {
  margin: 0;
  /* Was Montserrat/500, matching the nav menu - but the switcher sits in
     the phone-numbers row, not the nav row, so next to actual phone
     numbers (DM Sans/400) it read as a jarring, bolder, different font.
     Matched to the phone numbers themselves for a consistent row instead
     of the (visually distant) nav menu it happened to also match. */
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #222020;
}
.elementor-element-598c7dd .wx-lang-switcher__link + .wx-lang-switcher__link {
  margin-left: 8px; padding-left: 8px; border-left: 1px solid #d8cdb8;
}

/* Elementor's own kit breakpoints (checked directly: viewport_md=768,
   viewport_lg=1025) split "tablet" and "laptop" differently from the
   767px cutoff used below. Two approaches were tried and both failed at
   real in-between window widths (roughly 1000-1200px, where this
   header's total content is wider than the viewport but not dramatically
   so): a fixed 34%/41% split on the nav/contact containers let the
   language switcher wrap onto two lines; letting the nav menu shrink
   below its natural content width (min-width:0) stopped that, but the
   menu doesn't wrap or clip when squeezed - it just overflows its own
   box, so the nav text visually overlapped the phone numbers instead.
   Fix: nothing shrinks below its content size (flex-shrink:0 on all
   three top-level pieces), and the row is forced to wrap - so if
   everything genuinely doesn't fit, the contact/language cluster drops
   to its own full row (right-aligned, same as the real mobile layout
   below) instead of anything overlapping or wrapping internally. Just
   not forcing nowrap is NOT enough - Elementor's own baseline for this
   container is nowrap outside its "tablet" breakpoint range, so without
   an explicit wrap here the overflowing cluster silently rendered
   off-screen to the right (invisible without scrolling) instead of
   wrapping - caught by checking actual element positions against the
   viewport, not document.body.scrollWidth, which did not flag it. */
@media (min-width: 768px) {
  .elementor-element.elementor-element-ee6017c { flex-wrap: wrap !important; }
  /* width:auto (not a fixed value) was tried here first and blew the
     logo up to its raw source-image pixel size - the site-logo widget
     sizes itself as a percentage of ITS container, so an auto/shrink-to-
     fit container has nothing real to be a percentage of. A fixed pixel
     width avoids that degenerate case at every width in this range.
     180px (was 200px) - part of closing the 1025-1064px gap below where
     HFE's nav menu widget switches from its hamburger to the full Sākums/
     Produkti/Kontakti text (a widget-level "breakpoint: tablet" setting,
     not a CSS media query I can retarget) but the row didn't actually
     have room for that yet, wrapping to an ugly 2-line header. */
  .elementor-element.elementor-element-407def5 { flex: 0 0 180px !important; width: 180px !important; }
  .elementor-element.elementor-element-55542dd { flex: 0 0 auto !important; width: auto !important; }
  .elementor-element.elementor-element-dd5bb3f {
    flex: 0 0 auto !important; width: auto !important;
  }
  /* Even, responsive spacing: space-between on the 3 top-level groups
     (logo / nav / contact-cluster) splits whatever room is left into two
     equal gaps automatically - logo-to-nav and nav-to-cluster shrink
     together as the window narrows, instead of one margin:auto absorbing
     100% of the slack while the other gap sits at 0 (measured: at 1440px
     the old setup had a 405px gap next to nav sitting flush against the
     logo with zero space - not "uneven", actively broken evenness). */
  .elementor-element.elementor-element-ee6017c { justify-content: space-between !important; }
  /* Same 1025-1064px gap as the logo-width comment above: each nav item
     carried 15px of padding on both sides (90px total across the 3
     items) - part of the deficit that made the row overflow and wrap the
     moment the full text menu appeared. Trimmed to 10px/side; still
     comfortably spaced, barely perceptible at wider desktop widths where
     there was never a shortage of room. */
  .elementor-element.elementor-element-32556ba a.hfe-menu-item { padding-left: 10px !important; padding-right: 10px !important; }
  /* The contact cluster's own internal gap (phones / Facebook / language)
     was a rigid 40px from Elementor's own flex_gap setting, completely
     static regardless of viewport - clamp() makes it shrink smoothly
     alongside the outer gaps instead of being the only fixed-width thing
     left once everything else goes fluid. */
  .elementor-element.elementor-element-dd5bb3f { gap: clamp(20px, 3vw, 40px) !important; }
  .elementor-element.elementor-element-9d40392 .elementor-icon-list-items {
    display: flex !important; flex-direction: row !important; align-items: center; white-space: nowrap; flex-shrink: 0;
  }
  .elementor-element.elementor-element-9d40392 .elementor-icon-list-item + .elementor-icon-list-item {
    margin-left: 14px !important; padding-left: 14px; border-left: 1px solid #d8cdb8;
  }
}

/* Single-row tablet header, 768-1024px. HFE's nav-menu widget is ALREADY
   set to breakpoint:tablet in _elementor_data (confirmed on jauns: the
   widget carries class hfe-nav-menu__breakpoint-tablet, and at every width
   768-1024 the toggle renders display:block while the <ul class="hfe-nav-
   menu"> is already collapsed - computed height:0, visibility:hidden - so
   the hamburger-only behaviour is a DB setting, not something this CSS
   needs to create. No _elementor_data edit, so nothing to migrate to jauns.

   The bug is pure box-sizing: the collapsed <ul>, though invisible, keeps
   its intrinsic content width (three menu-item labels, ~264px) because
   visibility:hidden - unlike display:none - still participates in layout.
   The nav wrapper (elementor-element-55542dd) is column-direction, so it
   shrink-wraps to the WIDEST child, and the invisible ul is wider than the
   40px toggle - reserving 264px of dead space that starved the row of the
   room it needed to fit on one line below ~900px.

   Fix: pin the nav wrapper to the toggle's own width with an explicit
   flex-basis, instead of letting it shrink-wrap to the hidden ul (do NOT
   clip it - see the note on the rule itself). Combined with
   nowrap (overriding this file's own 768px+ wrap rule above, which is what
   let the contact cluster fall to its own row) and `order` for the visual
   sequence logo -> contact -> hamburger, matching desktop's single row. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-element-ee6017c {
    flex-wrap: nowrap !important;
    padding-left: 24px !important; padding-right: 24px !important;
  }
  .elementor-element.elementor-element-407def5 { order: 1 !important; }
  .elementor-element.elementor-element-dd5bb3f { order: 2 !important; }
  .elementor-element.elementor-element-55542dd {
    order: 3 !important;
    flex: 0 0 44px !important; width: 44px !important; min-width: 0 !important;
    /* NO overflow:hidden here. An earlier version of this rule clipped the
       wrapper, which also clipped the OPEN dropdown (the <ul> is a child of
       this element), so the hamburger appeared to do nothing when tapped.
       It is unnecessary anyway: `flex: 0 0 44px` + `width: 44px` already
       force the box to 44px, so the collapsed ul's intrinsic width cannot
       expand it. Verified: menu opens with all 3 items and there is no
       horizontal overflow either closed or open. */
  }
}

/* The header row's own stored Elementor setting is padding: 50px left /
   10px right (checked directly in _elementor_data) - a real, pre-existing
   asymmetry from before any of today's work, not something introduced
   here: logo comfortably inset, language switcher nearly flush against
   the edge. Scoped to min-width:1025px specifically (Elementor's own
   "viewport_lg" breakpoint, per the comment above on the 768px block) and
   NOT the full 768px+ range this file otherwise treats as one group -
   tried 768px+ first and it broke the already-fragile 768-1024px "tablet"
   layout above (the row wraps into its own 2-line arrangement there, see
   the max-width:767px block's own logic for the same pattern on mobile;
   forcing this padding into that range pushed the whole second row's
   content to cluster on the left with a large empty gap on the right,
   confirmed via screenshot before reverting that scope). Symmetric 50px
   on both sides, matching the left value that was already established
   rather than inventing a new number. */
@media (min-width: 1025px) {
  .elementor-element.elementor-element-ee6017c { padding-left: 50px !important; padding-right: 50px !important; }
}

/* Bigger logo + more breathing room between nav items, per explicit
   request. The threshold here is 1150px and that number is measured, not
   guessed - an earlier attempt used 1065px purely because the previous
   session's comments said there was "spare room" above the 1025-1064px
   danger band, and that shipped a real regression: the header wrapped
   onto 3 rows across 1066-1110px (LV) / 1066-1090px (EN), header height
   124px instead of 80px. Confirmed on fresh page loads, both languages,
   not just on resize.

   The actual budget, measured off the three top-level row children
   (logo 407def5 / nav wrapper 55542dd / contact cluster dd5bb3f):
     at 1064px: 180 + 288.4 + 444.2 = 912.6 vs 964 inner  -> 51.4px spare
   This change costs +25px on the logo (180->205) and +72px on the nav
   (12px extra padding x 3 items x 2 sides), so +97px total - nearly
   double the 51.4px that was actually free. It only stops overflowing
   once the viewport itself has grown ~46px more, i.e. ~1112px.
   1112px is NOT the right breakpoint though: at 1120px the row still has
   only 7px of slack, which is the same "just barely fits" condition that
   caused the original 1025-1064px bug in the first place - one font
   swap, longer menu label, or new translation would re-break it.
   1150px is chosen to leave a real margin instead: measured 38.6px spare
   there (205 + 360.4 + ~446 = 1011.4 vs 1050 inner). Verified by
   fresh-load sweep across 1020-1440px on both LV and EN.

   Below 1150px the header keeps the previously-shipped, already-working
   180px/10px values - so nothing regresses, the extra spacing simply
   appears once there is genuinely room for it. */
@media (min-width: 1150px) {
  .elementor-element.elementor-element-407def5 { flex: 0 0 205px !important; width: 205px !important; }
  .elementor-element.elementor-element-32556ba a.hfe-menu-item { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 767px) {
  /* The logo's own stored setting sizes it at 45% of its container
     (width_mobile:45%, an Elementor site-logo control) - fine at real
     phone widths (155px at 390px viewport), but that's a straight
     percentage with no ceiling, so it kept growing right up to 325px at
     767px wide - then snapped down to a fixed 180px the instant the
     768px desktop/tablet breakpoint took over. Capped here so it
     plateaus at roughly the same size the fixed desktop value starts at,
     turning that jarring ~145px jump at the boundary into a barely-
     noticeable one. */
  .elementor-element.elementor-element-407def5 { max-width: 190px !important; }
  /* Mobile header: logo + hamburger keep their existing row (reordering
     the hamburger before the logo was tried and reverted - it fights a
     flex_justify_content_mobile:center setting baked into this container
     that kept re-centering each piece onto its own row instead of sharing
     one, and every workaround attempted produced a new regression).
     Contact + language get their own full-width row, right-aligned, no
     flags. No margin/rounded-card treatment here - the header keeps its
     normal flush width and its own pre-existing bottom border, both of
     which broke (overflowed the viewport, clashed visually with rounded
     corners) when a floating card look was attempted. */
  .elementor-element.elementor-element-ee6017c { row-gap: 10px; }
  /* Phones left (aligned under the logo), Facebook + language grouped
     right (aligned under the hamburger) - not the whole cluster pinned
     right as one block, which is what made this row feel unbalanced (a
     big empty gap under the logo, everything crammed on the right).
     margin-left:auto on the Facebook icon - the first item of the
     "right-hand group" - pushes it and the language switcher after it to
     the right edge, while the phone list (the item before it) stays put
     at the left edge. Same auto-margin technique as the old desktop fix,
     just applied to one item instead of the whole container, since here
     the split is 1-item-left/2-items-right rather than a clean 50/50. */
  .elementor-element.elementor-element-dd5bb3f { width: 100% !important; flex: 0 0 100% !important; justify-content: flex-start !important; padding-right: 30px !important; padding-left: 40px !important; }
  .elementor-element.elementor-element-2f740647 { display: flex !important; margin-left: auto !important; }
  /* align-items was flex-end - a leftover from when this whole cluster was
     pinned to the right (see the auto-margin note above for how the phone
     numbers ended up as their own left-aligned row instead). flex-end
     right-aligned each row within the column, so the two numbers (whose
     icon+text widths differ by a few px) shared the same right edge
     instead of the same left one - the "ragged"/"scuffed" look. */
  .elementor-element.elementor-element-9d40392 .elementor-icon-list-items {
    display: flex !important; flex-direction: column !important; align-items: flex-start;
  }
  .elementor-element.elementor-element-9d40392 .elementor-icon-list-item + .elementor-icon-list-item {
    margin-left: 0 !important; padding-left: 0; border-left: none;
  }
  /* Was 13px - a leftover shrink that made the phone numbers the only
     header text NOT matching the hero paragraph's 16px, despite the
     language switcher already being 16px. Unifying to 16px everywhere
     (icon-list-text, wx-lang-switcher__link, hero paragraph) instead of
     picking a fourth new value. */
  .elementor-element.elementor-element-9d40392 .elementor-icon-list-text { font-size: 16px; }

  /* Logo (row 1, left) sits ~30px from the viewport edge (matches the
     hero paragraph's own 30px/30px gutter) - the hamburger (row 1,
     right) and the phone numbers / language switcher (row 2) didn't
     match that on either side. Hamburger: Header Footer Elementor's own
     generated CSS hardcodes `margin: 0 auto` on .hfe-nav-menu__toggle,
     centering it inside its 45%-wide container instead of pushing it to
     the container's right edge - overridden here rather than in the
     Elementor editor since it's HFE's own per-request-generated CSS, not
     stored widget data. Phone numbers / switcher: padding-left/right
     above and below, tuned against the actual rendered icon and link
     positions (not guessed) to land close to that same ~30px baseline. */
  .elementor-16 .elementor-element.elementor-element-32556ba .hfe-nav-menu__toggle,
  .elementor-973 .elementor-element.elementor-element-32556ba .hfe-nav-menu__toggle {
    margin: 0 10px 0 auto !important;
  }
}

/* ============================================================
   Produkti page: gap between the product grid and the contact
   section.

   Reported as "way too big - even bigger than the content has from
   the top of the page and the bottom of the page". Measured at 1440px
   and confirmed: the page's own vertical rhythm was
     top    (header bottom -> "Produkti" H1)          = 108px
     middle (last product card -> "Sazinieties" H2)   = 215px  <-
     bottom (contact content -> footer)               = 115px
   so the middle gap was ~2x the other two and the two sections read
   as disconnected rather than as one continuous page.

   Cause is two paddings stacking, neither of them individually
   unreasonable:
     - the products container's own bottom padding, 100px, set as an
       Elementor container setting (custom property
       `--padding-block-end` on element 413cc18, NOT a plain
       padding-bottom declaration - overriding it has to go through the
       same custom property or Elementor's own rule keeps winning), and
     - section.contact's top padding, the 8vw middle term of its
       clamp(62px,8vw,118px) = 115.2px at a 1440px viewport.
   100 + 115.2 = the 215px measured.

   Fix keeps each section's own internal spacing intact and just stops
   the doubling: drop the products container's bottom padding (the
   contact section already brings its own top padding, so the 100px was
   pure redundancy at this seam) and trim the contact section's top
   padding on this page.

   Scoping, deliberately asymmetric between the two rules:
     - 413cc18 is unique to the two Produkti pages (14 LV / 971 EN -
       verified by scanning every _elementor_data row, only those two
       and their revisions contain it), so it needs no extra scoping.
     - `.wxh2 .contact` is NOT unique - it is shared by 6 live pages
       (Sākums, Kontakti, Produkti and their EN twins). Only Produkti
       has the doubled-up seam, so the top-padding trim is scoped by
       page-id body class rather than changed globally, to avoid
       silently retightening the homepage and Kontakti layouts that
       were never reported as wrong.
   Bottom padding on .contact is left alone: that edge meets the
   footer, not another content section, so it is not part of this bug.

   Result at 1440px: ~79px, deliberately below both the 108px top and
   115px bottom, per the request that it should if anything be tighter
   than those. Scales down with the viewport via the clamp and floors
   at 44px so it never collapses on mobile. */
.elementor-element.elementor-element-413cc18 { --padding-block-end: 0px; }

body.page-id-14 .wxh2 .contact,
body.page-id-971 .wxh2 .contact { padding-top: clamp(44px, 5.5vw, 80px); }

/* ============================================================
   Sitewide spacing audit (2026-08-18): unify content max-width to
   1200px. Measured 5 different values in use across home/produkti/
   product pages before this - 1140px (this grid), 1200px (heroes,
   product-page sections - the most common, kept as the target),
   1320px (contact), 1440px (markets), and uncapped (home's product
   grid, fixed separately in the per-page raw HTML). Visually this
   made section content start at a different x position depending
   which section you scrolled past, worst at wide viewports (measured
   a 172px swing at 1920px between two adjacent home sections).

   413cc18 is Produkti's product-grid Elementor container - confirmed
   unique to the two Produkti pages (14 LV / 971 EN) by scanning every
   _elementor_data row, so no page-id scoping needed. Elementor sizes
   this container via its own --content-width custom property, not a
   plain max-width, so the override has to go through the same
   property or Elementor's generated rule keeps winning (same pattern
   as the --padding-block-end override above). */
.elementor-element.elementor-element-413cc18 { --content-width: min(100%, 1200px); }

/* ---------- Large-screen tier (min-width: 1920px) ----------
   Everything above stops growing somewhere between ~1150px and ~1450px,
   so 1200px and 3440px rendered identically: h1 flat at 56px, content
   column flat at 1200px, logo flat at 111px. Measured on fresh loads at
   1440/1600/1800/1920/2560/3440 before this block existed - identical
   at every one of those widths.

   This is ONE new tier, tuned to look right at 2560px and then holding
   flat above that (same "grow to a cap, then hold" shape the rest of
   this file uses). It is additive only: every declaration here lives
   inside min-width:1920px, so nothing below 1920px is touched - in
   particular the fragile 1025-1064px header band and the measured
   1150px logo/nav threshold above are completely untouched.

   Type steps ~1.29x off the flat-desktop values (56->72, 42->54,
   36->46, 24->30, 20->25). Body/small/caption were left unscaled at
   first; reviewed on 2560px screenshots 2026-08-20 and the user asked
   for body copy to grow too, so they now step 1.25x (16->20, 14->18,
   12->15) - the same factor already used for --fs-h4. */
@media (min-width: 1920px) {
  :root {
    --fs-caption: 15px;
    --fs-small:   18px;
    --fs-body:    20px;
    --fs-lead: 25px;
    --fs-h4:   30px;
    --fs-h3:   46px;
    --fs-h2:   54px;
    --fs-h1:   72px;
    /* 1200 -> 1600. Every .container / .hero__inner / .wx-profiles etc
       in this file reads this token, so the whole content column widens
       in one line. The page-local 1200px caps that do NOT read this
       token (home's 5, Produkti's 3) are bumped to the same 1600px
       inside those pages' own _elementor_data style blocks. */
    --wx-container: 1600px;
  }
  /* The h1's own measure cap has to grow with the h1, or a 72px
     headline just wraps onto an extra line inside the same 800px box
     and the "bigger heading" reads as "more cramped heading". Scaled by
     the same ~1.29x as --fs-h1 so the line count stays put. */
  .wx-projekti-page .hero h1 { max-width: 1030px; }

  /* Produkti's product-grid Elementor container caps itself through its
     own --content-width custom property (see the 1200px rule above), so
     bumping the inner .wxpg alone would do nothing - this outer
     container would still clamp it at 1200px. Both have to move. */
  .elementor-element.elementor-element-413cc18 { --content-width: min(100%, 1600px); }

  /* Header, damped on purpose: the content column grows ~1.33x here but
     a header growing that hard just eats vertical space. Logo container
     205px -> 250px (the site-logo widget renders the image at ~54% of
     its container, so 111px -> ~135px rendered - measured, not assumed),
     nav item padding 22px -> 28px per side.
     #masthead height is deliberately NOT pinned here: an earlier attempt
     to grow the logo while holding the header height fixed pushed the
     header's own bottom border up through the logo. Let the row grow. */
  .elementor-element.elementor-element-407def5 { flex: 0 0 250px !important; width: 250px !important; }
  .elementor-element.elementor-element-32556ba a.hfe-menu-item { padding-left: 28px !important; padding-right: 28px !important; }
}

/* SUPERSEDED 2026-08-26: the --width:100% force-wrap rule that used to live
   here (768-877px, forcing the contact bar onto its own full-width row) is
   removed. It directly conflicted with the new single-row tablet header
   built above (order-based logo -> contact -> hamburger on one line,
   768-1024px) - the client explicitly asked for one row across that whole
   range, not a wrapped contact bar. See the "Single-row tablet header"
   block earlier in this file for the replacement. */