/* HONGZEN — Precision / Connection / Possibility */
:root {
    --ink:#142338;
    --muted:#667487;
    --blue:#2358e8;
    --ice:#f3f6fa;
    --line:#dfe5ec;
    --navy:#112a4d;
    --font:"Segoe UI","Microsoft JhengHei","PingFang TC",sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:112px
}

body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font:15px/1.75 var(--font);
    -webkit-font-smoothing:antialiased
}

h1,h2,h3,p,figure {
    margin:0
}

h1,h2,h3 {
    font-weight:650;
    line-height:1.4
}

h1,h2 {
    letter-spacing:-.045em
}

h2 {
    font-size:38px
}

h3 {
    font-size:21px
}

p {
    color:var(--muted)
}

a {
    color:inherit;
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

button {
    cursor:pointer;
    color:inherit
}

button:disabled {
    cursor:not-allowed;
    opacity:.55
}

img {
    display:block;
    max-width:100%;
    height:auto
}

svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0
}

a,button {
    touch-action:manipulation
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:5px
}

input:focus,select:focus,textarea:focus {
    outline:2px solid var(--blue);
    outline-offset:2px
}

[hidden] {
    display:none!important
}

::selection {
    background:#c8dcff
}

.icon-definitions {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}

.shell {
    width:calc(100% - 112px);
    max-width:1320px;
    margin-inline:auto
}

.section {
    padding-block:100px
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--blue);
    font-size:10px;
    letter-spacing:.15em;
    font-weight:650;
    line-height:1.6
}

.mono {
    font-family:Consolas,monospace;
    font-size:11px;
    letter-spacing:.06em
}

.muted {
    color:var(--muted)
}

.accent,.blue-text {
    color:var(--blue)
}

.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    background:var(--blue);
    border-radius:50%;
    flex-shrink:0
}

.skip-link {
    position:fixed;
    top:-70px;
    left:12px;
    padding:12px 20px;
    background:var(--blue);
    color:white;
    z-index:100
}

.skip-link:focus {
    top:12px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:38px;
    min-height:52px;
    padding:13px 25px;
    border:1px solid transparent;
    border-radius:7px;
    background:var(--blue);
    color:white;
    font-size:14px;
    font-weight:600;
    transition:background .2s,transform .2s
}

.button:hover {
    background:#1646c6;
    transform:translateY(-2px)
}

.button svg {
    width:20px;
    height:20px
}

.button-small {
    min-height:42px;
    padding:9px 19px;
    gap:20px
}

.button-outline {
    background:transparent;
    border-color:#aebbcf;
    color:var(--ink)
}

.button-outline:hover {
    background:#eaf0fb;
    border-color:var(--blue)
}

.button-white {
    background:white;
    color:var(--blue)
}

.button-white:hover {
    background:#e5efff
}

.full-width {
    width:100%;
    justify-content:space-between
}

.text-link {
    display:inline-flex;
    gap:24px;
    align-items:center;
    font-size:14px;
    font-weight:600;
    padding-block:9px
}

.text-link:hover {
    color:var(--blue)
}

.text-link svg {
    width:19px;
    height:19px
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:42px
}

.section-heading h2 {
    margin-top:16px
}

.section-heading>p {
    font-size:14px;
    line-height:1.9
}

.mobile-break {
    display:none
}

.site-header {
    background:#fffffff5;
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px)
}

.nav-row {
    height:94px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0
}

.brand-symbol {
    width:38px;
    height:40px;
    stroke:none;
    fill:var(--blue)
}

.brand-cut {
    fill:#89b6f9
}

.brand-word {
    font-size:25px;
    font-weight:750;
    line-height:1.1;
    letter-spacing:.035em
}

.brand-word small {
    display:block;
    font-size:8px;
    letter-spacing:.13em;
    font-weight:600;
    margin-top:8px
}

.brand-word small i {
    font-style:normal;
    color:#9ba7b8;
    margin-inline:5px
}

.main-nav {
    display:flex;
    align-items:center;
    gap:31px;
    margin-left:auto;
    margin-right:26px;
    height:100%;
    font-size:13px
}

.main-nav>a {
    position:relative;
    display:flex;
    align-items:center;
    height:100%;
    white-space:nowrap
}

.main-nav>a:hover,.main-nav>a.active {
    color:var(--blue)
}

.main-nav>a.active:after {
    content:"";
    position:absolute;
    bottom:20px;
    left:calc(50% - 2px);
    width:4px;
    height:4px;
    background:var(--blue);
    border-radius:50%
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:18px
}

.icon-button {
    display:grid;
    place-items:center;
    width:36px;
    height:40px;
    padding:6px;
    border:0;
    background:transparent
}

.icon-button:hover {
    color:var(--blue)
}

.cart-link {
    display:flex;
    align-items:center;
    gap:7px;
    min-height:44px
}

.cart-count {
    font-size:11px;
    color:var(--blue);
    font-weight:650
}

.nav-contact {
    display:flex;
    align-items:center;
    gap:20px;
    border:1px solid var(--line);
    border-radius:50px;
    font-size:12px;
    padding:10px 18px;
    white-space:nowrap
}

.nav-contact:hover {
    background:var(--ice)
}

.nav-contact svg {
    width:17px
}

.menu-toggle {
    display:none
}

.header-search {
    border-top:1px solid var(--line);
    padding:20px 0;
    background:var(--ice)
}

.search-form {
    display:flex;
    align-items:center;
    gap:20px
}

.search-form input {
    min-width:0;
    flex:1;
    border:0;
    background:transparent;
    padding:10px
}

