/*
Theme Name: JFTC Tech
Theme URI: https://jftcgroup.com/
Author: JFTC
Description: JFTC GLOBAL — dark-tech B2B inquiry theme for intelligent system / AI computing / integrated server room / smart city / command center solutions. WooCommerce display-only. RTL ready.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.1
Text Domain: jftc-tech
*/

/* ============================================================
   1. Design tokens
   ============================================================ */
:root{
  --bg:#070b14;
  --bg-2:#0c1220;
  --bg-3:#101a2c;
  --bg-4:#16233a;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --ink:#eef4ff;
  --ink-2:#b7c4da;
  --muted:#7e8da6;
  --accent:#22d3ee;
  --accent-2:#3b82f6;
  --accent-3:#8b5cf6;
  --grad:linear-gradient(115deg,#22d3ee 0%,#3b82f6 55%,#6366f1 100%);
  --grad-soft:linear-gradient(115deg,rgba(34,211,238,.16),rgba(59,130,246,.10));
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --shadow-sm:0 6px 20px rgba(0,0,0,.4);
  --glow:0 0 0 1px rgba(34,211,238,.35),0 12px 40px rgba(34,211,238,.18);
  --wrap:min(1760px,95vw);
  --header-h:74px;
}

/* ============================================================
   2. Reset / base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:#7ff0ff}
h1,h2,h3,h4{margin:0 0 .55em;line-height:1.2;color:#fff;font-weight:750;letter-spacing:-.015em}
h1{font-size:clamp(30px,4vw,52px)}
h2{font-size:clamp(23px,2.6vw,34px)}
h3{font-size:clamp(17px,1.6vw,21px)}
p{margin:0 0 1.05em;color:var(--ink-2)}
ul,ol{padding-inline-start:22px;color:var(--ink-2)}
li{margin:0 0 .5em}
strong,b{color:#fff;font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}
small{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:rgba(34,211,238,.28)}

/* ============================================================
   3. Layout helpers
   ============================================================ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.section{padding:78px 0;position:relative}
.section--tight{padding:56px 0}
.section--alt{background:var(--bg-2)}
.section--edge{border-top:1px solid var(--line)}
.center{text-align:center}
.lead{font-size:17.5px;line-height:1.8;color:var(--ink-2);max-width:900px}
.lead.center{margin-inline:auto}
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt24{margin-top:24px}.mt32{margin-top:32px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.grid--tight{gap:16px}

/* ============================================================
   4. Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-size:15px;font-weight:750;
  border:1px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;
  text-decoration:none;line-height:1;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-primary{background:var(--grad);color:#04121c;box-shadow:0 10px 30px rgba(34,211,238,.28)}
.btn-primary:hover{color:#04121c;box-shadow:0 14px 40px rgba(34,211,238,.42)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09);color:#fff;border-color:var(--accent)}
.btn-outline{background:transparent;color:var(--accent);border-color:rgba(34,211,238,.5)}
.btn-outline:hover{background:rgba(34,211,238,.12);color:#8ff3ff}
.btn-full{width:100%}
.btn-lg{padding:17px 34px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.center{justify-content:center}

/* ============================================================
   5. Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(7,11,20,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.brand{display:flex;flex-direction:column;gap:1px;text-decoration:none;flex:0 0 auto}
.brand__name{font-size:19px;font-weight:850;letter-spacing:.02em;color:#fff;line-height:1.1}
.brand__name em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand__tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.nav{margin-inline-start:auto}
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav li a{display:block;padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:650;
  white-space:nowrap;color:var(--ink-2);text-decoration:none;transition:.16s}
.nav li a:hover,.nav li.current-menu-item > a,.nav li.current_page_item > a{color:#fff;background:rgba(255,255,255,.07)}
.header-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.lang-switch{display:flex;gap:2px;align-items:center}
/* the in-menu switcher is only rendered inside the mobile hamburger panel */
.lang-switch--mobile{display:none}
.lang-switch a{padding:5px 9px;border-radius:8px;font-size:12.5px;font-weight:750;
  color:var(--muted);text-transform:uppercase;text-decoration:none}
.lang-switch a.active,.lang-switch a:hover{background:rgba(34,211,238,.14);color:var(--accent)}
.header-cta{padding:11px 20px;font-size:14px}
.menu-toggle{
  display:none;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.menu-toggle span{display:block;width:20px;height:2px;background:#fff;position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}

/* ---- nav dropdown: Solutions (3 core packages) / Products (8 series) ----
   Desktop = hover / keyboard focus-within. Below the header collapse point the
   same markup becomes an accordion driven by theme.js (see §12 there). */
.nav li{position:relative}
.nav .menu-item-has-children > a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-inline-start:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);vertical-align:middle;opacity:.65
}
.nav .sub-menu{
  position:absolute;top:100%;inset-inline-start:0;min-width:300px;max-width:370px;
  flex-direction:column;align-items:stretch;gap:2px;
  background:#0b1220;border:1px solid var(--line-2);border-radius:14px;padding:8px;
  margin-top:8px;box-shadow:var(--shadow);z-index:960;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s
}
.nav .sub-menu li{width:100%}
.nav .sub-menu li a{
  padding:10px 13px;border-radius:9px;font-size:13.5px;line-height:1.45;
  white-space:normal;color:var(--ink-2)
}
.nav .sub-menu li a:hover,.nav .sub-menu li.current-menu-item > a{background:rgba(34,211,238,.12);color:#fff}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0)
}

/* ============================================================
   6. Hero
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding:96px 0 86px;
  background-color:#070b14;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(7,11,20,.65);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1;
  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:58px 58px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 20%,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000 20%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2}
.hero__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{font-size:18px;color:var(--ink-2);max-width:620px;margin-bottom:8px}
.hero__lead{font-size:16px;line-height:1.75;color:var(--ink-2);max-width:680px;margin:0 0 30px;opacity:.9}
.hero__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,11,20,.62))}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.03)}
.kpis div{padding:20px 18px;border-inline-end:1px solid var(--line)}
.kpis div:last-child{border-inline-end:0}
.kpis b{display:block;font-size:23px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpis span{font-size:12.5px;color:var(--muted)}

/* ============================================================
   7. Cards
   ============================================================ */
.card{
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;position:relative;overflow:hidden;transition:.2s;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad);
  opacity:0;transition:opacity .2s}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card--flat{padding:0;overflow:hidden}
