/*
Theme Name:  UmbrellaWorks
Theme URI:   https://example.com
Author:      UmbrellaWorks
Author URI:  https://example.com
Description: UmbrellaWorks — a B2B WordPress theme for custom umbrella manufacturers and suppliers. Built for OEM/ODM factory sites targeting overseas bulk buyers, brands, retailers, promotional buyers, hotels and outdoor brands. Integrates natively with the Umbrella B2B Configurator plugin ([umbrella_configurator]) for 3D digital sampling and RFQ inquiries. No cart, no checkout — request-for-quote only.
Version:     1.3.8
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: umbrellaworks
Tags:        b2b, manufacturer, custom-logo, custom-menu, responsive, configurator, rfq, industrial
*/

/* ════════ DESIGN TOKENS ════════
   Identity: confident industrial blue + signal amber. Calm, factory-grade,
   not retail. Crisp grid, generous whitespace, structural cards. */
:root {
  --uw-navy:    #14233d; --uw-navy-dk: #0d1830; --uw-blue:   #1f4fd6;
  --uw-blue-dk: #173da8; --uw-blue-lt: #3d6bf0; --uw-blue-xlt:#eef3ff;
  --uw-amber:   #f59e0b; --uw-amber-dk:#d97706; --uw-amber-lt:#fff7e8;
  --uw-ink:     #111827; --uw-dark:    #1f2937; --uw-mid:    #374151;
  --uw-grey:    #6b7280; --uw-grey-lt: #9ca3af; --uw-line:   #e5e7eb;
  --uw-line-dk: #d1d5db; --uw-surface: #f6f8fc; --uw-surface2:#eef2f9;
  --uw-white:   #ffffff; --uw-green:   #059669;
  --uw-head:    'Sora', system-ui, -apple-system, sans-serif;
  --uw-body:    'Inter', system-ui, -apple-system, sans-serif;
  --uw-radius:  10px; --uw-radius-lg: 18px; --uw-radius-sm: 7px;
  --uw-shadow:  0 1px 2px rgba(17,24,39,.05), 0 6px 22px rgba(17,24,39,.06);
  --uw-shadow-lg:0 8px 24px rgba(17,24,39,.10), 0 24px 60px rgba(17,24,39,.08);
  --uw-t:       .22s cubic-bezier(.4,0,.2,1);
  --uw-nav-h:   72px; --uw-container: 1200px;
}

/* ════════ RESET ════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body { font-family: var(--uw-body); font-size: 16px; line-height: 1.7; color: var(--uw-mid); background: var(--uw-white); -webkit-font-smoothing: antialiased; }
img, video, svg, canvas { max-width: 100%; display: block; }
a { color: var(--uw-blue); text-decoration: none; transition: color var(--uw-t); }
a:hover { color: var(--uw-blue-dk); }
ul, ol { list-style: none; }
button, input, textarea, select { font-family: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.uw-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--uw-blue); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--uw-radius-sm) 0; font-family: var(--uw-head); font-weight: 600; }
.uw-skip:focus { left: 0; color: #fff; }

/* ════════ LAYOUT ════════ */
.uw-container { max-width: var(--uw-container); margin: 0 auto; padding: 0 24px; }
.uw-section    { padding: clamp(52px,7vw,100px) 0; }
.uw-section-sm { padding: clamp(30px,4vw,52px) 0; }
.uw-section.alt { background: var(--uw-surface); }

/* ════════ TYPOGRAPHY ════════ */
h1,h2,h3,h4,h5,h6 { font-family: var(--uw-head); font-weight: 700; line-height: 1.18; color: var(--uw-ink); letter-spacing: -.02em; }
h1 { font-size: clamp(30px,5.2vw,52px); font-weight: 800; }
h2 { font-size: clamp(24px,3.8vw,40px); }
h3 { font-size: clamp(18px,2.6vw,24px); }
h4 { font-size: clamp(16px,2vw,19px); }
p  { margin-bottom: 1rem; color: var(--uw-grey); }
p:last-child { margin-bottom: 0; }
.uw-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--uw-head); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--uw-blue); margin-bottom: 14px; }
.uw-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--uw-amber); }
.uw-lead { font-size: clamp(16px,2vw,19px); color: var(--uw-grey); max-width: 720px; }
.uw-section-head { max-width: 760px; margin-bottom: clamp(32px,4vw,52px); }
.uw-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.uw-section-head.center .uw-eyebrow { }

/* ════════ BUTTONS ════════ */
.uw-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px; border-radius: var(--uw-radius); font-family: var(--uw-head); font-weight: 600; font-size: 15px; cursor: pointer; border: 2px solid transparent; transition: all var(--uw-t); white-space: nowrap; text-decoration: none; }
.uw-btn-sm { padding: 9px 18px; font-size: 14px; }
.uw-btn-lg { padding: 16px 36px; font-size: 16px; }
.uw-btn-primary { background: var(--uw-blue); color: var(--uw-white); border-color: var(--uw-blue); }
.uw-btn-primary:hover { background: var(--uw-blue-dk); border-color: var(--uw-blue-dk); color: #fff; transform: translateY(-1px); box-shadow: var(--uw-shadow); }
.uw-btn-amber { background: var(--uw-amber); color: var(--uw-navy); border-color: var(--uw-amber); }
.uw-btn-amber:hover { background: var(--uw-amber-dk); border-color: var(--uw-amber-dk); color: #fff; transform: translateY(-1px); box-shadow: var(--uw-shadow); }
.uw-btn-ghost { background: transparent; color: var(--uw-ink); border-color: var(--uw-line-dk); }
.uw-btn-ghost:hover { border-color: var(--uw-blue); color: var(--uw-blue); }
.uw-btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.uw-btn-light:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ════════ TOPBAR ════════ */
.uw-topbar { background: var(--uw-navy-dk); color: #c8d2e4; font-size: 13px; }
.uw-topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 14px; }
.uw-topbar a { color: #c8d2e4; }
.uw-topbar a:hover { color: #fff; }
.uw-tb-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uw-tb-right { display: flex; align-items: center; gap: 14px; }
.uw-tb-sep { opacity: .4; }
.uw-topbar-wa { color: var(--uw-amber) !important; font-weight: 600; }

/* ════════ HEADER ════════ */
.uw-header { position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--uw-line); transition: box-shadow var(--uw-t); }
.uw-header.scrolled { box-shadow: var(--uw-shadow); }
.uw-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--uw-nav-h); gap: 20px; }
.uw-logo a, .uw-logo-text { display: inline-flex; align-items: center; gap: 9px; font-family: var(--uw-head); font-weight: 800; font-size: 21px; color: var(--uw-ink); letter-spacing: -.02em; }
.uw-logo-text span:first-child { color: var(--uw-blue); }
.uw-logo img { max-height: 48px; width: auto; }
.uw-nav { display: flex; align-items: center; }
.uw-nav-menu { display: flex; align-items: center; gap: 1px; flex-wrap: nowrap; white-space: nowrap; }
.uw-nav-menu li { position: relative; }
.uw-nav-menu > li > a { display: block; padding: 9px 11px; font-family: var(--uw-head); font-weight: 500; font-size: 14px; color: var(--uw-dark); border-radius: var(--uw-radius-sm); white-space: nowrap; }
.uw-nav-menu > li > a:hover { color: var(--uw-blue); background: var(--uw-blue-xlt); }
.uw-nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); box-shadow: var(--uw-shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--uw-t); }
.uw-nav-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.uw-nav-menu .sub-menu a { display: block; padding: 9px 12px; font-size: 14px; color: var(--uw-mid); border-radius: var(--uw-radius-sm); }
.uw-nav-menu .sub-menu a:hover { background: var(--uw-blue-xlt); color: var(--uw-blue); }
.uw-header-actions { display: flex; align-items: center; gap: 12px; }
.uw-ham { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-sm); cursor: pointer; }
.uw-ham span { display: block; width: 20px; height: 2px; background: var(--uw-ink); transition: all var(--uw-t); }