.catalog-notice {
    display:flex;
    align-items:center;
    gap:11px;
    background:#edf3ff;
    border:1px solid #d7e4ff;
    border-radius:7px;
    color:#395377;
    padding:13px 18px;
    font-size:12px;
    margin:0 0 24px
}

.notice-warning {
    background:#fff6e9;
    border-color:#f2debc;
    color:#875922
}

.notice-warning .status-dot {
    background:#a8702e
}

.product-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px
}

.product-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:11px;
    overflow:hidden;
    transition:border-color .2s,transform .2s,box-shadow .2s
}

.product-card:hover {
    border-color:#b0c3e6;
    transform:translateY(-4px);
    box-shadow:0 14px 26px #17315009
}

.product-image {
    display:block;
    position:relative;
    aspect-ratio:1.16;
    background:#f5f7fa;
    overflow:hidden;
    margin:7px 7px 0;
    border-radius:6px
}

.product-image img {
    width:100%;
    height:100%;
    object-fit:contain;
    padding:45px 25px 23px;
    mix-blend-mode:multiply;
    transition:transform .35s
}

.product-card:hover .product-image img {
    transform:scale(1.05)
}

.product-category {
    position:absolute;
    z-index:1;
    top:15px;
    left:15px;
    background:#fff;
    border:1px solid #e7ebf1;
    border-radius:4px;
    font-size:9px;
    padding:2px 9px;
    color:#60718a;
    max-width:calc(100% - 30px)
}

.image-link {
    position:absolute;
    right:12px;
    bottom:12px;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    background:#fff;
    border-radius:50%;
    color:#6c819d
}

.image-link svg {
    width:14px;
    height:14px
}

.product-info {
    padding:21px;
    display:flex;
    flex-direction:column;
    flex:1
}

.part-number {
    font:10px Consolas,monospace;
    letter-spacing:.035em;
    color:#75849b;
    overflow-wrap:anywhere
}

.product-info h3 {
    font-size:16px;
    margin:7px 0;
    line-height:1.5;
    overflow-wrap:anywhere
}

.product-summary {
    font-size:11px;
    line-height:1.7;
    margin-bottom:18px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:37px
}

.stock {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    color:#8a6e43
}

.stock i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:currentColor;
    flex-shrink:0
}

.stock.available {
    color:#307668
}

.product-bottom {
    margin-top:auto;
    padding-top:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.product-price {
    font-size:16px;
    font-weight:600;
    overflow-wrap:anywhere
}

.product-price small {
    display:block;
    font-size:9px;
    font-weight:400;
    color:#8090a6
}

.add-button {
    display:flex;
    align-items:center;
    gap:4px;
    background:#ecf2ff;
    color:var(--blue);
    border:0;
    border-radius:7px;
    padding:10px;
    min-width:44px;
    min-height:44px
}

.add-button svg {
    width:17px;
    height:17px
}

.add-button span {
    font-size:13px
}

.add-button:hover {
    background:var(--blue);
    color:#fff
}

summary {
    cursor:pointer;
    list-style:none
}

summary::-webkit-details-marker {
    display:none
}

.site-footer {
    background:var(--navy);
    color:#e6eef8
}

.page-mast {
    background:var(--ice);
    padding:38px 0 50px;
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden
}

.page-mast:after {
    content:"+";
    position:absolute;
    right:7%;
    bottom:-50px;
    font:280px/1 Arial;
    color:#e6edf7;
    pointer-events:none
}

.page-mast>.shell {
    position:relative;
    z-index:1
}

.breadcrumb {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    font-size:11px;
    color:#7c8b9f;
    margin-bottom:35px;
    overflow-wrap:anywhere
}

.breadcrumb a:hover {
    color:var(--blue)
}

.page-mast h1 {
    font-size:47px;
    line-height:1.35;
    margin-top:15px
}

.page-mast>div>p {
    font-size:14px;
    margin-top:16px
}

.page-mast .mono {
    font-size:10px
}

.small-mast {
    padding:42px 0
}

.small-mast h1 {
    font-size:38px
}

.catalog-section {
    padding-top:45px
}

.catalog-layout {
    display:grid;
    grid-template-columns:225px minmax(0,1fr);
    gap:42px
}

.catalog-sidebar {
    border-right:1px solid var(--line);
    padding-right:26px
}

.catalog-sidebar h2 {
    font-size:20px;
    margin-bottom:24px;
    letter-spacing:0
}

.catalog-sidebar .eyebrow {
    font-size:8px;
    margin-bottom:9px
}

.category-links {
    display:flex;
    flex-direction:column;
    gap:5px;
    margin:0 0 30px
}

.category-links a {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:9px 12px;
    border-radius:5px;
    font-size:12px;
    color:#53657e
}

.category-links a.active {
    background:#eaf0ff;
    color:var(--blue);
    font-weight:600
}

.category-links a:hover {
    background:var(--ice)
}

.category-links small {
    font-size:10px;
    color:#8795a9
}

.sidebar-note {
    margin-top:32px;
    padding:20px 16px;
    background:var(--ice);
    border-radius:7px
}

.sidebar-note svg {
    color:var(--blue);
    margin-bottom:15px
}

.sidebar-note strong {
    display:block;
    font-size:13px
}

.sidebar-note p {
    font-size:11px;
    margin:8px 0
}

.sidebar-note a {
    font-size:11px;
    color:var(--blue)
}

.catalog-search {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 8px 7px 16px;
    background:#fff
}

.catalog-search>svg {
    color:#8493a7;
    width:19px
}

.catalog-search input {
    flex:1;
    min-width:0;
    border:0;
    padding:7px;
    background:transparent;
    font-size:13px
}

.catalog-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:18px;
    font-size:12px
}