.card__ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(34,211,238,.28);
  color:var(--accent);font-size:20px;font-weight:800;margin-bottom:16px;
}
.card__body{padding:22px}
.card--flat img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line)}
.pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.28);
  border-radius:999px;padding:4px 12px;margin-bottom:12px}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding-inline-start:30px;margin-bottom:13px;color:var(--ink-2)}
.checklist li::before{
  content:"";position:absolute;inset-inline-start:0;top:8px;width:16px;height:16px;border-radius:5px;
  background:var(--grad);box-shadow:0 0 14px rgba(34,211,238,.45)
}
.checklist li::after{content:"";position:absolute;inset-inline-start:5px;top:12px;width:5px;height:9px;
  border:solid #04121c;border-width:0 2px 2px 0;transform:rotate(45deg)}
.metric{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.metric__n{font-size:13px;font-weight:850;color:var(--accent);border:1px solid rgba(34,211,238,.35);
  border-radius:8px;padding:3px 9px;flex:0 0 auto;background:rgba(34,211,238,.08)}

/* ============================================================
   8. CTA band
   ============================================================ */
.cta-band{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  padding:38px 40px;border-radius:var(--radius-lg);border:1px solid var(--line-2);
  background:linear-gradient(120deg,rgba(34,211,238,.14),rgba(99,102,241,.16)),var(--bg-3);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.cta-band::after{content:"";position:absolute;inset-inline-end:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.30),transparent 68%)}
.cta-band h2{margin:0 0 .3em;position:relative}
.cta-band p{margin:0;max-width:640px;position:relative;color:var(--ink-2)}
.cta-band > a{position:relative;flex:0 0 auto}

/* ============================================================
   9. Forms (CF7 friendly)
   ============================================================ */
.form-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow)}
.form-card .wpcf7{margin:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full,.wpcf7 .field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:750;color:var(--ink-2);letter-spacing:.02em}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=file],select,textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:15px;background:rgba(255,255,255,.04);color:var(--ink);transition:.16s
}
input::placeholder,textarea::placeholder{color:#64748b}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:rgba(34,211,238,.07);outline:none}
textarea{min-height:118px;resize:vertical}
input[type=file]{padding:11px;font-size:14px}
input[type=submit],button[type=submit],.wpcf7-submit{
  grid-column:1/-1;padding:15px 30px;border:0;border-radius:999px;cursor:pointer;
  background:var(--grad);color:#04121c;font-size:15.5px;font-weight:800;width:100%;
  transition:transform .16s,box-shadow .16s
}
input[type=submit]:hover,.wpcf7-submit:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(34,211,238,.4)}
.wpcf7-not-valid-tip{color:#fca5a5;font-size:12.5px;margin-top:4px}
.wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:13px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:var(--bg-4);color:var(--ink);font-size:14px}
.wpcf7 form.sent .wpcf7-response-output{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.1)}
.wpcf7 form.invalid .wpcf7-response-output{border-color:rgba(248,113,113,.55);background:rgba(248,113,113,.12)}
.wpcf7-spinner{filter:invert(1) hue-rotate(180deg)}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.info-list li:last-child{border-bottom:0}
.info-list .ico{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(34,211,238,.26);font-size:17px}
.info-list b{display:block;color:#fff;font-size:13.5px;margin-bottom:2px}
.info-list span{color:var(--ink-2);font-size:15px}
.notice{border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:var(--radius-sm);
  background:var(--bg-3);padding:15px 18px;color:var(--ink-2);font-size:14.5px}

/* ============================================================
   10. WooCommerce — solutions catalogue (display only)
   ============================================================ */
.cat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 30px}
.cat-chip{display:flex;flex-direction:column;gap:5px;padding:17px 19px;background:var(--bg-3);
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:.2s}
.cat-chip:hover{border-color:var(--accent);background:var(--bg-4);transform:translateY(-3px);box-shadow:var(--glow)}
.cat-chip__name{font-size:14.5px;font-weight:750;color:#fff;line-height:1.35}
.cat-chip__count{font-size:12.5px;color:var(--muted)}
.cat-intro{margin:0 0 28px;color:var(--ink-2);font-size:16px;line-height:1.8;max-width:1000px}
/* Series cards: cover image on top of each cat-chip (8 series on /solutions/) */
.cat-chip--img{padding:0;overflow:hidden}
.cat-chip__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bg-4);
  border-bottom:1px solid var(--line)}