/* ════════ MOBILE DRAWER ════════ */
.uw-nav-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: 300; opacity: 0; visibility: hidden; transition: all var(--uw-t); }
.uw-nav-overlay.active { opacity: 1; visibility: visible; }
.uw-nav-drawer { position: fixed; top: 0; right: -340px; width: 320px; max-width: 86vw; height: 100%; background: #fff; z-index: 310; transition: right var(--uw-t); overflow-y: auto; box-shadow: var(--uw-shadow-lg); }
.uw-nav-drawer.active { right: 0; }
.uw-nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--uw-line); }
.uw-nav-drawer-logo { font-family: var(--uw-head); font-weight: 800; font-size: 17px; color: var(--uw-ink); }
.uw-nav-drawer-close { background: none; border: none; font-size: 30px; line-height: 1; color: var(--uw-grey); cursor: pointer; }
.uw-nav-drawer-menu { padding: 10px 0; }
.uw-nav-drawer-menu li a { display: block; padding: 13px 22px; font-family: var(--uw-head); font-weight: 500; font-size: 15px; color: var(--uw-dark); border-bottom: 1px solid var(--uw-surface); }
.uw-nav-drawer-menu li a:hover { background: var(--uw-blue-xlt); color: var(--uw-blue); }
.uw-nav-drawer-menu .sub-menu a { padding-left: 38px; font-size: 14px; color: var(--uw-grey); }