.catalog-toolbar select {
    border:0;
    background:var(--ice);
    color:#53657e;
    padding:7px 28px 7px 12px;
    border-radius:4px;
    font-size:11px;
    max-width:160px
}

.catalog-toolbar label {
    display:flex;
    align-items:center;
    gap:9px
}

.filter-button {
    border:0;
    background:transparent;
    color:var(--blue);
    font-size:11px;
    padding:8px 0
}

.results-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin:28px 0 20px;
    font-size:11px;
    color:#7c8b9e
}

.results-row p {
    font-size:12px
}

.results-row strong {
    color:var(--blue);
    font-size:16px
}

.results-row>a {
    color:var(--blue)
}

.results-row .mono {
    font-size:8px
}

.catalog-results .product-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.catalog-results .product-info {
    padding:18px
}

.pagination {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:40px
}

.pagination a {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:12px
}

.pagination a.active {
    background:var(--blue);
    color:#fff;
    border-color:var(--blue)
}

.empty-state {
    display:flex;
    align-items:center;
    flex-direction:column;
    text-align:center;
    padding:75px 25px;
    gap:18px;
    background:#f7f9fc;
    border:1px solid var(--line);
    border-radius:14px
}

.empty-state>svg {
    width:44px;
    height:44px;
    color:var(--blue);
    margin-bottom:4px;
    stroke-width:1.25
}

.empty-state h2 {
    font-size:26px
}

.empty-state p {
    max-width:520px;
    font-size:13px
}

.empty-state .text-link {
    font-size:12px
}

.status-page {
    margin-block:70px
}

.error-code {
    font-size:80px;
    color:#a5c2f6;
    line-height:1
}

.detail-section {
    padding-top:32px
}

.detail-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:75px;
    align-items:center
}

.detail-visual {
    position:relative;
    background:var(--ice);
    border-radius:15px;
    overflow:hidden;
    min-height:440px
}

.detail-visual>img {
    width:100%;
    height:440px;
    object-fit:contain;
    padding:80px 60px;
    mix-blend-mode:multiply
}

.detail-visual .product-category {
    top:24px;
    left:24px
}

.detail-image-note {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:0 24px 22px;
    color:#8292a6;
    font:8px var(--font)
}

.detail-copy>.part-number {
    display:block;
    margin:15px 0 9px;
    font-size:13px
}

.detail-copy h1 {
    font-size:32px;
    margin-bottom:17px;
    overflow-wrap:anywhere
}

.detail-summary {
    font-size:14px;
    margin-bottom:20px
}

.detail-copy>.stock {
    font-size:12px
}

.detail-price {
    font-size:29px;
    margin:28px 0 22px;
    border-top:1px solid var(--line);
    padding-top:20px;
    font-weight:600
}

.detail-price small {
    display:block;
    font-size:11px;
    font-weight:400;
    color:var(--muted);
    margin-top:5px
}

.detail-add>label {
    font-size:12px;
    display:block;
    margin-bottom:9px
}

.add-row {
    display:flex;
    gap:14px
}

.add-row>.button {
    flex:1;
    gap:12px
}

.quantity-control {
    display:flex;
    align-items:center;
    border:1px solid #cbd5e2;
    border-radius:6px;
    background:#fff;
    max-width:160px;
    overflow:hidden;
    height:48px
}

.quantity-control button {
    width:38px;
    min-width:32px;
    height:100%;
    border:0;
    background:transparent;
    font-size:18px;
    color:#61738d
}

.quantity-control button:hover {
    background:var(--ice);
    color:var(--blue)
}

.quantity-control input {
    min-width:0;
    width:54px;
    border:0;
    text-align:center;
    padding:0;
    font-size:13px;
    appearance:textfield
}

.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0
}

.micro-copy {
    font-size:11px!important;
    line-height:1.8!important;
    color:#7d8b9e!important
}

.detail-copy>.micro-copy {
    margin:17px 0
}

.detail-copy>.text-link {
    font-size:12px
}

.detail-information {
    margin-top:65px;
    border-top:1px solid var(--line);
    padding-top:45px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:75px
}

.detail-information h2 {
    font-size:26px;
    margin:13px 0 22px
}

.detail-information p {
    font-size:13px;
    margin-top:15px;
    line-height:2
}

.preserve-lines {
    white-space:pre-line;
    overflow-wrap:anywhere
}

.spec-list {
    margin:0;
    background:var(--ice);
    padding:16px 26px;
    border-radius:10px
}

.spec-list>div {
    display:flex;
    gap:15px;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding:12px 0;
    font-size:12px
}

.spec-list>div:last-child {
    border:0
}

dt {
    color:#8291a5
}

dd {
    margin:0;
    overflow-wrap:anywhere
}

.related-heading {
    margin-top:85px
}

.checkout-steps {
    list-style:none;
    display:flex;
    gap:34px;
    align-items:center;
    padding:0;
    margin:24px 0 0;
    font-size:12px;
    color:#8a98aa
}

.checkout-steps li {
    display:flex;
    align-items:center;
    gap:10px
}

.checkout-steps li>span {
    width:25px;
    height:25px;
    background:#e6ebf2;
    border-radius:50%;
    display:grid;
    place-items:center;
    font:10px Consolas,monospace
}

.checkout-steps .current {
    color:var(--blue);
    font-weight:600
}

.checkout-steps .current>span {
    background:var(--blue);
    color:#fff
}

.checkout-steps .done {
    color:#52847b
}

.cart-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:50px;
    align-items:start
}

.cart-table-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 0 24px;
    border-bottom:1px solid var(--line)
}