.cat-chip--img .cat-chip__name{padding:0 19px;margin-top:15px}
.cat-chip--img .cat-chip__count{padding:0 19px 17px}
/* Series archive cover band */
.cat-cover{padding:26px 0 2px}
.cat-cover__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;
  border:1px solid var(--line);background:var(--bg-2)}

.woocommerce .woocommerce-breadcrumb{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.woocommerce .woocommerce-breadcrumb a{color:var(--ink-2)}
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:22px;
  margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  margin:0 !important;width:auto !important;padding:0 0 18px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:.2s;position:relative
}
.woocommerce ul.products li.product::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--grad);opacity:0;transition:.2s;z-index:3}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.woocommerce ul.products li.product:hover::before{opacity:1}
.woocommerce ul.products li.product img{aspect-ratio:4/3;object-fit:cover;width:100%;margin:0 0 14px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px;font-weight:750;padding:0 18px;color:#fff;height:auto;line-height:1.4;margin-bottom:6px}
.woocommerce ul.products li.product .price{display:none !important}
.woocommerce ul.products li.product a.btn{margin:auto 18px 0;width:calc(100% - 36px)}
.woocommerce .woocommerce-result-count{color:var(--muted);font-size:14px}
.woocommerce .woocommerce-ordering select{padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font-size:14px;background:var(--bg-3);color:var(--ink)}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center;padding:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  display:grid;place-items:center;min-width:42px;height:42px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--bg-3)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--grad);color:#04121c;border-color:transparent}

/* solution single */
.single-product div.product{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.single-product div.product .woocommerce-product-gallery{margin:0;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2)}
.single-product div.product .summary{margin:0}
.single-product div.product .product_title{font-size:clamp(24px,3vw,36px);margin-bottom:14px}
.single-product div.product .price{display:none !important}
.single-product div.product .woocommerce-product-details__short-description{color:var(--ink-2);font-size:17px}
.single-product .jftc-quote{margin:22px 0 0}
.single-product .jftc-spec-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.single-product .jftc-spec-table th,.single-product .jftc-spec-table td{
  border:1px solid var(--line);padding:11px 14px;text-align:start;vertical-align:top}
.single-product .jftc-spec-table th{background:rgba(255,255,255,.04);width:32%;color:var(--ink-2);font-weight:700}
.single-product .jftc-spec-table td{color:var(--ink)}
.woocommerce-tabs ul.tabs{list-style:none;padding:0;display:flex;gap:8px;border-bottom:1px solid var(--line);margin:0 0 24px}
.woocommerce-tabs ul.tabs li a{display:block;padding:11px 17px;font-weight:750;color:var(--muted)}
.woocommerce-tabs ul.tabs li.active a{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.woocommerce-tabs .panel{color:var(--ink-2)}
.related.products,.upsells.products{margin-top:56px}
.related.products > h2,.upsells.products > h2{margin-bottom:24px}

/* anchor TOC on solution pages */
.jftc-toc{position:sticky;top:calc(var(--header-h) + 14px);z-index:60;
  display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;margin:0 0 30px;
  background:rgba(12,18,32,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--radius)}
.jftc-toc a{font-size:13.5px;font-weight:700;color:var(--ink-2);padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid transparent}
.jftc-toc a:hover,.jftc-toc a.is-active{color:#04121c;background:var(--grad);border-color:transparent}

/* video + pdf gate */
.jftc-video{border:1px dashed var(--line-2);border-radius:var(--radius);aspect-ratio:16/9;
  display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));padding:20px}
