/*
Theme Name: JINGWEI Modern
Theme URI: https://wiretyingmachine.com
Description: Modern industrial B2B theme for wire harness processing equipment. Navy & gold brand system, inquiry-driven, WooCommerce product catalog, fully responsive.
Author: JINGWEI TECH
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: jingwei-modern
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  --navy: #142B45;
  --navy-deep: #0D1E31;
  --navy-soft: #1E3D5F;
  --gold: #D4A84B;
  --gold-deep: #B8892F;
  --gold-soft: rgba(212, 168, 75, .14);
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --ink: #16222E;
  --muted: #5A6B7C;
  --line: #E2E8F0;
  --ok: #2E9E6B;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 2px 10px rgba(13, 30, 49, .06);
  --shadow-2: 0 12px 34px rgba(13, 30, 49, .12);
  --container: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* =========================================================
   2. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold-deep); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { line-height: 1.22; margin: 0 0 .55em; color: var(--navy); letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--alt { background: var(--surface); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head p { color: var(--muted); font-size: 1.02rem; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 10px; border: 2px solid transparent;
  font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .22s ease;
  line-height: 1.2; text-align: center;
}
.btn--gold { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: var(--gold-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(212,168,75,.35); }
.btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-soft); color: #fff; transform: translateY(-2px); }
.btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--sm { padding: 9px 18px; font-size: .86rem; border-radius: 8px; }
.btn--block { width: 100%; }

/* =========================================================
   3. TOP BAR + HEADER
   ========================================================= */
.topbar { background: var(--navy-deep); color: #C7D3DF; font-size: .82rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar a { color: #E8EEF4; }
.topbar a:hover { color: var(--gold); }
.topbar__group { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__badge { color: var(--gold); font-weight: 700; letter-spacing: .06em; }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
/* flex:0 0 auto — the logo must NEVER be the element that gives way.
   Without it, a too-wide nav row (long German/Russian/Spanish labels × 8 languages)
   squeezed the brand to 0px and the logo silently disappeared (2026-10-01). */
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; max-width: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 800; font-size: 1.18rem; color: var(--navy); letter-spacing: .02em; }
.brand__tag { font-size: .68rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 3px; }
.nav > li { position: relative; }
.nav > li > a {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 10px 11px; font-weight: 600; font-size: .95rem; color: var(--navy); border-radius: 8px;
}
.nav > li > a:hover, .nav > li.current-menu-item > a, .nav > li.nav-open > a { color: var(--gold-deep); background: var(--gold-soft); }
.nav .caret { font-size: .6rem; opacity: .7; transition: transform .2s; }
.nav > li.nav-open .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 950;
  min-width: 250px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-2); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s ease;
}
.nav > li.nav-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--ink);
}
.dropdown a:hover { background: var(--gold-soft); color: var(--navy); }
.dropdown .count { font-size: .72rem; color: var(--muted); background: var(--bg); padding: 2px 8px; border-radius: 99px; }