.cart-table-heading h2 {
    font-size:22px
}

.cart-table-heading h2 span {
    font:14px Consolas,monospace;
    color:var(--blue);
    margin-left:10px
}

.cart-table-heading>span {
    color:var(--muted);
    font-size:10px
}

.cart-line {
    display:grid;
    grid-template-columns:115px minmax(0,1fr) 150px;
    gap:23px;
    padding:26px 0;
    border-bottom:1px solid var(--line);
    align-items:center
}

.cart-image {
    background:var(--ice);
    border-radius:7px;
    overflow:hidden
}

.cart-image img {
    width:115px;
    height:115px;
    object-fit:contain;
    mix-blend-mode:multiply;
    padding:20px
}

.cart-product h3 {
    font-size:16px;
    margin:4px 0 10px;
    overflow-wrap:anywhere
}

.cart-product>.unit-price {
    display:block;
    font-size:12px;
    margin-top:8px
}

.cart-line-actions {
    display:flex;
    flex-direction:column;
    align-items:end;
    gap:9px
}

.cart-line-actions .quantity-control {
    height:37px;
    max-width:140px
}

.cart-quantity-form {
    text-align:right
}

.subtle-button,.remove-button {
    background:transparent;
    border:0;
    color:#7d8da4;
    font-size:10px;
    padding:6px 0
}

.subtle-button:hover,.remove-button:hover {
    color:var(--blue)
}

.cart-line-actions>strong {
    font-size:13px;
    font-weight:600
}

.missing-line {
    display:flex;
    justify-content:space-between
}

.missing-line h3 {
    font-size:16px
}

.continue-shopping {
    margin-top:25px;
    font-size:12px
}

.order-summary {
    position:sticky;
    top:124px;
    background:var(--ice);
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px
}

.order-summary>.eyebrow {
    font-size:8px
}

.order-summary h2 {
    font-size:23px;
    margin:10px 0 26px
}

.summary-row {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    margin:15px 0;
    color:#60718a
}

.summary-total {
    border-top:1px solid #ced8e7;
    margin-top:22px;
    padding:21px 0;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px
}

.summary-total>span {
    font-size:11px;
    color:#61718a
}

.summary-total>strong {
    font-size:21px;
    letter-spacing:-.02em;
    font-weight:600;
    overflow-wrap:anywhere
}

.order-summary>.summary-total {
    display:block
}

.order-summary>.summary-total>strong {
    display:block;
    font-size:26px;
    margin-top:10px
}

.order-summary>p {
    font-size:11px;
    margin-bottom:22px;
    line-height:1.9
}

.summary-note {
    display:flex;
    align-items:start;
    gap:8px;
    font-size:10px;
    color:#7f8ea3;
    line-height:1.8;
    margin-top:18px
}

.summary-note svg {
    width:15px;
    height:18px
}

.order-summary .button {
    font-size:12px;
    gap:14px
}

.flash {
    padding:15px 20px;
    border-radius:7px;
    margin-block:18px;
    font-size:13px
}

.flash-success {
    background:#e8f5ef;
    color:#2c7562
}

.flash-error {
    background:#fff1ef;
    color:#a74d41;
    border:1px solid #f2d3ce
}

.field-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}

.field-wide {
    grid-column:1/-1
}

.field label {
    display:block;
    font-size:12px;
    margin-bottom:9px;
    font-weight:600
}

.field input,.field textarea {
    display:block;
    width:100%;
    border:1px solid #cdd7e5;
    border-radius:6px;
    padding:12px 14px;
    font-size:13px;
    background:#fff;
    color:var(--ink)
}

.field textarea {
    resize:vertical;
    min-height:120px
}

.field input::placeholder,.field textarea::placeholder {
    color:#8d99aa;
    font-size:11px
}

.field-validation-error {
    color:#b24841;
    font-size:11px
}

.form-panel-heading {
    margin-bottom:32px;
    border-bottom:1px solid var(--line);
    padding-bottom:25px
}

.form-panel-heading h2 {
    font-size:26px;
    margin:12px 0
}

.form-panel-heading p {
    font-size:12px
}

.checkbox-label {
    display:flex;
    gap:9px;
    align-items:center;
    font-size:12px;
    color:#60718a;
    cursor:pointer
}

.checkbox-label input {
    accent-color:var(--blue);
    width:15px;
    height:15px;
    flex-shrink:0
}

.consent-label {
    align-items:start;
    margin:28px 0 14px;
    font-size:11px;
    line-height:2
}

.consent-label input {
    margin-top:3px
}

.consent-label a {
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:3px
}

.form-panel>.text-link {
    font-size:12px;
    margin-top:20px
}

.honeypot {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden
}

.validation-summary-valid {
    display:none
}

.validation-summary-errors {
    background:#fff0ee;
    border:1px solid #f2ccc7;
    color:#a7463d;
    border-radius:7px;
    padding:14px;
    margin-bottom:22px;
    font-size:12px
}

.validation-summary-errors ul {
    margin:0;
    padding-left:20px
}

.checkout-line {
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    font-size:11px
}

.checkout-line>div {
    min-width:0
}

.checkout-line strong {
    display:block;
    font-weight:500;
    overflow-wrap:anywhere
}

.checkout-line>div>span {
    display:block;
    color:#7e8da2;
    font:10px/1.8 Consolas,var(--font);
    overflow-wrap:anywhere;
    margin-top:5px
}

.checkout-line>span {
    white-space:nowrap
}

.receipt-section {
    max-width:900px;
    padding-top:65px
}

.receipt-heading {
    text-align:center;
    margin-bottom:40px
}