.jftc-faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:26px 0}
.jftc-faq__item{border-bottom:1px solid var(--line)}
.jftc-faq__item:last-child{border-bottom:0}
.jftc-faq__q{cursor:pointer;padding:16px 20px;font-weight:750;color:#fff;display:flex;
  justify-content:space-between;gap:16px;align-items:center;background:rgba(255,255,255,.02)}
.jftc-faq__q::after{content:"+";color:var(--accent);font-size:20px;font-weight:400;flex:0 0 auto}
.jftc-faq__item.open .jftc-faq__q::after{content:"\2013"}
.jftc-faq__a{display:none;padding:0 20px 18px;color:var(--ink-2);font-size:15px}
.jftc-faq__item.open .jftc-faq__a{display:block}
.jftc-pdf{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding:22px 24px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(139,92,246,.14),rgba(34,211,238,.10)),var(--bg-3);margin:26px 0}

/* ============================================================
   11. Case filter chips
   ============================================================ */
.filter-bar{display:flex;flex-wrap:wrap;gap:22px;margin:0 0 30px}
.filter-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-group > b{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-inline-end:4px}
.filter-chip{font-size:13.5px;font-weight:700;color:var(--ink-2);padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);cursor:pointer;transition:.16s}
.filter-chip:hover{color:#fff;border-color:var(--line-2)}
.filter-chip.is-active{color:#04121c;background:var(--grad);border-color:transparent}
.case-card[hidden]{display:none}
/* case cards — region + solution-line tags (global case pool, doc 2026-10-15) */
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.case-tags .pill{margin-bottom:0}
.pill--alt{color:var(--ink-2);background:rgba(255,255,255,.05);border-color:var(--line-2)}
.case-card .btn-outline{font-size:13.5px;padding:11px 18px}

/* ============================================================
   12. Partners + testimonials
   ============================================================ */
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.quote-card{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;position:relative}
.quote-card::before{content:"\201C";position:absolute;inset-inline-start:22px;top:6px;font-size:64px;
  line-height:1;color:rgba(34,211,238,.22);font-family:Georgia,serif}
.quote-card p{font-size:16.5px;color:var(--ink);position:relative;margin-top:26px}
.quote-card cite{display:block;font-style:normal;font-size:13.5px;color:var(--accent);font-weight:750}

/* ============================================================
   13. Footer
   ============================================================ */
.site-footer{background:#05080f;border-top:1px solid var(--line);margin-top:0;padding:64px 0 26px}
.site-footer .cols{display:grid;grid-template-columns:1.35fr 1fr 1.15fr;gap:44px}
.site-footer h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 20px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.site-footer p{font-size:14.5px;color:var(--ink-2)}
.site-footer .brand{display:inline-flex;flex-direction:column;gap:7px}
.site-footer .brand__name{font-size:20px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:10px}
.site-footer ul li a{color:var(--ink-2);font-size:14.5px}
.site-footer ul li a:hover{color:var(--accent)}
/* certification badges under the footer intro — corporate credibility strip */
.site-footer .foot-certs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.site-footer .foot-certs li{margin-bottom:0;padding:6px 12px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.03);color:var(--ink-2);
  font-size:11.5px;font-weight:800;letter-spacing:.1em}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:14.5px;color:var(--ink-2)}
.foot-contact .ico{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:14px}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;
  flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0}
.foot-legal a{font-size:13.5px;color:var(--muted)}
.copyright{font-size:13.5px;color:var(--muted)}

/* ============================================================
   14. Floating conversion layer (CTA / AI chat / WhatsApp / exit)
   ============================================================ */
