/*
Theme Name: SANTAN
Theme URI: https://www.santan.com.sg
Author: SANTAN
Author URI: https://www.santan.com.sg
Description: 高端工业过程仪表 B2B 企业主题 —— 为 SANTAN 精密流量、压力、液位、温度、阀门与分析仪表分销商定制。深海军蓝 + 金色的工业质感设计，内置完整的中文自定义器、产品与行业解决方案展示、WooCommerce 兼容。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: santan
Tags: business, industrial, corporate, custom-colors, custom-logo, custom-menu, featured-images, sticky-post, translation-ready, e-commerce
*/

/* ============================================================
   SANTAN Design System
   ============================================================ */
:root {
    /* Brand palette (overridden by Customizer via wp_head inline style) */
    --navy:        #0B1E3B;   /* primary dark surface */
    --navy-deep:   #081527;   /* top bar / footer bottom / deepest */
    --navy-800:    #0F2A50;   /* elevated dark card / category strip */
    --navy-700:    #163662;   /* borders / dividers on dark */

    --gold:        #F5C044;   /* primary accent (lighter amber, BOTWORKS-family) */
    --gold-light:  #FBD873;   /* highlight / hover */
    --gold-dark:   #A5771D;   /* pressed / deep accent / links-on-light (kept dark for contrast) */
    --on-gold:     #0B1E3B;   /* text/icons on a gold fill (navy — 9.4:1 on --gold) */

    --bg:          #FFFFFF;   /* page background */
    --bg-alt:      #F4F6F9;   /* light section background */
    --card-bg:     #FFFFFF;
    --border:      #E4E8EF;

    --heading:     #10233F;   /* headings on light */
    --text:        #55627A;   /* body on light */
    --text-muted:  #8892A4;
    --text-on-dark:      #FFFFFF;
    --text-on-dark-muted:#AAB6C9;

    --link:        var(--gold-dark);
    --link-hover:  var(--gold);

    /* Typography */
    --font-heading: "Poppins", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-body:    "Inter", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --fs-base: 16px;
    --lh-base: 1.7;

    /* Shape */
    --radius:       6px;
    --radius-sm:    4px;
    --radius-lg:    10px;
    --shadow-sm: 0 1px 3px rgba(16,35,63,.06), 0 1px 2px rgba(16,35,63,.04);
    --shadow:    0 8px 30px rgba(16,35,63,.08);
    --shadow-lg: 0 20px 50px rgba(16,35,63,.14);
    --shadow-gold: 0 10px 26px rgba(245,192,68,.40);

    /* Layout */
    --container: 1240px;
    --gutter: 24px;
    --section-pad: 96px;

    --ease: cubic-bezier(.22,.61,.36,1);
    --header-h: 76px;
}

/* ------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--link-hover); }
ul,ol { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    color: var(--heading);
    margin: 0 0 .5em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
}
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--navy); color: var(--text-on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: #fff; }
.text-center { text-align: center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Section heading block */
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow {
    display:inline-block; font-family: var(--font-heading); font-weight:600;
    font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color: var(--gold);
    margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: 16px; }