.success-icon {
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#e9f3ff;
    color:var(--blue);
    margin:0 auto 25px
}

.success-icon svg {
    width:28px;
    height:28px
}

.receipt-heading .eyebrow {
    justify-content:center
}

.receipt-heading h1 {
    font-size:34px;
    margin:16px 0
}

.receipt-heading p {
    font-size:12px;
    line-height:2
}

.receipt {
    border:1px solid var(--line);
    border-radius:13px;
    padding:36px
}

.receipt-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding-bottom:25px;
    border-bottom:1px solid var(--line)
}

.receipt-top h2 {
    font:20px/1.5 Consolas,monospace;
    margin-top:12px;
    overflow-wrap:anywhere
}

.receipt-top>span {
    font-size:11px;
    color:#8390a4
}

.receipt-contact {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:12px 0 26px
}

.receipt-contact>div {
    font-size:12px
}

.receipt-contact dt {
    font-size:10px;
    margin-bottom:5px
}

.receipt-notes {
    padding:22px 0;
    border-top:1px solid var(--line)
}

.receipt-notes h3 {
    font-size:13px;
    margin-bottom:10px
}

.receipt-notes p {
    font-size:12px
}

.receipt-actions {
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:30px
}

.about-mast h1 {
    font-size:50px
}

.about-intro {
    display:grid;
    grid-template-columns:1fr 1.8fr;
    gap:60px
}

.about-intro>.eyebrow {
    align-self:start;
    padding-top:9px
}

.about-intro h2 {
    font-size:35px;
    margin-bottom:25px
}

.about-intro p {
    font-size:14px;
    line-height:2.1;
    margin-top:18px;
    max-width:620px
}

.about-image {
    position:relative;
    border-radius:16px;
    overflow:hidden
}

.about-image img {
    width:100%;
    height:440px;
    object-fit:cover
}

.about-image figcaption {
    display:flex;
    gap:20px;
    justify-content:space-between;
    font-size:9px;
    background:#eaf2fd;
    padding:16px 25px;
    color:#5b718f
}

.values-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px
}

.values-grid article {
    border-top:1px solid var(--line);
    padding-top:24px
}

.values-grid article>span {
    color:var(--blue);
    font:10px Consolas,monospace
}

.values-grid h3 {
    font-size:22px;
    margin:22px 0 15px
}

.values-grid p {
    font-size:13px;
    line-height:2
}

.soft-cta {
    background:#edf3fd;
    padding:65px 0
}

.soft-cta>.shell {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}

.soft-cta h2 {
    font-size:34px;
    margin-top:15px
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px;
    align-items:start
}

.contact-grid h2 {
    font-size:32px;
    margin:18px 0 20px
}

.contact-grid>div>p {
    font-size:14px;
    line-height:2;
    margin-bottom:26px
}

.contact-cart-link {
    display:flex;
    margin-top:15px;
    font-size:12px
}

.contact-panel {
    background:var(--ice);
    border:1px solid var(--line);
    border-radius:12px;
    padding:35px
}

.contact-panel>h2 {
    font-size:24px
}

.contact-panel>.contact-company-en {
    font-size:10px;
    color:#7586a0;
    margin-top:-8px
}

.contact-item {
    border-top:1px solid var(--line);
    padding:22px 0 0;
    margin-top:22px
}

.contact-item>span {
    font-size:9px;
    color:#7d8ca2;
    display:block;
    margin-bottom:9px
}

.contact-item>a,.contact-item>p {
    font-size:15px
}

.contact-address {
    font-style:normal;
    font-size:13px
}

.contact-address>p+p {
    font-size:11px;
    margin-top:6px
}

.contact-empty {
    border-top:1px solid var(--line);
    padding-top:28px;
    margin-top:25px
}

.contact-empty>svg {
    color:var(--blue);
    margin-bottom:14px
}

.contact-empty h3 {
    font-size:17px;
    margin-bottom:10px
}

.contact-empty p {
    font-size:12px;
    line-height:1.9
}

.part-inquiry {
    background:var(--ice);
    padding:20px;
    margin:20px 0;
    border-left:3px solid var(--blue);
    border-radius:3px
}

.part-inquiry>span {
    display:block;
    font-size:11px;
    color:#7586a0
}

.part-inquiry>strong {
    font:18px Consolas,monospace;
    display:block;
    margin-top:7px;
    overflow-wrap:anywhere
}

.faq-section {
    padding-top:0;
    max-width:1000px
}

.faq-section details {
    border-top:1px solid var(--line)
}

.faq-section details:last-child {
    border-bottom:1px solid var(--line)
}

.faq-section summary {
    display:flex;
    justify-content:space-between;
    gap:25px;
    padding:24px 0;
    font-size:16px
}

.faq-section summary>span {
    color:var(--blue)
}

.faq-section details>p {
    font-size:13px;
    padding:0 50px 25px 0;
    line-height:2
}

.prose {
    max-width:850px
}

.prose h2 {
    font-size:24px;
    margin:36px 0 15px
}

.prose h2:first-child {
    margin-top:0
}

.prose p {
    font-size:14px;
    line-height:2.1
}

.prose>.text-link {
    margin-top:30px
}

.toast {
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:50;
    display:flex;
    align-items:center;
    gap:13px;
    background:var(--navy);
    color:#fff;
    padding:18px 20px;
    border-radius:10px;
    box-shadow:0 14px 50px #17325230;
    max-width:calc(100vw - 40px);
    font-size:13px
}

.toast>svg {
    color:#9dc8ff;
    width:19px
}

.toast>a {
    color:#b2d4ff;
    font-size:12px;
    white-space:nowrap
}

