:root {
    --page-width: 1180px;
    --page-gutter: 20px;
    --text: #1f2933;
    --muted: #66717f;
    --border: #d8dee5;
    --soft: #f6f8fa;
    --primary: #0b5cab;
    --primary-dark: #08457f;
    --white: #ffffff;
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
    color: var(--text);
    background: var(--white);
}

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

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

.site-header-inner,
.site-main,
.site-footer-inner {
    width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
    margin-inline: auto;
}

.site-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.18rem;
    white-space: nowrap;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 24px;
}

.main-navigation a {
    text-decoration: none;
    color: var(--text);
}

.main-navigation a:hover,
.main-navigation a[aria-current="page"] {
    color: var(--primary);
}

.cart-link {
    font-weight: 700;
}

.nav-toggle {
    display: none;
}

.site-main {
    padding-block: 44px 72px;
}

.narrow-content {
    max-width: 820px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

h1,
h2,
h3 {
    line-height: 1.2;
}

h1 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

h2 {
    margin-top: 0;
}

.intro-section {
    max-width: 850px;
    margin-bottom: 48px;
}

.intro-copy {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.08rem;
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 14px;
}

.dense-product-list {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.product-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.product-row:last-child {
    border-bottom: 0;
}

.product-thumbnail img {
    width: 76px;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--soft);
}

.product-row-content h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}

.product-row-content p {
    margin: 0;
    color: var(--muted);
}

.product-row-purchase {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}

.button {
    appearance: none;
    border: 1px solid var(--primary);
    border-radius: 5px;
    background: var(--primary);
    color: var(--white);
    padding: 9px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.button-large {
    padding: 12px 18px;
}

.content-section {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    max-width: 850px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.product-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.product-card-image {
    display: block;
    background: var(--soft);
}

.product-card-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 24px;
}

.product-card-body {
    padding: 20px;
}

.product-card h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
}

.product-card p {
    color: var(--muted);
}

.product-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    font-size: 0.92rem;
    color: var(--muted);
}

.product-page {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.product-page-image {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--soft);
    padding: 28px;
}

.product-page-content {
    max-width: 680px;
}

.page-price {
    margin: 12px 0 22px;
    font-size: 1.6rem;
    font-weight: 700;
}

.contact-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.contact-form label {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font: inherit;
}

.form-status,
.small-note {
    color: var(--muted);
    font-size: 0.9rem;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 36px;
    align-items: start;
    margin-top: 26px;
}

.cart-items {
    border-top: 1px solid var(--border);
}

.cart-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.cart-item-name {
    font-weight: 700;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
}

.cart-summary {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    background: var(--soft);
}

.cart-summary .button {
    width: 100%;
    margin-top: 18px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.text-button {
    border: 0;
    background: transparent;
    color: var(--primary);
    padding: 12px 0 0;
    cursor: pointer;
    text-decoration: underline;
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--soft);
}

.site-footer-inner {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--muted);
    font-size: 0.92rem;
}

.footer-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