.wa-fab{position:fixed;inset-inline-end:18px;bottom:18px;z-index:990;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:0;box-shadow:0 10px 26px rgba(0,0,0,.5);font-size:23px;transition:transform .16s;color:#fff}
.fab:hover{transform:scale(1.08)}
.fab-wa{background:#25d366}
.fab-ai{background:var(--grad);color:#04121c;font-size:16px;font-weight:900;letter-spacing:.02em}
.jftc-panel{position:fixed;inset-inline-end:18px;bottom:84px;z-index:991;width:342px;
  max-width:calc(100vw - 32px);background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--radius);box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden}
.jftc-panel.open{display:flex}
.jftc-panel__head{background:linear-gradient(115deg,rgba(34,211,238,.20),rgba(99,102,241,.24));
  padding:13px 16px;font-size:14px;font-weight:800;color:#fff;display:flex;
  justify-content:space-between;align-items:center}
.jftc-panel__head .x{cursor:pointer;opacity:.85;font-size:20px;line-height:1;background:none;border:0;color:#fff}
#jftc-msgs{height:288px;overflow:auto;padding:14px;background:var(--bg);font-size:13.5px;line-height:1.6}
#jftc-msgs .m{margin:0 0 10px;max-width:88%;padding:9px 12px;border-radius:11px;white-space:pre-wrap}
#jftc-msgs .bot{background:var(--bg-4);border:1px solid var(--line);color:var(--ink);border-start-start-radius:3px}
#jftc-msgs .me{background:rgba(34,211,238,.18);color:#fff;margin-inline-start:auto;border-start-end-radius:3px}
#jftc-chips{display:flex;flex-wrap:wrap;gap:6px;padding:9px 11px 3px;background:var(--bg)}
#jftc-chips button{font-size:12px;border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.08);
  color:var(--accent);border-radius:14px;padding:4px 11px;cursor:pointer}
#jftc-in{display:flex;border-top:1px solid var(--line);background:var(--bg-3)}
#jftc-in input{flex:1;border:0;background:transparent;padding:12px 13px;font-size:13.5px;color:var(--ink)}
#jftc-in button{background:var(--grad);color:#04121c;border:0;padding:0 18px;font-weight:800;cursor:pointer;font-size:14px}
.jftc-panel__foot{font-size:11.5px;color:var(--muted);padding:8px 13px;background:var(--bg-2);text-align:center}
.jftc-panel__foot a{color:var(--accent)}
/* mobile bottom CTA bar */
.jftc-bar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:995;gap:10px;padding:10px 12px;
  background:rgba(7,11,20,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-2)}
.jftc-bar .btn{flex:1;padding:14px 12px;font-size:14.5px}
/* PC right rail */
.jftc-rail{position:fixed;inset-inline-end:0;top:50%;transform:translateY(-50%);z-index:980;
  display:flex;flex-direction:column;gap:8px}
.jftc-rail a,.jftc-rail button{display:flex;align-items:center;gap:9px;padding:11px 15px;font-size:13.5px;
  font-weight:750;background:var(--bg-3);border:1px solid var(--line);border-inline-end:0;
  border-start-start-radius:10px;border-end-start-radius:10px;color:var(--ink-2);cursor:pointer;text-decoration:none}
.jftc-rail a:hover,.jftc-rail button:hover{background:var(--grad);color:#04121c;border-color:transparent}
/* exit intent modal */
.jftc-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,6,12,.76);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jftc-modal.open{display:flex}
.jftc-modal__box{width:100%;max-width:520px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow);position:relative;max-height:92vh;overflow:auto}
.jftc-modal__box h3{margin-bottom:8px}
.jftc-modal__x{position:absolute;inset-inline-end:14px;top:12px;background:none;border:0;color:var(--muted);
  font-size:24px;cursor:pointer;line-height:1}
.jftc-modal__box .form-grid{grid-template-columns:1fr}

/* ============================================================
   15. Content pages
   ============================================================ */
.entry{max-width:none;margin:0}
.entry h2{margin-top:1.5em}
.entry h3{margin-top:1.25em}
.entry table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.entry table th,.entry table td{border:1px solid var(--line);padding:11px 14px;text-align:start}
.entry table th{background:rgba(255,255,255,.04);color:var(--ink-2)}
.page-hero{padding:64px 0 44px;border-bottom:1px solid var(--line);
  background:radial-gradient(900px 380px at 15% -30%,rgba(59,130,246,.24),transparent 62%),var(--bg-2)}
.page-hero h1{margin-bottom:12px}
.breadcrumbs{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.breadcrumbs a{color:var(--ink-2)}
/* Project / case cover image shown under the page hero (only when a featured image exists) */
.case-cover{padding:34px 0 0}
.case-cover__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;
  border:1px solid var(--line);background:var(--bg-2)}

/* ============================================================
   15b. Layout tuning — full-bleed shell with side gutters
   ============================================================ */

/* WooCommerce builds its own container (#primary.content-area) and does not
   reuse .wrap, so the shop / single-product pages used to run edge to edge.
   Give them the exact same shell as every other page. */
#primary.content-area{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* Core Solutions (home) — 4 equal-height cards, so the "Solution Overview"
   link sits on one baseline instead of floating with the text length. */
.grid.g-4 > .card{display:flex;flex-direction:column}
.grid.g-4 > .card > .pill{margin-top:auto}

/* Partner wall — readable labels instead of the old dashed placeholder text */
.logo-wall span{display:grid;place-items:center;height:88px;padding:0 14px;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--ink);background:rgba(255,255,255,.045);
  font-size:14px;font-weight:750;letter-spacing:0;text-transform:none;line-height:1.35}

/* Contact page — corporate pattern:
   4 contact-method tiles on top, then a wide inquiry-form card with a
   narrower "How we respond" panel beside it (both stretched equal height). */