.toast>button {
    background:transparent;
    color:#d7e4f5;
    border:0;
    font-size:21px;
    padding:0 3px;
    margin-left:8px
}

.toast-error {
    background:#843e38
}

.toast-error>svg {
    display:none
}

@media(max-width:1150px) {
    .shell {
        width:calc(100% - 64px)
    }
    .nav-row {
        gap:20px
    }
    .main-nav {
        gap:22px;
        margin-right:10px
    }
    .nav-actions {
        gap:12px
    }
    .brand-word {
        font-size:22px
    }
    .brand-symbol {
        width:32px
    }
    .nav-contact {
        padding:8px 13px;
        gap:10px
    }
    .product-grid {
        gap:14px
    }
    .product-info {
        padding:16px
    }
    .product-price {
        font-size:14px
    }
    .catalog-layout {
        grid-template-columns:190px minmax(0,1fr);
        gap:26px
    }
    .catalog-sidebar {
        padding-right:18px
    }
    .catalog-results .product-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .cart-layout {
        grid-template-columns:minmax(0,1fr) 300px;
        gap:30px
    }
    .cart-line {
        grid-template-columns:85px minmax(0,1fr) 120px;
        gap:16px
    }
    .cart-image img {
        width:85px;
        height:85px;
        padding:12px
    }
    .cart-product h3 {
        font-size:14px
    }
    .order-summary {
        padding:24px
    }
    .detail-grid,.detail-information {
        gap:40px
    }
    .detail-visual>img {
        height:400px;
        padding:60px 40px
    }
    .contact-grid {
        gap:50px
    }
}

@media(max-width:900px) {
    .main-nav {
        gap:18px;
        margin-right:0
    }
    .nav-contact {
        display:none
    }
    .section {
        padding-block:75px
    }
    .section-heading h2 {
        font-size:31px
    }
    .product-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .product-image {
        aspect-ratio:1.4
    }
    .product-info h3 {
        font-size:17px
    }
    .cart-layout {
        grid-template-columns:minmax(0,1fr) 270px;
        gap:24px
    }
    .cart-line {
        grid-template-columns:72px minmax(0,1fr);
        gap:15px
    }
    .cart-line-actions {
        grid-column:2;
        flex-direction:row;
        justify-content:space-between;
        flex-wrap:wrap;
        align-items:center
    }
    .cart-line-actions .quantity-control {
        max-width:120px
    }
    .cart-image img {
        height:72px;
        width:72px;
        padding:10px
    }
    .cart-line-actions>strong {
        font-size:12px
    }
    .cart-line-actions .remove-button {
        padding-inline:5px
    }
    .cart-table-heading>span {
        display:none
    }
    .field-grid {
        gap:18px
    }
    .field {
        grid-column:1/-1
    }
    .detail-grid {
        gap:30px;
        grid-template-columns:1fr 1fr
    }
    .detail-visual {
        min-height:360px
    }
    .detail-visual>img {
        height:330px;
        padding:50px 25px
    }
    .detail-copy h1 {
        font-size:27px
    }
    .add-row {
        flex-wrap:wrap
    }
    .add-row .button {
        white-space:nowrap
    }
    .detail-image-note {
        flex-direction:column;
        gap:5px
    }
    .contact-grid {
        gap:30px
    }
    .contact-grid h2 {
        font-size:28px
    }
    .contact-panel {
        padding:25px
    }
    .contact-panel>h2 {
        font-size:22px
    }
    .about-intro {
        grid-template-columns:1fr 2fr;
        gap:30px
    }
    .about-intro h2 {
        font-size:30px
    }
    .values-grid {
        gap:25px
    }
    .values-grid h3 {
        font-size:19px
    }
}

