/* ============================================================
   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;

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

.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: 17px;
  line-height: 1.7;
  -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;
}
.wx-projekti-page a { color: inherit; }

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

/* ---------- Buttons ---------- */
.wx-projekti-page .btn {
  appearance: none; -webkit-appearance: none;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  padding: 13px 30px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .15s ease;
}
.wx-projekti-page .btn--tan { background: var(--wx-accent); color: #2E1F14; }
.wx-projekti-page .btn--tan:hover { background: var(--wx-accent-hover); transform: translateY(-1px); }
.wx-projekti-page .btn--outline {
  background: transparent;
  color: var(--wx-accent);
  border: 1.5px solid var(--wx-accent);
}
.wx-projekti-page .btn--outline:hover { background: var(--wx-accent); color: #2E1F14; }
.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: #3E241A; color: #fff; }

/* ---------- Page hero ---------- */
.wx-projekti-page .wx-pagehead { text-align: center; padding: 64px 24px 22px; }
.wx-projekti-page .wx-pagehead h1 { font-size: clamp(34px, 4.6vw, 52px); }
.wx-projekti-page .wx-pagehead p { max-width: 640px; margin: 18px auto 0; color: #4b4441; }

/* ---------- 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: 28px; 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: 22px; color: var(--wx-primary);
  text-decoration: none; text-align: center;
}

/* ---------- Reveal on scroll ---------- */
.wx-projekti-page .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.wx-projekti-page .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wx-projekti-page .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: 15px; font-weight: 500;
  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);
}
.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: 18px; font-weight: 600; line-height: 1.35; }
.wx-projekti-page .tile__meta span { font-size: 14px; color: var(--wx-accent); letter-spacing: .03em; }
.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: 1060px; width: 100%; max-height: 90vh; overflow: hidden;
  display: grid; grid-template-columns: 1.12fr 1fr;
}
.wx-projekti-page .pm__left { padding: 30px 32px; overflow-y: auto; }
.wx-projekti-page .pm__cat {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wx-accent-hover); margin-bottom: 10px;
}
.wx-projekti-page .pm__left h2 { font-size: 24px; margin-bottom: 6px; }
.wx-projekti-page .pm__place { font-size: 15px; color: var(--wx-secondary); margin-bottom: 14px; }
.wx-projekti-page .pm__desc { font-size: 15.5px; line-height: 1.6; color: #4b4441; }
.wx-projekti-page .pm__materials { margin-top: 16px; font-size: 15px; }
.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: 290px; object-fit: cover; border-radius: 10px; }
.wx-projekti-page .pm__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wx-projekti-page .pm__thumbs img {
  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: 15px; 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: 14px;
  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: 12.5px;
  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: 12.5px; color: #857b6d; 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: clamp(26px, 3vw, 34px); 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; }
.wx-projekti-page .spec-table-wrap .spec-table { font-size: 15px; }
.wx-projekti-page .spec-table-wrap .spec-table th { font-size: 13px; padding: 12px 16px; }
.wx-projekti-page .spec-table-wrap .spec-table td { padding: 12px 16px; }
.wx-projekti-page .specs-note { font-size: 13px; color: #857b6d; margin-top: 12px; }

/* 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: 230px; }
  .wx-projekti-page .spec-table { font-size: 13px; }
  .wx-projekti-page .spec-table th, .wx-projekti-page .spec-table td { padding: 7px 9px; }
}

/* ============================================================
   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('https://woodexpress.lv/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;
}
.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: clamp(34px, 5vw, 64px);
  font-weight: 600; letter-spacing: -.01em; 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: 18.5px; 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: 17px; color: #F3EBDD; margin-bottom: 6px;
}
.wx-projekti-page .bene__item span { font-size: 15px; color: #A2937F; }

.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: clamp(30px, 3.6vw, 42px); 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: 15px;
  color: var(--wx-accent); letter-spacing: .1em; min-width: 34px;
}
.wx-projekti-page .step strong { font-family: var(--font-head); color: #F3EBDD; font-size: 17px; }
.wx-projekti-page .step p { font-size: 15px; 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: clamp(30px, 3.6vw, 42px); }
.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: 19px; 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: clamp(30px, 3.6vw, 42px); }
.wx-projekti-page .palette-sec .head p { max-width: 520px; color: #A2937F; font-size: 16px; 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: 14px; font-weight: 600; letter-spacing: .05em;
  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: 14px; color: #E8DECD;
}
.wx-projekti-page .sw__var { font-size: 12.5px; color: #8F816D; letter-spacing: .05em; }
.wx-projekti-page .palette-note {
  max-width: var(--wx-container); margin: 34px auto 0; padding: 0 24px;
  font-size: 14px; 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: 72vh; }
  .wx-projekti-page .palette { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wx-projekti-page .uses__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   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: clamp(30px, 3.8vw, 44px); 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: 10.5px; 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: 1000px; /* wide enough for each <br>-separated line to hold
    without an extra wrap at typical desktop widths, so the heading reads
    as two lines instead of three */
}
.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;
}

.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: clamp(30px, 3.6vw, 42px); }
.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: 13px; letter-spacing: .15em;
  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: clamp(22px, 2.4vw, 30px); 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: clamp(28px, 3.4vw, 40px); 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: 15px; font-weight: 500; color: var(--wx-primary);
  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: 13px;
  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: 24px; color: var(--wx-primary); margin-bottom: 10px; letter-spacing: .03em; }
.wx-projekti-page .wx-pf-modal__meta p { font-size: 15px; 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: back-to-top button + 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 — no
   JS/CSS override needed for that anymore.
   ============================================================ */

/* 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. */
#masthead .hfe-nav-menu-layout,
#masthead ul.hfe-nav-menu {
  flex-wrap: nowrap !important;
}

.wx-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  background: var(--wx-primary, #522F20);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(23, 16, 12, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.wx-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.wx-back-to-top:hover,
.wx-back-to-top:focus-visible {
  background: var(--wx-primary-dark, #3B2115);
}
@media (max-width: 560px) {
  .wx-back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}