/* ════════ HERO ════════ */
.uw-hero { position: relative; background: linear-gradient(160deg, var(--uw-navy) 0%, var(--uw-navy-dk) 60%, #0a1224 100%); color: #fff; overflow: hidden; }
.uw-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 18% 20%, rgba(31,79,214,.35), transparent 42%), radial-gradient(circle at 88% 78%, rgba(245,158,11,.16), transparent 40%); }
.uw-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.uw-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: clamp(56px,8vw,104px) 0; }
.uw-hero .uw-eyebrow { color: var(--uw-amber); }
.uw-hero .uw-eyebrow::before { background: var(--uw-amber); }
.uw-hero h1 { color: #fff; margin-bottom: 20px; }
.uw-hero h1 .accent { color: var(--uw-amber); }
.uw-hero-sub { font-size: clamp(16px,2.1vw,19px); color: #c4cfe2; max-width: 560px; margin-bottom: 30px; }
.uw-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.uw-hero-entity { display: grid; gap: 10px; padding: 18px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--uw-radius); max-width: 560px; }
.uw-hero-entity p { color: #d4dcec; font-size: 14.5px; margin: 0; line-height: 1.6; }
.uw-hero-entity strong { color: #fff; }
.uw-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.uw-hero-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 100px; font-size: 13px; color: #d4dcec; }
.uw-hero-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--uw-amber); }
/* hero visual */
.uw-hero-visual { position: relative; }
.uw-hero-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--uw-radius-lg); padding: 26px; backdrop-filter: blur(6px); }
.uw-hero-card-title { font-family: var(--uw-head); font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.uw-spec-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: 14px; }
.uw-spec-row:last-child { border-bottom: none; }
.uw-spec-row span:first-child { color: #9fb0cc; }
.uw-spec-row span:last-child { color: #fff; font-weight: 600; }
.uw-hero-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
.uw-hero-stat { text-align: center; padding: 14px 8px; background: rgba(255,255,255,.05); border-radius: var(--uw-radius); }
.uw-hero-stat b { display: block; font-family: var(--uw-head); font-size: 22px; color: var(--uw-amber); font-weight: 800; }
.uw-hero-stat span { font-size: 11.5px; color: #9fb0cc; text-transform: uppercase; letter-spacing: .05em; }

/* ════════ TRUST STRIP ════════ */
.uw-trust { border-bottom: 1px solid var(--uw-line); background: #fff; }
.uw-trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.uw-trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 28px 24px; border-right: 1px solid var(--uw-line); }
.uw-trust-item:last-child { border-right: none; }
.uw-trust-ico { flex: none; width: 42px; height: 42px; border-radius: var(--uw-radius-sm); background: var(--uw-blue-xlt); color: var(--uw-blue); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.uw-trust-item b { display: block; font-family: var(--uw-head); font-size: 15px; color: var(--uw-ink); margin-bottom: 2px; }
.uw-trust-item p { font-size: 13px; margin: 0; }

/* ════════ CARD GRID GENERIC ════════ */
.uw-grid { display: grid; gap: 22px; }
.uw-grid-2 { grid-template-columns: repeat(2,1fr); }
.uw-grid-3 { grid-template-columns: repeat(3,1fr); }
.uw-grid-4 { grid-template-columns: repeat(4,1fr); }

/* ════════ TYPE CARDS ════════ */
.uw-type-card { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-lg); overflow: hidden; transition: all var(--uw-t); display: flex; flex-direction: column; }
.uw-type-card:hover { border-color: var(--uw-blue-lt); box-shadow: var(--uw-shadow-lg); transform: translateY(-3px); }
.uw-type-card-top { height: 132px; background: linear-gradient(135deg, var(--uw-surface2), var(--uw-blue-xlt)); display: flex; align-items: center; justify-content: center; position: relative; }
.uw-type-card-top .uw-type-ico { font-size: 50px; filter: saturate(.85); }
.uw-type-card-tag { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; font-family: var(--uw-head); text-transform: uppercase; letter-spacing: .05em; color: var(--uw-blue); background: #fff; padding: 4px 10px; border-radius: 100px; box-shadow: var(--uw-shadow); }
.uw-type-card-body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.uw-type-card-body h3 { font-size: 18px; margin-bottom: 8px; }
.uw-type-card-body p { font-size: 13.5px; margin-bottom: 14px; }
.uw-type-meta { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--uw-line); font-size: 12.5px; }
.uw-type-meta div { display: flex; gap: 8px; }
.uw-type-meta b { color: var(--uw-dark); font-family: var(--uw-head); font-weight: 600; min-width: 78px; flex: none; }
.uw-type-meta span { color: var(--uw-grey); }

/* ════════ CONFIGURATOR ENTRY ════════ */
.uw-config { background: linear-gradient(160deg, var(--uw-navy) 0%, var(--uw-navy-dk) 100%); color: #fff; border-radius: var(--uw-radius-lg); overflow: hidden; }
.uw-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.uw-config-left { padding: clamp(32px,5vw,56px); }
.uw-config-left .uw-eyebrow { color: var(--uw-amber); } .uw-config-left .uw-eyebrow::before { background: var(--uw-amber); }
.uw-config-left h2 { color: #fff; margin-bottom: 16px; }
.uw-config-left p { color: #c4cfe2; }
.uw-config-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 22px 0 28px; }
.uw-config-opts li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #dbe3f0; }
.uw-config-opts li::before { content: '✓'; flex: none; width: 20px; height: 20px; border-radius: 5px; background: rgba(245,158,11,.18); color: var(--uw-amber); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.uw-config-note { font-size: 13px; color: #9fb0cc; padding: 12px 16px; background: rgba(255,255,255,.05); border-left: 3px solid var(--uw-amber); border-radius: 0 var(--uw-radius-sm) var(--uw-radius-sm) 0; margin-bottom: 24px; }
.uw-config-right { background: rgba(0,0,0,.18); padding: clamp(32px,5vw,56px); display: flex; flex-direction: column; justify-content: center; }
.uw-config-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
.uw-config-step:last-child { border-bottom: none; }
.uw-config-step b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--uw-amber); color: var(--uw-navy); font-family: var(--uw-head); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.uw-config-step div strong { display: block; color: #fff; font-family: var(--uw-head); font-size: 14.5px; margin-bottom: 2px; }
.uw-config-step div span { font-size: 13px; color: #9fb0cc; }

/* configurator embed wrapper (plugin renders inside) */
.uw-config-embed { margin-top: 28px; }
.uw-config-embed-inner { background: #fff; border-radius: var(--uw-radius-lg); padding: 8px; box-shadow: var(--uw-shadow-lg); }

/* ════════ MATERIALS ════════ */
.uw-mat-card { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: 20px; transition: all var(--uw-t); }
.uw-mat-card:hover { border-color: var(--uw-blue-lt); box-shadow: var(--uw-shadow); }
.uw-mat-card .uw-mat-ico { font-size: 24px; margin-bottom: 10px; }
.uw-mat-card h4 { font-size: 16px; margin-bottom: 6px; }
.uw-mat-card p { font-size: 13px; margin: 0; }
.uw-mat-card .uw-mat-use { display: inline-block; margin-top: 10px; font-size: 11.5px; font-weight: 600; font-family: var(--uw-head); color: var(--uw-blue); background: var(--uw-blue-xlt); padding: 3px 9px; border-radius: 100px; }
.uw-comp-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.uw-comp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: #fff; border: 1px solid var(--uw-line); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--uw-dark); }
.uw-comp-chip span { color: var(--uw-blue); }

/* ════════ PRINTING TABLE ════════ */
.uw-print-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-lg); overflow: hidden; font-size: 14px; }
.uw-print-table th { background: var(--uw-navy); color: #fff; font-family: var(--uw-head); font-weight: 600; text-align: left; padding: 15px 18px; font-size: 13px; letter-spacing: .02em; }
.uw-print-table td { padding: 15px 18px; border-top: 1px solid var(--uw-line); color: var(--uw-mid); vertical-align: top; }
.uw-print-table tr:hover td, .uw-print-table tbody tr:hover td { background: var(--uw-surface); }
.uw-print-table td b { color: var(--uw-ink); font-family: var(--uw-head); }

/* ════════ PROCESS FLOW ════════ */
.uw-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.uw-flow-step { position: relative; background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: 22px 20px; }
.uw-flow-step .uw-flow-num { font-family: var(--uw-head); font-weight: 800; font-size: 13px; color: var(--uw-amber); letter-spacing: .08em; margin-bottom: 10px; }
.uw-flow-step h4 { font-size: 16px; margin-bottom: 7px; }
.uw-flow-step p { font-size: 13px; margin: 0; }
.uw-flow-step::after { content: '→'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--uw-line-dk); font-size: 18px; font-weight: 700; z-index: 2; }
.uw-flow-step:nth-child(4n)::after, .uw-flow-step:last-child::after { display: none; }

/* ════════ QC CHECKLIST ════════ */
.uw-qc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 32px; }
.uw-qc-item { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--uw-line); }
.uw-qc-check { flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--uw-blue-xlt); color: var(--uw-blue); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.uw-qc-item b { display: block; font-family: var(--uw-head); font-size: 15px; color: var(--uw-ink); margin-bottom: 2px; }
.uw-qc-item p { font-size: 13px; margin: 0; }

/* ════════ APPLICATIONS ════════ */
.uw-app-card { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: 22px; transition: all var(--uw-t); }
.uw-app-card:hover { border-color: var(--uw-blue-lt); box-shadow: var(--uw-shadow); transform: translateY(-2px); }
.uw-app-ico { width: 44px; height: 44px; border-radius: var(--uw-radius-sm); background: var(--uw-amber-lt); color: var(--uw-amber-dk); display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px; }
.uw-app-card h4 { font-size: 16px; margin-bottom: 8px; }
.uw-app-card p { font-size: 13px; margin-bottom: 12px; }
.uw-app-tags { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.uw-app-tags div { display: flex; gap: 6px; }
.uw-app-tags b { font-family: var(--uw-head); font-weight: 600; color: var(--uw-dark); min-width: 88px; flex: none; }
.uw-app-tags span { color: var(--uw-grey); }

/* ════════ CASE STUDIES ════════ */
.uw-case-card { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-lg); padding: 26px; position: relative; overflow: hidden; }
.uw-case-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--uw-amber); }
.uw-case-type { font-family: var(--uw-head); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--uw-blue); margin-bottom: 10px; }
.uw-case-card h3 { font-size: 19px; margin-bottom: 14px; }
.uw-case-specs { display: grid; gap: 8px; }
.uw-case-specs div { display: flex; gap: 10px; font-size: 13.5px; }
.uw-case-specs b { font-family: var(--uw-head); font-weight: 600; color: var(--uw-dark); min-width: 110px; flex: none; }
.uw-case-specs span { color: var(--uw-grey); }

/* ════════ FAQ ════════ */
.uw-faq { max-width: 860px; margin: 0 auto; }
.uw-faq-item { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); margin-bottom: 12px; overflow: hidden; }
.uw-faq-q { width: 100%; text-align: left; background: none; border: none; padding: 19px 22px; font-family: var(--uw-head); font-weight: 600; font-size: 16px; color: var(--uw-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.uw-faq-q::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; color: var(--uw-blue); transition: transform var(--uw-t); }
.uw-faq-item.open .uw-faq-q::after { transform: rotate(45deg); }
.uw-faq-a { max-height: 0; overflow: hidden; transition: max-height var(--uw-t); }
.uw-faq-a-inner { padding: 0 22px 20px; font-size: 14.5px; color: var(--uw-grey); }
.uw-faq-item.open .uw-faq-a { max-height: 400px; }

/* ════════ RFQ / CONTACT ════════ */
.uw-rfq { background: var(--uw-navy); color: #fff; }
.uw-rfq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.uw-rfq-info .uw-eyebrow { color: var(--uw-amber); } .uw-rfq-info .uw-eyebrow::before { background: var(--uw-amber); }
.uw-rfq-info h2 { color: #fff; margin-bottom: 16px; }
.uw-rfq-info > p { color: #c4cfe2; margin-bottom: 26px; }
.uw-rfq-flow { display: grid; gap: 2px; }
.uw-rfq-flow li { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 14px; color: #dbe3f0; }
.uw-rfq-flow li b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(245,158,11,.18); color: var(--uw-amber); font-family: var(--uw-head); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.uw-rfq-flow li strong { color: #fff; }
.uw-rfq-contacts { margin-top: 26px; display: grid; gap: 10px; font-size: 14px; }
.uw-rfq-contacts a, .uw-rfq-contacts div { color: #dbe3f0; display: flex; align-items: center; gap: 9px; }
.uw-rfq-form-wrap { background: #fff; border-radius: var(--uw-radius-lg); padding: 30px; box-shadow: var(--uw-shadow-lg); }
.uw-rfq-form-wrap h3 { color: var(--uw-ink); font-size: 20px; margin-bottom: 6px; }
.uw-rfq-form-wrap > p { font-size: 13.5px; margin-bottom: 20px; }
.uw-form { display: grid; gap: 14px; }
.uw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.uw-field { display: flex; flex-direction: column; gap: 5px; }
.uw-field label { font-family: var(--uw-head); font-size: 13px; font-weight: 600; color: var(--uw-dark); }
.uw-field input, .uw-field select, .uw-field textarea { background: var(--uw-surface); border: 1.5px solid var(--uw-line); border-radius: var(--uw-radius-sm); padding: 11px 13px; font-size: 14px; color: var(--uw-ink); transition: all var(--uw-t); }
.uw-field input:focus, .uw-field select:focus, .uw-field textarea:focus { outline: none; border-color: var(--uw-blue); background: #fff; box-shadow: 0 0 0 3px var(--uw-blue-xlt); }
.uw-field textarea { resize: vertical; min-height: 92px; }
.uw-form-status { font-size: 13.5px; }
.uw-form-status.ok { color: var(--uw-green); }
.uw-form-status.err { color: #dc2626; }
.uw-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ════════ CTA BAND ════════ */
.uw-cta-band { background: linear-gradient(120deg, var(--uw-blue) 0%, var(--uw-blue-dk) 100%); color: #fff; border-radius: var(--uw-radius-lg); padding: clamp(34px,5vw,56px); text-align: center; }
.uw-cta-band h2 { color: #fff; margin-bottom: 12px; }
.uw-cta-band p { color: #d7e0fb; max-width: 580px; margin: 0 auto 26px; }
.uw-cta-band .uw-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ════════ BREADCRUMB ════════ */
.uw-bc-bar { background: var(--uw-surface); border-bottom: 1px solid var(--uw-line); }
.uw-bc-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 0; font-size: 13px; }
.uw-bc-list li { color: var(--uw-grey); }
.uw-bc-list li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--uw-line-dk); }
.uw-bc-list a { color: var(--uw-blue); }

/* ════════ PAGE / POST CONTENT ════════ */
.uw-page-hero { background: var(--uw-surface); border-bottom: 1px solid var(--uw-line); padding: clamp(40px,5vw,64px) 0; }
.uw-page-hero h1 { margin-bottom: 12px; }
.uw-prose { max-width: 820px; }
.uw-prose h2 { margin: 32px 0 14px; } .uw-prose h3 { margin: 26px 0 12px; }
.uw-prose p, .uw-prose ul, .uw-prose ol { margin-bottom: 16px; color: var(--uw-mid); }
.uw-prose ul, .uw-prose ol { padding-left: 22px; } .uw-prose ul li { list-style: disc; } .uw-prose ol li { list-style: decimal; } .uw-prose li { margin-bottom: 6px; }
.uw-prose img { border-radius: var(--uw-radius); margin: 20px 0; }
.uw-prose blockquote { border-left: 4px solid var(--uw-amber); padding: 8px 20px; background: var(--uw-surface); border-radius: 0 var(--uw-radius-sm) var(--uw-radius-sm) 0; margin: 20px 0; font-style: italic; }

/* ════════ BLOG ════════ */
.uw-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.uw-blog-card { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-lg); overflow: hidden; transition: all var(--uw-t); display: flex; flex-direction: column; }
.uw-blog-card:hover { box-shadow: var(--uw-shadow-lg); transform: translateY(-3px); }
.uw-blog-card-img img { width: 100%; height: 200px; object-fit: cover; }
.uw-blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.uw-blog-card-cat { font-size: 11.5px; font-weight: 700; font-family: var(--uw-head); text-transform: uppercase; letter-spacing: .05em; color: var(--uw-blue); margin-bottom: 9px; }
.uw-blog-card-title { font-size: 18px; margin-bottom: 9px; }
.uw-blog-card-excerpt { font-size: 13.5px; margin-bottom: 14px; }
.uw-blog-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--uw-line); font-size: 13px; }
.uw-blog-card-date { color: var(--uw-grey-lt); }
.uw-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.uw-page-num, .uw-page-btn { padding: 9px 15px; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-sm); font-family: var(--uw-head); font-weight: 600; font-size: 14px; color: var(--uw-dark); }
.uw-page-current { background: var(--uw-blue); color: #fff; border-color: var(--uw-blue); }
.uw-page-num:hover:not(.uw-page-current), .uw-page-btn:hover { border-color: var(--uw-blue); color: var(--uw-blue); }

/* WordPress-native paginate_links( type=list ) output */
.uw-pagination .page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0; margin: 0; }
.uw-pagination .page-numbers li { list-style: none; }
.uw-pagination a.page-numbers,
.uw-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 9px 14px; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-sm); font-family: var(--uw-head); font-weight: 600; font-size: 14px; color: var(--uw-dark); text-decoration: none; transition: all var(--uw-t); }
.uw-pagination a.page-numbers:hover { border-color: var(--uw-blue); color: var(--uw-blue); }
.uw-pagination span.page-numbers.current { background: var(--uw-blue); color: #fff; border-color: var(--uw-blue); }
.uw-pagination span.page-numbers.dots { border-color: transparent; }

/* ════════ SEO SINGLE PAGE ELEMENTS ════════ */
.uw-spec-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 32px; }
.uw-spec-summary-item { background: var(--uw-surface); border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: 16px 18px; }
.uw-spec-summary-item strong { display: block; font-family: var(--uw-head); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--uw-blue); margin-bottom: 6px; }
.uw-spec-summary-item span { font-size: 14.5px; color: var(--uw-ink); font-weight: 500; }
.uw-spec-table-wrap { margin-top: 36px; }
.uw-spec-table-wrap h2 { margin-bottom: 16px; }
.uw-info-card { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: 24px; }
.uw-info-card h3 { font-size: 18px; margin-bottom: 12px; }
.uw-info-card p { font-size: 14px; }
@media (max-width: 768px) { .uw-spec-summary { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .uw-spec-summary { grid-template-columns: 1fr; } }

/* ════════ NEWS / BLOG BLOCK (home: 1 featured + 4 grid) ════════ */
.uw-news-feat-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.uw-news-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.uw-news-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-lg); overflow: hidden; transition: transform var(--uw-t), box-shadow var(--uw-t); }
.uw-news-featured:hover { box-shadow: var(--uw-shadow-lg); transform: translateY(-2px); }
.uw-news-featured-img { min-height: 280px; background: var(--uw-surface2); overflow: hidden; }
.uw-news-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.uw-news-featured:hover .uw-news-featured-img img { transform: scale(1.04); }
.uw-news-featured-body { padding: clamp(24px,3vw,44px); display: flex; flex-direction: column; justify-content: center; }
.uw-news-cat { display: inline-flex; align-self: flex-start; align-items: center; font-size: 11px; font-weight: 700; font-family: var(--uw-head); text-transform: uppercase; letter-spacing: .06em; color: var(--uw-blue); background: var(--uw-blue-xlt); padding: 4px 10px; border-radius: 100px; margin-bottom: 14px; }
.uw-news-featured-body h3 { font-size: clamp(20px,2.6vw,28px); margin-bottom: 12px; line-height: 1.25; }
.uw-news-featured-body h3 a { color: var(--uw-ink); }
.uw-news-featured-body h3 a:hover { color: var(--uw-blue); }
.uw-news-featured-body p { font-size: 14.5px; margin-bottom: 18px; }
.uw-news-card { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--uw-t), box-shadow var(--uw-t), border-color var(--uw-t); }
.uw-news-card:hover { box-shadow: var(--uw-shadow-lg); transform: translateY(-3px); border-color: var(--uw-blue-lt); }
.uw-news-card-img { height: 142px; background: var(--uw-surface2); overflow: hidden; }
.uw-news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.uw-news-card:hover .uw-news-card-img img { transform: scale(1.05); }
.uw-news-card-body { padding: 16px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.uw-news-card .uw-news-cat { font-size: 10.5px; padding: 3px 9px; margin-bottom: 10px; }
.uw-news-card h4 { font-size: 15px; line-height: 1.38; margin-bottom: 10px; }
.uw-news-card h4 a { color: var(--uw-ink); }
.uw-news-card h4 a:hover { color: var(--uw-blue); }
.uw-news-date { font-size: 12px; color: var(--uw-grey-lt); margin-top: auto; }

/* ════════ SEO CATEGORY PANELS (home + index menu pages) ════════ */
.uw-cats { background: var(--uw-white); }
.uw-seo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.uw-seo-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.uw-seo-grid.cols-3 { grid-template-columns: repeat(3,1fr); }

.uw-seo-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius); padding: 24px 22px 20px; overflow: hidden; transition: transform var(--uw-t), box-shadow var(--uw-t), border-color var(--uw-t); }
.uw-seo-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--uw-amber); transform: scaleY(0); transform-origin: top; transition: transform var(--uw-t); }
.uw-seo-card:hover { border-color: var(--uw-blue-lt); box-shadow: var(--uw-shadow-lg); transform: translateY(-3px); }
.uw-seo-card:hover::before { transform: scaleY(1); }
.uw-seo-card-num { font-family: var(--uw-head); font-weight: 800; font-size: 12px; letter-spacing: .08em; color: var(--uw-grey-lt); margin-bottom: 12px; }
.uw-seo-card strong { font-family: var(--uw-head); font-size: 16.5px; line-height: 1.3; color: var(--uw-ink); margin-bottom: 9px; }
.uw-seo-card .uw-seo-card-ex,
.uw-seo-card > span:not(.uw-seo-card-num) { font-size: 13.5px; line-height: 1.55; color: var(--uw-grey); margin-bottom: 16px; }
.uw-seo-card em { font-style: normal; margin-top: auto; font-family: var(--uw-head); font-weight: 600; font-size: 13.5px; color: var(--uw-blue); display: inline-flex; align-items: center; gap: 6px; }
.uw-seo-card em span { transition: transform var(--uw-t); }
.uw-seo-card:hover em { color: var(--uw-blue-dk); }
.uw-seo-card:hover em span { transform: translateX(4px); }