@media (max-width: 760px) {
    .site-header-inner {
        min-height: 64px;
        flex-wrap: wrap;
        padding-block: 12px;
    }

    .nav-toggle {
        display: inline-block;
        border: 1px solid var(--border);
        background: var(--white);
        border-radius: 5px;
        padding: 8px 11px;
        cursor: pointer;
    }

    .main-navigation {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 8px;
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation a {
        padding: 10px 0;
        border-top: 1px solid var(--border);
    }

    .product-row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .product-thumbnail img {
        width: 64px;
    }

    .product-row-purchase {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .product-page,
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 1fr;
    }

    .site-footer-inner {
        padding-block: 24px;
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Product option selectors */
.variant-field {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    font-size: 0.9rem;
    font-weight: 700;
}

.variant-field select {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--white);
    color: var(--text);
    font: inherit;
}

.product-page-variant {
    max-width: 440px;
    margin-bottom: 18px;
}

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

.button-link {
    display: inline-block;
    text-decoration: none;
}

.product-card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.product-card:hover {
    border-color: #a9b6c3;
}

@media (min-width: 980px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


.product-gallery { min-width: 0; }
.product-page-image {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:420px;
}
.product-page-image img {
    width:100%;
    max-height:520px;
    object-fit:contain;
}
.product-thumbnails {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
    margin-top:12px;
}
.product-thumbnail-button {
    aspect-ratio:1;
    padding:5px;
    border:1px solid var(--border);
    border-radius:5px;
    background:var(--white);
    cursor:pointer;
    overflow:hidden;
}
.product-thumbnail-button:hover,
.product-thumbnail-button.is-active { border-color:var(--primary); }
.product-thumbnail-button img {
    width:100%;
    height:100%;
    object-fit:contain;
}
@media (max-width:760px) {
    .product-page-image { min-height:300px; }
    .product-thumbnails { grid-template-columns:repeat(4,minmax(0,1fr)); }
}


/* V4 product information */
.product-information-section { max-width: 100%; }
.specification-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:24px; }
.specification-grid > div { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:14px 16px; border-bottom:1px solid var(--border); }
.specification-grid > div:nth-child(odd) { border-right:1px solid var(--border); }
.specification-grid > div:nth-last-child(-n+2) { border-bottom:0; }
.specification-grid span { color:var(--muted); }
@media (max-width:760px) {
  .specification-grid { grid-template-columns:1fr; }
  .specification-grid > div { grid-template-columns:120px minmax(0,1fr); border-right:0 !important; border-bottom:1px solid var(--border) !important; }
  .specification-grid > div:last-child { border-bottom:0 !important; }
}


/* V5 */
.account-register { border:1px solid var(--border); padding:6px 10px; border-radius:5px; }
.home-hero { display:grid; grid-template-columns:180px minmax(0,1fr) 180px; align-items:center; gap:34px; margin-bottom:54px; }
.hero-copy { text-align:center; }
.hero-side-image { width:100%; height:180px; object-fit:contain; background:var(--soft); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.product-sku { font-size:.84rem; color:var(--muted); }
.datasheet-link { margin-top:18px; }
.checkout-link { display:block; text-align:center; text-decoration:none; margin-top:18px; }
.checkout-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:38px; align-items:start; }
.checkout-form { border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.form-grid label { display:grid; gap:6px; font-weight:700; }
.form-grid input,.form-grid select { width:100%; padding:10px 11px; border:1px solid var(--border); border-radius:5px; font:inherit; background:white; }
.full-width { grid-column:1/-1; }
.shipping-rates { display:grid; gap:10px; margin-top:18px; }
.shipping-rate-option { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; border:1px solid var(--border); border-radius:6px; padding:13px 14px; cursor:pointer; }
.shipping-rate-option:has(input:checked) { border-color:var(--primary); background:#f4f8fc; }
.checkout-line { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.checkout-line span { display:grid; }
.checkout-total { font-size:1.1rem; }
.notice { padding:14px 16px; border:1px solid var(--border); border-radius:6px; background:var(--soft); margin:16px 0; }
.form-error { color:#9b1c1c; }
.account-orders article { display:grid; grid-template-columns:1fr auto auto auto auto; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:30px; }
.blog-card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.blog-card > a { display:block; background:var(--soft); }
.blog-card img { width:100%; aspect-ratio:16/10; object-fit:contain; padding:18px; }
.blog-card > div { padding:18px; }
.blog-card h2 { font-size:1.2rem; }
.blog-article { max-width:960px; }
.article-header { max-width:780px; }
.article-lead { font-size:1.15rem; color:var(--muted); }
.article-date { font-size:.9rem; color:var(--muted); }
.article-hero { width:100%; max-height:520px; object-fit:contain; background:var(--soft); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin:26px 0 36px; }
.article-body { max-width:780px; }
.article-body h2 { margin-top:38px; }
.article-image-row { display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:center; margin:30px 0; padding:20px; background:var(--soft); border-radius:var(--radius); }
.article-image-row img { width:100%; max-height:220px; object-fit:contain; }
.about-hero,.about-section { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:48px; align-items:center; margin-bottom:58px; }
.about-hero img,.about-section img { width:100%; max-height:330px; object-fit:contain; border:1px solid var(--border); border-radius:var(--radius); background:var(--soft); padding:20px; }
.about-section.reverse { grid-template-columns:360px minmax(0,1fr); }
.about-section.reverse div { order:2; }.about-section.reverse img { order:1; }
@media(max-width:900px){.home-hero{grid-template-columns:120px 1fr 120px}.blog-grid{grid-template-columns:1fr 1fr}.checkout-grid{grid-template-columns:1fr}.about-hero,.about-section,.about-section.reverse{grid-template-columns:1fr}.about-section.reverse div,.about-section.reverse img{order:initial}}
@media(max-width:760px){.home-hero{grid-template-columns:1fr}.hero-side-image{display:none}.form-grid{grid-template-columns:1fr}.full-width{grid-column:auto}.blog-grid{grid-template-columns:1fr}.article-image-row{grid-template-columns:1fr}.account-orders article{grid-template-columns:1fr 1fr}.main-navigation{gap:0}}


/* V6 checkout flow */
.checkout-main-column { display: grid; gap: 24px; }
.checkout-step { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; background: var(--white); }
.checkout-step-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.checkout-step-heading h2 { margin: 0 0 4px; }
.checkout-step-heading p { margin: 0; color: var(--muted); }
.step-number { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; }
.checkout-details-step.is-locked { opacity: 0.55; background: var(--soft); }
.checkout-details-step fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.compact-shipping-grid { grid-template-columns: 140px minmax(180px, 1fr) 140px; }
.packing-status { margin: 8px 0 0; color: var(--muted); font-size: .88rem; }
#checkout-shipping-prompt { color: var(--muted); font-weight: 400; }
.selected-service-line { font-size: .9rem; }
.checkout-line a { color: inherit; text-decoration: underline; text-decoration-color: #c4ccd4; text-underline-offset: 2px; }
.checkout-line small { display: block; color: var(--muted); margin-top: 2px; }
@media (max-width: 760px) {
    .compact-shipping-grid { grid-template-columns: 1fr; }
    .checkout-step { padding: 18px; }
}


/* V7 account, discount and payment additions */
.optional{font-weight:400;color:var(--muted);font-size:.85em}.account-card{border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:26px 0;background:var(--white)}.account-card h2{margin-top:0}.success-notice{border-color:#b9d9c4;background:#f3fbf5}.create-account-box{margin-top:22px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--soft)}.checkbox-label{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:10px}.checkbox-label input{width:auto;margin-top:4px}.discount-code-box{padding:18px 0;border-top:1px solid var(--border)}.discount-code-box>label{display:block;font-weight:700;margin-bottom:7px}.discount-code-row{display:flex;gap:8px}.discount-code-row input{min-width:0;flex:1;padding:9px 10px;border:1px solid var(--border);border-radius:5px;font:inherit;text-transform:uppercase}.button-small{padding:8px 12px}.checkout-payment-step{margin-top:24px}.payment-options{display:grid;gap:12px}.payment-option{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--white)}.payment-option input{margin-top:4px}.payment-option span{display:grid;gap:3px}.payment-option small{color:var(--muted)}.payment-option.is-disabled{opacity:.55;cursor:not-allowed;background:var(--soft)}.bank-transfer-details{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--soft)}.account-orders article{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
@media(max-width:760px){.discount-code-row{flex-direction:column}.account-orders article{grid-template-columns:1fr 1fr}.account-card{padding:18px}}


/* V8 order completion, coupon and receipt */
.discount-code-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:stretch;
}
.discount-code-row input{
    width:100%;
    min-width:0;
    position:relative;
    z-index:2;
    pointer-events:auto;
    background:var(--white);
}
.discount-code-row .button{white-space:nowrap}
#place-order-status{margin-top:10px}
.secondary-button{background:var(--white);color:var(--primary)}
.confirmation-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.confirmation-header{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.confirmation-header span{display:block;color:var(--muted);font-size:.85rem;margin-bottom:4px}
.confirmation-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.receipt-line,.receipt-totals>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--border)}
.receipt-line span{max-width:75%}.receipt-line small{color:var(--muted)}
.receipt-totals{max-width:460px;margin-left:auto;margin-top:22px}
.receipt-totals .grand-total{font-size:1.15rem;border-top:2px solid var(--text);border-bottom:0;margin-top:6px;padding-top:14px}
.bank-confirmation{border-width:2px}
@media(max-width:760px){
    .discount-code-row{grid-template-columns:1fr}
    .confirmation-header{grid-template-columns:1fr 1fr}
    .confirmation-columns{grid-template-columns:1fr}
}
@media print{
    .site-header,.site-footer,.confirmation-actions{display:none!important}
    .site-main{width:100%;max-width:none;padding:0}
    .account-card{break-inside:avoid}
}


/* V9 administration */
.admin-page{max-width:1280px}
.admin-title-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}
.admin-title-row h1{margin-bottom:0}
.admin-filters{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:12px;align-items:end;margin:20px 0 26px}
.admin-filters label{display:grid;gap:6px}
.admin-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.admin-table{width:100%;border-collapse:collapse;min-width:980px}
.admin-table th,.admin-table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.admin-table th{background:#f6f8fa;font-size:.85rem}
.admin-table td small{display:block;color:var(--muted);margin-top:3px}
.status-pill{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;font-size:.82rem;white-space:nowrap}
.status-good{background:#eef8ef}
.status-warn{background:#fff8e6}
.status-bad{background:#fff0f0}
.admin-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-actions form{margin:0}
.small-note{font-size:.9rem;color:var(--muted)}
@media(max-width:900px){
    .admin-filters{grid-template-columns:1fr 1fr}
    .admin-summary-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
    .admin-title-row{display:block}
    .admin-title-row .button{margin-top:12px}
    .admin-filters{grid-template-columns:1fr}
}


/* V10 quantity, admin recovery and email diagnostics */
.product-purchase-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:18px}
.product-quantity-field{display:grid;gap:6px;min-width:95px}
.product-quantity-field span{font-weight:600;font-size:.9rem}
.product-quantity-input{width:95px}
.admin-audit-box{padding:10px 12px;background:#f6f8fa;border:1px solid var(--border);border-radius:8px}
.compact-table{min-width:760px}
.smtp-test-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.smtp-test-form label{display:grid;gap:6px;min-width:280px;flex:1}
.admin-heading-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){.product-purchase-row{align-items:stretch}.product-quantity-field,.product-quantity-input{width:100%}}