.contact-tiles .contact-tile{display:flex;flex-direction:column}
.contact-tile h3{margin:0 0 8px;font-size:17px}
.contact-tile__v{margin:0 0 12px;color:#fff;font-weight:650;font-size:15.5px;line-height:1.55;word-break:break-word}
.contact-tile__v a{color:#fff}
.contact-tile__v a:hover{color:var(--accent)}
.contact-tile__n{margin:auto 0 0;font-size:13.5px;color:var(--muted);line-height:1.62}
.contact-panel{padding:30px;display:flex;flex-direction:column}
.contact-panel > h3{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:19px}
.contact-panel .checklist{flex:1;margin:0}
.contact-panel .form-card{flex:1;padding:0;border:0;background:transparent;box-shadow:none}
.contact-split{grid-template-columns:1.45fr 1fr;gap:32px;align-items:stretch}
/* How We Respond unified module (2026-10-14) */
.how-we-respond{margin-top:34px;padding:32px 28px;background:var(--panel,#0e1726);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:18px}
.how-we-respond>h2{margin:0 0 22px;font-size:25px}
.how-we-respond .contact-tiles{margin-top:0}


/* ============================================================
   16. Responsive
   ============================================================ */
@media (max-width:1180px){
  .logo-wall{grid-template-columns:repeat(4,1fr)}
  .jftc-rail{display:none}
}
@media (max-width:1024px){
  .hero{padding:76px 0 66px}
  .hero__inner{grid-template-columns:1fr;gap:34px}
  .g-4,.g-3{grid-template-columns:repeat(2,1fr)}
  .cat-strip{grid-template-columns:repeat(2,1fr)}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr) !important}
  .single-product div.product{grid-template-columns:1fr;gap:28px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpis div:nth-child(2n){border-inline-end:0}
  .kpis div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
}
/* Header width budget. The header shares the 1240px .wrap with the page content,
   so the row must fit brand + nowrap nav + 5-language switcher + CTA. Measured
   per-locale single-line totals (including the short header CTA for every
   locale): en 1171 / ar 974 / fr 1243 / pt 1218 / es 1246 px, longest = Spanish
   — fits the ~1316px the shell can use at a 1440 viewport. Hence: tighten the
   row below 1660px, and collapse to the hamburger below 1400px.
   Nav labels were shortened (1–2 words) to buy this space — see inc/strings.php. */
@media (max-width:1660px){
  .header-inner{gap:14px}
  .nav ul{gap:2px}
  .nav li a{padding:9px 10px;font-size:14px}
  .lang-switch a{padding:5px 7px;font-size:12px}
}
/* Header collapse: below this the full nav cannot fit, so switch to the hamburger. */
@media (max-width:1400px){
  .menu-toggle{display:inline-flex}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;margin:0;background:#080e1a;
    border-bottom:1px solid var(--line-2);padding:16px;display:none;box-shadow:var(--shadow);
    max-height:calc(100vh - var(--header-h));overflow:auto;z-index:899}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav li a{padding:14px 15px;font-size:15.5px}
  /* dropdowns become inline accordions inside the hamburger panel */
  .nav .menu-item-has-children > a::after{float:inline-end;margin-top:7px}
  .nav .menu-item-has-children.is-open > a::after{transform:rotate(-135deg)}
  .nav .sub-menu{
    position:static;display:none;min-width:0;max-width:none;
    opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;border-radius:0;box-shadow:none;
    padding:2px 0 6px;margin:0;margin-inline-start:14px
  }
  .nav .menu-item-has-children.is-open > .sub-menu{display:flex}
  .nav .sub-menu li a{padding:11px 14px;font-size:14.5px}
  .header-cta{display:none}
  .lang-switch--desk{display:none}
  .lang-switch--mobile{display:flex}
  .lang-switch{padding:8px;border-top:1px solid var(--line);margin-top:8px}
  .lang-switch a{padding:8px 12px;font-size:14px}
}
@media (max-width:640px){
  .section{padding:54px 0}
  .wrap{padding:0 17px}
  #primary.content-area{padding:0 17px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .cat-strip{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:1fr !important}
  .form-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .kpis div{border-inline-end:0;border-bottom:1px solid var(--line)}
  .kpis div:last-child{border-bottom:0}
  .site-footer .cols{grid-template-columns:1fr}
  .cta-band{padding:26px 22px;flex-direction:column;align-items:stretch}
  .cta-band .btn{width:100%}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .hero h1{font-size:clamp(27px,8vw,34px)}
  .jftc-bar{display:flex}
  .wa-fab{bottom:78px}
  .jftc-panel{bottom:146px}
  .jftc-toc{border-radius:var(--radius-sm);padding:10px}
  .jftc-toc a{font-size:12.5px;padding:6px 10px}
}

/* ============================================================
   17. RTL
   ============================================================ */
body.is-rtl{direction:rtl}
body.is-rtl .nav{margin-inline-start:auto;margin-inline-end:0}
body.is-rtl .kpis div:last-child{border-inline-end:0}
body.is-rtl .jftc-faq__q::after{margin-inline-start:0}
body.is-rtl ul.products li.product a.btn,body.is-rtl .card__ico{margin-inline:auto}

/* ============================================================
   18. Print / a11y
   ============================================================ */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:-9999px}
.skip-link:focus{inset-inline-start:12px;top:12px;z-index:999;background:var(--bg-3);padding:10px 16px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   19. 2026-10-12 — full-bleed header/footer + language dropdown
   ------------------------------------------------------------
   Header and footer now span the viewport so the brand sits at the
   far left and the language module at the far right; body sections
   keep the 1240px reading container.
   ============================================================ */
.site-header .header-inner,
.site-footer .wrap{max-width:var(--wrap);padding-inline:22px}

/* desktop: 3-zone header (brand | nav | actions) reads more balanced */
@media (min-width:1401px){
  .site-header .nav{margin-inline:auto}
  body.is-rtl .site-header .nav{margin-inline:auto}
}

/* footer re-balance: corporate 4-column read on desktop
   (About | Solutions | Company | Contact).
   Scoped to desktop only: an unscoped rule here sits *after* the responsive
   blocks above and would silently override the <=1180 / <=640 footer stacks.
   minmax() widths that cannot shrink pushed the page to 872px on a 390px
   phone once before — see section 21. */
@media (min-width:1181px){
  .site-footer .cols{
    grid-template-columns:minmax(0,1.34fr) minmax(0,.82fr) minmax(0,.86fr) minmax(0,1.18fr);
    gap:clamp(26px,3.4vw,62px);align-items:start}
}
.site-footer .cols > div:first-child p{max-width:46ch}
.site-footer .foot-bottom{margin-top:52px;padding-top:22px}
.site-footer .copyright,.site-footer .foot-legal a{color:var(--ink-2)}

/* ---- language switcher -> dropdown (same pattern as the LED site) ---- */
.header-right .lang-switch{position:relative;display:inline-flex;align-items:center;gap:0;padding:0;border:0;margin:0}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;background:transparent;
  border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;font-weight:700;line-height:1;
  cursor:pointer;white-space:nowrap}
.lang-btn:hover,.lang-switch.open .lang-btn{border-color:var(--accent);color:var(--accent)}
.lang-btn svg{opacity:.75;flex:0 0 auto}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:178px;margin:0;padding:6px;
  list-style:none;background:#0a1220;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);display:none;z-index:1200;text-align:start}
.lang-switch.open .lang-menu{display:block}
.lang-menu li{margin:0}
.lang-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.lang-menu a:hover,.lang-menu a.is-active{background:rgba(34,211,238,.12);color:var(--accent)}
/* the header link rules force uppercase — native language names must not be */
.lang-menu a{text-transform:none;letter-spacing:0;font-weight:600;border:0;background:none}

/* <picture> wrapping (WebP delivery) must not change layout: the element is
   inline by default, which would shrink the box and break the grid sizing. */
.hero__media picture,.card--flat picture{display:block;width:100%}

/* ============================================================
   20. 2026-10-13 — wpautop artifacts inside layout containers
   ------------------------------------------------------------
   Page bodies are authored HTML that already carries explicit <p>
   tags, yet WordPress still runs wpautop() over them. On the About
   page wpautop turns the newline after every <img> into a <br />,
   and inside a grid container a <br /> is blockified into a grid
   item — so the 4 photos landed one-per-row in column 1 and the
   right half of the intended 2x2 grid stayed empty. Elsewhere the
   same pass leaves orphan </p> tags, which browsers repair into
   empty <p> elements (extra vertical gaps inside the cards).
   The stored markup is correct, so neutralise both artifacts here.
   ------------------------------------------------------------ */
.grid > br{display:none}
.grid > p:empty{display:none}
.case-card > p:empty,
.case-card .card__body > p:empty{display:none}

/* keep the About company-photo grid a perfectly uniform 2x2 */
.grid.g-2 > img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px}