/* Each category is a panel; alternate panels get a soft surface + inset padding. */
.uw-cat-block + .uw-cat-block { margin-top: clamp(28px,4vw,44px); }
.uw-cat-block.is-alt { background: var(--uw-surface); border: 1px solid var(--uw-line); border-radius: var(--uw-radius-lg); padding: clamp(26px,3.4vw,44px); }
.uw-cat-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-bottom: clamp(20px,2.4vw,28px); flex-wrap: wrap; }
.uw-cat-block-intro { max-width: 760px; }
.uw-cat-block-intro h2 { font-size: clamp(22px,3vw,32px); margin-bottom: 8px; }
.uw-cat-block-intro .uw-lead { margin-top: 0; }
.uw-cat-viewall { display: inline-flex; align-items: center; gap: 7px; font-family: var(--uw-head); font-weight: 600; font-size: 14px; white-space: nowrap; padding: 9px 16px; border: 1px solid var(--uw-line-dk); border-radius: 100px; color: var(--uw-ink); transition: all var(--uw-t); }
.uw-cat-viewall span { transition: transform var(--uw-t); }
.uw-cat-viewall:hover { border-color: var(--uw-blue); color: var(--uw-blue); background: var(--uw-blue-xlt); }
.uw-cat-viewall:hover span { transform: translateX(4px); }