.header-cta { flex-shrink: 0; }
.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--navy); border-radius: 8px;
  width: 42px; height: 38px; cursor: pointer; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px;
  background: var(--navy); transform: translate(-50%, -50%); transition: all .25s;
}
.nav-toggle span::before { transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle span::after { transform: translate(-50%, calc(-50% + 6px)); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* =========================================================
   4. HERO
   ========================================================= */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(212,168,75,.18), transparent 60%),
    linear-gradient(118deg, var(--navy-deep) 0%, var(--navy) 55%, #1D4066 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
}
.hero__inner {
  position: relative; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 48px; align-items: center; padding: 84px 0 64px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px;
  border: 1px solid rgba(212,168,75,.5); border-radius: 99px;
  color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 22px; background: rgba(212,168,75,.08);
}
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__sub { color: #B9C7D6; font-size: 1.08rem; max-width: 560px; margin-bottom: 30px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__visual { position: relative; }
.hero__visual img {
  border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
}
.hero__visual::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 2px solid rgba(212,168,75,.4); border-radius: 18px; z-index: -1;
}
.hero__chips { position: absolute; left: -16px; bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.hero__chip {
  display: flex; align-items: center; gap: 9px; background: rgba(13,30,49,.86);
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px);
  color: #E8EEF4; font-size: .8rem; font-weight: 600; padding: 9px 14px; border-radius: 10px;
}
.hero__chip svg { color: var(--gold); flex-shrink: 0; }

.hero--page { padding: 64px 0 56px; }
.hero--page .hero__inner { display: block; padding: 0; }
.hero--page h1 { margin-bottom: 10px; }
.hero--page .hero__sub { margin-bottom: 0; }
.breadcrumbs { font-size: .82rem; color: #93A5B8; margin-top: 18px; }
.breadcrumbs a { color: #C7D3DF; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs .sep { margin: 0 7px; opacity: .5; }

/* stats band */
.stats { background: var(--surface); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 30px 0; }
.stat { text-align: center; padding: 8px 10px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat__num { font-size: 1.9rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.stat__num span { color: var(--gold-deep); }
.stat__label { font-size: .8rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 5px; }

/* =========================================================
   5. CATEGORY GRID
   ========================================================= */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cat-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  transition: all .25s ease; box-shadow: var(--shadow-1);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: rgba(212,168,75,.55); }
.cat-card__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #EAF0F6, #F8FAFC); overflow: hidden; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat-card:hover .cat-card__media img { transform: scale(1.06); }
.cat-card__count {
  position: absolute; top: 12px; right: 12px; background: rgba(13,30,49,.82); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 99px; backdrop-filter: blur(4px);
}
.cat-card__body { padding: 18px 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cat-card__body h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.cat-card__arrow { color: var(--gold-deep); transition: transform .25s; flex-shrink: 0; }
.cat-card:hover .cat-card__arrow { transform: translateX(5px); }

/* =========================================================
   6. PRODUCT CARDS & GRID
   ========================================================= */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.product-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: all .25s ease; box-shadow: var(--shadow-1);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: rgba(212,168,75,.55); }
.product-card__media { position: relative; aspect-ratio: 4 / 3; background: #F2F5F8; overflow: hidden; display: block; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__cat {
  position: absolute; top: 12px; left: 12px; background: rgba(212,168,75,.94); color: var(--navy-deep);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 7px; max-width: calc(100% - 24px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-card__body h3 { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__body h3 a { color: var(--ink); }
.product-card__body h3 a:hover { color: var(--gold-deep); }
.product-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-card__more { font-size: .84rem; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 5px; }
.product-card__more:hover { color: var(--gold-deep); }

/* =========================================================
   7. FEATURE / ADVANTAGE / PROCESS / FAQ
   ========================================================= */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; transition: all .25s ease; box-shadow: var(--shadow-1);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.feature-card__icon {
  width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft); color: var(--gold-deep); margin-bottom: 18px;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: .92rem; margin: 0; }

.warranty-band { background: linear-gradient(118deg, var(--navy-deep), var(--navy) 60%, #1D4066); color: #fff; }
.warranty-band h2 { color: #fff; }
.warranty-band .section-head p { color: #AFC0D2; }
.warranty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.warranty-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 26px 24px;
}
.warranty-card svg { color: var(--gold); margin-bottom: 14px; }
.warranty-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 7px; }
.warranty-card p { color: #AFC0D2; font-size: .9rem; margin: 0; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 24px; box-shadow: var(--shadow-1);
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-size: 2.4rem; font-weight: 800; color: var(--gold-soft);
  -webkit-text-stroke: 1.5px var(--gold); color: transparent;
  position: absolute; top: 16px; right: 20px; line-height: 1; opacity: .9;
}
.step h3 { font-size: 1.02rem; margin-bottom: 7px; }
.step p { color: var(--muted); font-size: .9rem; margin: 0; }

.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color .2s;
}
.faq-item[open] { border-color: rgba(212,168,75,.6); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold-deep); font-size: 1.3rem; font-weight: 700; flex-shrink: 0; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 22px 18px; color: var(--muted); font-size: .95rem; }
.faq-item__body ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }

/* CTA band */
.cta-band { background: linear-gradient(118deg, var(--navy-deep), var(--navy) 55%, #1D4066); border-radius: 20px; color: #fff; padding: 52px 54px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 0%, rgba(212,168,75,.2), transparent 60%); pointer-events: none; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: #AFC0D2; margin: 0; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; }

/* =========================================================
   8. SHOP / ARCHIVE
   ========================================================= */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.shop-toolbar__result { color: var(--muted); font-size: .92rem; }
.shop-toolbar__result strong { color: var(--navy); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); font-size: .86rem; font-weight: 600; color: var(--ink);
  transition: all .2s;
}
.chip:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-1px); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .count { font-size: .72rem; opacity: .65; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 46px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
  padding: 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  font-weight: 700; font-size: .92rem; color: var(--navy);
}
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--gold); color: var(--gold-deep); }

/* =========================================================
   9. SINGLE PRODUCT
   ========================================================= */
.product-single { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
.product-gallery__main {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: #F2F5F8; aspect-ratio: 4 / 3; box-shadow: var(--shadow-1);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.product-gallery__thumbs img { border-radius: 9px; border: 2px solid var(--line); cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%; transition: border-color .2s; }
.product-gallery__thumbs img:hover, .product-gallery__thumbs img.is-active { border-color: var(--gold); }
.product-summary__cat { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.product-summary h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.product-summary .sku { font-size: .84rem; color: var(--muted); margin-bottom: 18px; }
.product-summary__short { color: var(--muted); margin-bottom: 24px; }
.product-summary__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.trust-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600;
  color: var(--navy); background: var(--gold-soft); border: 1px solid rgba(212,168,75,.4);
  padding: 7px 14px; border-radius: 99px;
}
.trust-chip svg { color: var(--gold-deep); }

.product-section { margin-top: 56px; }
.product-section__title { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; margin-bottom: 20px; }
.product-section__title::before { content: ""; width: 5px; height: 26px; background: var(--gold); border-radius: 3px; }
.product-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 34px; box-shadow: var(--shadow-1); }
.product-content h2 { font-size: 1.25rem; }
.product-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 14px 0; }
/* captcha row (inquiry forms) */
.jw-captcha__row { display: flex; gap: 10px; align-items: center; }
.jw-captcha__row img { border: 1px solid var(--line); border-radius: 8px; flex: 0 0 auto; margin: 0; }
.jw-captcha__row input { flex: 1 1 auto; min-width: 0; }
.jw-captcha__refresh { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; font-size: 1.15rem; cursor: pointer; color: var(--navy); }
.jw-captcha__refresh:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
/* site search (header toggle panel + product archive + search results) */
.jw-search-toggle { background: none; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; color: var(--navy); border-radius: 8px; }
.jw-search-toggle:hover { color: var(--gold-deep); background: var(--bg); }
.jw-search-panel { background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-1); padding: 18px 0; }
.jw-searchform { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px 6px 16px; box-shadow: var(--shadow-1); }
.jw-searchform:focus-within { border-color: var(--gold); }
.jw-searchform__icon { color: var(--muted); flex: 0 0 auto; }
.jw-searchform input[type="search"] { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; padding: 12px 6px; font-size: 1rem; color: var(--navy); }
.jw-searchform__btn { flex: 0 0 auto; background: var(--gold); color: #fff; border: none; border-radius: 9px; padding: 11px 22px; font-weight: 700; cursor: pointer; }
.jw-searchform__btn:hover { background: var(--gold-deep); }
.jw-search-page-form { max-width: 760px; }
.jw-pager { margin-top: 30px; display: flex; gap: 8px; justify-content: center; }
.jw-pager .page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); }
.jw-pager .page-numbers.current { background: var(--gold); border-color: var(--gold); color: #fff; }
/* news cards + article layout */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; gap: 20px; } }
.news-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; height: 100%; }
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2, 0 12px 28px rgba(20,43,69,.13)); }
.news-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__excerpt { font-size: .9rem; line-height: 1.55; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,43,69,.14); }
.news-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.4rem; }
.news-card__cat { position: absolute; top: 10px; left: 10px; background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; }
.news-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card__date { color: var(--muted); font-size: .82rem; }
.news-card__body h3 { font-size: 1.05rem; margin: 0; line-height: 1.4; }
.news-card__body h3 a { color: var(--navy); }
.news-card__body h3 a:hover { color: var(--gold-deep); }
.news-card__body .product-card__more { margin-top: auto; }
/* article body typography */
.single-post__head h1 { margin-bottom: 8px; }
.single-post__meta { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: .9rem; flex-wrap: wrap; }
.single-post__cat a { color: var(--gold-deep); font-weight: 600; }
.single-post__thumb { margin: 22px 0 8px; border-radius: var(--radius); overflow: hidden; }
.single-post__thumb img { width: 100%; height: auto; display: block; }
.page-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 38px; box-shadow: var(--shadow-1); }
@media (max-width: 600px) { .page-wrap { padding: 22px 18px; } }
.post-content { font-size: 1.02rem; line-height: 1.85; color: #2b3a4a; }
.post-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 18px auto; display: block; }
.post-content h2, .post-content h3, .post-content h4 { margin: 1.6em 0 .6em; color: var(--navy); }
.post-content h2 { font-size: 1.45rem; border-left: 4px solid var(--gold); padding-left: 12px; }
.post-content h3 { font-size: 1.2rem; }
.post-content p { margin: 0 0 1.1em; }
.post-content ul, .post-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.post-content li { margin-bottom: .45em; }
.post-content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.post-content table th, .post-content table td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; }
.post-content table th { background: var(--bg); }
.post-content a { color: var(--gold-deep); text-decoration: underline; }
.post-content hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.single-post__cta { background: linear-gradient(135deg, var(--navy), #1d3a5c); color: #d7e2ee; border-radius: var(--radius); padding: 30px 34px; margin-top: 40px; }
.single-post__cta h3 { color: #fff; margin: 0 0 8px; font-size: 1.3rem; }
.single-post__cta p { margin: 0 0 16px; }
.single-post__cta .btn--ghost { border-color: #9FB1C4; color: #fff; margin-left: 10px; }
/* stat icons */
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat__icon { color: var(--gold); opacity: .95; }
/* process step icons */
.step { display: flex; flex-direction: column; align-items: flex-start; }
.step__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; margin-bottom: 14px; box-shadow: 0 8px 18px rgba(212,168,75,.35); }
/* news card date icon */
.news-card__date { display: inline-flex; align-items: center; gap: 6px; }
/* breadcrumb home icon */
.breadcrumbs .crumb-home { display: inline-flex; align-items: center; gap: 5px; }
.breadcrumbs .crumb-home svg { opacity: .8; }
.breadcrumbs .sep { color: rgba(255,255,255,.45); }
.product-content table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 14px 0; }
.product-content table th, .product-content table td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; }
.product-content table th { background: var(--bg); }

.spec-table { width: 100%; border-collapse: collapse; font-size: .94rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.spec-table th, .spec-table td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.spec-table th { width: 220px; color: var(--navy); background: #F8FAFC; font-weight: 700; }

/* Product video blocks */
.jw-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.jw-video-grid--1 { grid-template-columns: minmax(0, 860px); }
.jw-video-item { background: transparent; border: 0; padding: 0; box-shadow: none; }
/* the raw element is hidden; jw-local__stage carries the picture and paints the backdrop */
.jw-video-item > video { display: none; }

/* =========================================================
   LOCAL VIDEO PLAYER — same design language as the YouTube one
   ========================================================= */
.jw-local {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #08111C;
  box-shadow: 0 18px 44px rgba(8, 17, 28, .26), 0 2px 6px rgba(8, 17, 28, .14);
  isolation: isolate;
}
.jw-local__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #08111C;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Portrait clips switch the stage to their own ratio, so there are no side bars. */
.jw-local.is-portrait .jw-local__stage { aspect-ratio: 9 / 16; max-height: 72vh; margin: 0 auto; }
.jw-local.is-square .jw-local__stage { aspect-ratio: 1 / 1; max-height: 68vh; margin: 0 auto; }

/* WP core wraps the element in .wp-video with a hard width; neutralise it so our
   flexible stage controls the layout. */
.jw-local__stage .wp-video { width: 100% !important; height: 100% !important; margin: 0; }
.jw-local__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;
  cursor: pointer;
}
/* soft vignette top/bottom so our bar and the poster label stay readable */
.jw-local__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,17,28,.26) 0%, rgba(8,17,28,0) 32%, rgba(8,17,28,.62) 100%);
  opacity: 0; transition: opacity .25s ease;
}
.jw-local.is-idle .jw-local__stage::after { opacity: 1; }