/* ============================================================
   21. 2026-10-13 — footer + CTA band responsive stack
   ------------------------------------------------------------
   Declared last so it wins over every earlier .site-footer .cols
   rule. Desktop keeps the corporate 4-column read; tablet drops to
   a tidy 2x2; phone stacks in one column. Previously the footer
   kept desktop min-widths at every size, which pushed the page to
   872px on a 390px screen.
   ============================================================ */
/* site-wide CTA band sits between <main> and <footer> */
.footer-cta{padding:70px 0 6px}
.footer-cta .cta-band .btn-row{display:flex;flex-wrap:wrap;gap:14px;position:relative}

@media (max-width:1180px){
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:34px 40px}
  .footer-cta{padding:56px 0 4px}
  .contact-split{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .site-footer .cols{grid-template-columns:1fr;gap:30px}
  .site-footer{padding:46px 0 22px}
  .site-footer .foot-bottom{margin-top:34px}
  .footer-cta{padding:44px 0 2px}
  .footer-cta .cta-band .btn-row{width:100%}
}

/* ============================================================
   22. 2026-10-13 — header must fit a phone (no horizontal scroll)
   ------------------------------------------------------------
   .brand and .header-right are both flex:0 0 auto, so the header
   row could not shrink below brand(220) + gap(20) + actions(148)
   = 388px + 44px padding. The 220px came from the brand tagline
   "INTELLIGENT SYSTEM SOLUTIONS", a long uppercase letterspaced
   line; on a 390/360px phone that pushed the page 24px wide and
   produced horizontal scroll on every page. Drop the tagline on
   phones, let the brand shrink, and tighten the row.
   ============================================================ */