@media(max-width:680px) {
    html {
        scroll-padding-top:90px
    }
    .shell {
        width:calc(100% - 40px)
    }
    .nav-row {
        height:76px;
        gap:10px
    }
    .brand {
        gap:7px
    }
    .brand-word {
        font-size:21px
    }
    .brand-word small {
        font-size:7px;
        margin-top:5px
    }
    .brand-symbol {
        width:29px;
        height:34px
    }
    .nav-actions {
        gap:10px
    }
    .nav-actions .icon-button {
        width:29px
    }
    .search-toggle {
        display:none
    }
    .cart-link {
        gap:4px
    }
    .cart-link svg {
        width:19px
    }
    .cart-count {
        font-size:10px
    }
    .menu-toggle {
        display:grid
    }
    .main-nav {
        position:absolute;
        top:76px;
        left:0;
        right:0;
        display:none;
        height:auto;
        margin:0;
        padding:12px 20px 20px;
        background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 12px 20px #1d35580a
    }
    .main-nav.is-open {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0
    }
    .main-nav>a {
        padding:14px 10px;
        height:auto;
        font-size:14px
    }
    .main-nav>a.active {
        background:var(--ice);
        border-radius:5px
    }
    .main-nav>a.active:after {
        display:none
    }
    .section {
        padding-block:62px
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:.12em
    }
    .section-heading {
        gap:20px;
        margin-bottom:28px;
        align-items:start
    }
    .section-heading h2 {
        font-size:28px;
        margin-top:13px
    }
    .section-heading>.text-link {
        font-size:11px;
        white-space:nowrap;
        gap:12px;
        align-self:end
    }
    .section-heading>p {
        font-size:11px
    }
    .mobile-break {
        display:block
    }
    .catalog-notice {
        font-size:11px;
        padding:11px 14px;
        align-items:baseline
    }
    .product-grid {
        gap:12px
    }
    .product-image {
        aspect-ratio:1
    }
    .product-category {
        font-size:8px;
        top:9px;
        left:9px;
        max-width:calc(100% - 18px);
        padding:1px 5px
    }
    .product-image img {
        padding:33px 14px 14px
    }
    .image-link {
        display:none
    }
    .product-info {
        padding:13px 12px
    }
    .product-info h3 {
        font-size:14px;
        line-height:1.5
    }
    .part-number {
        font-size:9px
    }
    .product-summary {
        font-size:10px;
        min-height:34px;
        margin-bottom:12px
    }
    .stock {
        font-size:9px;
        gap:4px
    }
    .product-price {
        font-size:13px
    }
    .product-price small {
        font-size:8px
    }
    .product-bottom {
        gap:5px;
        padding-top:14px
    }
    .add-button {
        padding:7px;
        gap:2px;
        min-width:37px;
        min-height:39px
    }
    .add-button svg {
        width:15px
    }
    .add-button span {
        font-size:11px
    }
    .applications-section .section-heading {
        flex-direction:column;
        gap:18px
    }
    .applications-section .section-heading>p {
        font-size:12px
    }
    .page-mast {
        padding:24px 0 34px
    }
    .breadcrumb {
        font-size:10px;
        gap:9px;
        margin-bottom:26px
    }
    .page-mast h1 {
        font-size:34px;
        line-height:1.4;
        margin-top:13px
    }
    .page-mast>div>p {
        font-size:12px;
        line-height:1.9
    }
    .page-mast:after {
        font-size:210px;
        bottom:-40px;
        right:-30px
    }
    .small-mast {
        padding:30px 0
    }
    .small-mast h1 {
        font-size:30px
    }
    .catalog-section {
        padding-top:30px
    }
    .catalog-layout {
        grid-template-columns:1fr;
        gap:25px
    }
    .catalog-sidebar {
        border-right:0;
        padding:0
    }
    .catalog-sidebar h2,.catalog-sidebar>.eyebrow,.sidebar-note {
        display:none
    }
    .category-links {
        flex-direction:row;
        gap:7px;
        margin:0;
        overflow-x:auto;
        padding-bottom:8px
    }
    .category-links a {
        flex-shrink:0;
        gap:9px;
        white-space:nowrap;
        font-size:11px;
        border:1px solid var(--line);
        padding:7px 11px
    }
    .category-links a.active {
        border-color:#c7d8fc
    }
    .category-links small {
        font-size:9px
    }
    .catalog-search {
        gap:8px;
        padding:6px 6px 6px 10px
    }
    .catalog-search input {
        font-size:12px;
        padding:7px 2px
    }
    .catalog-search .button {
        font-size:11px;
        padding:7px 13px;
        min-height:37px
    }
    .catalog-toolbar {
        gap:15px;
        flex-wrap:wrap;
        margin-top:15px
    }
    .catalog-toolbar label {
        font-size:10px;
        gap:6px
    }
    .catalog-toolbar select {
        font-size:10px;
        max-width:145px;
        padding:7px 20px 7px 9px
    }
    .checkbox-label {
        font-size:11px
    }
    .results-row {
        font-size:10px;
        margin:23px 0 15px;
        gap:7px
    }
    .results-row p {
        font-size:11px
    }
    .results-row .mono {
        display:none
    }
    .catalog-results .product-info {
        padding:13px 12px
    }
    .empty-state {
        padding:45px 20px;
        gap:15px
    }
    .empty-state h2 {
        font-size:23px
    }
    .empty-state p {
        font-size:12px
    }
    .empty-state .button {
        font-size:12px
    }
    .empty-state .text-link {
        font-size:11px
    }
    .pagination {
        margin-top:28px
    }
    .detail-section {
        padding-top:25px
    }
    .detail-grid {
        grid-template-columns:1fr;
        gap:30px
    }
    .detail-visual {
        min-height:0
    }
    .detail-visual>img {
        height:310px;
        padding:60px 50px
    }
    .detail-image-note {
        flex-direction:row;
        font-size:7px;
        padding:0 20px 18px;
        gap:15px
    }
    .detail-copy h1 {
        font-size:30px
    }
    .detail-summary {
        font-size:13px
    }
    .detail-price {
        font-size:28px;
        margin:23px 0
    }
    .add-row {
        flex-wrap:nowrap;
        gap:10px
    }
    .add-row>.button {
        font-size:12px;
        gap:8px;
        padding-inline:16px;
        min-height:48px
    }
    .quantity-control {
        max-width:135px
    }
    .quantity-control input {
        width:45px
    }
    .quantity-control button {
        width:35px
    }
    .detail-information {
        grid-template-columns:1fr;
        gap:25px;
        margin-top:40px;
        padding-top:30px
    }
    .detail-information h2 {
        font-size:24px
    }
    .spec-list {
        padding:10px 20px
    }
    .spec-list>div {
        font-size:11px
    }
    .related-heading {
        margin-top:55px
    }
    .related-heading h2 {
        font-size:25px
    }
    .checkout-steps {
        gap:16px;
        font-size:9px;
        margin-top:23px
    }
    .checkout-steps li {
        gap:6px
    }
    .checkout-steps li>span {
        width:20px;
        height:20px;
        font-size:8px
    }
    .cart-layout {
        grid-template-columns:1fr;
        gap:30px
    }
    .cart-table-heading {
        padding-bottom:18px
    }
    .cart-table-heading h2 {
        font-size:20px
    }
    .cart-line {
        grid-template-columns:80px minmax(0,1fr);
        gap:15px;
        padding-block:22px
    }
    .cart-image img {
        width:80px;
        height:80px
    }
    .cart-product h3 {
        font-size:16px
    }
    .cart-product .part-number {
        font-size:10px
    }
    .cart-product .stock {
        font-size:10px
    }
    .cart-line-actions {
        gap:12px
    }
    .cart-line-actions>strong {
        font-size:13px
    }
    .order-summary {
        position:static;
        padding:25px
    }
    .order-summary h2 {
        font-size:24px;
        margin-bottom:22px
    }
    .order-summary>.summary-total {
        display:flex
    }
    .order-summary>.summary-total>strong {
        font-size:24px;
        margin-top:0
    }
    .order-summary .button {
        font-size:13px
    }
    .summary-row {
        font-size:13px
    }
    .form-panel-heading h2 {
        font-size:25px
    }
    .form-panel-heading p {
        font-size:11px
    }
    .field-grid {
        grid-template-columns:1fr;
        gap:21px
    }
    .field input,.field textarea {
        font-size:16px
    }
    .field input::placeholder,.field textarea::placeholder {
        font-size:12px
    }
    .consent-label {
        font-size:11px
    }
    .receipt-section {
        padding-top:45px
    }
    .receipt-heading h1 {
        font-size:27px
    }
    .receipt-heading p {
        font-size:11px
    }
    .receipt {
        padding:22px
    }
    .receipt-top {
        align-items:start;
        flex-direction:column;
        gap:10px
    }
    .receipt-top h2 {
        font-size:18px
    }
    .receipt-contact {
        grid-template-columns:1fr;
        gap:16px
    }
    .summary-total>strong {
        font-size:18px
    }
    .receipt-actions {
        gap:10px;
        flex-direction:column
    }
    .receipt-actions .button {
        font-size:12px
    }
    .about-mast h1 {
        font-size:32px
    }
    .about-intro {
        grid-template-columns:1fr;
        gap:22px
    }
    .about-intro h2 {
        font-size:28px;
        margin-bottom:20px
    }
    .about-intro p {
        font-size:13px
    }
    .about-image img {
        height:280px
    }
    .about-image figcaption {
        font-size:7px;
        padding:12px 16px;
        flex-direction:column;
        gap:4px
    }
    .values-grid {
        grid-template-columns:1fr;
        gap:30px
    }
    .values-grid h3 {
        font-size:22px;
        margin:15px 0 12px
    }
    .values-grid p {
        font-size:13px
    }
    .soft-cta {
        padding:45px 0
    }
    .soft-cta>.shell {
        align-items:start;
        flex-direction:column;
        gap:25px
    }
    .soft-cta h2 {
        font-size:29px
    }
    .soft-cta .button {
        font-size:12px
    }
    .contact-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .contact-grid h2 {
        font-size:28px
    }
    .contact-grid>div>p {
        font-size:13px
    }
    .contact-panel>h2 {
        font-size:23px
    }
    .contact-panel {
        padding:25px
    }
    .faq-section {
        padding-top:0
    }
    .faq-section summary {
        font-size:14px;
        padding-block:20px;
        gap:20px
    }
    .faq-section details>p {
        font-size:12px;
        padding-right:20px
    }
    .prose h2 {
        font-size:22px
    }
    .prose p {
        font-size:13px
    }
    .toast {
        bottom:15px;
        left:15px;
        right:15px;
        max-width:none;
        padding:15px;
        gap:9px;
        font-size:11px;
        flex-wrap:wrap
    }
    .toast>a {
        font-size:11px;
        margin-left:auto
    }
    .toast>button {
        margin-left:0
    }
    .status-page {
        margin-block:40px
    }
    .error-code {
        font-size:65px
    }
}