/* ════════ EMBEDDED 3D CONFIGURATOR (home) ════════ */
.uw-config-embed-section { background: linear-gradient(180deg, var(--uw-surface) 0%, var(--uw-white) 100%); }
.uw-config-embed-wrap { background: #fff; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-lg); box-shadow: var(--uw-shadow-lg); padding: clamp(14px,2vw,28px); }
.uw-config-embed-wrap .ubc-app { max-width: 100%; }

@media (max-width: 900px) {
  .uw-news-row { grid-template-columns: repeat(2,1fr); }
  .uw-seo-grid, .uw-seo-grid.cols-4, .uw-seo-grid.cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .uw-news-featured { grid-template-columns: 1fr; }
  .uw-news-featured-img { min-height: 180px; }
  .uw-news-row { grid-template-columns: 1fr; }
  .uw-seo-grid, .uw-seo-grid.cols-4, .uw-seo-grid.cols-3 { grid-template-columns: 1fr; }
  .uw-cat-block.is-alt { padding: 22px 18px; }
}

/* ════════ FOOTER ════════ */
.uw-footer { background: var(--uw-navy-dk); color: #aab6cc; padding: clamp(48px,6vw,72px) 0 0; }
.uw-footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.uw-footer-brand .uw-footer-logo { font-family: var(--uw-head); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 9px; }
.uw-footer-logo-img { max-height: 48px; margin-bottom: 14px; }
.uw-footer-brand p { font-size: 14px; max-width: 320px; margin-bottom: 16px; }
.uw-footer-brand div { font-size: 13.5px; margin-bottom: 6px; }
.uw-footer-brand a { color: #aab6cc; } .uw-footer-brand a:hover { color: #fff; }
.uw-footer-title { font-family: var(--uw-head); font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 16px; letter-spacing: .02em; }
.uw-footer-col ul li { margin-bottom: 9px; }
.uw-footer-col a { font-size: 13.5px; color: #aab6cc; } .uw-footer-col a:hover { color: var(--uw-amber); }
.uw-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.uw-footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 22px 0; font-size: 12.5px; color: #7a89a6; }

/* ════════ 404 / NO RESULTS ════════ */
.uw-empty { text-align: center; padding: 60px 20px; }
.uw-empty .uw-empty-ico { font-size: 54px; margin-bottom: 16px; }
.uw-empty h2 { margin-bottom: 10px; }
.uw-empty p { margin-bottom: 22px; }

/* ════════ MISC ════════ */
.uw-hero-content { min-width: 0; }
.uw-blog-card-link { font-family: var(--uw-head); font-weight: 600; color: var(--uw-blue); white-space: nowrap; }
.uw-blog-card-link:hover { color: var(--uw-blue-dk); }
.uw-page-links { margin-top: 20px; font-family: var(--uw-head); font-weight: 600; font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.uw-page-links a { display: inline-flex; min-width: 34px; justify-content: center; padding: 6px 10px; border: 1px solid var(--uw-line); border-radius: var(--uw-radius-sm); }
.uw-page-links a:hover { border-color: var(--uw-blue); }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
  .uw-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .uw-hero-visual { max-width: 520px; }
  .uw-config-grid { grid-template-columns: 1fr; }
  .uw-rfq-grid { grid-template-columns: 1fr; gap: 32px; }
  .uw-grid-4 { grid-template-columns: repeat(3,1fr); }
  .uw-flow { grid-template-columns: repeat(2,1fr); }
  .uw-flow-step:nth-child(4n)::after { display: block; }
  .uw-flow-step:nth-child(2n)::after, .uw-flow-step:last-child::after { display: none; }
  .uw-trust-grid { grid-template-columns: repeat(2,1fr); }
  .uw-trust-item:nth-child(2) { border-right: none; }
  .uw-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 1080px) {
  .uw-nav, .uw-header-actions .uw-btn { display: none; }
  .uw-ham { display: flex; }
}
@media (max-width: 768px) {
  .uw-grid-2, .uw-grid-3, .uw-grid-4 { grid-template-columns: 1fr; }
  .uw-blog-grid { grid-template-columns: 1fr; }
  .uw-qc-grid { grid-template-columns: 1fr; }
  .uw-config-opts { grid-template-columns: 1fr; }
  .uw-form-row { grid-template-columns: 1fr; }
  .uw-print-table { display: block; overflow-x: auto; white-space: nowrap; }
  .uw-footer-inner { grid-template-columns: 1fr; }
  .uw-topbar-inner { font-size: 12px; }
  .uw-tb-left span:not(:first-child), .uw-tb-sep { display: none; }
}
@media (max-width: 520px) {
  .uw-trust-grid { grid-template-columns: 1fr; }
  .uw-trust-item { border-right: none; }
  .uw-flow { grid-template-columns: 1fr; }
  .uw-flow-step::after { display: none !important; }
  .uw-hero-stat-grid { grid-template-columns: repeat(3,1fr); }
}

/* ════════ LIGHTWEIGHT UMBRELLA HOMEPAGE LAYOUTS (v1.3.6) ════════
   Top-view umbrella components. Content remains normal crawlable HTML links;
   the canopy/rib details are CSS/SVG decoration only. */
.uw-layout-network { position: relative; }
.uw-umbrella-net { position: relative; max-width: 1160px; margin: 0 auto; }
.uw-umbrella-net-view { position: absolute; right: 10px; top: 4px; z-index: 18; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 1px solid var(--uw-line); border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: var(--uw-shadow); font-family: var(--uw-head); font-size: 13px; font-weight: 700; color: var(--uw-blue); }
.uw-umbrella-net-view:hover { border-color: var(--uw-blue-lt); color: var(--uw-blue-dk); transform: translateY(-1px); }
.uw-umbrella-net-stage { position: relative; min-height: 840px; margin-top: 6px; border-radius: 34px; background: radial-gradient(circle at 50% 49%, #fff 0, #f6f8fb 54%, #eef2f8 100%); border: 1px solid rgba(20,35,61,.08); overflow: visible; filter: drop-shadow(0 18px 34px rgba(38,48,59,.08)); }
.uw-cat-block.is-alt .uw-umbrella-net-stage { background: radial-gradient(circle at 50% 49%, #fff 0, #f7f8fb 58%, #edf1f7 100%); }
.uw-umbrella-net-svg { position: absolute; inset: 26px 16px; width: calc(100% - 32px); height: calc(100% - 52px); pointer-events: none; overflow: visible; }
.uw-umbrella-net-canopy { filter: drop-shadow(0 18px 30px rgba(38,48,59,.15)); }
.uw-umbrella-net-panel { opacity: .48; mix-blend-mode: multiply; }
.uw-umbrella-net-panel:nth-child(odd) { fill: rgba(255,255,255,.34); }
.uw-umbrella-net-panel:nth-child(even) { fill: rgba(50,57,63,.08); }
.uw-umbrella-net-panel:nth-child(3n) { fill: rgba(31,79,214,.055); }
.uw-umbrella-net-shine { opacity: .55; }
.uw-umbrella-net-outline { fill: none; stroke: rgba(55,64,70,.38); stroke-width: 2.8; stroke-linejoin: round; }
.uw-umbrella-net-outer-edge line { stroke: rgba(56,62,65,.44); stroke-width: 2.1; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(255,255,255,.66)); }
.uw-umbrella-net-inner { fill: none; stroke: rgba(67,72,75,.36); stroke-width: 1.8; stroke-linejoin: round; }
.uw-umbrella-net-ribs line { stroke-width: 2.8; stroke-linecap: round; filter: drop-shadow(0 0 1px rgba(255,255,255,.72)); }
.uw-umbrella-net-panel-lines line { stroke: rgba(67,72,75,.32); stroke-width: 1.55; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(255,255,255,.64)); }
.uw-umbrella-net-dots circle { stroke: rgba(255,255,255,.72); stroke-width: 2.2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.20)); }
.uw-umbrella-net-cap { stroke: rgba(255,255,255,.74); stroke-width: 4; filter: drop-shadow(0 7px 14px rgba(17,24,39,.22)); }
.uw-umbrella-net-center { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); z-index: 8; width: min(292px, 32vw); min-height: 204px; border-radius: 999px; background: radial-gradient(circle at 50% 38%, #fff 0, #f6f8fb 56%, #e8edf6 100%); border: 1px solid rgba(55,64,70,.16); box-shadow: 0 20px 54px rgba(17,24,39,.13), inset 0 0 0 1px rgba(255,255,255,.68); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 28px 30px; }
.uw-umbrella-net-center::before { content: ''; position: absolute; inset: 14px; border-radius: inherit; border: 1px dashed rgba(31,79,214,.22); pointer-events: none; }
.uw-umbrella-net-center::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 30%, #fff 0 10%, #444 12% 36%, #060606 38% 72%, #282828 100%); opacity: .12; pointer-events: none; }
.uw-umbrella-net-center span { position: relative; z-index: 1; display: block; font-family: var(--uw-head); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--uw-blue); margin-bottom: 9px; }
.uw-umbrella-net-center h2 { position: relative; z-index: 1; font-size: clamp(20px,2.35vw,29px); line-height: 1.16; margin: 0 0 10px; }
.uw-umbrella-net-center p { position: relative; z-index: 1; font-size: 13px; line-height: 1.45; color: var(--uw-grey); margin: 0; }
.uw-umbrella-net-items { list-style: none; margin: 0; padding: 0; }
.uw-umbrella-net-item { position: absolute; left: var(--uw-x); top: var(--uw-y); z-index: 12; transform: translate(-50%,-50%); width: 226px; opacity: 1; transition: opacity .45s ease var(--uw-delay), transform .45s cubic-bezier(.2,.7,.2,1) var(--uw-delay); }
.uw-umbrella-net-item:hover { z-index: 22; }
.uw-js .uw-umbrella-net:not(.is-on) .uw-umbrella-net-item { opacity: 0; transform: translate(-50%,-44%) scale(.92); }
.uw-umbrella-net-card { --uw-card-poly: polygon(50% 3%,70% 10%,88% 27%,93% 50%,80% 75%,59% 93%,36% 90%,14% 73%,6% 49%,13% 26%,30% 10%); position: relative; display: flex; text-decoration: none; flex-direction: column; min-height: 168px; padding: 27px 24px 28px; color: var(--uw-ink); filter: drop-shadow(0 14px 28px rgba(17,24,39,.10)); transition: transform var(--uw-t), filter var(--uw-t); }
.uw-umbrella-net-card::before,
.uw-umbrella-net-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; clip-path: var(--uw-card-poly); }
.uw-umbrella-net-card::before { z-index: 0; background: linear-gradient(135deg, rgba(31,79,214,.86), rgba(127,166,255,.58)); }
.uw-umbrella-net-card::after { inset: 2px; z-index: 1; background: radial-gradient(ellipse at 50% 47%, rgba(255,255,255,1) 0 35%, rgba(246,248,252,.98) 68%, rgba(232,237,246,.98) 100%); box-shadow: inset 0 -18px 30px rgba(62,67,68,.06); }
.uw-umbrella-net-card:hover { transform: scale(1.07); filter: drop-shadow(0 24px 44px rgba(17,24,39,.18)); color: var(--uw-ink); }
.uw-umbrella-net-card > * { position: relative; z-index: 3; }
.uw-umbrella-net-card::selection { background: transparent; }
.uw-umbrella-net-num { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 50%; margin-bottom: 10px; background: var(--uw-amber-lt); color: var(--uw-amber-dk); font-family: var(--uw-head); font-weight: 800; font-size: 12px; box-shadow: 0 1px 0 rgba(255,255,255,.8); }
.uw-umbrella-net-card strong { font-family: var(--uw-head); color: var(--uw-ink); font-size: 15.5px; line-height: 1.25; margin-bottom: 7px; }
.uw-umbrella-net-ex { font-size: 12.5px; line-height: 1.45; color: var(--uw-grey); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Reusable umbrella-shaped content frames for Manufacturing/Solutions and SEO archive pages.
   v1.3.6: Manufacturing/Solutions cards now use the same detailed top-view umbrella canopy
   language from the static CSS reference, with low-opacity ribs/folds behind the text.
   Featured images remain normal rectangles. */
.uw-umb-frame-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px 26px; align-items: stretch; }
.uw-umb-frame-grid.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.uw-umb-frame-grid.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.uw-umb-frame-card { position: relative; display: flex; text-decoration: none; flex-direction: column; min-height: 0; background: transparent; color: var(--uw-ink); border: 0; overflow: visible; transition: transform var(--uw-t), filter var(--uw-t); }
.uw-umb-frame-card:hover { transform: translateY(-5px) scale(1.018); filter: drop-shadow(0 22px 42px rgba(17,24,39,.12)); color: var(--uw-ink); }
.uw-umb-frame-media { display: block; height: 150px; margin: 0 10px 16px; background: var(--uw-surface2); overflow: hidden; border-radius: 18px; border: 1px solid var(--uw-line); }
.uw-umb-frame-media img { width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.uw-umb-frame-card:hover .uw-umb-frame-media img { transform: none !important; }
.uw-umb-frame-body { --uw-frame-poly: polygon(50% 3%,70% 10%,88% 27%,93% 50%,80% 75%,59% 93%,36% 90%,14% 73%,6% 49%,13% 26%,30% 10%); position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-height: 236px; aspect-ratio: 1.22 / 1; padding: 42px 30px 34px; color: var(--uw-ink); isolation: isolate; filter: drop-shadow(0 18px 30px rgba(38,48,59,.10)); }
.uw-umb-frame-canopy { position: absolute; inset: 0; z-index: 0; pointer-events: none; clip-path: var(--uw-frame-poly); border-radius: 7px; overflow: hidden; background:
  radial-gradient(circle at 50% 49%, rgba(255,255,255,.66) 0 3%, transparent 12%),
  radial-gradient(ellipse at 50% 49%, rgba(255,255,255,.82) 0 18%, rgba(229,233,240,.58) 34%, rgba(191,197,205,.36) 69%, rgba(167,174,184,.28) 100%),
  repeating-conic-gradient(from -90deg at 50% 49%, rgba(255,255,255,.16) 0deg 18deg, rgba(69,72,73,.035) 18deg 36deg);
  box-shadow: inset 0 0 0 1.5px rgba(31,79,214,.40), inset 0 -22px 34px rgba(62,67,68,.08); }
.uw-umb-frame-canopy::before { content: ''; position: absolute; inset: -2px; background:
  conic-gradient(from -88deg at 50% 49%,
    rgba(255,255,255,.22) 0deg 20deg, rgba(65,70,72,.035) 20deg 38deg,
    rgba(255,255,255,.16) 38deg 62deg, rgba(55,58,60,.045) 62deg 92deg,
    rgba(255,255,255,.18) 92deg 128deg, rgba(45,48,50,.05) 128deg 165deg,
    rgba(255,255,255,.20) 165deg 201deg, rgba(54,57,59,.045) 201deg 236deg,
    rgba(255,255,255,.14) 236deg 269deg, rgba(43,46,48,.05) 269deg 306deg,
    rgba(255,255,255,.17) 306deg 338deg, rgba(50,54,56,.04) 338deg 360deg);
  mix-blend-mode: multiply; opacity: .62; }
.uw-umb-frame-canopy::after { content: ''; position: absolute; inset: 0; clip-path: var(--uw-frame-poly); background: linear-gradient(to bottom, rgba(255,255,255,.18), transparent 38%, rgba(0,0,0,.055) 100%); box-shadow: inset 0 0 0 1px rgba(31,79,214,.26), inset 0 -22px 34px rgba(62,67,68,.08); }
.uw-umb-frame-rib, .uw-umb-frame-fold, .uw-umb-frame-edge, .uw-umb-frame-tip, .uw-umb-frame-hub { position: absolute; display: block; pointer-events: none; }
.uw-umb-frame-rib { left: 50%; top: 49%; z-index: 2; width: 1px; height: var(--l); transform-origin: 0 0; transform: rotate(var(--a)); background: linear-gradient(to bottom, rgba(64,70,73,.18), rgba(110,116,118,.06)); box-shadow: 0 0 1px rgba(255,255,255,.55); }
.uw-umb-frame-fold, .uw-umb-frame-edge { z-index: 2; height: 1px; transform-origin: left center; background: linear-gradient(to right, rgba(67,72,75,.16), rgba(255,255,255,.34), rgba(67,72,75,.12)); box-shadow: 0 1px 1px rgba(255,255,255,.42); }
.uw-umb-frame-edge { z-index: 3; background: rgba(31,79,214,.24); box-shadow: 0 0 1px rgba(255,255,255,.70); }
.uw-umb-frame-tip { width: 6px; height: 6px; border-radius: 50%; z-index: 4; background: radial-gradient(circle at 35% 30%, #fff 0 13%, rgba(59,65,72,.52) 15% 45%, rgba(17,24,39,.70) 80%); box-shadow: 0 1px 3px rgba(0,0,0,.16); transform: translate(-50%, -50%); opacity: .62; }
.uw-umb-frame-hub { left: 50%; top: 49%; width: 16px; height: 16px; border-radius: 50%; z-index: 5; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.88) 0 9%, rgba(57,57,57,.36) 10% 31%, rgba(5,5,5,.55) 32% 72%, rgba(40,40,40,.42) 73% 100%); border: 1px solid rgba(0,0,0,.24); box-shadow: 0 2px 5px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.10); opacity: .58; }
.uw-umb-frame-content { position: relative; z-index: 6; display: flex; flex-direction: column; height: 100%; padding: 4px 0 0; }
.uw-umb-frame-content::before { content: ''; position: absolute; z-index: -1; inset: -13px -16px -15px; border-radius: 20px; background: rgba(255,255,255,.56); box-shadow: 0 1px 0 rgba(255,255,255,.70), inset 0 0 0 1px rgba(255,255,255,.28); }
.uw-umb-frame-lines { display: none !important; }
.uw-umb-frame-num { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 29px; height: 29px; border-radius: 50%; margin-bottom: 10px; padding: 0; background: rgba(255,247,232,.94); color: var(--uw-amber-dk); font-family: var(--uw-head); font-weight: 800; font-size: 12px; letter-spacing: .02em; box-shadow: 0 1px 0 rgba(255,255,255,.8); }
.uw-umb-frame-card strong { font-family: var(--uw-head); color: var(--uw-ink); font-size: 15.5px; line-height: 1.25; margin-bottom: 7px; }
.uw-umb-frame-ex { font-size: 12.8px; line-height: 1.48; color: var(--uw-grey); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.uw-umb-frame-card em { font-style: normal; margin-top: auto; font-family: var(--uw-head); font-weight: 700; font-size: 13px; color: var(--uw-blue); display: inline-flex; align-items: center; gap: 5px; }
.uw-umb-frame-card em span { transition: transform var(--uw-t); }
.uw-umb-frame-card:hover em span { transform: translateX(4px); }
.uw-js .uw-reveal { opacity: 0; transform: translateY(20px) scale(.985); transition: opacity .5s ease var(--uw-delay,0ms), transform .5s cubic-bezier(.2,.7,.2,1) var(--uw-delay,0ms); }
.uw-js .uw-reveal.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .uw-umbrella-net-item,
  .uw-umbrella-net-card,
  .uw-umb-frame-card,
  .uw-js .uw-reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}
@media (max-width: 1180px) {
  .uw-umbrella-net-stage { min-height: 880px; }
  .uw-umbrella-net-item { width: 210px; }
  .uw-umbrella-net-center { width: 282px; min-height: 196px; }
}
@media (max-width: 980px) {
  .uw-umbrella-net-stage { min-height: auto; padding: 282px 18px 24px; overflow: visible; }
  .uw-umbrella-net-svg { top: 18px; left: 50%; width: 530px; height: 380px; transform: translateX(-50%); }
  .uw-umbrella-net-center { top: 190px; width: 274px; min-height: 178px; }
  .uw-umbrella-net-items { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; position: relative; z-index: 13; }
  .uw-umbrella-net-item { position: static; width: auto; transform: none; }
  .uw-js .uw-umbrella-net:not(.is-on) .uw-umbrella-net-item { transform: translateY(12px) scale(.98); }
  .uw-umbrella-net-card:hover { transform: translateY(-3px); }
  .uw-umb-frame-grid, .uw-umb-frame-grid.cols-4, .uw-umb-frame-grid.cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .uw-umbrella-net-view { position: static; margin-bottom: 14px; }
  .uw-umbrella-net-stage { padding: 250px 14px 18px; border-radius: 22px; }
  .uw-umbrella-net-svg { width: 420px; height: 310px; }
  .uw-umbrella-net-center { top: 166px; width: 238px; min-height: 150px; padding: 22px; }
  .uw-umbrella-net-center h2 { font-size: 19px; }
  .uw-umbrella-net-center p { display: none; }
  .uw-umbrella-net-items { grid-template-columns: 1fr; }
  .uw-umb-frame-grid, .uw-umb-frame-grid.cols-4, .uw-umb-frame-grid.cols-3 { grid-template-columns: 1fr; }
  .uw-umb-frame-body { min-height: 176px; padding: 27px 23px 29px; }
}


/* ════════ v1.3.6 FINISHING PASS: centered umbrella content, no rectangular overlay ════════
   The Product Lines and OEM/ODM network cards now share the same top-view canopy language.
   Manufacturing/Solutions cards keep the detailed canopy, but the transparent rectangle behind
   text is removed; text is centered and constrained so it stays inside the umbrella face. */
.uw-umbrella-net-card {
  aspect-ratio: 1.22 / 1;
  min-height: 184px;
  padding: 30px 30px 28px;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: visible;
}
.uw-umbrella-net-card::before {
  background: linear-gradient(135deg, rgba(31,79,214,.70), rgba(127,166,255,.42));
}
.uw-umbrella-net-card::after {
  inset: 2px;
  background:
    radial-gradient(circle at 50% 49%, rgba(255,255,255,.72) 0 3%, transparent 12%),
    radial-gradient(ellipse at 50% 49%, rgba(255,255,255,.96) 0 20%, rgba(241,244,250,.93) 43%, rgba(224,231,241,.86) 72%, rgba(210,219,233,.78) 100%),
    conic-gradient(from -88deg at 50% 49%,
      rgba(255,255,255,.32) 0deg 20deg, rgba(65,70,72,.045) 20deg 38deg,
      rgba(255,255,255,.24) 38deg 62deg, rgba(55,58,60,.06) 62deg 92deg,
      rgba(255,255,255,.28) 92deg 128deg, rgba(45,48,50,.06) 128deg 165deg,
      rgba(255,255,255,.30) 165deg 201deg, rgba(54,57,59,.055) 201deg 236deg,
      rgba(255,255,255,.22) 236deg 269deg, rgba(43,46,48,.06) 269deg 306deg,
      rgba(255,255,255,.25) 306deg 338deg, rgba(50,54,56,.05) 338deg 360deg);
  box-shadow: inset 0 0 0 1px rgba(31,79,214,.18), inset 0 -18px 28px rgba(62,67,68,.045);
}
.uw-umbrella-net-num {
  align-self: center;
  margin: 0 0 8px;
  flex: 0 0 auto;
}
.uw-umbrella-net-card strong,
.uw-umbrella-net-ex {
  max-width: 158px;
  margin-left: auto;
  margin-right: auto;
}
.uw-umbrella-net-card strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}
.uw-umbrella-net-ex {
  -webkit-line-clamp: 2;
  text-align: center;
}

.uw-umb-frame-body {
  min-height: 236px;
  padding: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.uw-umb-frame-canopy {
  background:
    radial-gradient(circle at 50% 49%, rgba(255,255,255,.58) 0 3%, transparent 12%),
    radial-gradient(ellipse at 50% 49%, rgba(255,255,255,.68) 0 18%, rgba(229,233,240,.42) 34%, rgba(191,197,205,.24) 69%, rgba(167,174,184,.18) 100%),
    repeating-conic-gradient(from -90deg at 50% 49%, rgba(255,255,255,.12) 0deg 18deg, rgba(69,72,73,.025) 18deg 36deg);
  box-shadow: inset 0 0 0 1.5px rgba(31,79,214,.30), inset 0 -22px 34px rgba(62,67,68,.045);
}
.uw-umb-frame-canopy::before { opacity: .44; }
.uw-umb-frame-canopy::after {
  background: linear-gradient(to bottom, rgba(255,255,255,.13), transparent 38%, rgba(0,0,0,.035) 100%);
  box-shadow: inset 0 0 0 1px rgba(31,79,214,.18), inset 0 -22px 34px rgba(62,67,68,.045);
}
.uw-umb-frame-rib { background: linear-gradient(to bottom, rgba(64,70,73,.13), rgba(110,116,118,.045)); }
.uw-umb-frame-fold, .uw-umb-frame-edge { background: linear-gradient(to right, rgba(67,72,75,.105), rgba(255,255,255,.25), rgba(67,72,75,.08)); }
.uw-umb-frame-edge { background: rgba(31,79,214,.18); }
.uw-umb-frame-tip { opacity: .48; }
.uw-umb-frame-hub { opacity: .42; }
.uw-umb-frame-content {
  width: 64%;
  max-width: 190px;
  min-height: 58%;
  height: auto;
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.uw-umb-frame-content::before {
  content: none !important;
  display: none !important;
}
.uw-umb-frame-num {
  align-self: center;
  margin: 0 0 8px;
  flex: 0 0 auto;
}
.uw-umb-frame-card strong,
.uw-umb-frame-ex,
.uw-umb-frame-card em {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.uw-umb-frame-card strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uw-umb-frame-ex {
  -webkit-line-clamp: 2;
  margin-bottom: 10px;
}
.uw-umb-frame-card em {
  margin-top: 2px;
  justify-content: center;
}

@media (max-width: 1180px) {
  .uw-umbrella-net-card strong,
  .uw-umbrella-net-ex { max-width: 146px; }
}
@media (max-width: 980px) {
  .uw-umbrella-net-card {
    min-height: 170px;
    padding: 28px 26px 26px;
  }
  .uw-umbrella-net-card strong,
  .uw-umbrella-net-ex { max-width: 160px; }
  .uw-umb-frame-content { width: 62%; max-width: 188px; }
}
@media (max-width: 640px) {
  .uw-umbrella-net-card { min-height: 166px; }
  .uw-umb-frame-body { min-height: 182px; }
  .uw-umb-frame-content { width: 68%; max-width: 210px; }
}


/* ════════ v1.3.6: unify all homepage small canopy cards ════════
   Customization Capabilities now uses the same umbrella-card system as Manufacturing/Solutions.
   Product Lines + OEM/ODM network tips get the same detailed top-view canopy, centered text,
   and no separate rectangular inner wrapper. */
.uw-layout-frame .uw-cat-block-head { margin-bottom: 28px; }

.uw-umbrella-net-card {
  --uw-card-poly: polygon(50% 3%,70% 10%,88% 27%,93% 50%,80% 75%,59% 93%,36% 90%,14% 73%,6% 49%,13% 26%,30% 10%);
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.22 / 1;
  min-height: 184px;
  padding: 0;
  overflow: visible;
  isolation: isolate;
}
.uw-umbrella-net-card::before,
.uw-umbrella-net-card::after { content: none !important; display: none !important; }
.uw-umbrella-net-card > .uw-net-card-canopy { z-index: 0; }
.uw-net-card-canopy {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--uw-card-poly);
  border-radius: 7px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 49%, rgba(255,255,255,.72) 0 3%, transparent 12%),
    radial-gradient(ellipse at 50% 49%, rgba(255,255,255,.97) 0 18%, rgba(234,239,248,.82) 36%, rgba(209,219,235,.58) 70%, rgba(190,203,222,.46) 100%),
    repeating-conic-gradient(from -90deg at 50% 49%, rgba(255,255,255,.20) 0deg 18deg, rgba(69,72,73,.035) 18deg 36deg);
  box-shadow: inset 0 0 0 1.7px rgba(31,79,214,.54), inset 0 -22px 34px rgba(62,67,68,.055);
  filter: drop-shadow(0 14px 28px rgba(17,24,39,.10));
}
.uw-net-card-canopy::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(from -88deg at 50% 49%,
    rgba(255,255,255,.26) 0deg 20deg, rgba(65,70,72,.030) 20deg 38deg,
    rgba(255,255,255,.19) 38deg 62deg, rgba(55,58,60,.040) 62deg 92deg,
    rgba(255,255,255,.21) 92deg 128deg, rgba(45,48,50,.045) 128deg 165deg,
    rgba(255,255,255,.24) 165deg 201deg, rgba(54,57,59,.040) 201deg 236deg,
    rgba(255,255,255,.18) 236deg 269deg, rgba(43,46,48,.045) 269deg 306deg,
    rgba(255,255,255,.20) 306deg 338deg, rgba(50,54,56,.035) 338deg 360deg);
  mix-blend-mode: multiply;
  opacity: .68;
}
.uw-net-card-canopy::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--uw-card-poly);
  background: linear-gradient(to bottom, rgba(255,255,255,.18), transparent 38%, rgba(0,0,0,.04) 100%);
  box-shadow: inset 0 0 0 1px rgba(31,79,214,.20), inset 0 -20px 30px rgba(62,67,68,.045);
}
.uw-net-card-rib,
.uw-net-card-fold,
.uw-net-card-edge,
.uw-net-card-tip,
.uw-net-card-hub { position: absolute; display: block; pointer-events: none; }
.uw-net-card-rib { left: 50%; top: 49%; z-index: 2; width: 1px; height: var(--l); transform-origin: 0 0; transform: rotate(var(--a)); background: linear-gradient(to bottom, rgba(64,70,73,.11), rgba(110,116,118,.04)); box-shadow: 0 0 1px rgba(255,255,255,.55); }
.uw-net-card-fold,
.uw-net-card-edge { z-index: 2; height: 1px; transform-origin: left center; background: linear-gradient(to right, rgba(67,72,75,.10), rgba(255,255,255,.27), rgba(67,72,75,.075)); box-shadow: 0 1px 1px rgba(255,255,255,.40); }
.uw-net-card-edge { z-index: 3; background: rgba(31,79,214,.18); box-shadow: 0 0 1px rgba(255,255,255,.70); }
.uw-net-card-tip { width: 5px; height: 5px; border-radius: 50%; z-index: 4; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 30%, #fff 0 13%, rgba(59,65,72,.46) 15% 45%, rgba(17,24,39,.62) 80%); box-shadow: 0 1px 3px rgba(0,0,0,.12); opacity: .44; }
.uw-net-card-hub { left: 50%; top: 49%; width: 14px; height: 14px; border-radius: 50%; z-index: 5; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.84) 0 9%, rgba(57,57,57,.32) 10% 31%, rgba(5,5,5,.46) 32% 72%, rgba(40,40,40,.36) 73% 100%); border: 1px solid rgba(0,0,0,.18); box-shadow: 0 2px 5px rgba(0,0,0,.13), inset 0 0 0 2px rgba(255,255,255,.10); opacity: .40; }
.uw-umbrella-net-content {
  position: relative;
  z-index: 6;
  width: 64%;
  max-width: 168px;
  min-height: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto;
}
.uw-umbrella-net-content .uw-umbrella-net-num { align-self: center; margin: 0 0 8px; flex: 0 0 auto; }
.uw-umbrella-net-content strong,
.uw-umbrella-net-content .uw-umbrella-net-ex { max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
.uw-umbrella-net-content strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uw-umbrella-net-content .uw-umbrella-net-ex { -webkit-line-clamp: 2; }

/* Keep all small umbrella cards visually consistent after the Customization block joins this system. */
.uw-umb-frame-grid.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.uw-umb-frame-body { min-height: 236px; }
.uw-umb-frame-content { width: 64%; max-width: 188px; min-height: 58%; }

@media (max-width: 1180px) {
  .uw-umbrella-net-content { max-width: 158px; }
}
@media (max-width: 980px) {
  .uw-umbrella-net-card { min-height: 170px; }
  .uw-umbrella-net-content { max-width: 168px; }
  .uw-umb-frame-grid.cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .uw-umbrella-net-content { width: 68%; max-width: 210px; }
  .uw-umb-frame-grid.cols-3 { grid-template-columns: 1fr; }
}