.section-head p { color: var(--text); font-size: 1.05rem; }
.section-head .rule { width: 64px; height: 3px; background: var(--gold); margin: 18px auto 0; border-radius: 3px; }
.section--dark .section-head p { color: var(--text-on-dark-muted); }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-heading); font-weight: 600; font-size: .95rem;
    line-height: 1; letter-spacing: .01em;
    padding: 15px 30px; border-radius: var(--radius-sm);
    border: 1.5px solid transparent; cursor: pointer;
    transition: all .25s var(--ease); white-space: nowrap;
}
.btn svg { width: 1em; height: 1em; }
.btn--primary { background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-gold); }
.btn--primary:hover { background: var(--gold-dark); color: var(--on-gold); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(245,192,68,.45); }
.btn--outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--outline:hover { background: var(--gold); color: var(--on-gold); transform: translateY(-2px); }
.btn--light { background:#fff; color: var(--navy); }
.btn--light:hover { background: var(--gold); color: var(--on-gold); transform: translateY(-2px); }
.btn--ghost-light { background: transparent; color:#fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background:#fff; color: var(--navy); border-color:#fff; }
.btn--lg { padding: 17px 38px; font-size: 1rem; }
.btn--block { width:100%; justify-content:center; }
.arrow-link {
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-heading);
    font-weight:600; font-size:.9rem; color: var(--gold);
}
.arrow-link svg { transition: transform .25s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position: relative; z-index: 100; }

/* Top bar */
.topbar { background: var(--navy-deep); color: #cdd6e4; font-size: .82rem; }
.topbar__inner { display:flex; align-items:center; justify-content:flex-end; gap: 26px; min-height: 40px; }
.topbar__left { margin-right:auto; color:#9fb0c6; letter-spacing:.02em; }
.topbar a { color:#cdd6e4; display:inline-flex; align-items:center; gap:7px; }
.topbar a:hover { color: var(--gold-light); }
.topbar__item svg { width:14px; height:14px; color: var(--gold); flex:0 0 auto; }
.lang-switch { position:relative; }
.lang-switch > span { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

/* Main nav bar */
.navbar { background:#fff; border-bottom:1px solid var(--border); transition: box-shadow .3s var(--ease), padding .3s var(--ease); }
.navbar__inner { display:flex; align-items:center; gap: 28px; min-height: var(--header-h); }
.brand { display:flex; align-items:center; gap: 13px; flex:0 0 auto; }
.brand__emblem { height: 46px; width:auto; }
.brand__logo-img { height: 50px; width:auto; }
.brand__word { display:flex; flex-direction:column; line-height:1; }
.brand__name { font-family: var(--font-heading); font-weight:700; font-size: 1.55rem; letter-spacing:.14em; color: var(--gold); }
.brand__tag { font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color: var(--text-muted); margin-top:4px; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style:none; }
/* Only the top level is a row — sub-menus must not inherit this. */
.main-nav > ul { display:flex; align-items:center; gap: 4px; }
/* Full-height items: the hover target has no dead zone and `top:100%` on a
   dropdown lands exactly on the navbar's bottom edge, at any header height. */
.main-nav > ul > li { display:flex; align-items:center; min-height: var(--header-h); }
.main-nav a {
    display:block; padding: 10px 15px; font-family: var(--font-heading); font-weight:500;
    font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color: var(--navy);
    position:relative;
}
.main-nav a::after {
    content:""; position:absolute; left:15px; right:15px; bottom:2px; height:2px;
    background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .28s var(--ease);
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a { color: var(--gold-dark); }
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after,
.main-nav .current-menu-ancestor > a::after { transform: scaleX(1); }

/* --- Dropdown shell (shared by plain dropdowns and the mega panel) --- */
.main-nav .sub-menu {
    position:absolute; top:100%; left:0; min-width: 220px; background:#fff;
    border:1px solid var(--border); border-top:3px solid var(--gold);
    box-shadow: 0 18px 44px rgba(11,30,59,.16); border-radius: 0 0 var(--radius) var(--radius);
    padding: 8px; opacity:0; visibility:hidden; transform: translateY(10px);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
    z-index: 50;
}
.main-nav li { position:relative; }
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity:1; visibility:visible; transform: translateY(0); }
.main-nav .sub-menu a { padding: 10px 14px; text-transform:none; letter-spacing:0; font-size:.9rem; border-radius: var(--radius-sm); }
.main-nav .sub-menu a::after { display:none; }
.main-nav .sub-menu a:hover { background: var(--bg-alt); color: var(--gold-dark); }

/* --- Mega panel: product categories --- */
.main-nav .sub-menu--mega {
    left:50%; width: min(660px, calc(100vw - 40px));
    display:grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
    padding: 16px; border-radius: var(--radius);
    transform: translateX(-50%) translateY(10px);
}
/* Same specificity as the shared :hover rule above, so order decides — keep after. */
.main-nav li:hover > .sub-menu--mega,
.main-nav li:focus-within > .sub-menu--mega { transform: translateX(-50%) translateY(0); }

.main-nav .sub-menu--mega .mega-link {
    display:flex; align-items:center; gap: 13px; padding: 11px 14px;
    border-radius: var(--radius-sm); text-transform:none; letter-spacing:0;
    border-left: 2px solid transparent;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.mega-link__logo { flex:0 0 auto; width:48px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); border-radius:6px; padding:4px 6px; }
.mega-link__logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.mega-link__text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mega-link__name { font-family: var(--font-heading); font-weight:600; font-size:.92rem; line-height:1.25; color: var(--navy); transition: color .2s; }
.mega-link__count { font-size:.72rem; letter-spacing:.03em; color: var(--text-muted); }
.main-nav .sub-menu--mega .mega-link:hover { background: var(--bg-alt); border-left-color: var(--gold); }
.main-nav .sub-menu--mega .mega-link:hover .mega-link__name { color: var(--gold-dark); }
.main-nav .sub-menu--mega .current-menu-item > .mega-link { background: var(--bg-alt); }
.main-nav .sub-menu--mega .current-menu-item .mega-link__name { color: var(--gold-dark); }

.mega-foot {
    grid-column: 1 / -1; margin-top: 10px; padding-top: 13px; border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.main-nav .sub-menu--mega .mega-foot a { padding: 4px 2px; border-radius:0; }
.main-nav .sub-menu--mega .mega-foot a:hover { background:transparent; }
.main-nav .sub-menu--mega .mega-foot__all {
    display:inline-flex; align-items:center; gap:8px; font-family: var(--font-heading);
    font-weight:600; font-size:.85rem; color: var(--gold-dark);
}
.mega-foot__all svg { transition: transform .25s var(--ease); }
.main-nav .sub-menu--mega .mega-foot__all:hover svg { transform: translateX(4px); }
.main-nav .sub-menu--mega .mega-foot__help { font-size:.82rem; color: var(--text-muted); }
.main-nav .sub-menu--mega .mega-foot__help:hover { color: var(--gold-dark); }

/* Dropdown indicator (caret) on parent items */
.main-nav .menu-item-has-children > a { padding-right: 27px; }
.main-nav .menu-item-has-children > a::before {
    content:""; position:absolute; right:12px; top:50%; margin-top:-4px; width:7px; height:7px;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform: rotate(45deg); transition: transform .25s var(--ease); opacity:.75;
}
.main-nav .menu-item-has-children:hover > a::before,
.main-nav .menu-item-has-children:focus-within > a::before { transform: rotate(-135deg); margin-top:-1px; opacity:1; }
.main-nav .sub-menu .menu-item-has-children > a::before { display:none; }

.nav-actions { display:flex; align-items:center; gap: 16px; flex:0 0 auto; }
.nav-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:transparent; color: var(--navy); border-radius: 50%; transition: background .2s, color .2s; }
.nav-icon-btn:hover { background: var(--bg-alt); color: var(--gold-dark); }
.nav-icon-btn svg { width:20px; height:20px; }
.cart-count { position:absolute; top:-4px; right:-4px; background: var(--gold); color: var(--on-gold); font-size:.62rem; font-weight:700; min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.nav-cart { position:relative; }

/* Sticky */
.navbar.is-stuck { position: fixed; top:0; left:0; right:0; z-index: 200; box-shadow: 0 6px 24px rgba(16,35,63,.10); animation: slideDown .4s var(--ease); }
@keyframes slideDown { from { transform: translateY(-100%);} to { transform: translateY(0);} }
body.has-stuck-nav { /* spacer applied via JS */ }

/* Mobile menu is hidden on desktop; the ≤860px media query enables it */
.mobile-menu, .mobile-overlay { display:none; }

/* Hamburger */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; border:none; background:transparent; }
.nav-toggle span { display:block; width:24px; height:2px; background: var(--navy); border-radius:2px; transition: transform .3s var(--ease), opacity .3s; margin:0 auto; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Search overlay */
.search-overlay { position:fixed; inset:0; background: rgba(8,21,39,.92); z-index:300; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .3s; }
.search-overlay.is-open { opacity:1; visibility:visible; }
.search-overlay form { width:min(680px,90vw); position:relative; }
.search-overlay input { width:100%; background:transparent; border:none; border-bottom:2px solid rgba(255,255,255,.4); color:#fff; font-size:1.8rem; padding:16px 44px 16px 4px; font-family:var(--font-heading); }
.search-overlay input::placeholder { color: rgba(255,255,255,.5); }
.search-overlay input:focus { outline:none; border-color: var(--gold); }
.search-close { position:absolute; top:24px; right:32px; width:48px; height:48px; border:none; background:transparent; color:#fff; font-size:2rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; background: var(--navy); color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }
.hero__overlay { position:absolute; inset:0; z-index:1;
    background: linear-gradient(90deg, rgba(9,20,39,.95) 0%, rgba(9,20,39,.86) 34%, rgba(9,20,39,.45) 66%, rgba(9,20,39,.25) 100%);
}
.hero__inner { position:relative; z-index:2; padding: 118px 0 128px; max-width: 640px; }
.hero__eyebrow { display:inline-block; font-family:var(--font-heading); font-weight:600; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold-light); margin-bottom:20px; }
.hero__title { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height:1.08; color:#fff; margin-bottom: 22px; font-weight:700; }
.hero__sub { font-size: clamp(1.05rem,1.6vw,1.25rem); color:#dce3ee; font-family:var(--font-heading); font-weight:400; letter-spacing:.02em; margin-bottom: 38px; }
.hero__sub .dot { color: var(--gold); margin:0 2px; }
.hero__cta { display:flex; gap:16px; flex-wrap:wrap; }

/* Category strip */
.cat-strip { background: var(--navy-deep); position:relative; z-index:3; }
.cat-strip__grid { display:grid; grid-template-columns: repeat(6,1fr); }
.cat-strip__item { display:flex; flex-direction:column; align-items:center; gap:12px; padding: 26px 12px; color:#fff; text-align:center; position:relative; transition: background .25s; }
.cat-strip__item + .cat-strip__item::before { content:""; position:absolute; left:0; top:22%; height:56%; width:1px; background: rgba(255,255,255,.10); }
.cat-strip__item:hover { background: rgba(255,255,255,.04); }
.cat-strip__icon { width:40px; height:40px; color: var(--gold); }
.cat-strip__icon svg { width:100%; height:100%; }
.cat-strip__label { font-family:var(--font-heading); font-weight:500; font-size:.9rem; letter-spacing:.02em; }
.cat-strip__item:hover .cat-strip__icon { color: var(--gold-light); transform: translateY(-3px); transition: transform .25s var(--ease), color .25s; }

/* ============================================================
   PRODUCT RANGE
   ============================================================ */
.product-grid { display:grid; grid-template-columns: repeat(6,1fr); gap: 22px; }
.product-card {
    background: var(--card-bg); border:1px solid var(--border); border-radius: var(--radius);
    padding: 20px 16px 22px; text-align:center; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
    display:flex; flex-direction:column;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.product-card__media { aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; margin-bottom: 16px; background: #fff; border-radius: var(--radius-sm); overflow:hidden; }
.product-card__media img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition: transform .4s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__title { font-family:var(--font-heading); font-weight:600; font-size:.98rem; color: var(--heading); margin:0; }
.product-card__title a { color: inherit; }
.product-card:hover .product-card__title a { color: var(--gold-dark); }

/* ============================================================
   INDUSTRY SOLUTIONS
   ============================================================ */
.industry-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.industry-card { position:relative; border-radius: var(--radius); overflow:hidden; min-height: 340px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.industry-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform .6s var(--ease); }
.industry-card::after { content:""; position:absolute; inset:0; z-index:-1;
    background: linear-gradient(to top, rgba(8,21,39,.94) 0%, rgba(8,21,39,.62) 42%, rgba(8,21,39,.12) 100%); }
.industry-card:hover img { transform: scale(1.08); }
.industry-card__body { padding: 30px 28px 28px; width:100%; }
.industry-card__body h3 { color:#fff; font-size:1.4rem; margin-bottom:10px; }
.industry-card__body p { color:#cbd4e2; font-size:.92rem; margin-bottom:16px; line-height:1.6; }

/* ============================================================
   WHY CHOOSE (dark)
   ============================================================ */
.why { background: var(--navy); color:#fff; position:relative; overflow:hidden; }
.why::before { content:""; position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(245,192,68,.16), transparent 70%); }
.why__grid { display:grid; grid-template-columns: 0.85fr 1.4fr; gap: 60px; align-items:center; position:relative; z-index:1; }
.why__list { list-style:none; display:grid; gap:18px; }
.why__list li { display:flex; align-items:center; gap:14px; font-family:var(--font-heading); font-weight:500; font-size:1.08rem; }
.why__check { flex:0 0 auto; width:26px; height:26px; color: var(--gold); }
.why__stats { display:grid; grid-template-columns: repeat(4,1fr); gap:0; }
.why__stat { text-align:left; padding: 8px 22px; position:relative; }
.why__stat + .why__stat::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background: rgba(255,255,255,.12); }
.why__num { font-family:var(--font-heading); font-weight:700; font-size: 2.6rem; color: var(--gold); line-height:1; letter-spacing:-.02em; }
.why__stat h4 { color:#fff; font-size:1rem; margin:8px 0 6px; font-weight:600; }
.why__stat p { color: var(--text-on-dark-muted); font-size:.82rem; margin:0; line-height:1.5; }
.why__intro h2 { color:#fff; }

/* ============================================================
   BRANDS
   ============================================================ */
.brands-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 40px 60px; }
.brand-logo { height: 40px; display:flex; align-items:center; justify-content:center; filter: grayscale(1); opacity:.62; transition: filter .3s, opacity .3s, transform .3s; }
.brand-logo:hover { filter: grayscale(0); opacity:1; transform: scale(1.05); }
.brand-logo img { max-height:100%; width:auto; }
.brand-logo__text { font-family:var(--font-heading); font-weight:800; font-size:1.35rem; letter-spacing:.02em; color: #4a5568; white-space:nowrap; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { position:relative; overflow:hidden; color:#fff; }
.cta-band__bg { position:absolute; inset:0; z-index:0; }
.cta-band__bg img { width:100%; height:100%; object-fit:cover; }
.cta-band::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(8,21,39,.95), rgba(8,21,39,.75)); }
.cta-band__inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; padding: 68px 0; flex-wrap:wrap; }
.cta-band__text h2 { color:#fff; font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom:10px; }
.cta-band__text p { color:#c7d0de; margin:0; font-size:1.05rem; }

/* ============================================================
   ABOUT / SERVICES intro (used on inner + optional home block)
   ============================================================ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); width:100%; }
.split__body .eyebrow { display:inline-block; font-family:var(--font-heading); font-weight:600; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color: var(--gold); margin-bottom:14px; }
.split__body h2 { font-size: clamp(1.7rem,3vw,2.3rem); margin-bottom:18px; }
.feature-list { list-style:none; display:grid; gap:14px; margin-top:24px; }
.feature-list li { display:flex; gap:14px; align-items:flex-start; }
.feature-list .ic { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background: rgba(245,192,68,.16); color: var(--gold-dark); display:flex; align-items:center; justify-content:center; }
.feature-list .ic svg { width:16px; height:16px; }
.feature-list strong { display:block; color: var(--heading); font-family:var(--font-heading); }

/* Service cards */
.service-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.service-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 34px 28px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color:transparent; }
.service-card__icon { width:56px; height:56px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--navy), var(--navy-800)); color: var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.service-card__icon svg { width:28px; height:28px; }
.service-card h3 { font-size:1.15rem; margin-bottom:10px; }
.service-card p { font-size:.95rem; margin:0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--navy); color: var(--text-on-dark-muted); }
.footer-top { padding: 72px 0 52px; }
.footer-grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.5fr; gap: 40px; }
/* Scoped past WooCommerce's `.woocommerce-page img { height:auto }`, which
   otherwise wins on specificity and blows the mark up to its natural size. */
.site-footer .footer-brand__logo { height: 62px; width:auto; margin-bottom:18px; }
.footer-brand p { color: var(--text-on-dark-muted); font-size:.92rem; max-width: 320px; line-height:1.7; }
.footer-social { display:flex; gap:12px; margin-top:22px; }
.footer-social a { width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.07); color:#fff; display:flex; align-items:center; justify-content:center; transition: background .25s, transform .25s; }
.footer-social a:hover { background: var(--gold); color: var(--on-gold); transform: translateY(-3px); }
.footer-social svg { width:17px; height:17px; }
.footer-col h4 { color:#fff; font-family:var(--font-heading); font-size:1rem; font-weight:600; margin-bottom:20px; position:relative; padding-bottom:12px; }
.footer-col h4::after { content:""; position:absolute; left:0; bottom:0; width:32px; height:2px; background: var(--gold); }
.footer-col ul { list-style:none; display:grid; gap:11px; }
.footer-col a { color: var(--text-on-dark-muted); font-size:.92rem; }
.footer-col a:hover { color: var(--gold-light); padding-left:4px; }
.footer-contact li { display:flex; gap:12px; align-items:flex-start; font-size:.92rem; line-height:1.6; margin-bottom:14px; color: var(--text-on-dark-muted); }
.footer-contact .ic { flex:0 0 auto; width:18px; height:18px; color: var(--gold); margin-top:3px; }
.footer-contact a { color: var(--text-on-dark-muted); }
.footer-contact a:hover { color: var(--gold-light); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.09); padding: 22px 0; }
.footer-bottom__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; }
.footer-bottom a { color: var(--text-on-dark-muted); }
.footer-bottom a:hover { color: var(--gold-light); }
.footer-legal { display:flex; gap:22px; }

/* ============================================================
   FLOATING SOCIAL
   ============================================================ */
.floating-social { position:fixed; z-index:250; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; }
.floating-social.pos-right { right:18px; }
.floating-social.pos-left { left:18px; }
.floating-social a { position:relative; width:48px; height:48px; display:flex; align-items:center; justify-content:center; color: var(--on-gold); background: var(--gold); box-shadow: var(--shadow); transition: transform .25s var(--ease); }
.floating-social.shape-circle a { border-radius:50%; }
.floating-social.shape-round a { border-radius: 12px; }
.floating-social a:hover { transform: scale(1.1); }
.floating-social svg { width:22px; height:22px; }
.floating-social .fs-tip { position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); background: var(--navy); color:#fff; font-size:.8rem; padding:6px 12px; border-radius: var(--radius-sm); white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .2s; font-family:var(--font-heading); }
.floating-social.pos-left .fs-tip { right:auto; left:calc(100% + 12px); }
.floating-social a:hover .fs-tip { opacity:1; }
.fs-wechat-pop { position:fixed; inset:0; background: rgba(8,21,39,.8); z-index:400; display:none; align-items:center; justify-content:center; }
.fs-wechat-pop.is-open { display:flex; }
.fs-wechat-pop__card { background:#fff; padding:26px; border-radius: var(--radius-lg); text-align:center; max-width: 300px; }
.fs-wechat-pop__card img { width:220px; height:220px; object-fit:contain; margin:0 auto 14px; }
.fs-wechat-pop__card p { color: var(--heading); font-family:var(--font-heading); margin:0; }

/* Back to top */
.back-to-top { position:fixed; right:18px; bottom:22px; width:46px; height:46px; border-radius:50%; background: var(--navy); color:#fff; border:none; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow); opacity:0; visibility:hidden; transform: translateY(12px); transition: all .3s var(--ease); z-index:240; }
.back-to-top.show { opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); color: var(--on-gold); }

/* ============================================================
   PROMO BAR
   ============================================================ */
.promo-bar { background: var(--gold); color: var(--on-gold); font-size:.86rem; text-align:center; position:relative; }
.promo-bar__inner { padding: 9px 44px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.promo-bar a { color: var(--on-gold); text-decoration:underline; font-weight:600; }
.promo-bar__close { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:transparent; border:none; color: var(--on-gold); font-size:1.2rem; line-height:1; opacity:.8; }
.promo-bar__close:hover { opacity:1; }

/* ============================================================
   PAGE / POST content
   ============================================================ */
.page-hero { background: var(--navy); color:#fff; position:relative; overflow:hidden; padding: 84px 0 76px; }
.page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(245,192,68,.18), transparent 55%); }
.page-hero__inner { position:relative; z-index:1; text-align:center; }
.page-hero h1 { color:#fff; font-size: clamp(2rem,4vw,2.9rem); margin-bottom:12px; }
/* Brand archive hero: logo plate beside the title */
.page-hero--brand .page-hero__inner { text-align:left; }
.page-hero__brand { display:flex; align-items:center; gap:30px; }
.page-hero__logo { flex:0 0 auto; width:160px; height:112px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:14px; padding:16px 20px; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.page-hero__logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.page-hero__headings { min-width:0; }
.page-hero--brand h1 { margin-bottom:8px; }
.page-hero--brand .breadcrumbs { text-align:left; }
@media (max-width:640px){
	.page-hero__brand { flex-direction:column; gap:18px; }
	.page-hero--brand .page-hero__inner,
	.page-hero--brand .breadcrumbs { text-align:center; }
	.page-hero__logo { width:150px; height:100px; }
}
.breadcrumbs { color: var(--text-on-dark-muted); font-size:.9rem; }
.breadcrumbs a { color: var(--gold-light); }
.breadcrumbs .sep { margin:0 8px; opacity:.5; }

.content-area { padding: var(--section-pad) 0; }
.layout-sidebar { display:grid; grid-template-columns: 1fr 320px; gap: 48px; }
.entry { font-size:1.05rem; }
.entry h2 { font-size:1.7rem; margin: 1.6em 0 .6em; }
.entry h3 { font-size:1.35rem; margin: 1.4em 0 .5em; }
.entry img { border-radius: var(--radius); margin: 1.4em 0; }
.entry ul, .entry ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.entry li { margin-bottom:.5em; }
.entry blockquote { margin: 1.6em 0; padding: 18px 26px; border-left:4px solid var(--gold); background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; font-style:italic; color: var(--heading); }
.entry a { text-decoration: underline; }
.post-thumb { border-radius: var(--radius); overflow:hidden; margin-bottom: 30px; }
.post-meta { display:flex; gap:18px; color: var(--text-muted); font-size:.88rem; margin-bottom:22px; flex-wrap:wrap; }
.post-meta span { display:inline-flex; align-items:center; gap:6px; }

/* Blog cards */
.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.post-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card__media { aspect-ratio: 16/10; overflow:hidden; }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__body { padding: 22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.post-card__cat { font-family:var(--font-heading); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-dark); font-weight:600; margin-bottom:10px; }
.post-card__title { font-size:1.12rem; margin-bottom:10px; }
.post-card__title a { color: var(--heading); }
.post-card__title a:hover { color: var(--gold-dark); }
.post-card__excerpt { font-size:.92rem; color: var(--text); margin-bottom:16px; flex:1; }

/* Sidebar widgets */
.widget { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom: 26px; }
.widget-title { font-size:1.05rem; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.widget ul { list-style:none; display:grid; gap:10px; }
.widget a { color: var(--text); }
.widget a:hover { color: var(--gold-dark); }

/* Pagination */
.pagination { display:flex; gap:8px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 14px; border:1px solid var(--border); border-radius: var(--radius-sm); color: var(--navy); font-family:var(--font-heading); font-weight:500; background:#fff; }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }

/* Contact */
.contact-grid { display:grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items:start; }
.contact-info { display:grid; gap:22px; }
.contact-info__item { display:flex; gap:16px; align-items:flex-start; }
.contact-info__ic { flex:0 0 auto; width:48px; height:48px; border-radius: var(--radius-sm); background: linear-gradient(135deg,var(--navy),var(--navy-800)); color: var(--gold); display:flex; align-items:center; justify-content:center; }
.contact-info__ic svg { width:22px; height:22px; }
.contact-info__item h4 { margin:0 0 4px; font-size:1.02rem; }
.contact-info__item p { margin:0; font-size:.95rem; }
.form-field { margin-bottom:18px; }
.form-field label { display:block; font-family:var(--font-heading); font-weight:500; font-size:.9rem; color: var(--heading); margin-bottom:7px; }
.form-field input, .form-field textarea, .form-field select {
    width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family:var(--font-body); font-size:.95rem; color: var(--heading); background:#fff; transition: border-color .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline:none; border-color: var(--gold); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* FAQ */
.faq-list { max-width: 820px; margin:0 auto; display:grid; gap:14px; }
.faq-item { border:1px solid var(--border); border-radius: var(--radius); background:#fff; overflow:hidden; }
.faq-q { width:100%; text-align:left; background:transparent; border:none; padding: 20px 24px; font-family:var(--font-heading); font-weight:600; font-size:1.02rem; color: var(--heading); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-q .ic { flex:0 0 auto; width:24px; height:24px; color: var(--gold); transition: transform .3s var(--ease); }
.faq-item.is-open .faq-q .ic { transform: rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a__inner { padding: 0 24px 22px; color: var(--text); }

/* 404 */
.error-404 { text-align:center; padding: 120px 0; }
.error-404 .code { font-family:var(--font-heading); font-weight:800; font-size: clamp(5rem,16vw,11rem); color: var(--navy); line-height:1; opacity:.12; }
.error-404 h1 { margin-top:-30px; }

/* Reveal animation — only hidden when JS is available (graceful no-JS fallback) */
.js .reveal { opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity:1; transform: none; }

/* WooCommerce quick harmonization */
.woocommerce-store-notice, .demo_store { background: var(--gold) !important; color: var(--on-gold) !important; }
.woocommerce ul.products li.product .price { color: var(--gold-dark); }
.woocommerce span.onsale { background: var(--gold); color: var(--on-gold); }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce .button {
    background: var(--gold) !important; color: var(--on-gold) !important; border-radius: var(--radius-sm) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--gold-dark) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px){
    :root { --section-pad: 80px; }
    .product-grid { grid-template-columns: repeat(3,1fr); }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap:36px 30px; }
    .footer-brand { grid-column: 1 / -1; }
}
/* The header needs ~1240px to lay out at full size. Between 1025px and there,
   tighten it so it fits; below 1025px the hamburger takes over (see 1024 block).
   Without this the quote button is pushed off-screen and the page scrolls sideways. */
@media (max-width: 1240px){
    .navbar__inner { gap: 16px; }
    .brand { gap: 10px; }
    .brand__tag { display:none; }
    .brand__name { font-size: 1.4rem; }
    .main-nav > ul { gap: 2px; }
    .main-nav a { padding: 10px 9px; font-size: .82rem; letter-spacing: .04em; }
    .main-nav .menu-item-has-children > a { padding-right: 21px; }
    .main-nav .menu-item-has-children > a::before { right: 7px; }
    .nav-actions { gap: 10px; }
    .nav-quote { padding: 13px 18px; font-size: .85rem; }
}
@media (max-width: 992px){
    .why__grid { grid-template-columns: 1fr; gap:40px; }
    .split, .contact-grid, .layout-sidebar { grid-template-columns: 1fr; gap:40px; }
    .industry-grid { grid-template-columns: 1fr 1fr; }
    .service-grid { grid-template-columns: 1fr 1fr; }
    .post-grid { grid-template-columns: 1fr 1fr; }
    .why__stats { grid-template-columns: repeat(2,1fr); gap:20px 0; }
    .cat-strip__grid { grid-template-columns: repeat(3,1fr); }
    .cat-strip__item:nth-child(-n+3) { border-bottom:1px solid rgba(255,255,255,.08); }
}
/* Hand off to the hamburger before the desktop nav runs out of room (~1240px
   at full size, ~1000px once the block above tightens it). */
@media (max-width: 1024px){
    .main-nav { display:none; }
    /* .main-nav carried the margin-left:auto that pushed the actions right;
       with it hidden the actions need to hold that space themselves. */
    .nav-actions { margin-left:auto; }
    .nav-quote { display:none; } /* available inside the mobile menu */
    .nav-toggle { display:flex; }
    .navbar__inner { min-height: 64px; }
    .brand__tag { display:block; } /* room is free again once the nav is gone */
    .brand__name { font-size: 1.55rem; }
    /* Mobile menu panel */
    .mobile-menu { position:fixed; top:0; right:0; bottom:0; width: min(340px, 86vw); background:#fff; z-index:320;
        transform: translateX(100%); transition: transform .35s var(--ease); box-shadow: -12px 0 40px rgba(8,21,39,.2);
        display:flex; flex-direction:column; padding: 26px 24px; overflow-y:auto; }
    .mobile-menu.is-open { transform: translateX(0); }
    .mobile-menu ul { list-style:none; }
    .mobile-menu > ul > li > a { display:block; padding: 14px 6px; font-family:var(--font-heading); font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); border-bottom:1px solid var(--border); }
    .mobile-menu .sub-menu { padding-left:14px; }
    .mobile-menu .sub-menu a { display:block; padding:10px 6px; color:var(--text); }
    .mobile-overlay { display:block; position:fixed; inset:0; background:rgba(8,21,39,.5); z-index:310; opacity:0; visibility:hidden; transition: opacity .3s; }
    .mobile-overlay.is-open { opacity:1; visibility:visible; }
    .mobile-menu__close { align-self:flex-end; background:transparent; border:none; font-size:1.8rem; color:var(--navy); margin-bottom:10px; }
    .mobile-cta { margin-top:22px; }
}
@media (max-width: 860px){
    .topbar__left { display:none; }
}
@media (max-width: 680px){
    :root { --section-pad: 62px; }
    .product-grid { grid-template-columns: repeat(2,1fr); gap:16px; }
    .industry-grid, .service-grid, .post-grid { grid-template-columns: 1fr; }
    .cat-strip__grid { grid-template-columns: repeat(2,1fr); }
    .hero__inner { padding: 76px 0 84px; }
    .hero__cta { flex-direction:column; align-items:stretch; }
    .hero__cta .btn { justify-content:center; }
    .form-row { grid-template-columns:1fr; }
    .why__stats { grid-template-columns:1fr; gap:22px; }
    .why__stat { padding: 8px 0; }
    .why__stat + .why__stat::before { display:none; }
    .cta-band__inner { flex-direction:column; align-items:flex-start; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom__inner { flex-direction:column; text-align:center; }
    .topbar__inner { justify-content:center; gap:16px; }
    .topbar__item span.hide-xs { display:none; }
}
@media (max-width: 420px){
    .cat-strip__grid { grid-template-columns: repeat(2,1fr); }
    .brand__name { font-size:1.3rem; }
}

/* ============================================================
   WOOCOMMERCE — catalog / inquiry mode
   ============================================================ */
.woocommerce .woocommerce-breadcrumb { display:none; } /* theme renders its own in page-hero */

/* Shop / category / brand product grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
    list-style:none; margin:0 0 12px; padding:0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content:none !important; display:none !important; }
.woocommerce ul.products li.product {
    width:auto !important; margin:0 !important; float:none !important;
}
.woocommerce ul.products li.product.product-card { padding:20px 16px 22px; text-align:center; }
.product-card__body { margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.product-card__brand { font-family:var(--font-heading); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dark); }
.woocommerce ul.products li.product .arrow-link { justify-content:center; margin-top:2px; font-size:.85rem; }

/* Category / brand filter pills on the shop loop */
/* Quieter than a row of gold buttons — the active pill is the only accent, so
   the filter reads as navigation rather than seven competing calls to action. */
.wc-cat-filter { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 40px; }
.wc-cat-filter .btn {
    padding:8px 16px; font-size:.82rem; letter-spacing:.02em; text-transform:none;
    border-color: var(--border); color: var(--text); background:#fff;
}
.wc-cat-filter .btn:hover { border-color: var(--navy); color: var(--navy); background:#fff; }
.wc-cat-filter .btn.is-active { background:var(--navy); border-color:var(--navy); color:#fff; }
.wc-cat-filter .btn.is-active:hover { background:var(--navy); border-color:var(--navy); color:#fff; }

/* Result count + ordering */
.woocommerce .woocommerce-result-count { color:var(--text-muted); font-size:.9rem; margin-bottom:18px; }
.woocommerce .woocommerce-ordering select { padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; color:var(--heading); }

/* ---- Single product ---- */
.woocommerce div.product { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start; }
.woocommerce div.product .woocommerce-product-gallery { width:auto !important; float:none !important; margin:0; }
.woocommerce div.product .woocommerce-product-gallery__image { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.woocommerce div.product .summary { width:auto !important; float:none !important; margin:0; }
.woocommerce div.product .product_title { font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px; }
.woocommerce div.product .woocommerce-product-details__short-description { color:var(--text); line-height:1.75; margin-bottom:8px; }
.wc-inquiry-actions { display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 8px; }
.woocommerce div.product .product_meta { margin-top:22px; padding-top:20px; border-top:1px solid var(--border); font-size:.9rem; color:var(--text-muted); }
.woocommerce div.product .product_meta > span { display:block; margin-bottom:6px; }
.woocommerce div.product .product_meta a { color:var(--gold-dark); }
.woocommerce div.product .woocommerce-tabs { grid-column:1 / -1; margin-top:20px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding:0; margin:0 0 24px; border-bottom:1px solid var(--border); display:flex; gap:4px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background:none; border:none; border-radius:0; margin:0; padding:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding:12px 18px; font-family:var(--font-heading); font-weight:600; color:var(--text-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color:var(--gold-dark); box-shadow:inset 0 -3px 0 var(--gold); }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-family:var(--font-heading); font-size:1.5rem; margin-bottom:24px; }
.woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns:repeat(4,1fr); }

/* ============================================================
   PRODUCT CATEGORIES (homepage showcase)
   ============================================================ */
.pcat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pcat-card { display:flex; align-items:center; gap:18px; padding:20px 22px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); position:relative; overflow:hidden; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; }
.pcat-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease); }
.pcat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.pcat-card:hover::before { transform:scaleY(1); }
/* Brands render icon-free. If the client sets a category image (brand logo) it
   shows in a clean contained tile; otherwise the brand name is the hero. */
.pcat-card__logo { flex:0 0 auto; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:#fff; border:1px solid var(--border); padding:9px; }
.pcat-card__logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pcat-card__text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pcat-card__name { font-family:var(--font-heading); font-weight:600; font-size:1.04rem; color:var(--heading); line-height:1.25; transition:color .25s; }
.pcat-card--text .pcat-card__name { font-size:1.16rem; letter-spacing:.005em; }
.pcat-card:hover .pcat-card__name { color:var(--gold-dark); }
.pcat-card__count { font-size:.82rem; color:var(--text-muted); }
.pcat-card__go { margin-left:auto; flex:0 0 auto; color:var(--gold); opacity:0; transform:translateX(-6px); transition:opacity .28s, transform .28s var(--ease); }
.pcat-card:hover .pcat-card__go { opacity:1; transform:translateX(0); }

/* ============================================================
   SUCCESS CASES
   ============================================================ */
.cases-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.case-card { position:relative; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.case-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); z-index:3; }
.case-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.case-card:hover::before { transform:scaleX(1); }
.case-card__media { position:relative; aspect-ratio:3/2; overflow:hidden; }
.case-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.case-card:hover .case-card__media img { transform:scale(1.08); }
.case-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,21,39,.72), rgba(8,21,39,.04) 60%); }
.case-card__sector { position:absolute; top:14px; left:14px; z-index:1; background:var(--gold); color:#1a1205; font-family:var(--font-heading); font-weight:600; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:100px; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.case-card__body { padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; }
.case-card__client { font-family:var(--font-heading); font-size:1.06rem; font-weight:600; line-height:1.34; color:var(--heading); margin:0 0 14px;
    min-height:2.68em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .25s; }
.case-card:hover .case-card__client { color:var(--gold-dark); }
.case-card__loc { display:flex; align-items:center; gap:7px; color:var(--gold-dark); font-size:.83rem; font-weight:600; margin:0 0 12px; padding-top:15px; border-top:1px solid var(--border); }
.case-card__loc svg { flex:0 0 auto; }
.case-card__scope { color:var(--text); font-size:.9rem; line-height:1.65; margin:0; }

/* ---- WooCommerce + categories + cases responsive ---- */
@media (max-width:1200px){
    .woocommerce ul.products, .woocommerce-page ul.products,
    .woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns:repeat(3,1fr); }
    .cases-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:992px){
    .woocommerce div.product { grid-template-columns:1fr; gap:32px; }
    .pcat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
    .woocommerce ul.products, .woocommerce-page ul.products,
    .woocommerce .related ul.products, .woocommerce .upsells ul.products { grid-template-columns:repeat(2,1fr); gap:16px; }
    .cases-grid { grid-template-columns:1fr; }
    .pcat-grid { grid-template-columns:1fr; }
}

/* ---- Shop filter labels + brand filter row (2nd taxonomy) ---- */
.wc-filter-label{display:inline-flex;align-items:center;margin-right:10px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.wc-brand-filter{margin-top:10px}
.brand-logo--link{cursor:pointer;text-decoration:none;transition:transform .2s ease,opacity .2s ease}
.brand-logo--link:hover{transform:translateY(-2px);opacity:1}