@media(max-width:360px) {
    .shell {
        width:calc(100% - 32px)
    }
    .brand-word {
        font-size:18px
    }
    .brand-word small {
        font-size:6px
    }
    .brand-symbol {
        width:26px
    }
    .nav-actions {
        gap:8px
    }
    .product-grid {
        gap:9px
    }
    .product-info,.catalog-results .product-info {
        padding:11px 9px
    }
    .product-info h3 {
        font-size:13px
    }
    .product-price {
        font-size:11px
    }
    .product-summary {
        font-size:9px
    }
    .add-button {
        min-width:32px;
        padding:6px
    }
    .add-button span {
        display:none
    }
    .product-category {
        font-size:7px
    }
    .stock {
        font-size:8px
    }
    .checkout-steps {
        gap:10px;
        font-size:8px
    }
    .checkout-steps li {
        gap:4px
    }
    .section-heading h2 {
        font-size:25px
    }
    .cart-line-actions {
        gap:8px
    }
    .quantity-control {
        max-width:125px
    }
    .detail-copy h1 {
        font-size:27px
    }
    .detail-add .button {
        padding-inline:12px;
        font-size:11px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
    }
}

@media print {
    .site-header,.site-footer,.toast,.receipt-actions,.skip-link {
        display:none!important
    }
    body {
        color:#000;
        background:#fff;
        font-size:11px
    }
    .shell {
        width:100%;
        max-width:none
    }
    .receipt-section {
        padding:0
    }
    .receipt {
        border:1px solid #aaa;
        box-shadow:none
    }
    .receipt-heading {
        margin-bottom:25px
    }
    .receipt-heading h1 {
        font-size:25px
    }
    .receipt-heading p {
        font-size:11px
    }
    .receipt-contact {
        grid-template-columns:1fr 1fr
    }
    .checkout-line,.receipt-contact>div {
        break-inside:avoid
    }
    .receipt-top {
        flex-direction:row
    }
    .eyebrow,.micro-copy,p {
        color:#333!important
    }
    .success-icon {
        display:none
    }
}

h1, h2 { text-wrap: balance; }