:root {
  --navy: #06244d;
  --navy-2: #0b3a78;
  --blue: #155ba6;
  --sky: #eaf3ff;
  --ink: #12233d;
  --muted: #66758a;
  --line: #dbe3ee;
  --soft: #f4f7fb;
  --yellow: #facc15;
  --orange: #f97316;
  --green: #16a34a;
  --white: #fff;
  --shadow: 0 18px 45px rgba(6, 36, 77, .12);
  --radius: 8px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #fff;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1280px, calc(100% - 40px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 60; background: var(--navy); color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.utility-bar { height: 34px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #d7e6ff; }
.utility-inner, .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 20px; }
.utility-left, .utility-right { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.utility-link { opacity: .9; display: inline-flex; align-items: center; gap: 6px; }
.utility-link:hover { color: var(--yellow); opacity: 1; }
.utility-icon { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.utility-icon svg { width: 15px; height: 15px; display: block; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.utility-select { position: relative; height: 34px; display: flex; align-items: center; }
.utility-trigger { height: 26px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: #e8f2ff; padding: 0 10px; font: inherit; cursor: pointer; }
.utility-trigger:hover, .utility-select.open .utility-trigger { color: var(--yellow); border-color: rgba(250,204,21,.55); }
.utility-menu { position: absolute; top: 33px; left: 0; width: 210px; padding: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 38px rgba(2,18,41,.2); display: none; z-index: 95; }
.utility-select.open .utility-menu, .utility-select:hover .utility-menu, .utility-select:focus-within .utility-menu { display: grid; gap: 4px; }
.utility-menu button, .utility-menu a { width: 100%; border: 0; background: #fff; color: var(--ink); border-radius: 6px; padding: 9px 10px; text-align: left; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.utility-menu button:hover, .utility-menu button.active, .utility-menu a:hover, .utility-menu a.active { background: var(--sky); color: var(--blue); }
.nav-row { height: 74px; }
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.logo img { width: 242px; height: auto; max-height: 54px; display: block; object-fit: contain; }
.nav-menu { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; align-self: stretch; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { min-height: 74px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; color: #e8f2ff; }
.nav-link:hover, .nav-item:focus-within .nav-link, .nav-item:hover .nav-link { color: var(--yellow); }
.nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.submenu {
  position: absolute;
  left: 0;
  top: 74px;
  width: 260px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 46px rgba(2, 18, 41, .2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .18s ease;
  z-index: 90;
}
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item:hover .submenu, .nav-item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: grid; gap: 3px; padding: 11px 12px; border-radius: 6px; color: var(--ink); font-weight: 800; }
.submenu a:hover { background: var(--sky); color: var(--blue); }
.submenu small { color: var(--muted); font-weight: 600; line-height: 1.35; }
.submenu.wide { width: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.submenu.wide { display: grid; gap: 4px; }
.submenu.tree-menu { width: 310px; list-style: none; margin: 0; padding: 8px; }
.tree-menu, .tree-menu ul { list-style: none; }
.tree-menu li { position: relative; }
.tree-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; }
.tree-menu .tree-arrow { color: var(--muted); font-size: 15px; }
.tree-menu ul {
  position: absolute;
  left: calc(100% - 4px);
  top: -8px;
  width: 300px;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(2, 18, 41, .18);
  display: none;
}
.tree-menu li:hover > ul, .tree-menu li:focus-within > ul { display: block; }
.search-form { display: flex; align-items: center; width: 218px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.search-form input { width: 100%; border: 0; outline: 0; padding: 11px 13px; background: transparent; color: #fff; }
.search-form input::placeholder { color: #c7d8ec; }
.search-form button { width: 42px; border: 0; background: var(--yellow); color: var(--navy); font-weight: 900; cursor: pointer; align-self: stretch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 6px; border: 1px solid transparent; font-weight: 800; cursor: pointer; transition: .2s ease; }
.btn-primary { background: var(--yellow); color: var(--navy); }
.btn-primary:hover { background: #f4b400; }
.btn-outline { border-color: var(--blue); color: var(--blue); background: #fff; }
.btn-outline:hover { background: var(--sky); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-orange { background: var(--orange); color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; border-radius: 8px; align-items: center; justify-content: center; gap: 4px; flex-direction: column; cursor: pointer; transition: .2s ease; }
.menu-toggle span { width: 20px; height: 2px; border-radius: 99px; background: currentColor; display: block; }
.menu-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.mobile-drawer { display: none; background: #081f42; border-top: 1px solid rgba(255,255,255,.14); }
.mobile-drawer.open { display: block; }
.mobile-drawer a { display: block; padding: 14px 22px; color: #e8f2ff; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; }
.mobile-group { border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-group > a { border-bottom: 0; color: #fff; }
.mobile-submenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 12px; gap: 6px; }
.mobile-submenu a { border-bottom: 0; border-radius: 6px; padding: 10px 12px; background: rgba(255,255,255,.07); color: #cfe0f5; font-size: 13px; }
.mobile-submenu.tree { grid-template-columns: 1fr; }
.floating-tools { position: fixed; right: 18px; top: 210px; z-index: 55; display: grid; gap: 10px; padding: 10px 8px; border-radius: 16px; background: rgba(255,255,255,.74); border: 1px solid rgba(203,213,225,.72); box-shadow: 0 18px 44px rgba(6,36,77,.16); backdrop-filter: blur(10px); }
.float-link { width: 64px; min-height: 58px; border-radius: 12px; background: #fff; color: var(--navy); border: 1px solid rgba(203,213,225,.88); box-shadow: 0 10px 22px rgba(6,36,77,.08); display: grid; place-items: center; gap: 4px; font-size: 10px; font-weight: 900; text-align: center; padding: 8px 5px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.float-link:hover { transform: translateX(-5px); border-color: rgba(21,91,166,.32); box-shadow: 0 16px 30px rgba(6,36,77,.16); }
.float-link svg { width: 21px; height: 21px; display: block; fill: currentColor; }
.float-link svg.line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.float-link span { line-height: 1; }
.float-link.whatsapp { color: #16a34a; }
.float-link.messenger { color: #0084ff; }
.float-link.email { color: #0f766e; }
.float-link.cart { color: #7c3aed; }
.float-link.quote { background: var(--yellow); color: var(--navy); border-color: #facc15; box-shadow: 0 14px 26px rgba(250,204,21,.25); }
.customer-chat { position: fixed; right: 26px; bottom: 26px; z-index: 90; }
.customer-chat-menu {
  position: absolute;
  right: 0;
  bottom: 88px;
  width: 170px;
  padding: 18px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(6, 36, 77, .18);
  display: grid;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .2s ease;
}
.customer-chat:hover .customer-chat-menu, .customer-chat:focus-within .customer-chat-menu, .customer-chat.open .customer-chat-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.customer-chat-menu::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}
.chat-menu-item {
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.chat-menu-icon { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #18c45c; color: #fff; flex: 0 0 auto; }
.chat-menu-icon.offline { background: #0b5cab; }
.chat-menu-icon svg, .chat-main-button svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.chat-menu-icon.offline svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-close svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chat-main-button {
  width: 74px;
  height: 74px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, #12a238, #087620);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px rgba(18, 130, 15, .32);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.chat-main-button:hover { box-shadow: 0 20px 48px rgba(18, 130, 15, .42); }
.chat-main-button .chat-support-icon { width: 50px; height: 50px; fill: none; animation: chatSupportFloat 3.2s ease-in-out infinite; }
.chat-support-head { fill: rgba(255,255,255,.96); }
.chat-support-line { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chat-support-face { fill: #073b22; }
.chat-support-accent { fill: #facc15; }
.chat-support-wave { fill: none; stroke: #facc15; stroke-width: 4; stroke-linecap: round; opacity: .88; animation: chatSignalPulse 1.9s ease-in-out infinite; }
.chat-support-wave.delay { animation-delay: .35s; }
.chat-support-dot { fill: #0f8f32; transform-box: fill-box; transform-origin: center; animation: chatDotPulse 1.6s ease-in-out infinite; }
.chat-support-dot.two { animation-delay: .18s; }
.chat-support-dot.three { animation-delay: .36s; }
.customer-chat:hover .chat-support-icon { animation-duration: 2.2s; }
@keyframes chatSupportFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes chatSignalPulse {
  0%, 100% { opacity: .28; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes chatDotPulse {
  0%, 100% { transform: scale(.78); opacity: .72; }
  50% { transform: scale(1.14); opacity: 1; }
}
.chat-window {
  position: absolute;
  right: 0;
  bottom: 88px;
  width: 330px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 22px 55px rgba(6, 36, 77, .22);
  overflow: hidden;
  display: none;
}
.customer-chat.chatting .chat-window { display: block; }
.customer-chat.chatting .customer-chat-menu { display: none; }
.chat-head { background: linear-gradient(135deg, #4f46e5, #0891b2); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.chat-head b { display: block; font-size: 15px; }
.chat-head span { display: block; color: rgba(255,255,255,.82); font-size: 12px; margin-top: 2px; }
.chat-head .chat-live-status { width: fit-content; min-height: 20px; margin-top: 7px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 800; }
.chat-head .chat-live-status[data-tone="pending"] { background: rgba(250,204,21,.22); color: #fff7cc; }
.chat-head .chat-live-status[data-tone="offline"] { background: rgba(248,113,113,.24); color: #ffe2e2; }
.chat-close { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.34); border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; cursor: pointer; transition: .2s ease; }
.chat-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }
.chat-body { padding: 14px; background: #eef7ff; display: grid; gap: 10px; max-height: 260px; overflow: auto; }
.chat-context-panel { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #cfe1f5; border-radius: 8px; background: linear-gradient(135deg, #fff, #f6fbff); color: #38506c; font-size: 12px; }
.chat-context-panel strong { color: #17233a; font-size: 12px; }
.chat-context-panel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-message { max-width: 86%; border-radius: 10px; padding: 10px 12px; line-height: 1.45; font-size: 13px; }
.chat-message.support { background: #fff; border: 1px solid #bfdbfe; color: var(--ink); box-shadow: 0 8px 18px rgba(14, 116, 144, .08); }
.chat-message.user { justify-self: end; background: #dbeafe; color: #1e3a8a; }
.chat-message.system { max-width: 100%; justify-self: center; border: 1px dashed #cbd5e1; background: rgba(255,255,255,.72); color: #64748b; font-size: 12px; text-align: center; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-form input { min-width: 0; flex: 1; border: 1px solid #bfdbfe; border-radius: 6px; padding: 11px; font: inherit; outline: 0; }
.chat-form input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.chat-form button { border: 0; border-radius: 6px; background: linear-gradient(135deg, #4f46e5, #0891b2); color: #fff; padding: 0 14px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 20px rgba(79,70,229,.18); }
.chat-form button:disabled { cursor: wait; opacity: .62; }
.chat-offline-form { display: none; padding: 14px; background: #fff; }
.customer-chat.offline-leaving .chat-body, .customer-chat.offline-leaving .chat-form { display: none; }
.customer-chat.offline-leaving .chat-offline-form { display: block; }
.chat-offline-intro { display: grid; gap: 4px; margin-bottom: 12px; }
.chat-offline-intro strong { color: var(--ink); font-size: 15px; }
.chat-offline-intro span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.chat-offline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chat-offline-grid label { display: grid; gap: 5px; min-width: 0; }
.chat-offline-grid label.wide { grid-column: 1 / -1; }
.chat-offline-grid label > span { color: #334155; font-size: 11px; font-weight: 800; }
.chat-offline-grid input, .chat-offline-grid textarea { width: 100%; min-width: 0; border: 1px solid #cbdcf0; border-radius: 7px; background: #fff; padding: 9px 10px; color: var(--ink); font: inherit; outline: 0; }
.chat-offline-grid textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.chat-offline-grid input:focus, .chat-offline-grid textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.chat-offline-status { min-height: 18px; margin: 8px 0 0; color: #b42318; font-size: 12px; line-height: 1.45; }
.chat-offline-status.success { color: #067647; }
.chat-offline-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.chat-offline-actions button { min-height: 36px; border-radius: 7px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.chat-offline-back { border: 1px solid #cbdcf0; background: #fff; color: #31506f; }
.chat-offline-submit { border: 0; background: linear-gradient(135deg, #0b5cab, #0b7f8f); color: #fff; }
.chat-offline-actions button:disabled { cursor: wait; opacity: .62; }
.page-main { min-height: 60vh; }
.home-screen { min-height: 768px; padding: 78px 0; display: flex; align-items: center; }
.home-screen.compact { min-height: 620px; }
.hero-screen { min-height: clamp(540px, calc(100vh - 108px), 760px); padding: 0; background: #061b38; color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.hero-track { min-height: inherit; display: flex; transform: translate3d(0,0,0); transition: transform .86s cubic-bezier(.22,.75,.2,1); will-change: transform; }
.hero-slide { position: relative; flex: 0 0 100%; min-width: 100%; min-height: inherit; overflow: hidden; }
.hero-slide-media { position: absolute; inset: 0; display: block; }
.hero-slide-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015); transition: transform 6.8s ease; }
.hero-slide.is-active .hero-slide-media img { transform: scale(1.065); }
.hero-slide-overlay { position: absolute; inset: 0; z-index: 1; background: transparent; pointer-events: none; }
.hero-slide.has-content .hero-slide-overlay { background: linear-gradient(90deg, rgba(2,19,43,.76) 0%, rgba(2,23,53,.48) 42%, rgba(2,23,53,.08) 72%); }
.hero-slide.has-content.hero-align-center .hero-slide-overlay { background: linear-gradient(90deg, rgba(2,19,43,.32), rgba(2,23,53,.45), rgba(2,19,43,.32)); }
.hero-slide.has-content.hero-align-right .hero-slide-overlay { background: linear-gradient(270deg, rgba(2,19,43,.76) 0%, rgba(2,23,53,.48) 42%, rgba(2,23,53,.08) 72%); }
.hero-content { position: relative; z-index: 2; width: min(1280px, calc(100% - 96px)); min-height: inherit; margin: 0 auto; display: flex; align-items: center; padding: 72px 0 96px; }
.hero-message { width: min(720px, 64%); opacity: 0; transform: translate3d(-42px,18px,0); transition: opacity .58s ease .28s, transform .72s cubic-bezier(.2,.7,.2,1) .25s; }
.hero-slide.is-active .hero-message { opacity: 1; transform: translate3d(0,0,0); }
.hero-align-center .hero-content { justify-content: center; text-align: center; }
.hero-align-center .hero-message { width: min(880px, 82%); transform: translate3d(0,24px,0); }
.hero-align-center .hero-slide.is-active .hero-message { transform: translate3d(0,0,0); }
.hero-align-center .hero-copy, .hero-align-center .hero-ctas { margin-inline: auto; justify-content: center; }
.hero-align-right .hero-content { justify-content: flex-end; text-align: right; }
.hero-align-right .hero-message { transform: translate3d(42px,18px,0); }
.hero-align-right .hero-slide.is-active .hero-message { transform: translate3d(0,0,0); }
.hero-align-right .hero-copy { margin-left: auto; }
.hero-align-right .hero-ctas { justify-content: flex-end; }
.eyebrow { color: var(--yellow); font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; }
.hero-title { max-width: 900px; font-size: clamp(42px, 5vw, 76px); line-height: 1.04; margin: 0 0 18px; font-weight: 900; color: #fff; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 3px 22px rgba(0,0,0,.28); }
.hero-copy { max-width: 680px; font-size: clamp(17px, 1.4vw, 21px); color: rgba(239,246,255,.92); line-height: 1.65; margin: 0 0 30px; text-shadow: 0 2px 14px rgba(0,0,0,.24); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn { min-width: 142px; min-height: 48px; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.carousel-dots { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
.carousel-dots button { width: 38px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s ease, background .3s ease; }
.carousel-dots button.active { width: 52px; background: var(--yellow); }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 64px; border: 1px solid rgba(255,255,255,.34); background: rgba(4,24,51,.26); backdrop-filter: blur(8px); color: #fff; border-radius: 8px; cursor: pointer; font-size: 30px; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.hero-arrow:hover { background: rgba(4,24,51,.7); border-color: rgba(255,255,255,.72); transform: translateY(-50%) scale(1.04); }
.hero-arrow.prev { left: 22px; }
.hero-arrow.next { right: 22px; }
.hero-screen[data-hero-count="1"] .hero-arrow, .hero-screen[data-hero-count="1"] .carousel-dots { display: none; }
.section-head { margin-bottom: 34px; text-align: center; }
.section-head.left { text-align: left; }
.section-kicker { color: var(--blue); font-weight: 900; text-transform: uppercase; font-size: 13px; }
.section-title { font-size: clamp(30px, 3vw, 46px); line-height: 1.15; margin: 8px 0 10px; font-weight: 900; }
.section-copy { max-width: 720px; margin: 0 auto; color: var(--muted); line-height: 1.7; }
.section-head.left .section-copy { margin: 0; }
.soft { background: var(--soft); }
.navy-band { background: linear-gradient(135deg, #06244d, #0b3a78); color: #fff; }
.navy-band .section-copy, .navy-band .muted { color: #dbeafe; }
.inquiry-map-screen {
  background:
    linear-gradient(105deg, rgba(248, 251, 255, .95), rgba(230, 240, 253, .86)),
    url('../img/world-map-bg.svg') center/cover no-repeat;
  position: relative;
  overflow: hidden;
}
.inquiry-map-screen .container { position: relative; z-index: 1; }
.inquiry-map-screen .section-copy { color: #475569; }
.inquiry-map-screen .form-panel { box-shadow: 0 24px 58px rgba(6,36,77,.16); }
.inquiry-contact-panel { min-width: 0; padding-right: clamp(0px, 2vw, 30px); }
.inquiry-contact-panel .section-head { margin-bottom: 20px; }
.inquiry-contact-panel .home-contact-managed .contact-directory { padding: 0; }
.inquiry-contact-panel .home-contact-managed .contact-directory h2 { padding-bottom: 16px; font-size: 22px; }
.inquiry-contact-panel .home-contact-managed .contact-directory-list { padding: 18px 0 4px; }
.inquiry-contact-panel .home-contact-managed .contact-directory-row { margin-bottom: 14px; }
.inquiry-contact-panel .home-contact-managed .contact-directory-row b { font-size: 15px; margin-bottom: 3px; }
.inquiry-contact-panel .home-contact-managed .contact-directory-row span,
.inquiry-contact-panel .home-contact-managed .contact-directory-row a,
.inquiry-contact-panel .home-contact-managed .contact-directory-row p { font-size: 14px; line-height: 1.5; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.shop-layout .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card, .info-card, .article-card, .review-card, .form-panel, .cart-panel, .table-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 26px rgba(6,36,77,.07); overflow: hidden; }
.product-card { position: relative; display: flex; flex-direction: column; }
.product-media { background: #f2f6fb; aspect-ratio: 1.24; display: flex; align-items: center; justify-content: center; }
.product-favorite-toggle { position: absolute; z-index: 4; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(203,213,225,.9); border-radius: 999px; background: rgba(255,255,255,.94); color: #173659; box-shadow: 0 8px 20px rgba(6,36,77,.14); cursor: pointer; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; }
.product-favorite-toggle span { font-size: 24px; line-height: 1; transform: translateY(-1px); }
.product-favorite-toggle:hover { transform: translateY(-2px) scale(1.04); border-color: #ef4444; color: #dc2626; }
.product-favorite-toggle.active { border-color: #ef4444; background: #ef4444; color: #fff; }
.product-favorite-toggle:focus-visible { outline: 3px solid rgba(37,99,235,.3); outline-offset: 2px; }
.product-body { padding: 16px; display: grid; gap: 9px; flex: 1; }
.product-tag { display: inline-flex; width: fit-content; background: #fff7cc; color: #7c5600; border-radius: 999px; font-size: 12px; font-weight: 900; padding: 4px 9px; }
.product-title { font-size: 16px; font-weight: 900; line-height: 1.35; min-height: 44px; }
.muted { color: var(--muted); line-height: 1.6; }
.price { color: var(--orange); font-size: 18px; font-weight: 900; }
.product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.product-actions .product-order-now { border-color: #e53935; background: #e53935; color: #fff; }
.product-actions .product-order-now:hover { border-color: #c62828; background: #c62828; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(198,40,40,.24); }
.product-slider { overflow: hidden; position: relative; }
.product-slider-track { display: flex; align-items: stretch; transition: transform .68s cubic-bezier(.22,.75,.25,1); will-change: transform; }
.product-slide { flex: 0 0 100%; min-width: 0; padding: 2px; background: transparent; }
.product-slide .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-slide .product-card { box-shadow: none; }
.product-dots { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.product-dots button { width: 11px; height: 11px; border: 1px solid #b9c8dc; background: #fff; border-radius: 999px; padding: 0; cursor: pointer; transition: .22s ease; }
.product-dots button.active { background: var(--navy); border-color: var(--navy); transform: scale(1.25); box-shadow: 0 0 0 5px rgba(11,45,92,.1); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.visual-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; }
.stat strong { display: block; color: var(--blue); font-size: 30px; font-weight: 900; }
.scenario-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.home-applications-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.home-applications-grid .scenario-card { min-height: 0; cursor: default; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.home-applications-grid .scenario-media { position: relative; aspect-ratio: 1.55; }
.home-applications-grid .scenario-media::before { content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; left: -45%; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.home-applications-grid .scenario-media::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(15,74,134,.02), rgba(6,36,77,.24)); opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.home-applications-grid .scenario-media img { transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.home-applications-grid .scenario-body { min-height: 64px; align-content: center; }
.home-applications-grid .scenario-card:hover { transform: translateY(-5px); border-color: rgba(21,91,166,.3); box-shadow: 0 18px 38px rgba(6,36,77,.15); }
.home-applications-grid .scenario-card:hover .scenario-media img { transform: scale(1.06); filter: saturate(1.08) contrast(1.03); }
.home-applications-grid .scenario-card:hover .scenario-media::after { opacity: 1; }
.home-applications-grid .scenario-card:hover .scenario-media::before { opacity: 1; animation: application-card-shine .8s ease forwards; }
@keyframes application-card-shine { to { left: 120%; } }
.scenario-card { min-height: 180px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 10px 26px rgba(6,36,77,.07); }
.scenario-card.large { grid-row: span 2; min-height: 376px; background: linear-gradient(135deg, #0b3a78, #eaf3ff); color: #fff; }
.scenario-card.visual { padding: 0; justify-content: flex-start; overflow: hidden; color: var(--ink); background: #fff; }
.scenario-card.visual.large { background: #fff; color: var(--ink); }
.scenario-media { background: #eef4fb; aspect-ratio: 1.45; overflow: hidden; }
.scenario-card.large .scenario-media { aspect-ratio: auto; min-height: 292px; }
.scenario-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scenario-body { padding: 18px 20px 20px; display: grid; gap: 8px; }
.scenario-body h3, .scenario-body p { margin: 0; }
.app-page-layout { display: grid; gap: 44px; }
.app-showcase { display: grid; grid-template-columns: .92fr 1.08fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.app-showcase-copy { padding: 42px; display: grid; gap: 18px; align-content: center; }
.app-showcase-copy h2 { margin: 0; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; color: var(--ink); }
.app-showcase-copy p { margin: 0; color: var(--muted); line-height: 1.72; font-size: 16px; }
.app-proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.app-proof-row div { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.app-proof-row strong { display: block; color: var(--blue); font-size: 24px; line-height: 1; margin-bottom: 6px; }
.app-proof-row span { color: var(--muted); font-size: 12px; font-weight: 900; }
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.app-showcase-media { position: relative; min-height: 430px; background: #071b39; overflow: hidden; }
.app-showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.04); transition: transform .7s ease; }
.app-showcase:hover .app-showcase-media img { transform: scale(1.045); }
.app-showcase-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(6,36,77,.08), rgba(6,36,77,.42)); pointer-events: none; }
.app-floating-card { position: absolute; left: 26px; bottom: 24px; width: min(330px, calc(100% - 52px)); background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.55); border-radius: 12px; padding: 18px; box-shadow: 0 20px 40px rgba(2,18,41,.22); z-index: 1; }
.app-floating-card b { display: block; color: var(--navy); margin-bottom: 6px; }
.app-floating-card span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.app-industry-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.app-industry-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 26px rgba(6,36,77,.07); display: grid; grid-template-rows: auto 1fr; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.app-industry-media { aspect-ratio: 1.38; background: linear-gradient(135deg, #eef4fb, #dbeafe); overflow: hidden; }
.app-industry-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.app-industry-body { padding: 17px; display: grid; gap: 8px; align-content: start; }
.app-industry-body h3 { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.28; }
.app-industry-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.app-industry-tag { width: fit-content; min-height: 26px; border-radius: 999px; background: #fff7cc; color: #735400; display: inline-flex; align-items: center; padding: 0 9px; font-size: 11px; font-weight: 900; }
.app-industry-card:hover { transform: translateY(-7px); border-color: rgba(21,91,166,.3); box-shadow: 0 18px 38px rgba(6,36,77,.14); }
.app-industry-card:hover .app-industry-media img { transform: scale(1.06); }
.app-solution-panel { background: linear-gradient(135deg, #06244d, #0b3a78); border-radius: var(--radius); padding: 38px; color: #fff; display: grid; grid-template-columns: .72fr 1.28fr; gap: 30px; align-items: center; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.app-solution-panel::after { content: ""; position: absolute; width: 420px; height: 420px; right: -150px; top: -190px; border-radius: 999px; background: rgba(250,204,21,.12); pointer-events: none; }
.app-solution-intro { position: relative; z-index: 1; display: grid; gap: 12px; }
.app-solution-intro h2 { margin: 0; color: #fff; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.14; }
.app-solution-intro p { margin: 0; color: #dbeafe; line-height: 1.68; }
.app-workflow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.app-work-step { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); border-radius: 10px; padding: 18px; min-height: 150px; display: grid; align-content: start; gap: 10px; transition: .22s ease; }
.app-work-step strong { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: var(--yellow); color: var(--navy); font-size: 16px; }
.app-work-step h3 { margin: 0; color: #fff; font-size: 16px; }
.app-work-step p { margin: 0; color: #dbeafe; font-size: 13px; line-height: 1.55; }
.app-work-step:hover { transform: translateY(-5px); background: rgba(255,255,255,.13); }
.app-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.app-case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 26px rgba(6,36,77,.07); transition: transform .24s ease, box-shadow .24s ease; }
.app-case-media { aspect-ratio: 1.65; background: #eef4fb; overflow: hidden; }
.app-case-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.app-case-body { padding: 22px; display: grid; gap: 10px; }
.app-case-body h3 { margin: 0; color: var(--ink); font-size: 20px; }
.app-case-body p { margin: 0; color: var(--muted); line-height: 1.6; }
.app-case-card:hover { transform: translateY(-7px); box-shadow: 0 18px 38px rgba(6,36,77,.14); }
.app-case-card:hover .app-case-media img { transform: scale(1.055); }
.app-cta-panel { display: flex; justify-content: space-between; gap: 24px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--yellow); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.app-cta-panel h2 { margin: 0 0 8px; color: var(--ink); }
.app-cta-panel p { margin: 0; color: var(--muted); line-height: 1.65; }
.app-story-section { background: #f5f5f5; }
.app-story-list { display: grid; gap: 112px; padding: 46px 0 28px; }
.app-story-row { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 92px; align-items: center; min-height: 300px; }
.app-story-row.reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.app-story-copy { max-width: 470px; display: grid; gap: 18px; }
.app-story-copy h2 { margin: 0; color: #333942; font-size: 26px; line-height: 1.18; letter-spacing: 0; }
.app-story-copy p { margin: 0; color: #4f5966; font-size: 14px; line-height: 1.82; }
.app-story-button { width: fit-content; min-width: 72px; height: 34px; border-radius: 999px; background: #00538d; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; font-size: 12px; font-weight: 900; box-shadow: 0 10px 20px rgba(0,83,141,.18); transition: .22s ease; }
.app-story-button::after { content: ">"; font-size: 15px; line-height: 1; transform: translateY(-1px); }
.app-story-button:hover { background: var(--navy); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 26px rgba(6,36,77,.22); }
.app-story-media { border-radius: 6px; overflow: hidden; background: #e7edf5; box-shadow: 0 16px 36px rgba(6,36,77,.08); transition: transform .28s ease, box-shadow .28s ease; }
.app-story-media img { width: 100%; height: 246px; object-fit: cover; display: block; transition: transform .55s ease, filter .55s ease; }
.app-story-row:hover .app-story-media { transform: translateY(-5px); box-shadow: 0 24px 46px rgba(6,36,77,.14); }
.app-story-row:hover .app-story-media img { transform: scale(1.045); filter: saturate(1.06) contrast(1.03); }
.feature-grid, .service-grid, .article-grid, .review-grid, .link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.info-card { padding: 24px; }
.login-only-panel { max-width: 460px; margin: 0 auto; }
.info-icon { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; background: var(--sky); color: var(--blue); font-weight: 900; margin-bottom: 16px; }
.case-showcase { display: grid; gap: 26px; }
.case-feature-story { display: grid; grid-template-columns: 1.15fr .85fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.case-feature-media { min-height: 430px; background: #eef4fb; overflow: hidden; position: relative; }
.case-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease, filter .65s ease; }
.case-feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(6,36,77,.1), rgba(6,36,77,.36)); pointer-events: none; }
.case-feature-content { padding: 38px; display: grid; align-content: center; gap: 16px; }
.case-feature-content h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.12; color: var(--ink); }
.case-feature-content p { margin: 0; color: var(--muted); line-height: 1.72; }
.case-label { display: inline-flex; width: fit-content; min-height: 30px; align-items: center; border-radius: 999px; padding: 0 12px; background: #fff7cc; color: #7c5600; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.case-feature-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.case-feature-stats div { border: 1px solid var(--line); background: var(--soft); border-radius: 8px; padding: 14px; }
.case-feature-stats strong { display: block; color: var(--blue); font-size: 22px; line-height: 1; margin-bottom: 6px; }
.case-feature-stats span { color: var(--muted); font-size: 12px; font-weight: 800; }
.case-feature-story:hover .case-feature-media img { transform: scale(1.05); filter: saturate(1.08) contrast(1.04); }
.case-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.case-filter-row a { min-height: 38px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #435166; padding: 0 16px; font-size: 13px; font-weight: 900; box-shadow: 0 8px 18px rgba(6,36,77,.05); transition: .22s ease; }
.case-filter-row a:hover, .case-filter-row a.active { transform: translateY(-3px); background: var(--navy); border-color: var(--navy); color: #fff; }
.case-story-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.case-story-card { grid-column: span 2; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 26px rgba(6,36,77,.07); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.case-story-card.wide { grid-column: span 3; display: grid; grid-template-columns: .92fr 1.08fr; align-items: stretch; }
.case-story-media { aspect-ratio: 1.55; background: #eef4fb; overflow: hidden; }
.case-story-card.wide .case-story-media { aspect-ratio: auto; min-height: 260px; }
.case-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .48s ease, filter .48s ease; }
.case-story-body { padding: 20px; display: grid; gap: 9px; align-content: start; }
.case-story-body h3 { margin: 0; font-size: 19px; line-height: 1.32; color: var(--ink); }
.case-story-body p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 13px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.case-tags span { border-radius: 999px; background: var(--sky); color: var(--blue); padding: 5px 8px; font-size: 11px; font-weight: 900; }
.case-story-card:hover { transform: translateY(-7px); border-color: rgba(21,91,166,.28); box-shadow: 0 18px 38px rgba(6,36,77,.14); }
.case-story-card:hover .case-story-media img { transform: scale(1.055); filter: saturate(1.08) contrast(1.04); }
.choose-card { position: relative; display: grid; gap: 12px; min-height: 228px; overflow: hidden; text-align: center; justify-items: center; transition: transform .22s ease, box-shadow .22s ease; }
.choose-card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 116px; height: 116px; border-radius: 999px; background: rgba(250,204,21,.16); pointer-events: none; }
.choose-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(6,36,77,.12); }
.choose-icon { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #0b3a78, #155ba6); color: #fff; box-shadow: 0 14px 28px rgba(11,58,120,.18); position: relative; z-index: 1; }
.choose-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.choose-card h3 { margin: 2px 0 0; }
.choose-card p { margin: 0; position: relative; z-index: 1; }
.service-card { text-align: center; display: grid; gap: 12px; justify-items: center; color: var(--ink); min-height: 210px; }
.service-card .muted { color: var(--muted); }
.service-icon { width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; background: #fff7cc; color: var(--navy); box-shadow: 0 16px 32px rgba(0,0,0,.16); }
.service-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3, .service-card p { margin: 0; }
.process { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 30px; }
.process-step { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 18px 12px; text-align: center; }
.process-step b { display: block; width: 34px; height: 34px; border-radius: 999px; background: var(--yellow); color: var(--navy); margin: 0 auto 10px; display: grid; place-items: center; }
.factory-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: 190px; gap: 14px; }
.factory-tile { position: relative; border-radius: var(--radius); background: #dbe7f5; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: flex-end; padding: 18px; font-weight: 900; color: #fff; }
.factory-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,36,77,.04) 35%, rgba(6,36,77,.82)); transition: background .25s ease; }
.factory-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.factory-tile span { position: relative; z-index: 1; }
.factory-tile:hover img { transform: scale(1.045); }
.factory-tile:hover::after { background: linear-gradient(180deg, rgba(6,36,77,.02) 25%, rgba(6,36,77,.9)); }
.factory-tile.big { grid-row: span 2; }
.factory-page-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.factory-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 26px rgba(6,36,77,.07); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.factory-card:hover { transform: translateY(-7px); border-color: rgba(21,91,166,.28); box-shadow: 0 18px 38px rgba(6,36,77,.14); }
.factory-card-media { aspect-ratio: 1.45; background: #eef4fb; overflow: hidden; }
.factory-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.factory-card:hover .factory-card-media img { transform: scale(1.05); filter: saturate(1.08) contrast(1.04); }
.factory-card-body { padding: 17px; display: grid; gap: 8px; }
.factory-card-body h3 { margin: 0; font-size: 17px; line-height: 1.32; color: var(--ink); }
.factory-card-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.factory-card.featured { grid-column: span 2; grid-row: span 2; position: relative; min-height: 420px; display: flex; align-items: flex-end; color: #fff; }
.factory-card.featured .factory-card-media { position: absolute; inset: 0; aspect-ratio: auto; }
.factory-card.featured .factory-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,36,77,.08), rgba(6,36,77,.82)); }
.factory-card.featured .factory-card-body { position: relative; z-index: 1; padding: 30px; max-width: 620px; }
.factory-card.featured .factory-card-body h3 { color: #fff; font-size: 30px; }
.factory-card.featured .factory-card-body p { color: rgba(255,255,255,.86); font-size: 15px; }
.factory-card.tall { grid-row: span 2; }
.factory-card.tall .factory-card-media { aspect-ratio: auto; min-height: 330px; }
.factory-card.stat-card { background: linear-gradient(135deg, #06244d, #155ba6); color: #fff; align-content: center; min-height: 220px; padding: 26px; display: grid; gap: 12px; }
.factory-card.stat-card strong { font-size: 42px; line-height: 1; color: var(--yellow); }
.factory-card.stat-card h3 { margin: 0; color: #fff; }
.factory-card.stat-card p { margin: 0; color: #dbeafe; line-height: 1.55; }
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.pagination a, .pagination span { min-width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 13px; font-weight: 900; box-shadow: 0 8px 18px rgba(6,36,77,.06); transition: .2s ease; }
.pagination a:hover, .pagination .active { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-2px); }
.certificate-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.certificate { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 190px; padding: 16px; box-shadow: 0 10px 26px rgba(6,36,77,.07); }
.certificate .paper { height: 118px; border: 6px solid #dbe3ee; background: linear-gradient(#fff, #eef4fb); margin-bottom: 12px; }
.cert-page-layout { display: grid; gap: 26px; }
.cert-trust-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cert-trust-panel.text-only { grid-template-columns: 1fr; }
.cert-trust-panel.text-only .cert-trust-content { min-height: 0; padding: 38px 44px; }
.cert-trust-visual { background: linear-gradient(135deg, #06244d, #155ba6); min-height: 360px; padding: 34px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.cert-trust-visual::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 999px; background: rgba(255,255,255,.08); right: -180px; top: -220px; }
.cert-paper-large { position: relative; z-index: 1; width: min(320px, 82%); min-height: 250px; background: linear-gradient(#fff, #f3f7fb); border: 10px solid #dbe3ee; border-radius: 8px; box-shadow: 0 24px 60px rgba(2,18,41,.28); display: grid; place-items: center; text-align: center; padding: 22px; }
.cert-paper-large::after { content: ""; position: absolute; left: 50%; bottom: 28px; width: 58px; height: 58px; transform: translateX(-50%); border-radius: 999px; background: radial-gradient(circle, #facc15 0 44%, transparent 45%), conic-gradient(from 0deg, #f97316, #facc15, #f97316); opacity: .92; }
.cert-paper-large b { display: block; color: var(--navy); font-size: 28px; line-height: 1.1; }
.cert-trust-content { padding: 36px; display: grid; align-content: center; gap: 16px; }
.cert-trust-content h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.12; color: var(--ink); }
.cert-trust-content p { margin: 0; color: var(--muted); line-height: 1.72; }
.cert-trust-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.cert-trust-list div { border: 1px solid var(--line); background: var(--soft); border-radius: 8px; padding: 14px; }
.cert-trust-list strong { display: block; color: var(--blue); font-size: 22px; margin-bottom: 6px; }
.cert-trust-list span { color: var(--muted); font-size: 12px; font-weight: 800; }
.cert-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cert-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 26px rgba(6,36,77,.07); display: grid; grid-template-rows: auto 1fr; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.cert-card-media { position: relative; width: 100%; aspect-ratio: 0; min-height: 0; border: 0; background: #f7f9fc; display: grid; place-items: center; padding: 18px; overflow: hidden; cursor: zoom-in; font: inherit; }
.cert-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease, filter .45s ease; }
.cert-card-zoom { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(7,35,74,.82); box-shadow: 0 8px 20px rgba(7,35,74,.22); opacity: 0; transform: translateY(5px); transition: opacity .22s ease, transform .22s ease, background .22s ease; }
.cert-card-zoom svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cert-card-body { padding: 17px 18px 19px; display: grid; align-content: start; text-align: center; }
.cert-card-body h3 { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
.cert-card:hover { transform: translateY(-7px); border-color: rgba(21,91,166,.28); box-shadow: 0 18px 38px rgba(6,36,77,.14); }
.cert-card:hover .cert-card-media img { transform: scale(1.045); filter: saturate(1.08) contrast(1.04); }
.cert-card:hover .cert-card-zoom, .cert-card-media:focus-visible .cert-card-zoom { opacity: 1; transform: translateY(0); }
.cert-card-media:focus-visible { outline: 3px solid rgba(21,91,166,.42); outline-offset: -3px; }
body.certificate-lightbox-open { overflow: hidden; }
.certificate-lightbox { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 28px; }
.certificate-lightbox[hidden] { display: none; }
.certificate-lightbox-backdrop { position: absolute; inset: 0; background: rgba(2,12,29,.88); backdrop-filter: blur(7px); }
.certificate-lightbox-dialog { position: relative; z-index: 1; width: min(1120px, calc(100vw - 56px)); height: min(880px, calc(100vh - 56px)); display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: center; gap: 18px; }
.certificate-lightbox-figure { min-width: 0; min-height: 0; height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.certificate-lightbox-image-wrap { min-height: 0; display: grid; place-items: center; padding: 22px; background: #eef2f7; }
.certificate-lightbox-image-wrap img { display: block; width: auto; height: 100%; object-fit: contain; }
.certificate-lightbox-figure figcaption { min-height: 62px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink); background: #fff; }
.certificate-lightbox-figure figcaption strong { font-size: 17px; line-height: 1.4; }
.certificate-lightbox-figure figcaption span { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.certificate-lightbox-close, .certificate-lightbox-nav { border: 0; color: #fff; background: rgba(255,255,255,.14); display: grid; place-items: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.certificate-lightbox-close:hover, .certificate-lightbox-nav:hover { background: var(--blue); }
.certificate-lightbox-close:focus-visible, .certificate-lightbox-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.certificate-lightbox-close { position: absolute; z-index: 2; right: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; transform: translate(42%, -42%); background: rgba(7,35,74,.9); }
.certificate-lightbox-close:hover { transform: translate(42%, -42%) rotate(6deg); }
.certificate-lightbox-close svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.certificate-lightbox-nav { width: 54px; height: 54px; border-radius: 50%; }
.certificate-lightbox-nav svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.certificate-lightbox-nav.is-prev:hover { transform: translateX(-3px); }
.certificate-lightbox-nav.is-next:hover { transform: translateX(3px); }
.stars { color: #f59e0b; font-weight: 900; letter-spacing: 2px; }
.content-slider { position: relative; padding: 0 54px; }
.content-slider-window { overflow: hidden; scroll-behavior: smooth; }
.content-slider-track { display: flex; gap: 18px; align-items: stretch; }
.content-card { flex: 0 0 calc((100% - 36px) / 3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 26px rgba(6,36,77,.07); overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.cert-slider .content-card { flex-basis: calc((100% - 54px) / 4); box-shadow: none; }
.case-slider .content-card { box-shadow: none; }
.home-media-slider .content-card { flex-basis: calc((100% - 54px) / 4); box-shadow: none; }
.content-card-media { aspect-ratio: 1.55; background: #eef4fb; overflow: hidden; }
.content-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-slider .content-card-media { aspect-ratio: auto; height: clamp(280px, 24vw, 320px); padding: 16px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cert-slider .content-card-media img { object-fit: contain; }
.content-card-body { padding: 18px; display: grid; gap: 8px; flex: 1; }
.cert-slider .content-card-body { min-height:auto; place-content: center; text-align: center; }
.content-meta { color: var(--blue); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.content-card h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.home-media-slider .content-card h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; }
.home-media-slider .content-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.7em; font-size: 16px; line-height: 1.35; }
.cert-slider .content-card h3 { font-size: 17px; }
.content-card p { margin: 0; }
.news-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.news-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(6, 36, 77, .1);
  color: var(--ink);
  transition: transform .24s ease, box-shadow .24s ease;
}
.news-list-card:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(6, 36, 77, .16); }
.news-card-media { position: relative; aspect-ratio: 1.28; overflow: hidden; background: #dbeafe; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease, filter .45s ease; }
.news-list-card:hover .news-card-media img { transform: scale(1.055); filter: saturate(1.08) contrast(1.04); }
.news-category-pill {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 1;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  background: #06489a;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(6, 36, 77, .18);
}
.news-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card-meta { display: flex; flex-wrap: wrap; gap: 10px; color: #64748b; font-size: 14px; font-weight: 800; }
.news-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.news-card-meta svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.news-card-body h3 { margin: 0; color: #00327a; font-size: 20px; line-height: 1.36; }
.news-card-body p { margin: 0; color: #1f2937; font-size: 15px; line-height: 1.72; }
.news-read-link { margin-top: auto; padding-top: 12px; color: #00327a; display: inline-flex; align-items: center; gap: 10px; font-weight: 900; }
.news-read-link::after {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: currentColor;
  transition: transform .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.6 5.4 20.2 12l-6.6 6.6-1.4-1.4 4.2-4.2H4v-2h12.4l-4.2-4.2 1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.6 5.4 20.2 12l-6.6 6.6-1.4-1.4 4.2-4.2H4v-2h12.4l-4.2-4.2 1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.news-list-card:hover .news-read-link::after { transform: translateX(4px); }
.article-row-section { padding-top: 34px; }
.article-row-list { display: grid; gap: 18px; }
.article-row-card {
  display: grid;
  grid-template-columns: clamp(240px, 19vw, 280px) minmax(0, 1fr);
  gap: clamp(34px, 8vw, 124px);
  align-items: center;
  padding: 16px 22px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.article-row-card:hover { transform: translateY(-3px); border-color: #d6e1ef; box-shadow: 0 12px 28px rgba(15, 23, 42, .1); }
.article-row-media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eaf1f8; }
.article-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.article-row-card:hover .article-row-media img { transform: scale(1.035); }
.article-row-content { min-width: 0; display: grid; align-content: center; gap: 13px; padding: 10px 0; }
.article-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #64748b; font-size: 14px; font-weight: 700; }
.article-row-date { display: inline-flex; align-items: center; gap: 8px; }
.article-row-date::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 2px; box-shadow: inset 0 3px 0 rgba(100, 116, 139, .18); }
.article-row-separator { color: #94a3b8; }
.article-row-category { color: #0757b5; font-weight: 800; }
.article-row-content h2 { margin: 0; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.3; }
.article-row-content h2 a { color: #0757b5; }
.article-row-content p { margin: 0; color: #536173; font-size: 16px; line-height: 1.62; }
.article-row-read { display: inline-flex; align-items: center; justify-self: start; gap: 14px; color: #0661ca; font-size: 16px; font-weight: 700; }
.article-row-read::after { content: "→"; font-size: 23px; line-height: 1; transition: transform .2s ease; }
.article-row-read:hover::after { transform: translateX(5px); }
.media-gallery-section { background: #f4f7fb; padding-top: 34px; }
.image-title-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 38px; }
.image-title-card { min-width: 0; }
.image-title-media { display: block; width: 100%; aspect-ratio: 1.65 / 1; overflow: hidden; background: #eaf1f8; }
.image-title-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.image-title-card:hover .image-title-media img { transform: scale(1.035); }
.image-title-card h2 { margin: 15px 0 0; font-size: 18px; line-height: 1.4; font-weight: 500; }
.image-title-card h2 a { display: block; overflow: hidden; color: #3f3f3f; text-overflow: ellipsis; white-space: nowrap; }
.image-title-card h2 a:hover { color: #0757b5; }
.media-gallery-section .pagination { margin-top: 42px; }
.section-story-detail { background: #f4f7fb; padding: 58px 0 76px; }
.section-story-head { max-width: 980px; margin: 0 auto 38px; text-align: center; }
.section-story-kicker { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: 999px; background: #e5eef9; color: #0757b5; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.section-story-head h1 { margin: 18px 0 14px; color: #10213b; font-size: clamp(34px, 3.5vw, 52px); line-height: 1.13; }
.section-story-head > p { max-width: 760px; margin: 0 auto; color: #64748b; font-size: 17px; line-height: 1.7; }
.section-story-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; color: #7b8799; font-size: 14px; }
.section-story-meta span, .section-story-meta time { display: inline-flex; align-items: center; gap: 8px; }
.section-story-meta span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ffca05; }
.section-story-meta time::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 2px; box-shadow: inset 0 3px 0 rgba(100,116,139,.18); }
.section-story-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; }
.section-story-main, .section-related-panel, .section-story-cta { border: 1px solid #e1e8f0; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(15,35,65,.06); }
.section-story-main { overflow: hidden; }
.section-story-cover { margin: 0; aspect-ratio: 1.72 / 1; overflow: hidden; background: #dfe8f3; }
.section-story-cover img { width: 100%; height: 100%; object-fit: cover; }
.section-story-copy { padding: 38px 42px 48px; color: #435168; font-size: 16px; line-height: 1.85; }
.section-story-copy > :first-child { margin-top: 0; }
.section-story-copy > :last-child { margin-bottom: 0; }
.section-story-copy h2, .section-story-copy h3 { margin: 30px 0 12px; color: #10213b; line-height: 1.35; }
.section-story-copy h2 { font-size: 25px; }
.section-story-copy h3 { font-size: 20px; }
.section-story-copy img { max-width: 100%; height: auto; border-radius: 8px; }
.section-story-side { position: sticky; top: 22px; display: grid; gap: 22px; }
.section-related-panel { padding: 26px 24px 14px; }
.section-related-panel > h2 { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 3px solid #ffca05; color: #10213b; font-size: 21px; }
.section-related-list { display: grid; }
.section-related-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e7ecf2; color: #26364e; }
.section-related-item:last-child { border-bottom: 0; }
.section-related-item img { width: 92px; height: 68px; object-fit: cover; background: #eaf1f8; }
.section-related-item span { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 800; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.section-related-item:hover { color: #0757b5; }
.section-story-cta { padding: 28px 25px; background: linear-gradient(145deg, #06244d, #0b3a78); color: #fff; }
.section-story-cta > span { color: #ffca05; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.section-story-cta h2 { margin: 10px 0 20px; color: #fff; font-size: 23px; line-height: 1.3; }
.section-story-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 24px 30px; border-top: 1px solid #e4eaf1; background: #fbfcfe; }
.section-story-nav > a:not(.section-story-list-link) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; color: #27364a; }
.section-story-nav > a.next { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.section-story-nav > a small { color: #8490a1; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.section-story-nav > a strong { overflow: hidden; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.section-story-nav > a:not(.next) span { grid-row: 1 / 3; align-self: center; }
.section-story-nav > a.next span { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.section-story-list-link { display: inline-flex; align-items: center; gap: 7px; color: #0757b5; font-size: 13px; font-weight: 900; white-space: nowrap; }
.news-feature-screen {
  min-height: 650px;
  padding: 56px 0;
  background: #f7f7f7;
  display: flex;
  align-items: center;
}
.news-feature-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(360px, .9fr); gap: 52px; align-items: stretch; }
.news-feature-main {
  position: relative;
  min-height: 510px;
  border-radius: 16px;
  overflow: hidden;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 22px 48px rgba(6, 36, 77, .12);
}
.news-feature-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); transition: transform .55s ease, filter .55s ease; }
.news-feature-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, .04) 34%, rgba(2, 6, 23, .78) 100%);
}
.news-feature-main:hover img { transform: scale(1.055); filter: saturate(1.12) contrast(1.06); }
.news-feature-content { position: relative; z-index: 1; padding: 48px 54px; max-width: 880px; }
.news-feature-content h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.32; color: #fff; }
.news-feature-date { display: block; margin-bottom: 12px; color: rgba(255,255,255,.88); font-size: 18px; font-weight: 900; }
.news-feature-more { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 900; text-transform: uppercase; }
.news-feature-more::after { content: ">"; font-size: 20px; line-height: 1; transform: translateY(-1px); }
.news-feature-side { display: grid; gap: 34px; align-content: start; }
.news-feature-side-item { display: grid; grid-template-columns: 166px minmax(0, 1fr); gap: 24px; align-items: start; color: #2f343c; }
.news-feature-side-item img { width: 166px; height: 120px; object-fit: cover; border-radius: 4px; background: #e5edf7; display: block; }
.news-feature-side-item h3 { margin: 2px 0 10px; color: #333840; font-size: 20px; line-height: 1.24; }
.news-feature-side-item time { color: #8a8f98; font-size: 15px; font-weight: 900; }
.news-feature-side-item p { margin: 14px 0 0; color: #8a8f98; line-height: 1.45; font-size: 15px; font-weight: 800; }
.article-detail-section { background: #f6f8fa; padding: 58px 0 72px; }
.article-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 68px; align-items: start; }
.article-detail-title { margin: 0 0 22px; color: #4a980e; font-size: clamp(34px, 4vw, 52px); line-height: 1.24; font-weight: 800; letter-spacing: 0; }
.article-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 24px; color: #334155; font-size: 15px; }
.article-meta-row span { display: inline-flex; align-items: center; gap: 5px; }
.article-meta-row svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.article-meta-row .views { color: #4a980e; }
.article-copy { color: #475569; font-size: 19px; line-height: 1.62; }
.article-copy p { margin: 0 0 20px; }
.article-copy strong { color: #334155; font-weight: 900; }
.article-post-nav {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid #d8dee8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.article-post-links { display: grid; gap: 14px; color: #2f343c; font-size: 16px; line-height: 1.35; }
.article-post-links a { color: #2f343c; }
.article-post-links a:hover { color: #f97316; }
.article-prev-button {
  min-width: 158px;
  min-height: 54px;
  border-radius: 999px;
  background: #ff5a00;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(255, 90, 0, .16);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.article-prev-button:hover { color: #fff; background: #f04800; transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255, 90, 0, .24); }
.article-prev-button svg { width: 17px; height: 17px; fill: currentColor; }
.popular-sidebar { display: grid; gap: 22px; }
.popular-title { display: flex; align-items: center; gap: 0; margin-bottom: 2px; }
.popular-title span { background: #4caf3f; color: #fff; min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 900; text-transform: uppercase; }
.popular-title::after { content: ""; height: 2px; background: #4caf3f; flex: 1; }
.popular-feature { color: #4a980e; display: block; }
.popular-feature-media { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 14px; }
.popular-feature-media img { width: 100%; height: 210px; object-fit: cover; display: block; background: #e5edf7; }
.popular-feature h3 { margin: 0 0 8px; color: #4a980e; font-size: 20px; line-height: 1.22; }
.popular-date { color: #8a8f98; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
.popular-date svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.popular-feature p { margin: 10px 0 0; color: #7b8490; font-size: 15px; line-height: 1.45; font-weight: 700; }
.popular-list { display: grid; gap: 20px; }
.popular-post { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; color: #4a980e; align-items: start; }
.popular-post img { width: 116px; height: 82px; object-fit: cover; display: block; background: #e5edf7; }
.popular-post h4 { margin: 0 0 8px; color: #4a980e; font-size: 16px; line-height: 1.25; }
.article-reading-section { background: #fff; padding: 28px 0 54px; }
.article-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 52px; align-items: start; }
.article-reading-main { min-width: 0; }
.article-reading-header { padding: 0 18px 28px; border-bottom: 1px solid #eceff2; text-align: center; }
.article-reading-header h1 { max-width: 1100px; margin: 0 auto 26px; color: #080808; font-size: clamp(30px, 2.45vw, 42px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }
.article-reading-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 32px; color: #161616; font-size: 16px; }
.article-reading-meta > span { display: inline-flex; align-items: center; gap: 13px; }
.article-reading-meta b { font-weight: 500; }
.article-reading-meta i { color: #7a7a7a; font-style: normal; }
.article-reading-copy { min-height: 405px; padding: 34px 0 70px; color: #111; font-size: 17px; line-height: 1.9; }
.article-reading-copy > :first-child { margin-top: 0; }
.article-reading-copy > :last-child { margin-bottom: 0; }
.article-reading-copy h2, .article-reading-copy h3, .article-reading-copy h4 { margin: 30px 0 10px; color: #111; line-height: 1.35; }
.article-reading-copy h2 { font-size: 22px; }
.article-reading-copy h3 { font-size: 19px; }
.article-reading-copy p { margin: 0 0 12px; }
.article-reading-copy img { max-width: 100%; height: auto; }
.article-reading-copy table { max-width: 100%; }
.article-reading-nav { min-height: 68px; border-top: 1px solid #eceff2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; font-size: 16px; }
.article-reading-nav a { display: inline-flex; align-items: center; gap: 8px; color: #050505; }
.article-reading-nav a:hover { color: #0757b5; }
.article-reading-prev { justify-self: start; }
.article-reading-list { justify-self: center; }
.article-reading-next { justify-self: end; }
.article-reading-prev span, .article-reading-next span { font-size: 28px; line-height: 1; font-weight: 300; }
.article-reading-list span { font-size: 17px; transform: scaleX(1.12); }
.article-recommended { position: sticky; top: 24px; border-radius: 20px; background: #f7f8fa; padding: 34px 26px 22px; }
.article-recommended h2 { margin: 0; padding: 0 0 18px; border-bottom: 3px solid #45a923; color: #050505; font-size: 24px; line-height: 1.25; }
.article-recommended-list { display: grid; }
.article-recommended-item { padding: 30px 0 22px; border-bottom: 1px solid #dcdfe3; }
.article-recommended-item:last-child { border-bottom: 0; }
.article-recommended-item h3 { margin: 0 0 15px; font-size: 16px; line-height: 1.45; font-weight: 500; }
.article-recommended-item h3 a { color: #101010; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.article-recommended-item h3 a:hover { color: #0757b5; }
.article-recommended-more { display: inline-flex; align-items: center; gap: 9px; color: #202020; font-size: 12px; font-weight: 500; }
.article-recommended-more span { font-size: 24px; line-height: .7; color: #5b6168; }
.about-cert-slider .content-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.about-cert-slider .content-card-media { aspect-ratio: auto; padding: 12px; display: flex; align-items: center; justify-content: center; }
.about-cert-slider .content-card-media img { width: 100%; height: auto; object-fit: contain; transition: transform .45s ease, filter .45s ease; }
.about-cert-slider .content-card:hover { transform: translateY(-8px); border-color: rgba(76,175,80,.38); box-shadow: 0 18px 38px rgba(15,23,42,.13); }
.about-cert-slider .content-card:hover .content-card-media img { transform: scale(1.045); filter: saturate(1.08) contrast(1.04); }
.review-person { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.review-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--sky); color: var(--blue); display: grid; place-items: center; font-weight: 900; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 56px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); box-shadow: var(--shadow); font-size: 24px; font-weight: 900; cursor: pointer; }
.slider-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.slider-arrow:disabled { opacity: .38; cursor: not-allowed; background: #fff; color: var(--muted); border-color: var(--line); box-shadow: none; }
.slider-arrow.prev { left: 0; }
.slider-arrow.next { right: 0; }
.faq-tech-screen { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(244,249,255,.84), rgba(255,255,255,.72), rgba(239,247,255,.84)), url('../img/faq-tech-background-v1.webp') center / cover no-repeat; }
.faq-tech-screen .container { position: relative; z-index: 1; }
.faq-tech-screen .faq-item { border-color: rgba(173,199,226,.72); box-shadow: 0 12px 30px rgba(18,73,126,.09); backdrop-filter: blur(7px); }
.faq-layout { display: grid; gap: 20px; align-items: start; }
.accordion { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-question { width: 100%; min-height: 58px; border: 0; background: #fff; color: var(--ink); display: flex; justify-content: space-between; align-items: center; padding: 0 18px; font-weight: 900; text-align: left; cursor: pointer; }
.faq-answer { display: none; padding: 0 18px 18px; color: var(--muted); line-height: 1.7; }
.faq-item.open .faq-answer { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 800; font-size: 13px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 13px 12px; font: inherit; outline: 0; background: #fff; }
.field textarea { min-height: 130px; resize: vertical; }
.public-captcha { align-content: start; }
.public-captcha-row { width: min(430px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 146px; gap: 10px; align-items: stretch; }
.public-captcha-row input[name="captcha_code"] { min-width: 0; text-transform: uppercase; letter-spacing: .1em; }
.public-captcha-refresh { position: relative; width: 146px; min-height: 46px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #eef5ff; cursor: pointer; }
.public-captcha-refresh:hover { border-color: var(--blue); }
.public-captcha-refresh:focus-visible { outline: 3px solid rgba(11,90,170,.2); outline-offset: 2px; }
.public-captcha-refresh img { display: block; width: 100%; height: 100%; min-height: 44px; object-fit: fill; }
.public-captcha-refresh span { display: none; position: absolute; inset: 0; place-items: center; color: var(--blue); font-size: 12px; font-weight: 800; }
.public-captcha-refresh.is-loading img, .public-captcha.has-error .public-captcha-refresh img { opacity: .15; }
.public-captcha-refresh.is-loading span, .public-captcha.has-error .public-captcha-refresh span { display: grid; }
.public-captcha small { color: var(--muted); font-size: 12px; }
.contact-page-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: start; }
.contact-world-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(244, 247, 251, .9), rgba(244, 247, 251, .9)),
    url('../img/world-map-bg.svg') center 46% / min(1180px, 86vw) auto no-repeat;
}
.contact-world-section > .container { position: relative; z-index: 1; }
.contact-directory { background: transparent; padding: 28px 0; color: #111827; }
.contact-directory h2 { margin: 0; padding: 0 0 22px; border-bottom: 1px solid #e5e7eb; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
.contact-directory-list { border-bottom: 1px solid #e5e7eb; padding: 26px 0 10px; }
.contact-directory-row { display: grid;  gap: 16px; margin: 0 0 24px; }
.contact-directory-icon { width: 24px; height: 24px; color: #a4acb8; display: flex; align-items: center; justify-content: center; }
.contact-directory-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-directory-row b { display: block; color: #111827; font-size: 20px; line-height: 1.2; margin: 0 0 6px; }
.contact-directory-row span,
.contact-directory-row a,
.contact-directory-row p { color: #718096; font-size: 16px; line-height: 1.62; }
.contact-directory-row p { margin: 0 0 18px; }
.contact-directory-row p:last-child { margin-bottom: 0; }
.contact-right-column { display: grid; gap: 28px; align-items: start; }
.contact-form-card { align-self: start; }
.contact-follow { padding: 2px 0 0; }
.contact-follow h3 { margin: 0 0 16px; color: #111827; font-size: 24px; line-height: 1.2; font-weight: 800; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.contact-social-link {
  width: 44px;
  height: 44px;
  border: 1px solid #7a8491;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #111827;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.contact-social-link svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.contact-social-link:hover { transform: translateY(-3px); border-color: currentColor; box-shadow: 0 12px 24px rgba(6, 36, 77, .12); }
.contact-social-link.facebook { color: #315da8; }
.contact-social-link.whatsapp { color: #22c55e; }
.contact-social-link.instagram { color: #e4405f; }
.contact-social-link.youtube { color: #ff0000; }
.contact-social-link.linkedin { color: #0a66c2; }
.contact-social-link.tiktok { color: #d21f3c; }
.contact-modern { background: #fff; }
.contact-modern-top { padding: 74px 0 86px; }
.contact-modern-grid {
  width: min(100% - 56px, 980px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 76px;
  align-items: start;
}
.contact-company-title,
.contact-message h2 { margin: 0 0 18px; color: #111827; font-size: 20px; line-height: 1.25; font-weight: 800; }
.contact-company {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 20px 0 4px;
}
.contact-info-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  margin: 0 0 18px;
  color: #66758a;
  font-size: 13px;
  line-height: 1.58;
}
.contact-info-icon {
  width: 18px;
  height: 18px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #64748b;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  margin-top: 1px;
}
.contact-info-row b { display: block; color: #111827; font-size: 14px; margin-bottom: 2px; }
.contact-info-row a { color: #66758a; }
.contact-message-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-message-form .field { gap: 6px; }
.contact-message-form .field.full { grid-column: 1 / -1; }
.contact-message-form .field label { color: #6b7280; font-size: 11px; font-weight: 700; }
.contact-message-form .field label::before { content: "* "; color: #ef4444; }
.contact-message-form .field input,
.contact-message-form .field textarea {
  border: 0;
  border-radius: 0;
  background: #f6f6f6;
  min-height: 42px;
  padding: 12px;
}
.contact-message-form .field textarea { min-height: 140px; }
.contact-submit {
  width: 70px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #168a3a;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-submit:hover { transform: translateY(-2px); background: #0f7a31; box-shadow: 0 10px 20px rgba(22, 138, 58, .22); }
.contact-map-wide {
  width: 100%;
  height: 300px;
  background: url('../img/contact-road-map.svg') center / cover no-repeat;
  border-top: 1px solid #eef2f7;
}
@media (max-width: 900px) {
  .contact-modern-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-page-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .contact-modern-top { padding: 44px 0 56px; }
  .contact-modern-grid { width: min(100% - 32px, 520px); }
  .contact-message-form { grid-template-columns: 1fr; }
  .contact-map-wide { height: 230px; }
}
.dimension-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.file-upload { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.file-upload input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; pointer-events: none; }
.file-button { flex: 0 0 auto; border: 1px solid #9aa7b8; border-radius: 4px; background: #f8fafc; color: var(--ink); padding: 6px 10px; font-size: 13px; font-weight: 800; }
.file-upload .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-footer { background: #07172e; color: #dce8f7; padding: 56px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.footer-title { color: #fff; font-weight: 900; margin-bottom: 12px; }
.footer-links { display: grid; gap: 9px; font-size: 14px; color: #aebfd4; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
.social-link { width: 38px; height: 38px; border-radius: 999px; background: #fff; color: #020617; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); transition: transform .2s ease, background .2s ease, color .2s ease; }
.social-link svg { width: 21px; height: 21px; display: block; fill: currentColor; }
.social-link:hover { transform: translateY(-3px); color: #fff; }
.social-link.facebook:hover { background: #1877f2; }
.social-link.instagram:hover { background: #e4405f; }
.social-link.spotify:hover { background: #1db954; color: #020617; }
.social-link.tiktok:hover { background: #111827; }
.social-link.youtube:hover { background: #ff0033; }
.copyright { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #91a4bd; display: flex; justify-content: space-between; gap: 20px; }
.page-hero { background: linear-gradient(135deg, #06244d, #0b3a78); color: #fff; padding: 78px 0; }
.page-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: center; }
.image-page-hero { position: relative; min-height: 500px; overflow: hidden; background: #06244d; }
.image-page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(3, 25, 58, .95) 0%, rgba(6, 49, 103, .8) 48%, rgba(6, 49, 103, .2) 100%); pointer-events: none; }
.image-page-hero > .page-hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.image-page-hero-inner { position: relative; z-index: 2; min-height: 344px; display: flex; align-items: center; }
.image-page-hero-content { width: min(760px, 100%); }
.faq-page-hero {
  background: url('../img/ggg.png') center / cover no-repeat;
}
.faq-hero-inner { display: flex; align-items: center; min-height: 350px; }
.faq-hero-content { width: min(760px, 100%); }
.contact-hero-banner { position: relative; width: 100%; min-height: clamp(380px, 31.3vw, 500px); overflow: hidden; background: #06244d; color: #fff; }
.contact-hero-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(3, 25, 58, .95) 0%, rgba(6, 49, 103, .78) 48%, rgba(6, 49, 103, .18) 100%); pointer-events: none; }
.contact-hero-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-hero-inner { position: relative; z-index: 2; min-height: inherit; display: flex; align-items: center; padding: 64px 0; }
.contact-hero-content { width: min(720px, 100%); }
.page-title { font-size: clamp(38px, 4vw, 62px); line-height: 1.08; margin: 12px 0; font-weight: 900; }
.breadcrumb { font-size: 13px; color: #bfdbfe; margin-bottom: 14px; }
.inner-page-tools { background: radial-gradient(circle at 11px 11px, rgba(76, 175, 80, .08) 1.2px, transparent 1.6px) 0 0 / 34px 34px, #fff; padding: 18px 0 0; }
.inner-page-tools-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: center; }
.inner-page-tools.breadcrumb-only .inner-page-tools-grid { grid-template-columns: 1fr; }
.inner-section-menu { min-height: 52px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.inner-section-menu a { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border-radius: 999px; border: 1px solid #dbe3ee; background: rgba(255,255,255,.86); color: #435166; font-size: 13px; font-weight: 900; box-shadow: 0 8px 18px rgba(15,23,42,.05); transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; }
.inner-section-menu a:hover, .inner-section-menu a.active { transform: translateY(-3px); background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 14px 28px rgba(6,36,77,.16); }
.inner-breadcrumb { min-height: 52px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; color: #66758a; font-size: 13px; font-weight: 800; }
.inner-breadcrumb a { color: var(--blue); }
.inner-breadcrumb strong { color: var(--ink); }
.content-section { padding: 64px 0; }
.about-top-banner { min-height: 430px; border-top: 4px solid #4caf50; position: relative; display: grid; place-items: center; text-align: center; color: #fff; background: linear-gradient(rgba(0,0,0,.36), rgba(0,0,0,.36)), url('../img/about-banner.svg') center/cover no-repeat; overflow: hidden; }
.about-top-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.14), transparent 34%), linear-gradient(90deg, rgba(0,0,0,.16), transparent 24%, transparent 76%, rgba(0,0,0,.16)); pointer-events: none; }
.about-top-banner-inner { position: relative; z-index: 1; width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 86px 0; }
.about-top-banner h1 { margin: 0 0 12px; color: #fff; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; font-weight: 400; letter-spacing: .03em; }
.about-top-banner p { margin: 0 auto; max-width: 860px; color: rgba(255,255,255,.94); font-size: clamp(18px, 2vw, 26px); line-height: 1.32; font-weight: 600; }
.about-page { --about-green: #4caf50; --about-ink: #3d4652; background: radial-gradient(circle at 11px 11px, rgba(76, 175, 80, .11) 1.2px, transparent 1.6px) 0 0 / 34px 34px, #fff; color: var(--about-ink); padding: 42px 0 72px; }
.about-wrap { width: min(1280px, calc(100% - 40px)); margin: 0 auto; }
.about-section { padding: 58px 0; }
.about-heading { text-align: center; margin: 0 0 34px; }
.about-heading h1, .about-heading h2 { margin: 0; font-size: 28px; line-height: 1.2; color: #3d4652; font-weight: 900; }
.about-heading h1::after, .about-heading h2::after { content: ""; display: block; width: 46px; height: 3px; margin: 9px auto 0; border-radius: 99px; background: var(--about-green); }
.about-record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.about-record-grid.certificates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about-record-card { min-width: 0; background: #fff; border: 1px solid #e5ebf2; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(15,23,42,.08); transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; }
.about-record-media { display: block; aspect-ratio: 1.46; overflow: hidden; background: #eef3f8; }
.about-record-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.about-record-grid.certificates .about-record-media { aspect-ratio: 1.28; padding: 14px; background: #f7f9fc; }
.about-record-grid.certificates .about-record-media img { object-fit: contain; }
.about-record-card h3 { margin: 0; padding: 17px 18px 19px; color: #3d4652; font-size: 16px; line-height: 1.4; text-align: center; }
.about-record-card h3 a { color: inherit; }
.about-record-card:hover { transform: translateY(-7px); border-color: rgba(76,175,80,.38); box-shadow: 0 18px 38px rgba(15,23,42,.13); }
.about-record-card:hover .about-record-media img { transform: scale(1.045); filter: saturate(1.07) contrast(1.03); }
.about-record-slider .about-record-grid { display: flex; grid-template-columns: none; gap: 22px; }
.about-record-slider .about-record-card { flex: 0 0 calc((100% - 22px) / 2); box-shadow: none; }
.about-record-slider .about-record-card:hover { box-shadow: none; }
.about-record-slider .about-record-card:only-child { flex-basis: min(100%, 520px); margin-inline: auto; }
.about-intro { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.about-intro h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.28; color: #3d4652; }
.about-intro p { margin: 0 0 12px; color: #687383; line-height: 1.75; font-size: 14px; }
.about-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.about-metric strong { display: block; color: var(--about-green); font-size: 27px; line-height: 1; font-weight: 900; }
.about-metric span { display: block; margin-top: 6px; color: #7a8594; font-size: 11px; font-weight: 800; }
.about-photo { position: relative; border-radius: 7px; overflow: hidden; box-shadow: 0 14px 32px rgba(15, 23, 42, .14); background: #edf5f8; }
.about-photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; transition: transform .65s ease, filter .65s ease; }
.about-photo.small img { min-height: 220px; }
.about-services-layout { display: block; }
.about-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.about-service-card { min-height: 132px; padding: 21px 16px; background: #fff; border: 1px solid #edf1f5; border-radius: 9px; box-shadow: 0 10px 24px rgba(15, 23, 42, .08); text-align: center; display: grid; place-items: center; align-content: center; gap: 8px; }
.about-service-icon { width: 34px; height: 34px; color: var(--about-green); display: grid; place-items: center; margin: 0 auto; }
.about-service-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.about-service-card h3 { margin: 0; font-size: 13px; color: #3d4652; line-height: 1.25; }
.about-service-card p { margin: 0; color: #7b8795; font-size: 11px; line-height: 1.35; }
.about-advantage { display: grid; grid-template-columns: 88px 1fr; gap: 34px; align-items: start; width: 100%; margin: 0 auto; }
.advantage-dots { display: grid; justify-items: center; padding-top: 4px; }
.advantage-dots span { width: 31px; height: 31px; border-radius: 999px; border: 3px solid var(--about-green); background: #fff; display: block; margin-bottom: -3px; }
.advantage-dots span:first-child { background: var(--about-green); }
.advantage-copy { display: grid; gap: 24px; }
.advantage-copy h3 { margin: 0 0 7px; font-size: 23px; color: #3d4652; }
.advantage-copy p { margin: 0; color: #697586; line-height: 1.7; font-size: 14px; }
.about-social { display: grid; grid-template-columns: .92fr 1.08fr; gap: 34px; align-items: center; }
.about-social p { color: #657386; line-height: 1.75; margin: 0; font-size: 14px; }
.social-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social-collage .wide { grid-column: 1 / -1; }
.social-collage img { width: 100%; height: 126px; object-fit: cover; border-radius: 6px; box-shadow: 0 9px 22px rgba(15,23,42,.11); }
.social-collage .wide img { height: 158px; }
.about-note-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.about-note { min-height: 124px; padding: 18px 14px; border-radius: 7px; background: #fff; border: 1px solid #edf1f5; box-shadow: 0 10px 22px rgba(15,23,42,.08); color: #6c7684; font-size: 12px; line-height: 1.55; }
.about-team { max-width: 780px; margin: 0 auto; position: relative; padding-bottom: 70px; }
.about-team img { width: 100%; height: 340px; object-fit: cover; border-radius: 4px; box-shadow: 0 12px 30px rgba(15,23,42,.12); }
.team-caption { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(620px, 86%); background: #fff; border: 1px solid #edf1f5; border-radius: 7px; box-shadow: 0 14px 30px rgba(15,23,42,.12); text-align: center; padding: 24px 30px; }
.team-caption h3 { margin: 0 0 9px; color: #3d4652; font-size: 16px; }
.team-caption p { margin: 0; color: #697586; line-height: 1.65; font-size: 12px; }
.about-case-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 22px; align-items: stretch; }
.about-case-feature, .about-case-card { position: relative; overflow: hidden; border: 1px solid #edf1f5; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.09); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.about-case-feature { min-height: 520px; display: flex; align-items: flex-end; color: #fff; }
.about-case-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease, filter .7s ease; }
.about-case-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,36,77,.08), rgba(6,36,77,.82)); z-index: 1; }
.about-case-feature-body { position: relative; z-index: 2; padding: 34px; max-width: 620px; }
.about-case-feature h3 { margin: 12px 0 12px; font-size: 30px; line-height: 1.18; color: #fff; }
.about-case-feature p { margin: 0; color: rgba(255,255,255,.86); line-height: 1.65; }
.case-chip { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; background: rgba(76,175,80,.95); color: #fff; padding: 0 12px; font-size: 12px; font-weight: 900; }
.case-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; color: #2f8f36; font-size: 13px; font-weight: 900; transition: transform .22s ease, background .22s ease, color .22s ease; }
.about-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.about-case-card { display: grid; grid-template-rows: auto 1fr; }
.about-case-media { aspect-ratio: 1.46; background: #eef4fb; overflow: hidden; }
.about-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.about-case-body { padding: 18px; display: grid; gap: 8px; }
.about-case-body h3 { margin: 0; color: #3d4652; font-size: 17px; line-height: 1.32; }
.case-meta { color: #2f8f36; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.case-result { color: #697586; font-size: 12px; line-height: 1.55; }
.offer-layout { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; }
.offer-title { font-size: 22px; line-height: 1.28; font-weight: 900; color: #3d4652; padding-top: 34px; }
.offer-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.offer-card { min-height: 172px; border: 1px solid var(--about-green); border-radius: 3px; background: #fff; overflow: hidden; }
.offer-card.primary { background: var(--about-green); color: #fff; }
.offer-number { font-size: 38px; font-weight: 900; line-height: 1; padding: 14px 14px 0; }
.offer-card h3 { margin: 7px 14px; font-size: 14px; line-height: 1.28; }
.offer-card p { margin: 0; padding: 0 14px 16px; color: inherit; opacity: .78; font-size: 11px; line-height: 1.45; }
.offer-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.offer-products img { width: 100%; aspect-ratio: 1.32; object-fit: cover; background: #f3f7fb; border-radius: 4px; box-shadow: 0 9px 22px rgba(15,23,42,.1); }
.about-process { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; text-align: center; }
.about-process-step { display: grid; justify-items: center; gap: 8px; color: #7a8492; position: relative; }
.about-process-step::after { content: ""; position: absolute; left: calc(50% + 19px); right: calc(-50% + 19px); top: 18px; height: 1px; background: #e1e8ef; }
.about-process-step:last-child::after { display: none; }
.process-icon { width: 38px; height: 38px; border-radius: 999px; background: #edf1f5; color: #8c96a3; display: grid; place-items: center; font-weight: 900; position: relative; z-index: 1; }
.about-process-step b { color: #596374; font-size: 11px; line-height: 1.25; }
.about-process-step span { font-size: 10px; line-height: 1.35; }
.about-category-row { margin-top: 44px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.about-category { min-height: 34px; border-radius: 999px; border: 1px solid #e0e7ef; background: #fff; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; color: #526071; font-size: 12px; font-weight: 800; box-shadow: 0 8px 18px rgba(15,23,42,.06); }
.about-category.active { background: #f1fff3; border-color: rgba(76,175,80,.42); color: #2f8f36; }
.effects-ready .about-section { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.effects-ready .about-section.is-visible { opacity: 1; transform: translateY(0); }
.about-metric { padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.75); border: 1px solid rgba(76,175,80,.16); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.about-metric:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 16px 32px rgba(76,175,80,.16); }
.about-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.38) 48%, transparent 76%); transform: translateX(-120%); transition: transform .8s ease; pointer-events: none; }
.about-photo:hover::after { transform: translateX(120%); }
.about-photo:hover img { transform: scale(1.045); filter: saturate(1.08) contrast(1.04); }
.about-service-card { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.about-service-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--about-green); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.about-service-card:hover { transform: translateY(-8px); border-color: rgba(76,175,80,.38); box-shadow: 0 18px 38px rgba(15,23,42,.12); }
.about-service-card:hover::before { transform: scaleX(1); }
.about-service-icon { transition: transform .28s ease, color .28s ease; }
.about-service-card:hover .about-service-icon { transform: translateY(-3px) scale(1.12); color: #268a2d; }
.advantage-dots span:first-child { animation: aboutPulse 2.4s ease-in-out infinite; }
.advantage-copy > div { border-radius: 10px; padding: 10px 12px; margin-left: -12px; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.advantage-copy > div:hover { background: rgba(255,255,255,.82); transform: translateX(8px); box-shadow: 0 12px 28px rgba(15,23,42,.08); }
.social-collage img, .about-team img, .offer-products img { transition: transform .45s ease, filter .45s ease, box-shadow .45s ease; }
.social-collage img:hover, .about-team:hover img, .offer-products img:hover { transform: translateY(-5px) scale(1.025); filter: saturate(1.08); box-shadow: 0 16px 34px rgba(15,23,42,.16); }
.about-case-feature:hover, .about-case-card:hover { transform: translateY(-8px); border-color: rgba(76,175,80,.38); box-shadow: 0 20px 42px rgba(15,23,42,.14); }
.about-case-feature:hover img, .about-case-card:hover img { transform: scale(1.055); filter: saturate(1.1) contrast(1.03); }
.about-case-feature:hover .case-link { transform: translateX(5px); background: var(--about-green); color: #fff; }
.about-note { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.about-note:hover { transform: translateY(-7px); border-color: rgba(76,175,80,.35); box-shadow: 0 18px 34px rgba(15,23,42,.13); }
.team-caption { transition: transform .28s ease, box-shadow .28s ease; }
.about-team:hover .team-caption { transform: translateX(-50%) translateY(-8px); box-shadow: 0 20px 38px rgba(15,23,42,.16); }
.offer-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.offer-card:hover { transform: translateY(-8px); box-shadow: 0 18px 34px rgba(15,23,42,.12); border-color: #2f9a36; }
.about-process-step { transition: transform .25s ease, color .25s ease; }
.about-process-step:hover { transform: translateY(-8px); color: #2f8f36; }
.process-icon { transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.about-process-step:hover .process-icon { background: var(--about-green); color: #fff; transform: scale(1.12); box-shadow: 0 14px 26px rgba(76,175,80,.26); }
.about-category { transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; }
.about-category:hover { transform: translateY(-4px); background: var(--about-green); border-color: var(--about-green); color: #fff; box-shadow: 0 14px 26px rgba(76,175,80,.2); }
.effects-ready .about-service-card, .effects-ready .about-note, .effects-ready .offer-card, .effects-ready .about-process-step, .effects-ready .about-case-card, .effects-ready .about-case-feature { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease, border-color .25s ease; }
.effects-ready .about-section.is-visible .about-service-card, .effects-ready .about-section.is-visible .about-note, .effects-ready .about-section.is-visible .offer-card, .effects-ready .about-section.is-visible .about-process-step, .effects-ready .about-section.is-visible .about-case-card, .effects-ready .about-section.is-visible .about-case-feature { opacity: 1; transform: translateY(0); }
.effects-ready .about-section.is-visible .about-service-card:nth-child(2), .effects-ready .about-section.is-visible .about-note:nth-child(2), .effects-ready .about-section.is-visible .offer-card:nth-child(2), .effects-ready .about-section.is-visible .about-process-step:nth-child(2), .effects-ready .about-section.is-visible .about-case-card:nth-child(2) { transition-delay: .06s; }
.effects-ready .about-section.is-visible .about-service-card:nth-child(3), .effects-ready .about-section.is-visible .about-note:nth-child(3), .effects-ready .about-section.is-visible .offer-card:nth-child(3), .effects-ready .about-section.is-visible .about-process-step:nth-child(3), .effects-ready .about-section.is-visible .about-case-card:nth-child(3) { transition-delay: .12s; }
.effects-ready .about-section.is-visible .about-service-card:nth-child(4), .effects-ready .about-section.is-visible .about-note:nth-child(4), .effects-ready .about-section.is-visible .about-process-step:nth-child(4), .effects-ready .about-section.is-visible .about-case-card:nth-child(4) { transition-delay: .18s; }
.effects-ready .about-section.is-visible .about-service-card:hover, .effects-ready .about-section.is-visible .about-note:hover, .effects-ready .about-section.is-visible .offer-card:hover, .effects-ready .about-section.is-visible .about-process-step:hover, .effects-ready .about-section.is-visible .about-case-card:hover, .effects-ready .about-section.is-visible .about-case-feature:hover { transition-delay: 0s; }
.effects-ready .about-section.is-visible .about-service-card:hover, .effects-ready .about-section.is-visible .about-note:hover, .effects-ready .about-section.is-visible .offer-card:hover, .effects-ready .about-section.is-visible .about-process-step:hover, .effects-ready .about-section.is-visible .about-case-card:hover, .effects-ready .about-section.is-visible .about-case-feature:hover { transform: translateY(-8px); }
@keyframes aboutPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,.28); }
  50% { box-shadow: 0 0 0 11px rgba(76,175,80,0); }
}
.shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.search-results-content { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.search-results-content > div { width: 100%; min-width: 0; }
.search-results-content > div > h2 { margin: 0 0 18px; }
.search-results-content > div > .article-grid { margin-top: 0; }
.search-results-content > div > h2:not(:first-child) { margin-top: 42px; }
.sidebar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 128px; box-shadow: 0 12px 30px rgba(6,36,77,.06); }
.sidebar h3 { margin: 0 0 14px; color: var(--ink); font-size: 20px; line-height: 1.2; }
.tree { display: grid; gap: 8px; }
.tree-item { display: grid; gap: 7px; }
.tree > a { min-height: 42px; display: flex; align-items: center; border: 0; border-radius: 6px; background: var(--soft); color: var(--ink); padding: 11px 12px; font-size: 13px; font-weight: 900; line-height: 1.25; transition: .2s ease; }
.tree > a:hover { background: var(--navy); color: #fff; transform: translateX(3px); }
.tree-item > button { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 6px; background: var(--soft); color: var(--ink); padding: 11px 12px; font: inherit; font-size: 13px; font-weight: 900; text-align: left; cursor: pointer; transition: .2s ease; }
.tree-item > button:hover, .tree-item.open > button { background: var(--navy); color: #fff; }
.tree-item > button span { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.tree-children { display: none; padding: 0 0 2px 12px; margin: 0; border-left: 2px solid var(--line); }
.tree-item.open > .tree-children { display: grid; gap: 7px; }
.tree-children a { min-height: 34px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); padding: 8px 10px; font-size: 12px; font-weight: 800; line-height: 1.25; transition: .2s ease; }
.tree-children a:hover { background: var(--soft); border-color: #c9d6e8; transform: translateX(3px); }
.tree-children .tree-item > button { min-height: 34px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.tree-children .tree-children { margin-left: 8px; }
.catalog-category-tree { gap: 7px; }
.catalog-category-tree .tree-all { min-height: 42px; display: flex; align-items: center; border-radius: 8px; background: var(--soft); color: var(--ink); padding: 10px 12px; font-size: 13px; font-weight: 900; transition: .2s ease; }
.catalog-category-tree .tree-all:hover, .catalog-category-tree .tree-all.current { background: var(--navy); color: #fff; transform: translateX(2px); }
.catalog-category-tree .tree-node-row { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 5px; }
.catalog-category-tree .tree-node-row > a { min-height: 42px; display: flex; align-items: center; border-radius: 8px; background: var(--soft); color: var(--ink); padding: 10px 12px; font-size: 13px; font-weight: 900; line-height: 1.25; transition: .2s ease; }
.catalog-category-tree .tree-node-row > button { width: 38px; min-height: 38px; border: 1px solid #dbe5f1; border-radius: 8px; background: #fff; color: var(--blue); cursor: pointer; transition: .2s ease; }
.catalog-category-tree .tree-node-row > button span { display: block; width: 7px; height: 7px; margin: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.catalog-category-tree .tree-item.open > .tree-node-row > button span { transform: translateY(2px) rotate(225deg); }
.catalog-category-tree .tree-node-row > a:hover, .catalog-category-tree .tree-item.current > .tree-node-row > a { background: var(--navy); color: #fff; transform: translateX(2px); }
.catalog-category-tree .tree-node-row > button:hover { border-color: var(--blue); background: #edf5ff; }
.catalog-category-tree .tree-children { padding-top: 1px; }
.catalog-category-tree .tree-children .tree-node-row > a { min-height: 36px; border: 1px solid var(--line); background: #fff; padding: 8px 10px; font-size: 12px; font-weight: 800; }
.catalog-category-tree .tree-children .tree-node-row > button { min-height: 34px; height: 36px; }
.shop-filter-panel { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 18px; }
.shop-filter-title { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.2; }
.filter-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filter-panel-heading .shop-filter-title { margin: 0; }
.filter-panel-heading a { color: var(--blue); font-size: 12px; font-weight: 800; }
.filter-group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 9px; }
.filter-group-title { margin: 0; color: var(--blue); font-size: 13px; line-height: 1.25; font-weight: 900; text-transform: uppercase; }
.filter-list { display: grid; gap: 9px; }
.filter-list label { display: flex; align-items: center; gap: 8px; color: #26364d; font-size: 14px; line-height: 1.35; cursor: pointer; }
.filter-list input { width: 14px; height: 14px; accent-color: var(--navy); }
.filter-list label span { min-width: 0; flex: 1; }
.filter-list label small { min-width: 23px; padding: 2px 6px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.filter-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.filter-submit { width: 100%; min-height: 43px; margin-top: 2px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.product-sortbar { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 22px; margin: -4px 0 24px; padding: 17px 18px; overflow: hidden; border: 1px solid #d9e3f0; border-radius: 14px; background: linear-gradient(135deg, #fff 0%, #f7faff 100%); box-shadow: 0 12px 30px rgba(6,36,77,.08); }
.product-sortbar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--yellow), var(--blue)); }
.sort-heading { display: flex; align-items: center; gap: 11px; min-width: 172px; padding-right: 22px; border-right: 1px solid #e2e9f2; }
.sort-heading-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(6,36,77,.18); }
.sort-heading-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sort-heading > span:last-child { display: grid; gap: 2px; }
.sort-heading strong { color: var(--ink); font-size: 14px; line-height: 1.2; }
.sort-heading small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sort-controls { display: flex; align-items: center; justify-content: flex-start; gap: 9px; flex-wrap: wrap; min-width: 0; }
.sort-btn, .sort-select { height: 42px; min-width: 94px; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; color: #405069; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.sort-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.sort-btn:hover { border-color: #9db6d5; color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(6,36,77,.09); }
.sort-btn.active { border-color: var(--navy); background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: 0 9px 20px rgba(6,36,77,.2); }
.sort-btn.active::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 999px; background: var(--yellow); }
.sort-btn:focus-visible, .sort-select:focus-visible { outline: 3px solid rgba(21,91,166,.2); outline-offset: 2px; }
.sort-select-wrap { position: relative; width: 220px; }
.sort-select { width: 100%; appearance: none; padding-right: 42px; text-align: left; font-weight: 700; }
.sort-select:hover { border-color: #9db6d5; color: var(--blue); }
.sort-select-wrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.detail-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.detail-gallery { display: grid; gap: 16px; width: 100%; }
.product-gallery-main { position: relative; aspect-ratio: 1.55; min-height: 330px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .28s ease; }
.product-gallery-main video { width: 100%; height: 100%; object-fit: contain; display: block; background: #07172e; }
.product-gallery-main img[hidden], .product-gallery-main video[hidden] { display: none; }
.product-gallery-main:hover img { transform: scale(1.025); }
.gallery-thumbs-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 10px; align-items: center; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.gallery-thumb { position: relative; aspect-ratio: 1.26; border: 2px solid transparent; border-radius: 0; background: #fff; overflow: hidden; padding: 0; cursor: pointer; transition: .2s ease; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb-video::after { position: absolute; inset: 50% auto auto 50%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(7,23,46,.82); color: #fff; content: "▶"; font-size: 12px; transform: translate(-50%,-50%); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.gallery-thumb.active { border-color: #e60012; }
.gallery-thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(6,36,77,.12); }
.thumb-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; border-radius: 999px; background: rgba(0,0,0,.58); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.thumb-play::before { content: ""; margin-left: 3px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid #fff; }
.gallery-arrow { position: relative; height: 74px; border: 0; background: rgba(6,36,77,.08); color: var(--ink); cursor: pointer; transition: .2s ease; }
.gallery-arrow:hover { background: var(--navy); }
.gallery-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border-top: 3px solid currentColor; border-left: 3px solid currentColor; }
.gallery-arrow.prev::before { transform: translate(-35%, -50%) rotate(-45deg); }
.gallery-arrow.next::before { transform: translate(-65%, -50%) rotate(135deg); }
.gallery-arrow:hover::before { color: #fff; }
.buy-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.badge { background: #fff7cc; color: #7c5600; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900; }
.tier-table, .data-table { width: 100%; border-collapse: collapse; }
.tier-table th, .tier-table td, .data-table th, .data-table td { border-bottom: 1px solid var(--line); text-align: left; padding: 12px; }
.tier-table th, .data-table th { background: var(--soft); font-size: 13px; }
.sku-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.sku-options button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 10px 13px; cursor: pointer; }
.sku-options button.active { border-color: var(--orange); color: var(--orange); background: #fff7ed; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.qty button { width: 38px; height: 38px; border: 0; background: var(--soft); cursor: pointer; font-weight: 900; }
.qty input { width: 52px; height: 38px; border: 0; text-align: center; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tabs { margin-top: 34px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.tab-nav { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab-nav button { border: 0; background: #fff; padding: 15px 18px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.tab-nav button.active { background: var(--navy); color: #fff; }
.tab-panel { display: none; padding: 24px; line-height: 1.7; }
.tab-panel.active { display: block; }
.review-section { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 26px; color: #333; }
.review-summary { display: grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: center; padding: 26px 30px; border: 1px solid #f1dfd4; background: #fffdfa; }
.review-score { display: grid; gap: 10px; }
.review-score-number { color: #d7001f; font-size: 30px; line-height: 1; }
.review-score-number small { color: #d7001f; font-size: 16px; }
.review-stars { color: #d7001f; font-size: 22px; letter-spacing: 1px; line-height: 1; }
.review-filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.review-filter-btn { min-width: 100px; min-height: 34px; border: 1px solid #dfe5ed; background: #fff; color: #444; padding: 0 18px; font: inherit; font-size: 14px; cursor: pointer; transition: .18s ease; }
.review-filter-btn:hover, .review-filter-btn.active { border-color: #d7001f; color: #d7001f; background: #fff; }
.review-item { display: block; width: 100%; min-width: 0; padding: 10px 0 0; }
.review-body { width: 100%; min-width: 0; max-width: none; }
.review-avatar { width: 44px; height: 44px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fafafa; display: flex; align-items: center; justify-content: center; color: #b9c0ca; }
.review-avatar svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.review-user { color: #333; font-size: 13px; line-height: 1.3; }
.review-user-stars { color: #d7001f; font-size: 16px; letter-spacing: 1px; line-height: 1.2; }
.review-meta, .review-rating-lines { color: #999; font-size: 12px; line-height: 1.7; }
.review-rating-lines span { display: block; }
.review-rating-lines b { color: #555; font-weight: 500; }
.review-text { width: 100%; max-width: none; margin: 12px 0; overflow-wrap: anywhere; white-space: normal; color: #333; font-size: 14px; line-height: 1.55; }
.review-media-grid { display: grid; grid-template-columns: repeat(5, 76px); gap: 8px; margin: 10px 0; }
.review-media-thumb { position: relative; height: 72px; overflow: hidden; background: var(--soft); }
.review-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-media-thumb .video-time { position: absolute; right: 4px; bottom: 4px; min-width: 34px; min-height: 18px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; }
.seller-response { margin-top: 10px; padding: 12px 14px; background: #f4f4f4; color: #777; font-size: 14px; line-height: 1.45; }
.seller-response b { display: block; margin-bottom: 6px; color: #444; }
.review-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: #aaa; font-size: 13px; }
.review-like { display: inline-flex; align-items: center; gap: 6px; }
.review-more { border: 0; background: transparent; color: #bbb; font-size: 22px; line-height: 1; cursor: pointer; }
.review-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #f0f2f5; }
.review-page-btn { min-width: 36px; height: 34px; border: 1px solid #dfe5ed; background: #fff; color: #4b5563; padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer; transition: .18s ease; }
.review-page-btn:hover, .review-page-btn.active { border-color: #d7001f; color: #d7001f; }
.review-page-btn.active { background: #d7001f; color: #fff; }
.review-page-btn.text { min-width: 82px; }
.review-page-dots { color: #9ca3af; padding: 0 2px; }
.mini-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.summary-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.quotation-layout { display: grid; grid-template-columns: minmax(220px, 22%) minmax(0, 76%); column-gap: 2%; align-items: start; }
.quotation-layout .form-panel { width: 100%; }
.quote-member-layout { grid-template-columns: minmax(0, 1fr); }
.quotation-form select[name="category_id"] { min-height: 48px; background-color: #fff; font-weight: 700; }
.quote-address-fields { grid-column: 1 / -1; min-width: 0; margin: 4px 0 2px; border: 0; padding: 0; background: transparent; }
.quote-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quote-address-grid .field { min-width: 0; }
.quotation-aside { align-self: start; }
.quotation-aside h2 { margin-top: 0; font-size: 22px; line-height: 1.22; }
.quotation-aside p { line-height: 1.62; }
.quotation-aside .process { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.quotation-aside .process-step { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--soft); border-color: var(--line); padding: 11px; }
.quotation-aside .process-step b { flex: 0 0 34px; margin: 0; }
.quote-category-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; align-self: start; }
.quote-category-title { margin: 0 0 14px; color: var(--ink); font-size: 18px; line-height: 1.2; }
.quote-category-list { display: grid; gap: 8px; }
.quote-category-node { display: grid; gap: 6px; }
.quote-category-list a, .quote-category-toggle { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 6px; padding: 9px 10px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 900; text-align: left; background: var(--soft); cursor: pointer; transition: .2s ease; }
.quote-category-list a:hover, .quote-category-list a.active, .quote-category-node.open > .quote-category-toggle { background: var(--navy); color: #fff; transform: translateX(4px); }
.quote-category-toggle::after { content: "+"; flex: 0 0 auto; font-size: 16px; font-weight: 900; line-height: 1; }
.quote-category-node.open > .quote-category-toggle::after { content: "-"; }
.quote-category-list small { color: inherit; opacity: .72; font-weight: 800; }
.quote-category-children { display: none; gap: 6px; padding: 0 0 4px 12px; border-left: 2px solid var(--line); }
.quote-category-node.open > .quote-category-children { display: grid; }
.quote-category-children a { min-height: 32px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.quote-category-children .quote-category-children { margin-top: 6px; margin-left: 8px; }
.quote-recommend-panel { margin-top: 30px; display: grid; gap: 20px; }
.quote-recommend-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.quote-recommend-head h2 { margin: 0; color: var(--ink); }
.quote-recommend-head p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.quote-recommend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.cart-item:last-child { border-bottom: 0; }
.cart-thumb { background: var(--soft); border-radius: 6px; overflow: hidden; }
.cart-page { display: grid; gap: 16px; }
.cart-table-head { display: grid; grid-template-columns: minmax(440px, 1fr) 150px 120px; align-items: center; min-height: 44px; padding: 0 20px; background: #fff; border: 1px solid #eef2f7; color: #111827; font-size: 13px; }
.cart-head-product { display: flex; align-items: center; gap: 58px; }
.cart-check { display: inline-flex; align-items: center; gap: 7px; color: #111827; font-size: 13px; white-space: nowrap; }
.cart-check input, .cart-option-check { width: 15px; height: 15px; margin: 0; accent-color: #ff4b16; }
.cart-shop { background: #fff; border: 1px solid #eef2f7; box-shadow: 0 10px 22px rgba(6,36,77,.04); }
.cart-shop-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px 10px; }
.cart-store-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cart-store-title b { color: var(--ink); font-size: 16px; font-weight: 700; }
.cart-store-mark { width: 18px; height: 18px; border-radius: 999px; background: #2f8cff; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }
.cart-shop-promo { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; color: #5d6677; font-size: 12px; text-align: right; }
.cart-promo-tag, .cart-product-tag { display: inline-flex; align-items: center; min-height: 20px; border: 1px solid #ff6b3a; color: #ff4b16; background: #fff7f2; padding: 0 5px; font-size: 11px; line-height: 1; }
.cart-promo-link { color: #ff4b16; font-weight: 800; }
.cart-product-row { display: grid; grid-template-columns: minmax(440px, 1fr) 150px 120px; gap: 18px; align-items: start; padding: 18px 20px 18px; }
.cart-product-main { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; min-width: 0; }
.cart-product-summary { min-width: 0; }
.cart-main-image { width: 72px; height: 72px; background: var(--soft); border: 1px solid #e8edf5; object-fit: cover; }
.cart-product-title { margin: 0 0 12px; color: var(--ink); font-size: 14px; line-height: 1.45; font-weight: 700; }
.cart-product-title .cart-product-tag { margin-left: 8px; vertical-align: middle; }
.cart-option-list, .cart-qty-list, .cart-subtotal-list { display: grid; gap: 10px; }
.cart-mobile-lines { display: none; }
.cart-mobile-add { display: none; }
.cart-qty-list, .cart-subtotal-list { padding-top: 32px; }
.cart-option-row { display: grid; grid-template-columns: 18px 42px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 38px; }
.cart-option-row img { width: 42px; height: 34px; object-fit: cover; border: 1px solid #e8edf5; background: var(--soft); }
.cart-sku-select { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border-radius: 3px; background: #f7f7f7; color: #4b5563; font-size: 13px; }
.cart-sku-select::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid #9aa4b2; border-bottom: 1.5px solid #9aa4b2; transform: rotate(45deg) translateY(-2px); flex: 0 0 auto; }
.cart-add-style { width: fit-content; min-height: 30px; margin-top: 10px; border: 1px solid #dfe5ed; border-radius: 999px; background: #fff; color: #333; padding: 0 14px; cursor: pointer; transition: .18s ease; }
.cart-add-style:hover { border-color: var(--blue); color: var(--blue); }
.cart-qty { display: grid; grid-template-columns: 30px 70px 30px 30px; align-items: center; min-height: 38px; }
.cart-qty button { height: 30px; border: 1px solid #e5e7eb; background: #fff; color: #1f2937; font-size: 20px; line-height: 1; cursor: pointer; transition: .18s ease; }
.cart-qty button:hover { border-color: var(--blue); color: var(--blue); }
.cart-qty input { width: 70px; height: 30px; border: 1px solid #e5e7eb; border-left: 0; border-right: 0; text-align: center; }
.cart-row-delete { width: 28px; height: 30px; border: 0; background: transparent; color: #9aa4b2; cursor: pointer; }
.cart-row-delete svg, .cart-icon-action svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cart-price-col, .cart-discount-col { color: #374151; font-size: 13px; line-height: 1.72; }
.cart-price-promo { min-height: 34px; color: #5d6677; }
.cart-tier-line { white-space: nowrap; }
.cart-discount-line { margin: 0 0 10px; color: #ff4b16; }
.cart-discount-line b { display: inline-block; padding: 0 5px; background: #fff1e8; color: #ff4b16; font-weight: 500; }
.cart-subtotal-list { justify-items: end; color: #ff2d00; font-size: 14px; font-weight: 800; }
.cart-subtotal-list strong { min-height: 38px; display: flex; align-items: center; justify-content: flex-end; }
.cart-money { white-space: nowrap; }
.cart-money-unit { margin-right: 3px; font-weight: 800; }
.cart-money-value { font-weight: 800; }
.cart-shop-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 20px; background: #fafafa; }
.cart-icon-action { width: 34px; height: 30px; border: 0; background: transparent; color: #9aa4b2; cursor: pointer; transition: .18s ease; }
.cart-icon-action:hover { color: var(--blue); }
.cart-icon-action.active { color: #ff4b16; }
.cart-settlement { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 70px; padding: 0 28px 0 20px; background: #fff; border: 1px solid #eef2f7; }
.cart-settlement-left, .cart-settlement-right { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cart-mini-btn { min-height: 30px; border: 1px solid #dfe5ed; border-radius: 999px; background: #fff; color: #333; padding: 0 16px; font-size: 13px; cursor: pointer; }
.cart-settlement-right { justify-content: flex-end; color: #4b5563; font-size: 13px; }
.cart-total { color: #111827; }
.cart-total strong { color: #ff2d00; font-size: 24px; font-weight: 500; }
.cart-checkout { min-width: 90px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f4f4f4; border: 1px solid #e6e6e6; color: #9ca3af; font-weight: 800; }
.cart-checkout.ready { background: #ffcf12; color: var(--ink); border-color: #ffcf12; }
.summary-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.summary-line { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.success-box { text-align: center; max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 44px; box-shadow: var(--shadow); }
.payment-success-page { background: #f3f4f6; padding: 34px 0 72px; min-height: 520px; }
.payment-success-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; color: #09b53a; font-size: 22px; font-weight: 900; }
.payment-success-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: #09b53a; color: #fff; }
.payment-success-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.payment-success-card { max-width: 960px; margin: 0 auto; border-radius: 12px; background: #fff; padding: 38px 16px 48px; box-shadow: 0 8px 24px rgba(15,23,42,.04); }
.payment-success-amount { margin: 0 0 24px; text-align: center; color: #111827; font-size: 30px; line-height: 1.1; font-weight: 600; }
.payment-success-detail { width: min(100%, 930px); margin: 0 auto 26px; border-radius: 12px; background: #f7f8fb; padding: 14px 24px; }
.payment-success-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 28px; color: #111827; font-size: 13px; }
.payment-success-label { color: #111827; font-weight: 700; }
.payment-success-value { text-align: right; overflow-wrap: anywhere; }
.payment-success-actions { display: flex; justify-content: center; }
.payment-success-actions .btn { min-height: 28px; border-radius: 999px; padding: 0 18px; font-size: 12px; }
.checkout-page { background: #fff; padding: 38px 0 62px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 46px; align-items: start; }
.checkout-main-title { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid #d9dde5; color: #111827; font-size: 28px; line-height: 1.1; }
.checkout-section { padding: 0 0 28px; margin-bottom: 24px; border-bottom: 1px solid #d9dde5; }
.checkout-section:last-child { border-bottom: 0; }
.checkout-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #111827; font-size: 18px; }
.checkout-section-title svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.checkout-note { display: flex; align-items: center; gap: 6px; margin: 0 0 14px 32px; color: #16801f; font-size: 13px; }
.checkout-note svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.checkout-address-form { display: grid; gap: 14px; max-width: 795px; }
.checkout-form-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.checkout-form-row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.checkout-form-row.two .checkout-field { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.checkout-field label, .checkout-form-row > label { color: #374151; font-size: 13px; line-height: 1.15; text-align: right; }
.checkout-field .required, .checkout-form-row .required { color: #ff4b16; margin-right: 4px; }
.checkout-address-form input, .checkout-address-form select, .checkout-address-form textarea { width: 100%; min-height: 25px; border: 1px solid #d9dde5; border-radius: 2px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 0 8px; }
.checkout-address-form textarea { min-height: 90px; padding-top: 8px; resize: vertical; }
.checkout-delivery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.checkout-delivery-heading h2 { margin: 0; }
.checkout-delivery-heading p { margin: 6px 0 0; color: #6b7280; font-size: 12px; }
.checkout-delivery-heading a { flex: 0 0 auto; color: #0755a5; font-size: 12px; font-weight: 800; }
.checkout-saved-address { padding: 14px; border: 1px solid #cfe0f2; border-radius: 8px; background: #f4f8fd; }
.checkout-saved-address label { color: #17324f; }
.checkout-saved-address select { margin-top: 7px; min-height: 38px; border-radius: 6px; }
.checkout-payment-methods { margin: 8px 0 0; padding: 18px; border: 1px solid #d9e3ef; border-radius: 10px; background: #f8fbff; }
.checkout-payment-methods legend { padding: 0 8px; color: #102947; font-size: 15px; font-weight: 900; }
.checkout-payment-methods > div { display: grid; gap: 10px; }
.checkout-payment-option { display: grid !important; grid-template-columns: 18px 62px minmax(0,1fr); gap: 12px; align-items: center; min-height: 64px; padding: 11px 13px; border: 1px solid #dbe5f1; border-radius: 9px; background: #fff; cursor: pointer; transition: .18s ease; }
.checkout-payment-option:has(input:checked) { border-color: #1764ad; box-shadow: 0 0 0 2px rgba(23,100,173,.1); }
.checkout-payment-option input { width: 16px; min-height: 16px; accent-color: #0755a5; }
.checkout-payment-brand { display: grid; place-items: center; min-height: 31px; border-radius: 6px; background: #eef4fb; color: #0755a5; font-size: 11px; font-weight: 950; }
.checkout-payment-copy { display: grid; gap: 3px; }
.checkout-payment-copy strong { color: #142b48; font-size: 13px; }
.checkout-payment-copy small { color: #718096; font-size: 11px; }
.checkout-payment-unavailable { margin: 0; color: #a24b00; font-size: 12px; }
.payment-page-heading { max-width: 720px; margin: 0 auto 22px; text-align: center; }
.payment-page-heading span { color: #1764ad; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.payment-page-heading h1 { margin: 7px 0; color: #0b2445; }
.payment-page-heading p { margin: 0; color: #69788d; }
.payment-method-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.payment-confirmed-note { padding: 13px 15px; border-radius: 8px; background: #ecfdf5; color: #047857; font-weight: 800; }
.checkout-address-form input::placeholder, .checkout-address-form textarea::placeholder { color: #9aa4b2; }
.checkout-toggle-line { display: flex; align-items: center; gap: 12px; margin-left: 32px; color: #4b5563; font-size: 13px; }
.checkout-switch { width: 32px; height: 16px; border: 0; border-radius: 999px; background: #d7dce5; position: relative; cursor: pointer; }
.checkout-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: .18s ease; }
.checkout-switch.active { background: #ff6a00; }
.checkout-switch.active::after { transform: translateX(16px); }
.checkout-create-address { width: fit-content; min-height: 36px; margin-left: 32px; border: 0; border-radius: 999px; background: #ff6900; color: #fff; padding: 0 22px; font-weight: 900; cursor: pointer; }
.checkout-saved-address { max-width: 795px; margin: 16px 0 0 32px; border: 1px solid #ffcf12; border-radius: 8px; background: #fffaf0; padding: 14px 16px; color: #374151; font-size: 13px; line-height: 1.65; }
.checkout-saved-address b { display: block; margin-bottom: 4px; color: #111827; font-size: 14px; }
.checkout-saved-address span { display: inline-flex; align-items: center; min-height: 22px; margin-top: 8px; border-radius: 999px; background: #ff6900; color: #fff; padding: 0 9px; font-size: 11px; font-weight: 900; }
.checkout-goods-list { display: grid; gap: 18px; max-width: 795px; }
.checkout-good { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 16px; align-items: center; }
.checkout-good img { width: 96px; height: 96px; object-fit: cover; border: 1px solid #edf0f5; border-radius: 6px; background: #f8fafc; }
.checkout-good h3 { margin: 0 0 6px; color: #111827; font-size: 14px; line-height: 1.4; }
.checkout-good p { margin: 0 0 8px; color: #6b7280; font-size: 12px; }
.checkout-good-price { color: #111827; font-weight: 900; }
.checkout-good-qty { text-align: right; color: #111827; font-size: 14px; }
.checkout-cart-goods { max-width: none; }
.checkout-cart-goods .cart-product-row { grid-template-columns: minmax(0, 1fr) 158px 132px; gap: 20px; padding: 0; }
.checkout-cart-goods .cart-product-main { grid-template-columns: 72px minmax(0, 1fr); }
.checkout-cart-goods .cart-main-image { width: 72px; height: 72px; }
.checkout-cart-goods .cart-product-title { margin-bottom: 8px; }
.checkout-cart-goods .cart-option-list, .checkout-cart-goods .cart-qty-list, .checkout-cart-goods .cart-subtotal-list { gap: 12px; }
.checkout-cart-goods .cart-qty-list, .checkout-cart-goods .cart-subtotal-list { padding-top: 34px; }
.checkout-cart-goods .cart-subtotal-list strong { color: #ff2d00; font-size: 14px; }
.checkout-summary-card { position: sticky; top: 22px; background: #fff; border-radius: 8px; box-shadow: 0 12px 34px rgba(15,23,42,.08); padding: 26px 26px 28px; }
.checkout-summary-card h2 { margin: 0 0 18px; color: #222; font-size: 18px; }
.checkout-summary-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; color: #333; font-size: 13px; }
.checkout-summary-line b { color: #111827; }
.checkout-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; margin: 16px 0 10px; border-radius: 999px; background: #ff6900; color: #fff; font-weight: 900; }
.checkout-summary-divider { height: 1px; background: #e5e7eb; margin: 12px 0 6px; }
.payment-page { background: #fff; padding: 42px 0 72px; }
.payment-shell { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 46px; align-items: start; }
.payment-title { margin: 0 0 18px; color: #111827; font-size: 18px; line-height: 1.2; }
.payment-options { display: grid; gap: 8px; }
.payment-option { min-height: 78px; width: 100%; border: 1px solid transparent; border-radius: 6px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.08); color: #111827; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 30px 0 20px; font: inherit; font-weight: 900; cursor: pointer; transition: .18s ease; }
.payment-option:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.12); }
.payment-option.active { border-color: #ff6900; background: #fff2e8; box-shadow: none; }
.payment-option-name { text-align: left; }
.payment-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-style: italic; letter-spacing: -.2px; }
.payment-brand.balance { color: #e8a000; }
.payment-brand.paypal { color: #0066b3; }
.payment-brand.stripe { color: #625afa; font-style: normal; text-transform: lowercase; }
.payment-brand svg { width: 18px; height: 18px; fill: currentColor; }
.payment-summary-card { margin-top: 18px; border-radius: 6px; background: #fff; box-shadow: 0 5px 22px rgba(15,23,42,.09); padding: 28px 24px; }
.payment-summary-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; color: #111827; font-size: 13px; }
.payment-summary-row span:first-child { color: #111827; }
.payment-summary-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.payment-summary-total { color: #111827; font-size: 20px; font-weight: 900; }
.payment-pay-button { min-height: 40px; margin-top: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #ff6900; color: #fff; font-weight: 900; transition: .18s ease; }
.payment-pay-button:hover { background: #f05d00; transform: translateY(-1px); }
.status-pill { display: inline-flex; align-items: center; min-height: 34px; border-radius: 999px; padding: 0 12px; background: #dcfce7; color: #166534; font-weight: 900; }
.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.account-nav { display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.account-nav a { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 800; }
.account-nav a:hover { background: var(--soft); }
.member-center-page { background: #f3f4f6; padding: 18px 0 48px; min-height: 760px; }
.member-center-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 18px; }
.member-side-menu { background: #fff; border-radius: 10px; padding: 16px 0; min-height: 720px; box-shadow: 0 1px 0 rgba(15,23,42,.03); }
.member-menu-group { padding: 0 34px; margin-bottom: 10px; }
.member-menu-title { display: flex; align-items: center; justify-content: space-between; min-height: 38px; color: #111827; font-size: 14px; font-weight: 800; }
.member-menu-title::after { content: ""; width: 7px; height: 7px; border-right: 1px solid #111827; border-bottom: 1px solid #111827; transform: rotate(45deg) translateY(-2px); opacity: .78; }
.member-menu-link { display: block; padding: 10px 0; color: #374151; font-size: 14px; line-height: 1.2; transition: .18s ease; }
.member-menu-link:hover, .member-menu-link.active { color: #ff4b16; }
.member-content-panel { background: #fff; border-radius: 10px; min-height: 654px; padding: 24px 18px; }
.member-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 38px; min-height: 28px; }
.member-tabs button { border: 0; background: transparent; color: #374151; font-size: 14px; cursor: pointer; padding: 0; transition: .18s ease; }
.member-tabs button:hover, .member-tabs button.active { color: #ff4b16; }
.member-empty-state { min-height: 560px; display: grid; place-items: center; text-align: center; color: #9ca3af; }
.member-empty-state svg { width: 120px; height: 120px; display: block; margin: 0 auto 18px; }
.member-empty-box { fill: #e5e7eb; }
.member-empty-lid { fill: #f3f4f6; }
.member-empty-face { fill: #b7bcc5; }
.member-empty-state p { margin: 0; font-size: 14px; }
.member-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.member-page-head h2 { margin: 0; color: #111827; font-size: 22px; }
.member-page-head p { margin: 6px 0 0; color: #6b7280; }
.member-dashboard-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.member-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.member-card { background: #fff; border: 1px solid #eef2f7; border-radius: 10px; padding: 18px; box-shadow: 0 8px 22px rgba(6,36,77,.04); }
.member-card h3 { margin: 0 0 8px; color: #111827; font-size: 15px; }
.member-card p { margin: 0; color: #6b7280; line-height: 1.65; }
.member-stat-value { color: #ff4b16; font-size: 28px; font-weight: 900; line-height: 1; }
.member-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.member-field { display: grid; gap: 7px; }
.member-field.full { grid-column: 1 / -1; }
.member-field label { color: #111827; font-weight: 800; font-size: 13px; }
.member-field input, .member-field select, .member-field textarea { width: 100%; min-height: 42px; border: 1px solid #dbe3ef; border-radius: 6px; padding: 0 12px; font: inherit; background: #fff; }
.member-field textarea { min-height: 110px; padding-top: 10px; resize: vertical; }
.member-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 10px; }
.member-table th, .member-table td { padding: 14px 12px; border-bottom: 1px solid #eef2f7; text-align: left; font-size: 13px; }
.member-table th { color: #6b7280; background: #f9fafb; font-weight: 800; }
.member-table td { color: #111827; }
.member-status { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 10px; background: #eff6ff; color: #0057a8; font-size: 12px; font-weight: 900; }
.member-status.orange { background: #fff7ed; color: #ff4b16; }
.member-status.green { background: #ecfdf5; color: #047857; }
.member-address-grid, .member-coupon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.member-address-card, .member-coupon-card, .member-product-line { border: 1px solid #eef2f7; border-radius: 10px; padding: 16px; background: #fff; }
.member-address-card.default { border-color: #ffcf12; box-shadow: inset 3px 0 0 #ffcf12; }
.member-coupon-card { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 14px; overflow: hidden; }
.member-coupon-value { min-height: 86px; display: grid; place-items: center; border-radius: 8px; background: #fff7ed; color: #ff4b16; font-size: 24px; font-weight: 900; }
.member-product-line { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; }
.member-product-line img { width: 74px; height: 58px; object-fit: cover; border: 1px solid #eef2f7; border-radius: 6px; background: #f8fafc; }
.member-product-line h3 { margin: 0 0 5px; font-size: 14px; color: #111827; }
.member-product-line p { margin: 0; color: #6b7280; font-size: 13px; }
.member-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.member-center-page { padding: 42px 0 64px; background: radial-gradient(circle at 88% 5%, rgba(37,99,235,.08), transparent 25%), linear-gradient(180deg, #f5f8fc 0%, #eef3f9 100%); }
.member-center-shell { grid-template-columns: 276px minmax(0, 1fr); gap: 26px; align-items: start; }
.member-side-menu { position: sticky; top: 18px; min-height: 0; padding: 0 0 16px; overflow: hidden; border: 1px solid #e2e9f3; border-radius: 16px; box-shadow: 0 18px 45px rgba(10,38,78,.08); }
.member-side-brand { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 22px 20px; background: linear-gradient(135deg, #072b5c, #0e4c91); color: #fff; }
.member-side-brand div { min-width: 0; }
.member-side-brand strong, .member-side-brand span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-side-brand strong { font-size: 14px; }
.member-side-brand div > span { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 11px; }
.member-side-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #ffd51c, #ffad0b); color: #082956; font-size: 20px; font-weight: 950; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.member-avatar-picker { position: relative; width: 48px; height: 48px; overflow: visible; }
.member-avatar-button { position: relative; width: 48px; height: 48px; display: block; padding: 0; border: 0; border-radius: 14px; background: transparent; color: inherit; cursor: pointer; }
.member-avatar-button:focus-visible { outline: 3px solid rgba(255,211,28,.7); outline-offset: 3px; }
.member-avatar-button:hover .member-side-avatar { transform: scale(1.035); }
.member-avatar-button[aria-busy="true"] { cursor: wait; opacity: .68; }
.member-side-brand .member-side-avatar { display: grid; overflow: hidden; white-space: normal; text-overflow: clip; transition: transform .18s ease; }
.member-side-avatar.has-image { background: #fff; }
.member-side-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.member-avatar-camera { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; display: grid !important; place-items: center; overflow: visible !important; border: 2px solid #0e4c91; border-radius: 50%; background: #fff; color: #0b4d8f !important; font-size: 15px !important; font-weight: 900; line-height: 1; box-shadow: 0 3px 9px rgba(0,0,0,.2); }
.member-side-nav { padding: 12px 0 2px; }
.member-menu-group { padding: 0 12px; margin: 0 0 7px; }
.member-menu-title { min-height: 28px; padding: 0 10px; color: #94a3b8; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.member-menu-title::after { display: none; }
.member-menu-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 11px; border-radius: 9px; color: #44546a; font-size: 13px; font-weight: 700; }
.member-menu-link::after { content: ""; position: absolute; right: 12px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: 0; }
.member-menu-link:hover { color: #0755a5; background: #f1f6fc; }
.member-menu-link.active { color: #0755a5; background: #eaf3ff; box-shadow: inset 3px 0 0 #ffbf00; }
.member-menu-link.active::after { opacity: .65; }
.member-menu-icon, .member-dashboard-stat-icon { flex: 0 0 auto; display: grid; place-items: center; }
.member-menu-icon { width: 30px; height: 30px; border-radius: 9px; background: #f1f5f9; color: #335477; font-size: 16px; }
.member-menu-icon::before { font-size: 16px; line-height: 1; }
.member-menu-icon svg { width: 18px; height: 18px; display: block; stroke-width: 2.2; }
.member-menu-icon:has(svg)::before { content: none; }
.member-menu-link.active .member-menu-icon { background: #fff; color: #0755a5; }
.member-menu-icon::before, .member-dashboard-stat-icon::before { content: "•"; font-weight: 950; }
[data-icon="home"]::before { content: "⌂"; } [data-icon="user"]::before { content: "●"; } [data-icon="pin"]::before { content: "◆"; }
[data-icon="lock"]::before { content: "▣"; } [data-icon="order"]::before { content: "▤"; } [data-icon="quote"]::before { content: "“"; }
[data-icon="review"]::before { content: "★"; }
[data-icon="file"]::before { content: "▧"; } [data-icon="heart"]::before { content: "♥"; } [data-icon="history"]::before { content: "↻"; }
[data-icon="ticket"]::before { content: "◫"; } [data-icon="star"]::before { content: "★"; } [data-icon="wallet"]::before { content: "$"; }
[data-icon="shield"]::before { content: "◇"; } [data-icon="check"]::before { content: "✓"; }
[data-icon="card"]::before { content: "$"; }
.member-signout { width: calc(100% - 40px); min-height: 40px; margin: 6px 20px 0; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; color: #64748b; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.member-signout:hover { border-color: #fda4af; background: #fff1f2; color: #be123c; }
.member-content-panel { min-height: 760px; padding: 28px 28px 32px; overflow: hidden; border: 1px solid #e2e9f3; border-radius: 16px; box-shadow: 0 18px 45px rgba(10,38,78,.07); }
.member-orders-content { min-width: 0; }
.member-welcome-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 168px; margin-bottom: 20px; padding: 28px 30px; border-radius: 15px; background: linear-gradient(120deg, #082d60 0%, #0e4e91 70%, #1263ad 100%); color: #fff; }
.member-welcome-card::after { content: ""; position: absolute; right: -55px; top: -90px; width: 270px; height: 270px; border: 42px solid rgba(255,255,255,.06); border-radius: 50%; }
.member-welcome-card > * { position: relative; z-index: 1; }
.member-welcome-card h2 { margin: 5px 0 9px; color: #fff; font-size: 27px; }
.member-welcome-card p { max-width: 570px; margin: 0; color: rgba(255,255,255,.76); line-height: 1.55; }
.member-welcome-label { color: #ffd01a; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.member-welcome-card .btn-secondary { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; }
.member-dashboard-grid { margin-bottom: 20px; }
.member-dashboard-stat { min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 92px; padding: 16px; border: 1px solid #e4ebf4; border-radius: 13px; background: #fff; box-shadow: 0 8px 22px rgba(8,45,96,.05); transition: .2s ease; }
.member-dashboard-stat:hover { transform: translateY(-3px); border-color: #bdd4ee; box-shadow: 0 13px 30px rgba(8,45,96,.1); }
.member-dashboard-stat-icon { width: 44px; height: 44px; border-radius: 12px; background: #eaf3ff; color: #0b5aaa; font-size: 17px; }
.member-dashboard-stat:nth-child(2) .member-dashboard-stat-icon { background: #fff7d6; color: #9a6500; }
.member-dashboard-stat:nth-child(3) .member-dashboard-stat-icon { background: #edfaf3; color: #087a48; }
.member-dashboard-stat:nth-child(4) .member-dashboard-stat-icon { background: #fff0f3; color: #c52c54; }
.member-dashboard-stat-copy { min-width: 0; display: grid; gap: 4px; }
.member-dashboard-stat-copy strong { color: #0b2445; font-size: 24px; line-height: 1; }
.member-dashboard-stat-copy span { overflow: hidden; color: #64748b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-dashboard-stat-arrow { color: #a9b6c6; }
.member-dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 20px; }
.member-dashboard-side { display: grid; gap: 16px; align-content: start; }
.member-dashboard-panel { min-width: 0; padding: 20px; border: 1px solid #e4ebf4; border-radius: 13px; background: #fff; }
.member-panel-heading, .member-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.member-panel-heading { margin-bottom: 13px; }
.member-panel-heading h2, .member-dashboard-panel > h2 { margin: 0; color: #0b2445; font-size: 16px; }
.member-text-link { color: #0d5bab; font-size: 12px; font-weight: 850; }
.member-text-link:hover { color: #e65f00; }
.member-activity-list { display: grid; }
.member-activity-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 66px; padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.member-activity-row:last-child { border-bottom: 0; }
.member-activity-type { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eef5ff; color: #0b5aaa; font-size: 12px; font-weight: 950; }
.member-activity-row div { min-width: 0; display: grid; gap: 4px; }
.member-activity-row strong { overflow: hidden; color: #172b48; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.member-activity-row span { color: #8492a6; font-size: 11px; }
.member-activity-row b { color: #0b2445; font-size: 12px; }
.member-default-address > strong { display: block; margin-bottom: 9px; color: #172b48; }
.member-default-address p { margin: 4px 0; color: #65758b; font-size: 12px; line-height: 1.5; }
.member-muted-line { display: block; margin-top: 8px; color: #8a98aa; font-size: 12px; }
.member-account-progress { display: grid; gap: 11px; }
.member-profile-percent { color: #0b5aaa; font-size: 26px; }
.member-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #e9eff6; }
.member-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffbf00, #ff9a00); }
.member-account-progress p { margin: 0; color: #65758b; font-size: 12px; line-height: 1.55; }
.member-address-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 22px; align-items: start; }
.member-address-list-panel, .member-address-editor { border: 1px solid #e4ebf4; border-radius: 13px; background: #fff; }
.member-address-list-panel { padding: 20px; }
.member-section-heading { margin-bottom: 18px; }
.member-section-heading span { color: #0b5aaa; font-size: 9px; font-weight: 950; letter-spacing: .13em; }
.member-section-heading h2 { margin: 3px 0 0; color: #0b2445; font-size: 19px; }
.member-address-grid { grid-template-columns: 1fr; }
.member-address-card { padding: 18px; border-color: #dfe7f1; transition: .18s ease; }
.member-address-card:hover { border-color: #b9cde3; box-shadow: 0 10px 25px rgba(8,45,96,.06); }
.member-address-card.default { border-color: #f3c51a; box-shadow: inset 4px 0 0 #f3c51a; }
.member-address-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.member-address-card h3 { margin: 0; color: #102947; font-size: 15px; }
.member-address-card p { margin: 4px 0; color: #6a798d; font-size: 12px; line-height: 1.5; }
.member-address-card .member-address-line { color: #334963; font-weight: 700; }
.member-default-badge { min-height: 23px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 99px; background: #fff5c2; color: #7f5c00; font-size: 10px; font-weight: 900; }
.member-address-card-actions { display: flex; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #edf1f6; }
.member-address-card-actions .btn { min-height: 34px; padding: 7px 13px; font-size: 11px; }
.member-address-editor { position: sticky; top: 18px; padding: 22px; background: #fbfdff; }
.member-address-editor > h2 { margin: 0 0 7px; color: #0b2445; font-size: 19px; }
.member-address-editor > p { margin: 0 0 18px; color: #738196; font-size: 12px; line-height: 1.55; }
.member-address-editor .member-form-grid { gap: 13px; }
.member-default-check { display: flex; align-items: center; gap: 9px; color: #40536c; font-size: 12px; font-weight: 750; cursor: pointer; }
.member-default-check input { accent-color: #0b5aaa; }
.member-form-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.member-form-status { min-height: 18px; margin: 0; color: #087a48; font-size: 12px; }
.member-empty { padding: 34px 20px; border: 1px dashed #cbd7e5; border-radius: 11px; background: #f8fbff; color: #78879a; text-align: center; }
.member-record-list { display: grid; gap: 12px; }
.member-record-list .info-card { border: 1px solid #e4ebf4; border-radius: 12px; background: #fff; box-shadow: none; }
.member-settings-card { border: 1px solid #e1e9f3; border-radius: 15px; background: #fff; overflow: hidden; box-shadow: 0 12px 34px rgba(8,45,96,.055); }
.member-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 22px 24px; border-bottom: 1px solid #e8eef5; background: linear-gradient(135deg,#f9fbfe,#f2f7fd); }
.member-settings-heading span:first-child { color: #0b5aaa; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.member-settings-heading h2 { margin: 4px 0 5px; color: #102947; font-size: 20px; }
.member-settings-heading p { margin: 0; color: #718096; font-size: 12px; line-height: 1.55; }
.member-secure-note { flex: 0 0 auto; min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid #cfe0f2; border-radius: 999px; background: #fff; color: #0b5aaa; font-size: 10px; font-weight: 900; }
.member-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 20px; padding: 24px; }
.member-control { min-width: 0; display: grid; gap: 7px; }
.member-control.full { grid-column: 1/-1; }
.member-control label { color: #223b59; font-size: 12px; font-weight: 850; }
.member-control label span { color: #e53935; }
.member-control input, .member-control select, .member-control textarea { width: 100%; min-height: 46px; border: 1px solid #cfdbe9; border-radius: 8px; background: #fff; color: #102947; padding: 0 13px; font: inherit; font-size: 13px; outline: 0; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.member-control textarea { min-height: 118px; padding-top: 12px; resize: vertical; line-height: 1.55; }
.member-control input::placeholder, .member-control textarea::placeholder { color: #9aa8b9; }
.member-control input:focus, .member-control select:focus, .member-control textarea:focus { border-color: #2c78c4; box-shadow: 0 0 0 3px rgba(44,120,196,.12); }
.member-control input[readonly] { border-style: dashed; background: #f3f6fa; color: #6f7e90; cursor: not-allowed; }
.member-control [aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.member-control small { color: #8290a2; font-size: 11px; line-height: 1.45; }
.member-settings-actions { display: flex; align-items: center; gap: 16px; padding: 18px 24px 22px; border-top: 1px solid #edf1f6; }
.member-settings-actions .btn { min-width: 138px; }
.member-settings-actions span { color: #8290a2; font-size: 11px; }
.member-settings-card > .member-form-status { min-height: 20px; margin: 0; padding: 0 24px; }
.member-security-form { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.member-security-form .member-settings-heading { padding: 0 0 22px; border-bottom: 0; background: transparent; }
.member-security-fields { display: grid; gap: 18px; padding: 24px; }
.member-security-form .member-security-fields { padding: 0; }
.member-security-form > .member-form-status { margin-top: 16px; padding: 0; }
.member-security-form .member-settings-actions { padding: 18px 0 0; }
.member-password-control { position: relative; }
.member-password-control input { padding-right: 66px; }
.member-password-control button { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); min-width: 48px; height: 30px; border: 0; border-radius: 6px; background: #edf4fb; color: #0b5aaa; font-size: 11px; font-weight: 850; cursor: pointer; }
.member-password-control button:hover { background: #dfeefa; }
.member-password-strength { height: 5px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.member-password-strength i { display: block; width: 0; height: 100%; border-radius: inherit; background: #ef4444; transition: width .2s ease,background .2s ease; }
.member-password-strength i[data-score="3"] { background: #f59e0b; }
.member-password-strength i[data-score="4"] { background: #10b981; }
.member-table-host { min-width: 0; }
.member-table-scroll { width: 100%; overflow-x: auto; border: 1px solid #e1e9f3; border-radius: 13px; background: #fff; box-shadow: 0 10px 28px rgba(8,45,96,.045); }
.member-data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.member-data-table th { padding: 13px 15px; border-bottom: 1px solid #dfe8f2; background: #f5f8fc; color: #65758a; text-align: left; white-space: nowrap; font-size: 11px; font-weight: 900; }
.member-data-table td { padding: 14px 15px; border-bottom: 1px solid #edf1f6; color: #263d58; vertical-align: middle; font-size: 12px; }
.member-data-table tbody tr:last-child td { border-bottom: 0; }
.member-data-table tbody tr:hover { background: #fbfdff; }
.member-table-product { min-width: 220px; display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 11px; align-items: center; }
.member-table-product img { width: 62px; height: 52px; object-fit: contain; border: 1px solid #e5ebf2; border-radius: 7px; background: #f6f9fc; }
.member-table-product strong, .member-table-product small { display: block; }
.member-table-product strong { color: #102947; line-height: 1.4; }
.member-table-product small { margin-top: 4px; color: #8795a7; font-size: 10px; }
.member-table-price { color: #e65b18 !important; font-weight: 900; white-space: nowrap; }
.member-table-status { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; background: #eff6ff; color: #0b5aaa; white-space: nowrap; font-size: 10px; font-weight: 900; text-transform: capitalize; }
.member-table-status.green { background: #ecfdf5; color: #047857; }
.member-table-status.muted { background: #f1f5f9; color: #64748b; }
.member-quote-status-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 158px; }
.member-quote-confirm { min-height: 28px; padding: 5px 10px; font-size: 10px; white-space: nowrap; }
.member-table-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.member-table-actions .btn { min-height: 32px; padding: 6px 10px; font-size: 10px; white-space: nowrap; }
.member-table-actions .member-order-pay { border-color: #e53935; background: #e53935; color: #fff; }
.member-reviews-host { display: grid; gap: 24px; }
.member-reviews-heading { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid #e4ebf4; }
.member-reviews-heading-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg,#fff1c2,#ffd23e); color: #8a5b00; font-size: 21px; font-weight: 950; }
.member-reviews-heading-icon::before { content: "★"; }
.member-reviews-heading h1 { margin: 0 0 5px; color: #102947; font-size: 25px; }
.member-reviews-heading p { margin: 0; color: #718096; font-size: 12px; line-height: 1.55; }
.member-review-section { display: grid; gap: 14px; }
.member-review-section > h2 { margin: 0; color: #102947; font-size: 17px; }
.member-review-ready-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.member-review-ready-card { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 13px; align-items: center; padding: 14px; border: 1px solid #e1e9f3; border-radius: 12px; background: #fff; }
.member-review-ready-card > img { width: 72px; height: 62px; object-fit: contain; border: 1px solid #e8edf3; border-radius: 8px; background: #f8fafc; }
.member-review-ready-card > div { min-width: 0; display: grid; gap: 3px; }
.member-review-ready-card strong { overflow: hidden; color: #102947; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.member-review-ready-card span,.member-review-ready-card small { color: #7d8b9d; font-size: 10px; }
.member-review-ready-card .btn { grid-column: 1/-1; justify-self: start; min-height: 34px; padding: 7px 13px; font-size: 11px; }
.member-review-editor-host:empty { display: none; }
.member-review-form { overflow: hidden; border: 1px solid #cfe0f2; border-radius: 14px; background: #fbfdff; box-shadow: 0 13px 32px rgba(8,45,96,.07); }
.member-review-form-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid #e4ebf4; background: #f3f8fe; }
.member-review-product-mini { min-width: 0; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 11px; align-items: center; }
.member-review-product-mini img { width: 52px; height: 44px; object-fit: contain; border-radius: 7px; background: #fff; }
.member-review-product-mini strong,.member-review-product-mini small { display: block; }
.member-review-product-mini strong { color: #102947; font-size: 13px; }
.member-review-product-mini small { margin-top: 3px; color: #7d8b9d; font-size: 10px; }
.member-review-close { border: 0; background: transparent; color: #64748b; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.member-review-form-fields { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 16px; padding: 18px; }
.member-review-form-fields label { display: grid; align-content: start; gap: 7px; color: #253d58; font-size: 11px; font-weight: 850; }
.member-review-form-fields select,.member-review-form-fields textarea { width: 100%; border: 1px solid #cfdbe9; border-radius: 8px; background: #fff; color: #102947; padding: 11px 12px; font: inherit; outline: 0; }
.member-review-form-fields select { min-height: 44px; }
.member-review-form-fields textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.member-review-form-fields select:focus,.member-review-form-fields textarea:focus { border-color: #2c78c4; box-shadow: 0 0 0 3px rgba(44,120,196,.12); }
.member-review-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 15px; padding: 0 18px 18px; }
.member-review-form-status { flex: 1; margin: 0; color: #b42318; font-size: 11px; }
.member-review-stars { display: block; margin-bottom: 5px; color: #e7a800; letter-spacing: 1px; font-size: 16px; }
.member-review-text-cell { min-width: 220px; max-width: 440px; }
.member-review-text-cell p { display: -webkit-box; overflow: hidden; margin: 0; color: #40536c; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.member-order-delete { color: #b42318; border-color: #f2c5c0 !important; }
.member-order-number { min-width: 145px; }
.member-order-number strong,.member-order-number small,.member-quote-products strong,.member-quote-products small,.member-table-date-stack span,.member-table-date-stack small { display:block; }
.member-order-number strong { color:#102947; }
.member-order-number small,.member-quote-products small,.member-table-date-stack small { margin-top:4px;color:#8795a7;font-size:10px; }
.member-quote-products { min-width:180px;max-width:280px; }
.member-quote-products strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#263d58; }
.order-detail-head { display:flex;align-items:flex-start;justify-content:space-between;gap:28px;text-align:left; }
.order-detail-head h1 { margin:5px 0; }
.order-detail-head p { margin:0;color:#7b899b; }
.order-detail-total { flex:0 0 auto;text-align:right; }
.order-detail-total span,.order-detail-total strong { display:block; }
.order-detail-total span { color:#7b899b;font-size:11px; }
.order-detail-total strong { margin-top:5px;color:#e65b18;font-size:25px; }
.order-detail-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:24px 0;text-align:left; }
.order-detail-summary>div { padding:13px;border:1px solid #e6edf5;border-radius:9px;background:#f8fbff; }
.order-detail-summary span,.order-detail-summary strong { display:block; }
.order-detail-summary span { margin-bottom:5px;color:#7b899b;font-size:10px; }
.order-detail-summary strong { color:#253d58;font-size:12px;text-transform:capitalize; }
.order-detail-items { margin-top:26px;text-align:left; }
.order-detail-items h2 { color:#102947;font-size:18px; }
.order-detail-actions { margin-top:24px; }
.member-order-row { display: grid; grid-template-columns: minmax(190px, 1.35fr) minmax(150px, .85fr) minmax(120px, .65fr) auto; gap: 20px; align-items: center; padding: 18px; border: 1px solid #e2eaf4; border-radius: 13px; background: #fff; box-shadow: 0 8px 24px rgba(8,45,96,.045); }
.member-order-main { min-width: 0; display: grid; gap: 5px; }
.member-order-main strong { overflow: hidden; color: #102947; text-overflow: ellipsis; white-space: nowrap; }
.member-order-date { color: #7a8899; font-size: 12px; }
.member-order-states { display: flex; flex-wrap: wrap; gap: 7px; }
.member-payment-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 12px; font-weight: 900; }
.member-payment-status.paid { background: #ecfdf5; color: #047857; }
.member-order-total { color: #102947; font-size: 16px; white-space: nowrap; }
.member-order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.member-order-actions .btn { min-height: 38px; padding: 8px 14px; font-size: 12px; }
.member-order-actions .member-order-pay { border-color: #e53935; background: #e53935; color: #fff; }
.member-order-actions .member-order-pay:hover { border-color: #c62828; background: #c62828; }
.order-success-card { width: 90%; max-width: none; margin:5%; padding: 56px clamp(20px, 6vw, 88px); border: 0; border-bottom: 1px solid #e2eaf4; border-radius: 0; background: #fff; box-shadow: 0 18px 45px rgba(8,45,96,.06); text-align: center; }
.order-success-card h1 { margin-top: 0; color: #102947; }
.order-success-card > strong { display: block; margin: 18px 0; color: #e55a16; font-size: 25px; }
.order-success-card .member-order-actions { justify-content: center; margin-top: 22px; }
.member-saved-product { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid #e2eaf4; border-radius: 13px; background: #fff; box-shadow: 0 8px 24px rgba(8,45,96,.045); }
.member-saved-product-media { width: 132px; aspect-ratio: 1.24; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px; background: #f2f6fb; }
.member-saved-product-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.member-saved-product-media[href]:hover img { transform: scale(1.04); }
.member-saved-product-media.unavailable { opacity: .58; filter: grayscale(.65); }
.member-saved-product-copy { min-width: 0; display: grid; gap: 6px; }
.member-saved-product-copy h3 { margin: 0; color: #102947; font-size: 16px; }
.member-saved-product-price { color: #e55a16; font-size: 15px; }
.member-product-unavailable { width: fit-content; padding: 4px 9px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 850; }
.member-saved-product-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.member-saved-product-actions .btn { min-height: 38px; padding: 8px 14px; font-size: 12px; }
.member-content-panel > .form-panel, .member-content-panel > p + .form-panel { border: 1px solid #e4ebf4; border-radius: 13px; box-shadow: none; }
.member-consent-layout { width: min(100%, 960px); display: grid; gap: 34px; padding: 2px 0 18px; }
.member-legal-document { color: #243b57; }
.member-legal-document-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid #e4ebf4; }
.member-legal-document-head > div { min-width: 0; }
.member-legal-version { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 10px; border-radius: 999px; background: #eaf3ff; color: #0756a3; font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.member-legal-document h1 { margin: 13px 0 0; color: #102947; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; }
.member-legal-document-head p { max-width: 720px; margin: 10px 0 0; color: #64748b; font-size: 14px; line-height: 1.65; }
.member-legal-document-head time { flex: 0 0 auto; padding-top: 7px; color: #7b8ba0; font-size: 12px; white-space: nowrap; }
.member-legal-document-body { padding: 26px 0 4px; color: #334b67; font-size: 14px; line-height: 1.8; }
.member-legal-document-body h2 { margin: 30px 0 9px; color: #102947; font-size: 20px; line-height: 1.35; }
.member-legal-document-body h2:first-child { margin-top: 0; }
.member-legal-document-body h3, .member-legal-document-body h4 { margin: 24px 0 8px; color: #173556; }
.member-legal-document-body p { margin: 0 0 14px; }
.member-legal-document-body ul, .member-legal-document-body ol { margin: 0 0 16px; padding-left: 23px; }
.member-legal-document-body blockquote { margin: 18px 0; padding: 13px 17px; border-left: 3px solid #0b5aaa; background: #f5f9fe; }
.member-legal-document-body a { color: #075eae; text-decoration: underline; text-underline-offset: 3px; }
.member-consent-card { display: grid; gap: 20px; padding: 24px 26px; border: 1px solid #dfe8f3; border-radius: 14px; background: #fbfdff; box-shadow: none; }
.member-consent-choice { display: flex; align-items: flex-start; gap: 13px; padding: 17px 18px; border: 1px solid #e3eaf3; border-radius: 11px; background: #fff; color: #243b57; font-size: 14px; font-weight: 750; line-height: 1.55; cursor: pointer; }
.member-consent-choice input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #0b5aaa; }
.member-consent-actions { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.member-consent-actions [data-member-form-status] { flex: 1 1 auto; min-height: 20px; margin: 0; color: #087a48; font-size: 13px; line-height: 1.5; }
.member-consent-actions .btn { flex: 0 0 auto; min-width: 150px; }
.member-consent-history { padding-top: 30px; border-top: 1px solid #e7edf5; }
.member-consent-history > header { margin-bottom: 18px; }
.member-consent-history h2 { margin: 0; color: #102947; font-size: 21px; line-height: 1.25; }
.member-consent-history > header p { margin: 7px 0 0; color: #718096; font-size: 13px; line-height: 1.55; }
.member-consent-history .member-record-list { gap: 14px; }
.member-consent-history .member-record { padding: 19px 21px; }
.member-consent-history .member-record h3 { margin: 0 0 8px; color: #102947; font-size: 15px; }
.member-consent-history .member-record p { margin: 4px 0 0; color: #64748b; font-size: 13px; line-height: 1.55; }
.aftersales-content { min-width: 0; }
.aftersales-hero { position: relative; overflow: hidden; min-height: 176px; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 22px; padding: 30px 32px; border-radius: 16px; background: linear-gradient(125deg, #072c5d 0%, #0b4d8f 68%, #136ab3 100%); color: #fff; box-shadow: 0 18px 40px rgba(8,45,96,.16); }
.aftersales-hero::after { content: ""; position: absolute; right: -70px; top: -105px; width: 310px; height: 310px; border: 44px solid rgba(255,255,255,.06); border-radius: 50%; }
.aftersales-hero > * { position: relative; z-index: 1; }
.aftersales-hero > div { max-width: 650px; }
.aftersales-hero > div > span { color: #ffd01a; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.aftersales-hero h1 { margin: 7px 0 9px; color: #fff; font-size: clamp(27px,3vw,38px); line-height: 1.1; }
.aftersales-hero p { margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.65; }
.aftersales-hero .btn { flex: 0 0 auto; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: #fff; }
.aftersales-hero .btn:hover { border-color: #fff; background: #fff; color: #0b4d8f; }
.aftersales-history-card { margin-bottom: 22px; padding: 22px; border: 1px solid #dfe8f3; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(8,45,96,.055); }
.aftersales-history-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.aftersales-history-head span { color: #0b5aaa; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.aftersales-history-head h2 { margin: 4px 0 0; color: #102947; font-size: 21px; }
.aftersales-request-table .member-table-status { text-transform: capitalize; }
.aftersales-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 20px; border-radius: 12px; background: #f5f8fc; }
.aftersales-detail-head h2 { margin: 5px 0; color: #102947; font-size: 22px; }
.aftersales-detail-head p { margin: 0; color: #64748b; font-size: 12px; }
.aftersales-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.aftersales-detail-item { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid #e1e8f1; border-radius: 10px; }
.aftersales-detail-item span { color: #7b899b; font-size: 10px; text-transform: uppercase; }
.aftersales-detail-item strong { overflow-wrap: anywhere; color: #102947; font-size: 13px; }
.aftersales-files-list, .aftersales-timeline { display: grid; gap: 9px; margin-top: 18px; }
.aftersales-files-list h3, .aftersales-timeline h3 { margin: 0 0 3px; color: #102947; font-size: 15px; }
.aftersales-files-list a { width: fit-content; color: #0755a5; font-size: 12px; font-weight: 800; }
.aftersales-message { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid #e1e8f1; border-radius: 10px; background: #fff; }
.aftersales-message.admin { border-color: #cfe0f4; background: #f2f7fd; }
.aftersales-message.system { background: #f7f8fa; }
.aftersales-message strong { color: #102947; font-size: 12px; }
.aftersales-message p { margin: 0; color: #45576d; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.aftersales-message time { color: #93a0b0; font-size: 10px; }
.aftersales-reply-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-top: 15px; }
.aftersales-reply-form textarea { min-height: 74px; resize: vertical; }
.aftersales-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.aftersales-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: start; }
.aftersales-form { overflow: hidden; border: 1px solid #dfe8f3; border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(8,45,96,.065); }
.aftersales-form-heading { padding: 24px 26px 21px; border-bottom: 1px solid #e8eef5; background: linear-gradient(135deg,#fff,#f6f9fd); }
.aftersales-form-heading > span, .aftersales-side-label { color: #0b5aaa; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.aftersales-form-heading h2 { margin: 5px 0 6px; color: #102947; font-size: 22px; line-height: 1.2; }
.aftersales-form-heading p { margin: 0; color: #718096; font-size: 13px; line-height: 1.55; }
.aftersales-form-section { display: grid; gap: 18px; padding: 24px 26px; border-bottom: 1px solid #e8eef5; }
.aftersales-step-heading { display: flex; align-items: center; gap: 12px; }
.aftersales-step-heading > b { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eaf3ff; color: #0755a5; font-size: 13px; }
.aftersales-step-heading > div { display: grid; gap: 3px; }
.aftersales-step-heading strong { color: #183553; font-size: 14px; }
.aftersales-step-heading span { color: #7b899a; font-size: 11px; line-height: 1.4; }
.aftersales-field-grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 16px; }
.aftersales-field { min-width: 0; display: grid; gap: 7px; }
.aftersales-field label { color: #263f5d; font-size: 12px; font-weight: 850; }
.aftersales-field label em { color: #dc2626; font-style: normal; }
.aftersales-field input, .aftersales-field select, .aftersales-field textarea { width: 100%; min-height: 46px; border: 1px solid #cbd8e7; border-radius: 9px; background: #fff; color: #102947; padding: 0 13px; font: inherit; font-size: 13px; outline: 0; transition: border-color .18s ease,box-shadow .18s ease; }
.aftersales-field textarea { min-height: 142px; padding-top: 12px; resize: vertical; line-height: 1.55; }
.aftersales-field input::placeholder, .aftersales-field textarea::placeholder { color: #9aa8b8; }
.aftersales-field input:focus, .aftersales-field select:focus, .aftersales-field textarea:focus { border-color: #2c78c4; box-shadow: 0 0 0 3px rgba(44,120,196,.12); }
.aftersales-field small { color: #8a97a8; font-size: 10px; line-height: 1.45; }
.aftersales-order-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.aftersales-order-control .btn { min-width: 122px; }
.aftersales-form-status { min-height: 42px; display: flex; align-items: center; margin: 0; padding: 10px 13px; border: 1px solid #dce7f3; border-radius: 9px; background: #f6f9fd; color: #65768a; font-size: 12px; line-height: 1.5; }
.aftersales-form-status[data-state="pending"] { border-color: #cddff2; background: #eef6ff; color: #245d91; }
.aftersales-form-status[data-state="success"] { border-color: #bfe7d0; background: #effaf4; color: #087a48; }
.aftersales-form-status[data-state="error"] { border-color: #fecaca; background: #fff5f5; color: #b42318; }
.aftersales-form-status .btn { min-height: 30px; margin-left: 10px; padding: 5px 10px; font-size: 11px; }
.aftersales-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 26px 24px; }
.aftersales-form-actions .btn { min-width: 160px; }
.aftersales-form-actions > span { color: #8492a3; font-size: 11px; }
.aftersales-side { display: grid; gap: 16px; }
.aftersales-help-card, .aftersales-contact-note { padding: 21px; border: 1px solid #dfe8f3; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(8,45,96,.045); }
.aftersales-help-card h2 { margin: 6px 0 15px; color: #102947; font-size: 17px; }
.aftersales-help-card ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.aftersales-help-card ul li { position: relative; padding-left: 20px; color: #607086; font-size: 12px; line-height: 1.55; }
.aftersales-help-card ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #0a8a54; font-weight: 900; }
.aftersales-help-card ol { display: grid; gap: 16px; margin: 17px 0 0; padding: 0; list-style: none; }
.aftersales-help-card ol li { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 10px; align-items: start; }
.aftersales-help-card ol b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #edf5ff; color: #0b5aaa; font-size: 11px; }
.aftersales-help-card ol div { display: grid; gap: 3px; }
.aftersales-help-card ol strong { color: #2a425e; font-size: 12px; }
.aftersales-help-card ol span { color: #7e8b9b; font-size: 11px; line-height: 1.45; }
.aftersales-contact-note { display: grid; gap: 7px; background: linear-gradient(135deg,#fff9dc,#fffef8); border-color: #f4df8a; }
.aftersales-contact-note strong { color: #473b12; font-size: 13px; }
.aftersales-contact-note > span { color: #776b45; font-size: 11px; line-height: 1.5; }
.aftersales-contact-note a { width: fit-content; margin-top: 4px; color: #0a57a5; font-size: 12px; font-weight: 850; }
@media (max-width: 1050px) {
  .aftersales-layout { grid-template-columns: 1fr; }
  .aftersales-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .aftersales-contact-note { grid-column: 1/-1; }
}
@media (max-width: 680px) {
  .aftersales-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 24px 20px; }
  .aftersales-hero .btn { width: 100%; }
  .aftersales-form-heading, .aftersales-form-section { padding: 20px 16px; }
  .aftersales-field-grid, .aftersales-side { grid-template-columns: 1fr; }
  .aftersales-contact-note { grid-column: auto; }
  .aftersales-order-control { grid-template-columns: 1fr; }
  .aftersales-order-control .btn { width: 100%; }
  .aftersales-form-actions { align-items: stretch; flex-direction: column; padding: 18px 16px 20px; }
  .aftersales-form-actions .btn { width: 100%; }
  .aftersales-history-head, .aftersales-detail-head { align-items: stretch; flex-direction: column; }
  .aftersales-detail-grid { grid-template-columns: 1fr; }
  .aftersales-reply-form { grid-template-columns: 1fr; }
}
.notice { background: #fff7cc; border: 1px solid #fde68a; color: #6b4e00; border-radius: var(--radius); padding: 14px 16px; line-height: 1.6; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 999px; z-index: 100; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 1100px) {
  .product-slide .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-menu, .search-form { display: none; }
  .menu-toggle { display: inline-flex; }
  .product-sortbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .sort-heading { min-width: 0; padding-right: 0; border-right: 0; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid, .service-grid, .article-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
  .news-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-row-card { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .news-feature-layout { grid-template-columns: 1fr; gap: 34px; }
  .news-feature-main { min-height: 430px; }
  .article-detail-layout { grid-template-columns: 1fr; gap: 42px; }
  .article-reading-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 30px; }
  .popular-sidebar { max-width: 760px; }
  .case-feature-story { grid-template-columns: 1fr; }
  .case-feature-media { min-height: 330px; }
  .case-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-story-card, .case-story-card.wide { grid-column: auto; }
  .case-story-card.wide { grid-template-columns: 1fr; }
  .case-story-card.wide .case-story-media { aspect-ratio: 1.55; min-height: 0; }
  .cert-trust-panel { grid-template-columns: 1fr; }
  .cert-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-record-grid, .about-record-grid.certificates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-showcase, .app-solution-panel { grid-template-columns: 1fr; }
  .app-showcase-media { min-height: 360px; }
  .app-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-workflow { grid-template-columns: repeat(2, 1fr); }
  .app-case-grid { grid-template-columns: 1fr; }
  .app-story-list { gap: 70px; }
  .app-story-row, .app-story-row.reverse { grid-template-columns: 1fr; gap: 26px; }
  .app-story-row.reverse .app-story-media { order: -1; }
  .app-story-copy { max-width: none; }
  .content-card { flex-basis: calc((100% - 18px) / 2); }
  .cert-slider .content-card { flex-basis: calc((100% - 18px) / 2); }
  .home-media-slider .content-card { flex-basis: calc((100% - 18px) / 2); }
  .process { grid-template-columns: repeat(3, 1fr); }
  .about-intro, .about-services-layout, .about-social, .about-case-layout, .offer-layout { grid-template-columns: 1fr; }
  .about-photo.small { max-width: 360px; margin: 0 auto; }
  .about-note-grid { grid-template-columns: repeat(2, 1fr); }
  .about-case-feature { min-height: 430px; }
  .about-process { grid-template-columns: repeat(4, 1fr); row-gap: 24px; }
  .about-process-step::after { display: none; }
  .factory-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .factory-card.featured { grid-column: span 2; }
  .factory-card.tall { grid-row: auto; }
  .factory-card.tall .factory-card-media { aspect-ratio: 1.45; min-height: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-grid, .quotation-layout, .detail-layout, .page-hero-grid, .inner-page-tools-grid, .split { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; gap: 28px; }
  .checkout-summary-card { position: static; max-width: 420px; }
  .cart-table-head, .cart-product-row { grid-template-columns: minmax(360px, 1fr) 132px 90px; gap: 12px; }
  .cart-head-product { gap: 28px; }
  .cart-product-main { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
  .cart-main-image { width: 62px; height: 62px; }
  .cart-qty { grid-template-columns: 26px 54px 26px 24px; }
  .cart-qty input { width: 54px; }
  .quotation-layout { row-gap: 24px; }
  .inner-breadcrumb { justify-content: flex-start; min-height: auto; }
  .member-center-shell { grid-template-columns: 238px minmax(0, 1fr); gap: 18px; }
  .member-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-dashboard-columns, .member-address-layout { grid-template-columns: 1fr; }
  .member-address-editor { position: static; }
}
@media (max-width: 900px) {
  .article-reading-layout { grid-template-columns: 1fr; }
  .article-recommended { position: static; }
  .image-title-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-story-layout { grid-template-columns: 1fr; }
  .section-story-side { position: static; grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 767px) {
  .product-slide .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container { width: min(100% - 28px, 100%); }
  .image-page-hero { min-height: 430px; padding: 56px 0; }
  .image-page-hero::after { background: linear-gradient(90deg, rgba(3, 25, 58, .94), rgba(6, 49, 103, .72)); }
  .image-page-hero-inner { min-height: 318px; }
  .faq-page-hero { padding: 56px 0; background-position: 62% center; }
  .faq-hero-inner { min-height: 280px; }
  .contact-hero-banner { min-height: 430px; }
  .contact-hero-banner::after { background: linear-gradient(90deg, rgba(3, 25, 58, .94), rgba(6, 49, 103, .72)); }
  .contact-hero-inner { padding: 54px 0; }
  .utility-bar { height: auto; padding: 8px 0; }
  .utility-inner { align-items: flex-start; gap: 8px; }
  .utility-left, .utility-right { gap: 10px; flex-wrap: wrap; white-space: normal; }
  .utility-right { justify-content: flex-end; font-size: 12px; }
  .nav-row { height: 64px; }
  .logo img { width: 182px; max-height: 42px; }
  .nav-actions .btn { display: none; }
  .home-screen { min-height: auto; padding: 54px 0; }
  .hero-screen { min-height: 520px; }
  .hero-content,
  .hero-align-center .hero-content,
  .hero-align-right .hero-content { width: calc(100% - 36px); padding: 54px 0 76px; align-items: flex-end; justify-content: flex-start; text-align: left; }
  .hero-message,
  .hero-align-center .hero-message,
  .hero-align-right .hero-message { width: 100%; transform: translate3d(0,18px,0); }
  .hero-align-center .hero-copy,
  .hero-align-right .hero-copy { margin-left: 0; margin-right: 0; }
  .hero-align-center .hero-ctas,
  .hero-align-right .hero-ctas { justify-content: flex-start; }
  .hero-slide.has-content .hero-slide-overlay,
  .hero-slide.has-content.hero-align-center .hero-slide-overlay,
  .hero-slide.has-content.hero-align-right .hero-slide-overlay { background: linear-gradient(0deg, rgba(2,18,41,.9) 0%, rgba(2,22,49,.58) 48%, rgba(2,22,49,.08) 82%); }
  .hero-title { font-size: clamp(32px, 9vw, 44px); }
  .hero-copy { font-size: 15px; line-height: 1.55; margin-bottom: 20px; }
  .hero-ctas .btn { min-width: 128px; min-height: 44px; }
  .hero-arrow { display: none; }
  .carousel-dots { bottom: 20px; gap: 7px; }
  .carousel-dots button { width: 26px; height: 4px; }
  .carousel-dots button.active { width: 38px; }
  .inner-page-tools { padding-top: 14px; }
  .inner-page-tools-grid { gap: 8px; }
  .inner-section-menu { gap: 8px; min-height: auto; }
  .inner-section-menu a { min-height: 34px; padding: 0 12px; font-size: 12px; }
  .inner-breadcrumb { font-size: 12px; }
  .article-row-section { padding-top: 24px; }
  .article-row-list { gap: 16px; }
  .article-row-card { grid-template-columns: 1fr; gap: 18px; padding: 14px; }
  .article-row-media { aspect-ratio: 16 / 9; }
  .article-row-content { gap: 10px; padding: 0 3px 6px; }
  .article-row-content h2 { font-size: 20px; }
  .article-row-content p, .article-row-read { font-size: 14px; }
  .media-gallery-section { padding-top: 24px; }
  .image-title-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .image-title-card h2 { margin-top: 12px; font-size: 16px; }
  .media-gallery-section .pagination { margin-top: 34px; }
  .section-story-detail { padding: 38px 0 50px; }
  .section-story-head { margin-bottom: 26px; text-align: left; }
  .section-story-head h1 { margin-top: 14px; font-size: 31px; }
  .section-story-head > p { font-size: 15px; }
  .section-story-meta { justify-content: flex-start; }
  .section-story-copy { padding: 26px 22px 34px; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
  .section-story-side { grid-template-columns: 1fr; }
  .section-story-nav { grid-template-columns: 1fr auto 1fr; padding: 20px 16px; gap: 10px; }
  .section-story-nav > a strong, .section-story-nav > a small { display: none; }
  .section-story-nav > a:not(.section-story-list-link), .section-story-nav > a.next { display: flex; font-size: 18px; }
  .section-story-nav > a.next { justify-content: flex-end; }
  .article-reading-section { padding: 22px 0 38px; }
  .article-reading-layout { gap: 30px; }
  .article-reading-header { padding: 0 0 22px; }
  .article-reading-header h1 { margin-bottom: 20px; font-size: 28px; }
  .article-reading-meta { justify-content: flex-start; gap: 10px 22px; text-align: left; font-size: 14px; }
  .article-reading-meta > span { gap: 8px; }
  .article-reading-copy { min-height: 0; padding: 26px 0 44px; font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
  .article-reading-nav { min-height: 58px; gap: 8px; font-size: 14px; }
  .article-recommended { border-radius: 14px; padding: 25px 20px 14px; }
  .article-recommended h2 { font-size: 21px; }
  .article-recommended-item { padding: 22px 0 18px; }
  .floating-tools { display: none; }
  .float-link { width: auto; flex: 1; min-height: 44px; font-size: 10px; padding: 6px 3px; }
  .float-link:hover { transform: translateY(-2px); }
  .float-link svg { width: 17px; height: 17px; }
  .customer-chat { right: 16px; bottom: 18px; }
  .chat-main-button { width: 62px; height: 62px; }
  .chat-main-button .chat-support-icon { width: 42px; height: 42px; }
  .customer-chat-menu { bottom: 74px; }
  .chat-window { width: calc(100vw - 32px); bottom: 74px; }
  .product-grid, .mini-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop-layout .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-page { padding: 24px 0 42px; }
  .checkout-main-title { font-size: 24px; }
  .checkout-form-row, .checkout-form-row.two, .checkout-form-row.two .checkout-field { grid-template-columns: 1fr; gap: 7px; }
  .checkout-field label, .checkout-form-row > label { text-align: left; }
  .checkout-note, .checkout-toggle-line, .checkout-create-address, .checkout-saved-address { margin-left: 0; }
  .checkout-good { grid-template-columns: 72px minmax(0, 1fr) 34px; gap: 12px; }
  .checkout-good img { width: 72px; height: 72px; }
  .checkout-good h3 { font-size: 13px; }
  .cart-table-head { display: none; }
  .cart-shop-head { align-items: flex-start; flex-direction: column; padding: 14px; }
  .cart-shop-promo { justify-content: flex-start; text-align: left; }
  .cart-product-row { grid-template-columns: 1fr; gap: 16px; padding: 4px 14px 16px; }
  .cart-product-main { grid-template-columns: 70px minmax(0, 1fr); align-items: start; }
  .cart-main-image { width: 70px; height: 70px; }
  .cart-product-title { font-size: 13px; }
  .cart-product-summary .cart-option-list, .cart-product-summary > .cart-add-style, .cart-qty-list, .cart-subtotal-list { display: none; }
  .cart-mobile-lines { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 2px; }
  .cart-mobile-line { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid #eef2f7; }
  .cart-mobile-line:first-child { border-top: 0; }
  .cart-mobile-line .cart-option-row { grid-template-columns: 18px 38px minmax(0, 1fr); }
  .cart-mobile-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 66px; }
  .cart-mobile-meta .cart-money { color: #ff2d00; font-size: 14px; font-weight: 900; }
  .cart-mobile-add { display: inline-flex; justify-self: start; align-items: center; margin-left: 66px; }
  .cart-option-row { grid-template-columns: 18px 38px minmax(0, 1fr); }
  .cart-option-row img { width: 38px; height: 32px; }
  .cart-qty-list, .cart-subtotal-list { padding-top: 0; }
  .cart-qty { grid-template-columns: 30px 70px 30px 28px; max-width: 170px; }
  .cart-qty input { width: 70px; }
  .cart-price-promo { min-height: 0; }
  .cart-subtotal-list { justify-items: start; padding-top: 0; }
  .cart-discount-line { margin-bottom: 6px; }
  .cart-shop-actions { padding: 8px 14px; }
  .checkout-cart-goods .cart-product-row { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .checkout-cart-goods .cart-product-main { grid-template-columns: 70px minmax(0, 1fr); }
  .checkout-cart-goods .cart-main-image { width: 70px; height: 70px; }
  .checkout-cart-goods .cart-mobile-lines { margin-top: 4px; }
  .payment-page { padding: 28px 0 46px; }
  .payment-shell { grid-template-columns: 1fr; max-width: none; }
  .payment-title { font-size: 20px; }
  .payment-option { min-height: 68px; padding: 0 18px; }
  .payment-summary-card { margin-top: 8px; padding: 22px 18px; }
  .payment-summary-row { grid-template-columns: 1fr; gap: 4px; }
  .payment-summary-value { text-align: left; }
  .payment-success-page { padding: 28px 0 48px; }
  .payment-success-head { margin-bottom: 22px; font-size: 20px; }
  .payment-success-card { padding: 28px 14px 36px; border-radius: 10px; }
  .payment-success-amount { font-size: 28px; }
  .payment-success-detail { padding: 14px; }
  .payment-success-row { grid-template-columns: 1fr; gap: 4px; padding: 6px 0; }
  .payment-success-value { text-align: left; }
  .cart-settlement { align-items: flex-start; flex-direction: column; padding: 14px; }
  .cart-settlement-right { justify-content: flex-start; }
  .cart-total strong { font-size: 22px; }
  .news-card-grid { grid-template-columns: 1fr; gap: 18px; }
  .news-card-media { aspect-ratio: 1.38; }
  .news-feature-screen { min-height: auto; padding: 32px 0; }
  .news-feature-main { min-height: 360px; border-radius: 12px; }
  .news-feature-content { padding: 30px 24px; }
  .news-feature-content h2 { font-size: 20px; }
  .news-feature-date { font-size: 15px; }
  .news-feature-side { gap: 22px; }
  .news-feature-side-item { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .news-feature-side-item img { width: 112px; height: 86px; }
  .news-feature-side-item h3 { font-size: 15px; }
  .news-feature-side-item time, .news-feature-side-item p { font-size: 12px; }
  .article-detail-section { padding: 36px 0 48px; }
  .article-detail-title { font-size: 31px; }
  .article-copy { font-size: 16px; }
  .article-post-nav { grid-template-columns: 1fr; align-items: start; }
  .member-center-page { padding: 14px 0 34px; }
  .member-center-shell { grid-template-columns: 1fr; }
  .member-side-menu { position: static; min-height: auto; padding-bottom: 8px; }
  .member-side-brand { padding: 15px 16px; }
  .member-side-avatar { width: 42px; height: 42px; border-radius: 12px; }
  .member-avatar-picker, .member-avatar-button { width: 42px; height: 42px; }
  .member-side-nav { display: flex; gap: 7px; overflow-x: auto; padding: 10px 12px 6px; scrollbar-width: thin; }
  .member-menu-group { display: contents; }
  .member-menu-title { display: none; }
  .member-menu-link { flex: 0 0 auto; min-height: 38px; padding: 8px 12px; border: 1px solid #e6edf5; }
  .member-menu-link::after, .member-menu-icon { display: none; }
  .member-signout { width: auto; min-height: 36px; margin: 6px 12px 0; padding: 0 15px; }
  .member-content-panel { min-height: 520px; padding: 20px 16px 24px; }
  .member-welcome-card { align-items: flex-start; flex-direction: column; padding: 23px 20px; }
  .member-welcome-card h2 { font-size: 23px; }
  .member-dashboard-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .member-settings-heading { flex-direction: column; padding: 20px 18px; }
  .member-settings-grid { grid-template-columns: 1fr; padding: 20px 18px; }
  .member-control.full { grid-column: auto; }
  .member-security-fields { padding: 20px 18px; }
  .member-settings-actions { align-items: flex-start; flex-direction: column; padding: 17px 18px 20px; }
  .member-settings-card > .member-form-status { padding: 0 18px; }
  .member-table-scroll { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .member-data-table { min-width: 0; display: block; }
  .member-data-table thead { display: none; }
  .member-data-table tbody { display: grid; gap: 12px; }
  .member-data-table tr { display: block; overflow: hidden; border: 1px solid #e1e9f3; border-radius: 11px; background: #fff; }
  .member-data-table td { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; align-items: center; padding: 11px 13px; }
  .member-data-table td::before { content: attr(data-label); color: #7b899b; font-size: 10px; font-weight: 900; }
  .member-table-product { min-width: 0; grid-template-columns: 56px minmax(0,1fr); }
  .member-table-product img { width: 56px; height: 48px; }
  .member-table-actions { justify-content: flex-start; }
  .member-review-ready-grid,.member-review-form-fields { grid-template-columns: 1fr; }
  .member-review-form-head { align-items: flex-start; }
  .member-review-text-cell { min-width: 0; max-width: none; }
  .order-detail-head { flex-direction: column; }
  .order-detail-total { text-align:left; }
  .order-detail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-order-row { grid-template-columns: 1fr; gap: 12px; }
  .member-order-actions { justify-content: flex-start; }
  .member-saved-product { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .member-saved-product-media { width: 92px; }
  .member-saved-product-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .member-dashboard-stat { grid-template-columns: 38px minmax(0,1fr); min-height: 80px; padding: 12px; }
  .member-dashboard-stat-icon { width: 38px; height: 38px; }
  .member-dashboard-stat-arrow { display: none; }
  .member-dashboard-columns, .member-address-layout { grid-template-columns: 1fr; }
  .member-address-list-panel, .member-address-editor { padding: 16px; }
  .member-section-heading { align-items: flex-start; flex-direction: column; }
  .member-tabs { gap: 18px; }
  .member-empty-state { min-height: 420px; }
  .member-dashboard-grid, .member-card-grid, .member-form-grid, .member-address-grid, .member-coupon-grid { grid-template-columns: 1fr; }
  .member-page-head { align-items: flex-start; flex-direction: column; }
  .member-consent-layout { gap: 26px; padding-bottom: 8px; }
  .member-legal-document-head { flex-direction: column; gap: 8px; padding-bottom: 19px; }
  .member-legal-document-head time { padding-top: 0; white-space: normal; }
  .member-legal-document-body { padding-top: 21px; }
  .member-consent-card { gap: 16px; padding: 18px 16px; }
  .member-consent-choice { padding: 15px 14px; }
  .member-consent-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .member-consent-actions .btn { width: 100%; min-width: 0; }
  .member-consent-history { padding-top: 24px; }
  .member-consent-history > header { margin-bottom: 14px; }
  .member-consent-history .member-record { padding: 16px; }
  .member-product-line { grid-template-columns: 64px minmax(0, 1fr); }
  .member-product-line .btn { grid-column: 2; justify-self: start; }
  .member-coupon-card { grid-template-columns: 1fr; }
  .article-prev-button { width: fit-content; }
  .popular-feature-media img { height: 150px; }
  .popular-post { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .popular-post img { width: 96px; height: 72px; }
  .case-feature-content { padding: 24px; }
  .case-feature-stats { grid-template-columns: 1fr; }
  .case-story-grid { grid-template-columns: 1fr; }
  .case-filter-row { justify-content: flex-start; }
  .cert-trust-content { padding: 24px; }
  .cert-trust-list { grid-template-columns: 1fr; }
  .cert-mosaic { grid-template-columns: 1fr; }
  .cert-card-media { aspect-ratio: 1.38; padding: 14px; }
  .certificate-lightbox { padding: 14px; }
  .certificate-lightbox-dialog { width: calc(100vw - 28px); height: calc(100dvh - 28px); grid-template-columns: 1fr; gap: 0; align-items: stretch; }
  .certificate-lightbox-figure { height: 100%; }
  .certificate-lightbox-image-wrap { padding: 12px; }
  .certificate-lightbox-figure figcaption { min-height: 58px; padding: 12px 15px; gap: 12px; }
  .certificate-lightbox-figure figcaption strong { font-size: 14px; }
  .certificate-lightbox-close { right: 9px; top: 9px; transform: none; width: 42px; height: 42px; }
  .certificate-lightbox-close:hover { transform: rotate(6deg); }
  .certificate-lightbox-nav { position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); background: rgba(7,35,74,.82); }
  .certificate-lightbox-nav.is-prev { left: 9px; }
  .certificate-lightbox-nav.is-next { right: 9px; }
  .certificate-lightbox-nav.is-prev:hover { transform: translate(-3px, -50%); }
  .certificate-lightbox-nav.is-next:hover { transform: translate(3px, -50%); }
  .app-page-layout { gap: 30px; }
  .app-showcase-copy, .app-solution-panel { padding: 24px; }
  .app-showcase-media { min-height: 270px; }
  .app-floating-card { position: relative; left: auto; bottom: auto; width: auto; margin: -70px 16px 16px; }
  .app-proof-row, .app-industry-grid, .app-workflow, .app-case-grid { grid-template-columns: 1fr; }
  .app-cta-panel { display: grid; padding: 22px; }
  .app-story-list { gap: 44px; padding: 28px 0 10px; }
  .app-story-row { min-height: auto; }
  .app-story-copy h2 { font-size: 22px; }
  .app-story-copy p { font-size: 13px; }
  .app-story-media img { height: 210px; }
  .factory-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .factory-card.featured { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .factory-card.featured .factory-card-body { padding: 24px; }
  .factory-card.featured .factory-card-body h3 { font-size: 24px; }
  .about-top-banner { min-height: 320px; }
  .about-top-banner-inner { padding: 58px 0; }
  .about-page { padding-top: 26px; }
  .about-wrap { width: min(100% - 28px, 100%); }
  .about-section { padding: 34px 0; }
  .about-heading { margin-bottom: 24px; }
  .about-heading h1, .about-heading h2 { font-size: 24px; }
  .about-record-grid, .about-record-grid.certificates { grid-template-columns: 1fr; gap: 18px; }
  .about-record-slider .about-record-grid { gap: 18px; }
  .about-record-slider .about-record-card { flex-basis: 100%; }
  .about-record-card h3 { padding: 14px 16px 16px; font-size: 15px; }
  .about-intro { gap: 24px; }
  .about-metrics, .about-service-grid, .offer-cards, .offer-products { grid-template-columns: 1fr; }
  .about-services-layout { gap: 16px; }
  .about-advantage { grid-template-columns: 44px 1fr; gap: 16px; }
  .advantage-dots span { width: 24px; height: 24px; border-width: 2px; }
  .about-team img { height: 240px; }
  .social-collage, .about-note-grid { grid-template-columns: 1fr; }
  .about-case-grid { grid-template-columns: 1fr; }
  .about-case-feature { min-height: 360px; }
  .about-case-feature-body { padding: 24px; }
  .about-case-feature h3 { font-size: 24px; }
  .social-collage img, .social-collage .wide img { height: 190px; }
  .about-team { padding-bottom: 0; }
  .team-caption { position: relative; left: auto; bottom: auto; transform: none; width: 100%; margin-top: -24px; }
  .about-team:hover .team-caption { transform: translateY(-6px); }
  .offer-title { padding-top: 0; }
  .about-process { grid-template-columns: repeat(2, 1fr); }
  .content-slider { padding: 0 42px; }
  .content-card { flex-basis: 100%; }
  .cert-slider .content-card { flex-basis: 100%; }
  .home-media-slider .content-card { flex-basis: 100%; }
  .slider-arrow { width: 34px; height: 48px; font-size: 20px; }
  .product-actions { grid-template-columns: 1fr; }
  .stats, .certificate-strip, .scenario-grid, .feature-grid, .service-grid, .article-grid, .review-grid, .link-grid, .process, .factory-grid, .faq-layout, .shop-layout, .account-layout { grid-template-columns: 1fr; }
  .scenario-card.large { grid-row: auto; min-height: auto; }
  .scenario-card.large .scenario-media { min-height: 210px; }
  .factory-grid { grid-auto-rows: 160px; }
  .sidebar { position: static; }
  .product-gallery-main { min-height: 220px; aspect-ratio: 1.35; }
  .gallery-thumbs-row { grid-template-columns: 1fr; }
  .gallery-arrow { display: none; }
  .gallery-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82px, 26%); grid-template-columns: none; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .gallery-thumb { scroll-snap-align: start; }
  .review-summary { grid-template-columns: 1fr; padding: 20px; }
  .review-filter-btn { flex: 1 1 calc(50% - 8px); min-width: 0; padding: 0 10px; }
  .review-item { width: 100%; }
  .review-avatar { width: 40px; height: 40px; }
  .review-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-media-thumb { height: auto; aspect-ratio: 1; }
  .review-pagination { justify-content: flex-start; }
  .review-page-btn.text { min-width: 78px; }
  .product-sortbar { padding: 16px; border-radius: 12px; }
  .sort-heading { width: 100%; padding-bottom: 13px; border-bottom: 1px solid #e2e9f2; }
  .sort-controls { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sort-btn { width: 100%; min-width: 0; padding: 0 10px; }
  .sort-select-wrap { width: 100%; grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr; }
  .quote-address-grid { grid-template-columns: 1fr; }
  .dimension-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-item { grid-template-columns: 72px 1fr; }
  .cart-item .price { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr; }
  .copyright { flex-direction: column; }
}
@media (max-width: 430px) {
  .product-slide .product-grid { grid-template-columns: 1fr; }
  .product-grid, .mini-cards { grid-template-columns: 1fr; }
  .shop-layout .product-grid { grid-template-columns: 1fr; }
  .dimension-row { grid-template-columns: 1fr; }
  .factory-page-grid { grid-template-columns: 1fr; }
  .factory-card.featured { min-height: 280px; }
  .hero-screen { min-height: 480px; }
  .hero-title { font-size: 32px; }
  .section-title { font-size: 28px; }
  .member-dashboard-grid { grid-template-columns: 1fr; }
  .member-data-table td { grid-template-columns: 1fr; gap: 6px; }
  .member-table-product { grid-template-columns: 52px minmax(0,1fr); }
  .order-detail-summary { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-track, .hero-slide-media img, .hero-message { transition: none; }
}
/* Production commerce states */
.commerce-message{padding:32px;border:1px solid #dfe5ec;border-radius:12px;background:#fff;color:#52606d;text-align:center}
.commerce-error{border-color:#e9b5b5;background:#fff7f7;color:#a12b2b}
.commerce-cart-list{display:grid;gap:16px;margin:24px 0}
.commerce-cart-item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px;border:1px solid #dfe5ec;border-radius:12px;background:#fff}
.commerce-cart-copy{display:grid;gap:6px}.commerce-cart-copy h2,.commerce-cart-copy p{margin:0}
.commerce-cart-actions{display:flex;align-items:center;gap:10px}.commerce-cart-actions input[type=number]{width:88px;padding:9px}
.commerce-order-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;padding:12px 0;border-bottom:1px solid #e7ebf0}
.product-commerce{margin-top:32px;margin-bottom:32px;padding:24px;border:1px solid #dfe5ec;border-radius:12px;background:#fff}
.product-commerce input{width:110px;margin:0 12px;padding:10px}
.product-commerce-inline{margin:20px 0 0;padding:18px;border-color:#d8e4f1;border-radius:10px;background:linear-gradient(135deg,#f7faff 0%,#fff 68%);box-shadow:inset 4px 0 0 var(--yellow)}
.product-commerce-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.product-commerce-head span{display:block;margin-bottom:3px;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.product-commerce-head h2{margin:0;color:var(--ink);font-size:20px;line-height:1.2}
.product-commerce-head p{margin:0;color:var(--muted);font-size:13px;text-align:right}
.product-commerce-head p span{display:inline;margin:0;color:inherit;font-size:inherit;letter-spacing:0;text-transform:none}
.product-commerce-head p strong{color:var(--orange)}
.product-commerce-estimate{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:11px 12px;border:1px solid #e1e9f3;border-radius:8px;background:#fff;color:var(--muted);font-size:12px}
.product-commerce-estimate strong{color:var(--orange);font-size:18px;white-space:nowrap}
.product-commerce-actions{display:grid;grid-template-columns:minmax(130px,1fr) minmax(150px,auto);gap:12px;align-items:end}
.product-commerce-actions label{display:grid;gap:6px;color:var(--ink);font-size:12px;font-weight:800}
.product-commerce-actions input{width:100%;height:42px;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font:inherit}
.product-commerce-actions .btn{width:100%}
.product-detail-secondary-actions .btn{flex:1}
.product-detail-secondary-actions .product-order-now{border-color:#e53935;background:#e53935;color:#fff}
.product-detail-secondary-actions .product-order-now:hover:not(:disabled){border-color:#c62828;background:#c62828;color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(198,40,40,.24)}
.product-detail-secondary-actions .product-order-now:disabled{cursor:not-allowed;opacity:.48}
@media (max-width:720px){.commerce-cart-item{grid-template-columns:72px minmax(0,1fr)}.commerce-cart-actions{grid-column:1/-1;flex-wrap:wrap}.commerce-order-item{grid-template-columns:1fr}.product-commerce input{display:block;margin:8px 0}.product-commerce-head{align-items:flex-start;flex-direction:column}.product-commerce-head p{text-align:left}.product-commerce-actions{grid-template-columns:1fr}}