@media (max-width:640px){
  .site-header .header-inner{gap:10px;padding-inline:15px}
  .site-header .brand{flex:0 1 auto;min-width:0}
  .site-header .brand__name{font-size:18px}
  .site-header .brand__tag{display:none}
  .site-header .header-right{gap:8px}
}

/* ============================================================
   23. Product detail — "At a Glance" panel + hero polish (v2.1.0)
   ============================================================ */
/* At a Glance: Woo-shop-style spec box in the summary column */
.single-product .jftc-glance{margin:22px 0 0;padding:18px 20px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--radius)}
.single-product .jftc-glance__h{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.single-product .jftc-glance .jftc-spec-table{margin:0}
.single-product .jftc-glance .jftc-spec-table th{width:38%;background:transparent;color:var(--ink-2);font-weight:700}
.single-product .jftc-glance .jftc-spec-table td{color:var(--ink)}
/* gallery: keep the hero image tidy inside its framed box */
.single-product div.product .woocommerce-product-gallery__image img{display:block;width:100%;height:auto}

/* ============================================================
   Products flyout (3rd level) — series -> its products
   ============================================================ */
@media (min-width:1401px){
  .nav .sub-menu .menu-item--series > a{
    display:flex;align-items:center;justify-content:space-between;gap:12px
  }
  .nav .sub-menu .menu-item--series > a::after{
    float:none;margin:0;transform:rotate(-45deg) translate(0,0);opacity:.5
  }
  /* the flyout opens to the side of the series row */
  .nav .sub-menu .sub-menu--products{
    top:-9px;inset-inline-start:100%;margin-inline-start:8px;margin-top:0;
    min-width:320px;max-width:380px;z-index:961
  }
  /* invisible bridge: keeps the hover alive while the pointer crosses the gap */
  .nav .sub-menu .sub-menu--products::before{
    content:"";position:absolute;inset-inline-start:-14px;top:0;bottom:0;width:14px
  }
  .nav .sub-menu--products li a{font-size:13px;line-height:1.4}
  .nav .sub-menu--products li.menu-item--all > a{
    color:var(--cyan,#22d3ee);font-weight:600;border-bottom:1px solid var(--line);
    border-radius:9px 9px 0 0;margin-bottom:4px
  }
}
@media (max-width:1400px){
  .nav .sub-menu--products{
    margin-inline-start:12px;padding-inline-start:10px;
    border-inline-start:1px solid var(--line);margin-bottom:4px
  }
  .nav .sub-menu--products li a{font-size:13.5px;padding:9px 12px;color:var(--ink-2)}
  .nav .sub-menu--products li.menu-item--all > a{color:var(--cyan,#22d3ee);font-weight:600}
}

/* ---------------------------------------------------------------
   Article tables — horizontal scroll on narrow screens
   Stops wide spec tables from collapsing into one-word-per-line rows.
   --------------------------------------------------------------- */
@media (max-width:760px){
  .entry .tbl-scroll{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:20px 0;border:1px solid var(--line);border-radius:10px;
    background:rgba(255,255,255,.02)
  }
  .entry .tbl-scroll > table{margin:0;min-width:680px;border:0}
  .entry .tbl-scroll > table th:first-child,
  .entry .tbl-scroll > table td:first-child{
    position:sticky;inset-inline-start:0;background:var(--bg-2);z-index:1
  }
  .entry .tbl-scroll::-webkit-scrollbar{height:6px}
  .entry .tbl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
  .entry .tbl-scroll::after{
    content:"Swipe horizontally to see the full table";
    position:sticky;inset-inline-start:0;display:block;
    padding:7px 12px;font-size:12px;color:var(--ink-2);
    border-top:1px solid var(--line);background:var(--bg-2)
  }
}