/* poster label, replaces the browser's own hint text */
.jw-local__label {
  position: absolute; left: 18px; bottom: 54px; z-index: 4;
  padding: 5px 11px; border-radius: 6px;
  background: rgba(8, 17, 28, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #F2D9A0; font-size: .72rem; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
  pointer-events: none;
}

.jw-local__spinner {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--gold);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.jw-local__spinner.is-on { opacity: 1; animation: jwSpin .8s linear infinite; }

/* ---- control bar ---- */
.jw-local__bar {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, rgba(8,17,28,0) 0%, rgba(8,17,28,.78) 58%, rgba(8,17,28,.94) 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.jw-local.is-ready .jw-local__bar { opacity: 1; transform: none; pointer-events: auto; }
.jw-local.is-playing.idle .jw-local__bar { opacity: 0; transform: translateY(6px); pointer-events: none; }

.jw-local__btn {
  flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .10);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.jw-local__btn:hover { background: var(--gold); transform: translateY(-1px); }
.jw-local__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.jw-local__ico { display: block; fill: #fff; }
.jw-local__ico--play {
  width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.jw-local__ico--pause { width: 11px; height: 13px; margin: 0; background: linear-gradient(90deg,#fff 0 36%, transparent 36% 64%, #fff 64% 100%); border-radius: 1px; }
.jw-local__ico--vol { width: 15px; height: 13px; background: linear-gradient(90deg,#fff 0 26%, transparent 26% 40%, #fff 40% 100%); clip-path: polygon(0 32%, 26% 32%, 52% 0, 52% 100%, 26% 68%, 0 68%); }
.jw-local__btn--mute.is-muted .jw-local__ico--vol { opacity: .45; }
.jw-local__ico--fs {
  width: 13px; height: 13px; background: #fff;
  clip-path: polygon(0 0, 42% 0, 42% 14%, 14% 14%, 14% 42%, 0 42%, 0 0, 100% 0, 100% 42%, 86% 42%, 86% 14%, 58% 14%, 58% 0, 100% 0, 100% 100%, 58% 100%, 58% 86%, 86% 86%, 86% 58%, 100% 58%, 100% 100%, 0 100%, 0 58%, 14% 58%, 14% 86%, 42% 86%, 42% 100%, 0 100%);
}

.jw-local__time {
  flex: 0 0 auto; color: rgba(255,255,255,.92);
  font-size: .76rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(8,17,28,.6);
}
.jw-local__sep { margin: 0 4px; opacity: .5; }

.jw-local__track {
  position: relative; flex: 1 1 auto; height: 20px; margin: 0;
  cursor: pointer; display: flex; align-items: center;
}
.jw-local__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.jw-local__rail { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.26); }
.jw-local__fill { position: absolute; left: 0; height: 4px; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.jw-local__knob {
  position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(8,17,28,.55);
  transform: scale(.82); transition: transform .15s ease;
}
.jw-local__track:hover .jw-local__knob { transform: scale(1.15); }

@media (max-width: 640px) {
  .jw-local__btn { width: 28px; height: 28px; }
  .jw-local__time { font-size: .68rem; }
  .jw-local__bar { gap: 7px; padding: 22px 9px 9px; }
  .jw-local.is-portrait .jw-local__stage, .jw-local.is-square .jw-local__stage { max-height: 74vh; }
}
.jw-local:fullscreen, .jw-local__stage:fullscreen .jw-local { border-radius: 0; }
.jw-local.is-fs { border-radius: 0; }
.jw-local.is-fs .jw-local__stage { max-height: none; aspect-ratio: auto; height: 100vh; }

@media (prefers-reduced-motion: reduce) {
  .jw-local__bar, .jw-local__stage::after { transition: none; }
}

/* Language switcher — flag + code (flags are self-hosted SVG, never emoji:
   Windows browsers do not render flag emoji at all) */
.lang-switch { display: flex; align-items: center; gap: 1px; margin-left: 6px; }
.lang-link { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--navy); opacity: .6; text-decoration: none; padding: 4px 5px; border-radius: 7px; letter-spacing: .02em; }
.lang-link:hover { opacity: 1; background: var(--gold-soft); }
.lang-link.is-active { opacity: 1; color: var(--gold-deep); }
.lang-flag { display: block; flex: none; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(20,43,69,.16); }
.lang-link.is-active .lang-flag { box-shadow: 0 0 0 2px var(--gold); }

/* YouTube facade (click to load — nothing from Google is fetched on page view) */
/* =========================================================
   PRODUCT VIDEO PLAYER
   Own chrome, not YouTube's: the iframe is loaded with controls=0 so Google never
   renders its bar/wordmark, and everything below is ours. The poster state is pure
   CSS so visitors see a product shot + our play button, not a YouTube card.
   ========================================================= */
.jw-player {
  --jw-h: 0px;
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #08111C;
  box-shadow: 0 18px 44px rgba(8, 17, 28, .28), 0 2px 6px rgba(8, 17, 28, .16);
  isolation: isolate;
}
.jw-player__stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  /* Layer 1 = cover-sized fill (fills the letterbox of a vertical Shorts),
     layer 2 = the same image contain-sized and centred (the actual picture).
     Doing both on the stage avoids child-layer paint/compositing quirks entirely. */
  background-color: #08111C;
  /* Three layers, bottom to top:
     1. `100% 100%`  – the cover stretched to fill the box edge-to-edge; this is what
        removes the black bars, because `cover` on a vertical image still letterboxes
        inside a 16:9 box (it fits by width and leaves vertical slack).
     2. `auto 100%`   – the same image at natural width, full height, centred, so the
        picture itself is never distorted. It sits over the stretched copy.
     3. the soft navy wash that keeps the play button readable. */
  background-image: var(--jw-poster), var(--jw-poster),
                    linear-gradient(180deg, rgba(8,17,28,.34) 0%, rgba(8,17,28,.06) 34%, rgba(8,17,28,.80) 100%);
  background-size: 100% 100%, auto 100%, 100% 100%;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.jw-player.is-playing .jw-player__stage {
  /* A vertical Short still letterboxes inside 16:9 while it plays, so the poster is
     kept underneath as a soft full-bleed backdrop instead of clearing to black. */
  background-image: var(--jw-poster);
  background-size: cover;
  background-position: center;
  filter: none;
}

/* ---- poster state ---- */
.jw-player__facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; cursor: pointer;
  display: block; overflow: hidden;
  background: transparent;   /* the stage paints the cover layers */
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
/* cinematic darken over both layers so the play button reads as the focal point.
   Needs its own element because ::before/::after are already used by the two cover
   layers, and it must sit above the crisp cover but below the badge. */
.jw-player__grad {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(8,17,28,.10) 0%, rgba(8,17,28,.02) 40%, rgba(8,17,28,.72) 100%);
  transition: opacity .3s ease;
}
/* the growing ring behind the play button */
.jw-player__badge {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 82px; height: 82px; margin: -41px 0 0 -41px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(8, 17, 28, .40);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), background .28s ease, border-color .28s ease;
}
.jw-player__playicon {
  width: 0; height: 0; margin-left: 6px;
  border-left: 19px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(8,17,28,.4));
}
.jw-player__facade:hover .jw-player__badge {
  transform: scale(1.09);
  background: var(--gold);
  border-color: var(--gold);
}
.jw-player__facade:hover .jw-player__playicon {
  border-left-color: #142B45;
  filter: none;
}
/* thin gold pulse ring */
.jw-player__badge::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(212, 168, 75, .55);
  opacity: 0; transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
}
.jw-player__facade:hover .jw-player__badge::after { opacity: 1; transform: scale(1); }

.jw-player__tag {
  position: absolute; left: 18px; bottom: 16px; z-index: 3;
  padding: 5px 11px; border-radius: 6px;
  background: rgba(8, 17, 28, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F2D9A0; font-size: .72rem; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
  transition: opacity .25s ease;
}
.jw-player.is-playing .jw-player__facade { opacity: 0; pointer-events: none; }

/* YouTube blocked the embed (bot challenge / error 153) and we fell back to the
   product's own mp4. Our control bar is hidden so the native controls work alone. */
.jw-player.is-fallback .jw-player__bar { opacity: 0; pointer-events: none; }
.jw-player.is-fallback .jw-player__spinner { display: none; }
.jw-player__video--local {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #08111C;
  cursor: pointer;
}
/* Nothing to fall back to: tell the visitor plainly instead of showing YouTube's prompt. */
.jw-player.is-blocked .jw-player__framewrap {
  display: flex; align-items: center; justify-content: center;
  background: #08111C;
}
.jw-player.is-blocked::after {
  content: attr(data-blocked-msg);
  position: absolute; inset: auto 24px 24px; z-index: 8;
  margin: 0 auto; max-width: 460px; padding: 12px 16px;
  border-radius: 10px; background: rgba(8, 17, 28, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #E7EDF5; font-size: .88rem; line-height: 1.5; text-align: center;
}

/* ---- playing state ---- */
/* Shorts embeds ignore controls=0 and force YouTube's own bar/title strip back in.
   They are masked here: the top strip sits under our gradient, the bottom bar under our
   control bar, so the visitor only ever sees our chrome. */
.jw-player__framewrap { position: absolute; inset: 0; z-index: 2; }
/* Masks live on .jw-player, not on framewrap: an <iframe> is a replaced element that
   paints above its own parent's siblings, so an overlay inside framewrap loses to it. */
.jw-player::before, .jw-player::after { content: none; }
.jw-player.is-playing::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: 6;
  background: linear-gradient(180deg, rgba(8,17,28,.97) 0%, rgba(8,17,28,.94) 60%, rgba(8,17,28,0) 100%);
  pointer-events: none;
}
.jw-player.is-playing::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62px; z-index: 6;
  background: linear-gradient(0deg, rgba(8,17,28,.96) 0%, rgba(8,17,28,.86) 62%, rgba(8,17,28,0) 100%);
  pointer-events: none;
}
.jw-player__frame {
  display: block; width: 100%; height: 100%;
  border: 0; background: #08111C;
  /* Vertical Shorts must not be cropped (it would cut the machine in half), so they are
     letterboxed by the embed itself. The blurred cover behind fills that space, which
     reads as deliberate styling instead of black bars. */
  object-fit: contain;
}
.jw-player__spinner {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--gold);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.jw-player__spinner.is-on { opacity: 1; animation: jwSpin .8s linear infinite; }
@keyframes jwSpin { to { transform: rotate(360deg); } }

/* ---- our control bar ---- */
.jw-player__bar {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, rgba(8,17,28,0) 0%, rgba(8,17,28,.78) 58%, rgba(8,17,28,.94) 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.jw-player.is-playing .jw-player__bar { opacity: 1; transform: none; pointer-events: auto; }
.jw-player.is-playing .jw-player__bar.is-idle { opacity: 0; transform: translateY(6px); pointer-events: none; }

.jw-player__btn {
  flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .10);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.jw-player__btn:hover { background: var(--gold); transform: translateY(-1px); }
.jw-player__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.jw-player__ico { display: block; fill: #fff; }
.jw-player__ico--play {
  width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.jw-player__ico--pause { width: 11px; height: 13px; margin: 0; background: linear-gradient(90deg, #fff 0 36%, transparent 36% 64%, #fff 64% 100%); border-radius: 1px; }
.jw-player__ico--vol { width: 15px; height: 13px; background: linear-gradient(90deg,#fff 0 26%, transparent 26% 40%, #fff 40% 100%); clip-path: polygon(0 32%, 26% 32%, 52% 0, 52% 100%, 26% 68%, 0 68%); }
.jw-player__btn--mute.is-muted .jw-player__ico--vol { opacity: .45; }
.jw-player__ico--fs { width: 13px; height: 13px; background: #fff; clip-path: polygon(0 0, 42% 0, 42% 14%, 14% 14%, 14% 42%, 0 42%, 0 0, 100% 0, 100% 42%, 86% 42%, 86% 14%, 58% 14%, 58% 0, 100% 0, 100% 100%, 58% 100%, 58% 86%, 86% 86%, 86% 58%, 100% 58%, 100% 100%, 0 100%, 0 58%, 14% 58%, 14% 86%, 42% 86%, 42% 100%, 0 100%); }
.jw-player__ico--fsmin { transform: none; }

.jw-player__time {
  flex: 0 0 auto; color: rgba(255,255,255,.92);
  font-size: .76rem; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(8,17,28,.6);
}
.jw-player__sep { margin: 0 4px; opacity: .5; }

.jw-player__track {
  position: relative; flex: 1 1 auto; height: 20px; margin: 0;
  cursor: pointer; display: flex; align-items: center;
}
.jw-player__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.jw-player__rail { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.26); }
.jw-player__buffer { position: absolute; left: 0; height: 4px; width: 0; border-radius: 2px; background: rgba(255,255,255,.34); }
.jw-player__fill { position: absolute; left: 0; height: 4px; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.jw-player__knob {
  position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(8,17,28,.55);
  transform: scale(.82); transition: transform .15s ease;
}
.jw-player__track:hover .jw-player__knob { transform: scale(1.15); }

@media (max-width: 640px) {
  .jw-player__badge { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .jw-player__playicon { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
  .jw-player__tag { left: 12px; bottom: 44px; font-size: .64rem; }
  .jw-player__btn { width: 28px; height: 28px; }
  .jw-player__time { font-size: .68rem; }
  .jw-player__bar { gap: 7px; padding: 22px 9px 9px; }
}
/* Fullscreen: drop the rounded shell so the video owns the whole screen */
.jw-player:fullscreen, .jw-player__stage:fullscreen .jw-player { border-radius: 0; }
.jw-player.is-fs { border-radius: 0; }
.jw-player.is-fs .jw-player__bar { padding-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .jw-player__facade, .jw-player__badge, .jw-player__bar { transition: none; }
  .jw-player__spinner.is-on { animation-duration: 1.6s; }
}

/* The header row has room for 8 flags but NOT for 8 flag+code pairs: measured
   2026-10-01 at container 1200px, flag+code = 418px, which left every language
   except English 9–15px short and crushed the brand/logo to 0px width. Codes stay
   in the mobile-menu copy (below 860px) where there is room, and the full language
   name is always available in title / aria-label. */
.lang-switch--header .lang-code { display: none; }
.lang-switch--header .lang-link { padding: 4px 4px; }
/* the in-menu copy is only used ≤860px (see RESPONSIVE) */
.lang-switch--nav, .nav-lang { display: none; }

.related h2 { margin-bottom: 26px; }

/* =========================================================
   10. GENERIC PAGES / ABOUT / CONTACT
   ========================================================= */
.page-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 44px; box-shadow: var(--shadow-1); }
.page-wrap h2 { margin-top: 1.4em; }
.page-wrap img { border-radius: 12px; }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 44px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; text-align: center; box-shadow: var(--shadow-1); }
.contact-card__icon { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; }
.contact-card h3 { font-size: 1rem; margin-bottom: 8px; }
.contact-card a, .contact-card p { color: var(--muted); font-size: .92rem; word-break: break-word; margin: 0; }
.contact-card a:hover { color: var(--gold-deep); }

.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.about-intro__media img { border-radius: 18px; box-shadow: var(--shadow-2); }
.about-intro__media .about-video {
  width: 100%; display: block; aspect-ratio: 16 / 9; background: var(--navy-deep);
  border-radius: 18px; box-shadow: var(--shadow-2); border: 1px solid var(--line); object-fit: cover;
}

/* WPForms light styling */
.wpforms-container { background: transparent !important; }
.wpforms-container form { text-align: left; }
.wpforms-field { padding: 0 0 18px !important; }
.wpforms-field-label { font-weight: 700 !important; color: var(--navy) !important; font-size: .9rem !important; }
.wpforms-field input, .wpforms-field textarea, .wpforms-field select {
  border: 1.5px solid var(--line) !important; border-radius: 10px !important; padding: 12px 14px !important;
  font-size: .95rem !important; background: #FBFCFE !important; transition: border-color .2s !important;
}
.wpforms-field input:focus, .wpforms-field textarea:focus { border-color: var(--gold) !important; outline: none !important; }
.wpforms-submit-container .wpforms-submit {
  background: var(--gold) !important; border: none !important; color: var(--navy-deep) !important;
  font-weight: 800 !important; padding: 14px 34px !important; border-radius: 10px !important;
  font-size: .95rem !important; cursor: pointer; transition: all .2s !important;
}
.wpforms-submit-container .wpforms-submit:hover { background: var(--gold-deep) !important; color: #fff !important; }

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer { background: var(--navy-deep); color: #9FB1C4; margin-top: 72px; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 62px 0 46px; }
.footer-main .f-h { color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.footer-main .f-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--gold); border-radius: 2px; }
.footer-main ul { display: flex; flex-direction: column; gap: 11px; font-size: .92rem; }
.footer-main ul a { color: #9FB1C4; }
.footer-main ul a:hover { color: var(--gold); }
.footer-brand img { height: 44px; margin-bottom: 18px; }
.footer-brand p { font-size: .92rem; max-width: 300px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); color: #C7D3DF; transition: all .2s;
}
.socials a:hover { background: var(--gold); color: var(--navy-deep); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 20px 0; }
.footer-bottom__inner { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .82rem; }
.footer-bottom__inner a { color: #9FB1C4; }
.footer-bottom__inner a:hover { color: var(--gold); }

/* WhatsApp float */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 980;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.45); transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); color: #fff; }

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .cat-grid, .feature-grid, .steps { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .hero__inner { grid-template-columns: 1fr; padding: 60px 0 48px; }
  .hero__visual { max-width: 560px; }
  .product-single { grid-template-columns: 1fr; gap: 30px; }
  .about-intro { grid-template-columns: 1fr; }
  /* The horizontal nav needs ~1000px for the longest languages (fr/ru/es) once the
     logo, CTA, flags and search are in — so it collapses to the hamburger here
     instead of at 860px, which used to squeeze the brand to 0 and overflow the page. */
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2); padding: 14px 20px 20px;
    display: none;
  }
  body.nav-open .nav { display: flex; }
  .nav > li > a { padding: 13px 10px; font-size: 1rem; border-radius: 8px; justify-content: space-between; white-space: normal; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: var(--bg); border-radius: 10px;
    padding: 6px; margin: 4px 0 8px; display: none;
  }
  .nav > li.nav-open .dropdown { display: block; }
}
@media (max-width: 860px) {
  .section { padding: 52px 0; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
  .stat:nth-child(2) { border-right: none; }
  .cat-grid, .feature-grid, .steps, .warranty-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 32px; }

  .header-cta { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__group--right { display: none; }

  /* Language switcher moves into the opened menu: the flag row in the header bar
     would push the hamburger off a 390px screen */
  .lang-switch--header { display: none; }
  .nav-lang { display: block; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
  .nav-lang .lang-switch--nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .nav-lang .lang-link { opacity: .85; padding: 5px 9px; background: var(--bg); border: 1px solid var(--line); }
  .nav-lang .lang-link.is-active { opacity: 1; background: var(--gold-soft); border-color: var(--gold); }
}
@media (max-width: 600px) {
  .cat-grid, .feature-grid, .steps, .warranty-grid, .product-grid, .product-grid--3 { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat__num { font-size: 1.45rem; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .hero__chips { display: none; }
  .page-wrap { padding: 26px 22px; }
  .product-content { padding: 22px 20px; }
  .spec-table th { width: 130px; }
  .jw-video-grid, .jw-video-grid--1 { grid-template-columns: 1fr; }
}

/* =========================================================
   10b. INQUIRY FORM + CONTACT LAYOUT + MAP
   ========================================================= */
.contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; }

.jw-form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 36px; box-shadow: var(--shadow-1);
}
.jw-form-card h2 { font-size: 1.45rem; margin-bottom: 6px; }
.jw-form-card .jw-form-sub { color: var(--muted); font-size: .95rem; margin-bottom: 26px; }
#jw-pform:target .jw-form-card { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,168,75,.16), var(--shadow-2); }

.jw-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.jw-field { display: flex; flex-direction: column; gap: 7px; }
.jw-field--full { grid-column: 1 / -1; }
.jw-field label { font-size: .86rem; font-weight: 700; color: var(--navy); }
.jw-field label .req { color: #C0392B; }
.jw-field input, .jw-field select, .jw-field textarea {
  font-family: var(--font); font-size: .95rem; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #FBFCFE; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.jw-field input:focus, .jw-field select:focus, .jw-field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,75,.16); background: #fff;
}
.jw-field textarea { min-height: 130px; resize: vertical; }
.jw-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.jw-form__note { font-size: .8rem; color: var(--muted); max-width: 340px; }
.jw-form__actions .btn { padding: 14px 38px; }

.jw-alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; font-weight: 600; font-size: .93rem; }
.jw-alert--ok { background: #E9F7F0; color: #1E7A52; border: 1px solid #BFE5D2; }
.jw-alert--err { background: #FDEDEB; color: #A93226; border: 1px solid #F5C6C0; }

.contact-side { display: flex; flex-direction: column; gap: 22px; }
.contact-side__card {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #C7D3DF;
  border-radius: var(--radius); padding: 30px 28px;
}
.contact-side__card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 18px; }
.contact-side__card ul { display: flex; flex-direction: column; gap: 14px; font-size: .92rem; }
.contact-side__card li { display: flex; gap: 12px; align-items: flex-start; }
.contact-side__card li svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.contact-side__card a { color: #E8EEF4; }
.contact-side__card a:hover { color: var(--gold); }

.contact-side__promise { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-1); }
.contact-side__promise h3 { font-size: 1.02rem; margin-bottom: 14px; }
.contact-side__promise ul { display: flex; flex-direction: column; gap: 10px; font-size: .9rem; color: var(--muted); }
.contact-side__promise li { display: flex; gap: 10px; align-items: flex-start; }
.contact-side__promise li svg { color: var(--ok); flex-shrink: 0; margin-top: 3px; }

.map-card { margin-top: 44px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-1); background: var(--surface); }
.map-card__head { padding: 18px 26px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.map-card__head svg { color: var(--gold-deep); }
.map-card__head h3 { margin: 0; font-size: 1.02rem; }
.map-card__head span { color: var(--muted); font-size: .86rem; }
.map-card iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; }
  .jw-form-card { padding: 26px 22px; }
}
@media (max-width: 600px) {
  .jw-form__grid { grid-template-columns: 1fr; }
  .map-card iframe { height: 300px; }
}

/* content utilities */
.aligncenter { margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.page-template-default .hero--page { margin-bottom: 0; }