/* ---- Line hero ---- */
.line-hero {
    padding: 3rem 0 2.5rem;
}

.back-link {
    display: inline-block;
    color: darkgrey;
    font-size: 0.8125rem;
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color 0.15s;
}

    .back-link:hover {
        color: #1497E5;
    }

.line-eyebrow {
    color: var(--line-accent, #1497E5);
}

.line-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

    .line-hero-grid.single {
        grid-template-columns: 1fr;
    }

        .line-hero-grid.single .lead {
            max-width: 620px;
        }

.line-hero h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.line-hero .lead {
    color: #c7c7c8;
    line-height: 1.75;
    max-width: 480px;
    font-size: 1rem;
    margin-bottom: 1.75rem;
}

    /* The hero lead is HTML too - see .detail-about below. */

    .line-hero .lead > :first-child {
        margin-top: 0;
    }

    .line-hero .lead > :last-child {
        margin-bottom: 0;
    }

    .line-hero .lead p {
        margin-bottom: 0.75rem;
    }

    .line-hero .lead ul, .line-hero .lead ol {
        margin-bottom: 0.75rem;
        padding-left: 1.25rem;
    }

    .line-hero .lead strong {
        color: #f8f9fa;
    }

    .line-hero .lead a {
        color: var(--line-accent, #1497E5);
    }

.line-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-line-primary {
    background-color: #1497E5;
    color: #fff;
    border: none;
    padding: 0.8rem 1.75rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 0 16px rgba(20, 151, 229, 0.35);
    transition: all 0.2s;
}

    .btn-line-primary:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(20, 151, 229, 0.45);
    }

.btn-line-ghost {
    background: transparent;
    color: #c7c7c8;
    border: 1px solid #495057;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

    .btn-line-ghost:hover {
        color: var(--line-accent, #1497E5);
        border-color: var(--line-accent, #1497E5);
    }

.feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

.feature-chip {
    padding: 0.3rem 0.75rem;
    background-color: #03131d;
    border: 1px solid #495057;
    border-radius: 100px;
    font-size: 0.75rem;
    color: #c7c7c8;
    white-space: nowrap;
}

.chip-check {
    color: var(--line-accent, #1497E5);
    font-size: 0.6875rem;
}

.line-hero-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.line-tile {
    background-color: #03131d;
    border: 1px solid #495057;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.2s;
}

    .line-tile:hover {
        border-color: var(--line-accent, #1497E5);
        transform: scale(1.02);
        color: inherit;
    }

.line-tile-image {
    height: 100px;
    background-color: #1a1d20;
    overflow: hidden;
}

    .line-tile-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.line-tile-body {
    padding: 0.625rem 0.75rem;
}

.line-tile-name {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.line-tile-price {
    font-size: 0.6875rem;
    color: var(--line-accent, #1497E5);
}

/* ---- Placeholder graphic (no photography yet) ---- */
.product-placeholder {
    width: 100%;
    height: 100%;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    background: repeating-linear-gradient(135deg, #0d1117 0px, #0d1117 10px, #131a22 10px, #131a22 20px);
    color: var(--line-accent, #1497E5);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

    .product-placeholder.small {
        font-size: 0.6875rem;
    }

    .product-placeholder.large {
        font-size: 0.9375rem;
    }

/* ---- Products grid section ---- */
.line-products {
    padding: 3rem 0 3.5rem;
}

    .line-products h2 {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 2rem;
        text-align: center;
    }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.375rem;
}

/* A section holding only a few cards would otherwise sit hard left in the
   auto-fill track grid on a wide page, so these center as a unit. The upper
   bound stops one or two cards from stretching the width of the monitor. */

.product-grid-centered {
    grid-template-columns: repeat(auto-fit, minmax(290px, 360px));
    justify-content: center;
}

/* ---- Product card (shared) ---- */
.product-card {
    background-color: #03131d;
    border: 1px solid #495057;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}

    .product-card:hover {
        border-color: #6c757d;
        transform: translateY(-4px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    }

.product-image {
    position: relative;
    height: 240px;
    background-color: #1a1d20;
    flex-shrink: 0;
    overflow: hidden;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.5rem;
    }

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #1a1d20;
    border: 1px solid rgba(20, 151, 229, 0.4);
    color: #1497E5;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.product-card-body {
    padding: 1.125rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-eyebrow {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.6875rem;
    color: #1497E5;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

.product-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.1875rem;
}

.product-tagline {
    font-size: 0.75rem;
    color: darkgrey;
    line-height: 1.5;
}

.product-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3125rem 0.625rem;
}

.product-spec-label {
    font-size: 0.5625rem;
    color: darkgrey;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-spec-value {
    font-size: 0.6875rem;
    color: #c7c7c8;
    font-weight: 500;
    margin-top: 0.0625rem;
    line-height: 1.3;
}

.product-price-row {
    margin-top: auto;
}

.product-price-label {
    font-size: 0.5625rem;
    color: darkgrey;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1497E5;
}

.product-actions {
    display: flex;
    gap: 0.4375rem;
}

.btn-add-cart {
    flex: 1;
    padding: 0.625rem 0;
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.8125rem;
    background-color: #1497E5;
    color: #fff;
    border: none;
    box-shadow: 0 0 14px rgba(20, 151, 229, 0.3);
    transition: all 0.2s;
}

    .btn-add-cart:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
    }

    .btn-add-cart.large {
        flex: none;
        padding: 0.75rem 2rem;
    }

.btn-details {
    padding: 0.625rem 0.8125rem;
    border-radius: 7px;
    font-weight: 500;
    font-size: 0.8125rem;
    background-color: #1a1d20;
    color: #c7c7c8;
    border: 1px solid #495057;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-details:hover {
        border-color: #1497E5;
        color: #1497E5;
    }

/* ---- Testimonials teaser (shared across line pages) ---- */
.testimonials-teaser {
    padding: 3rem 0 3.5rem;
}

.testimonials-teaser-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

    .testimonials-teaser-head h2 {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

.testimonials-teaser-link {
    color: #1497E5;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: opacity 0.15s;
    white-space: nowrap;
}

    .testimonials-teaser-link:hover {
        opacity: 0.7;
    }

.testimonials-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.teaser-card {
    background-color: #03131d;
    border: 1px solid #495057;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

    .teaser-card:hover {
        border-color: var(--tc);
        transform: translateY(-3px);
        color: inherit;
    }

.teaser-quote-mark {
    font-size: 2rem;
    color: var(--tc);
    opacity: 0.25;
    line-height: 1;
}

.teaser-quote {
    font-size: 0.875rem;
    color: #c7c7c8;
    line-height: 1.7;
    font-style: italic;
    flex: 1;
    margin-bottom: 0;
}

.teaser-footer {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-top: 0.75rem;
    border-top: 1px solid #495057;
}

.teaser-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--tc);
    border: 1.5px solid var(--tc);
    background-color: rgba(20, 151, 229, 0.15);
}

.teaser-org {
    font-weight: 600;
    font-size: 0.8125rem;
}

.teaser-product {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.5625rem;
    color: var(--tc);
    letter-spacing: 0.05em;
    margin-top: 0.125rem;
}

.tst-color-1 {
    --tc: #1497E5;
}

.tst-color-2 {
    --tc: #22d3ee;
}

.tst-color-3 {
    --tc: #4ade80;
}

/* ---- Detail page ---- */
.detail-page {
    padding: 2.5rem 0 3.5rem;
}

.detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: darkgrey;
    margin-bottom: 2rem;
}

    .detail-breadcrumb a {
        color: darkgrey;
        text-decoration: none;
        transition: color 0.15s;
    }

        .detail-breadcrumb a:hover {
            color: #1497E5;
        }

    .detail-breadcrumb .current {
        color: #c7c7c8;
    }

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

.detail-image-well {
    position: relative;
    height: 400px;
    background-color: #03131d;
    border: 1px solid #495057;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

    .detail-image-well img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.75rem;
    }

/* The whole well is a link to the full-size image. The nav arrows sit above
   it so paging through the gallery still works without opening the viewer. */

.detail-image-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.detail-image-nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(3, 19, 29, 0.8);
    border: 1px solid #495057;
    color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    text-decoration: none;
}

    .detail-image-nav.prev {
        left: 14px;
    }

    .detail-image-nav.next {
        right: 14px;
    }

.detail-thumbnails {
    display: flex;
    gap: 0.5rem;
}

.detail-thumb {
    width: 72px;
    height: 56px;
    border-radius: 7px;
    overflow: hidden;
    border: 2px solid #495057;
    flex-shrink: 0;
    display: block;
}

    .detail-thumb.active {
        border-color: #1497E5;
    }

    .detail-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.detail-name {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
}

.detail-tagline {
    font-size: 0.9375rem;
    color: #c7c7c8;
    margin-bottom: 1.25rem;
}

.detail-price {
    font-size: 2rem;
    font-weight: 700;
    color: #1497E5;
    margin-bottom: 1.25rem;
}

.detail-tabs {
    display: flex;
    border-bottom: 1px solid #495057;
    margin-bottom: 1.125rem;
}

.detail-tab {
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: darkgrey;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
}

    .detail-tab.active {
        color: #1497E5;
        border-bottom-color: #1497E5;
    }

.detail-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.detail-spec {
    background-color: #1a1d20;
    border: 1px solid #495057;
    border-radius: 7px;
    padding: 0.6875rem 0.875rem;
}

.detail-spec-label {
    font-size: 0.5625rem;
    color: darkgrey;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.1875rem;
}

.detail-spec-value {
    font-size: 0.75rem;
    font-weight: 500;
    color: #f8f9fa;
}

.detail-about {
    font-size: 0.875rem;
    color: #c7c7c8;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

    /* Description copy is authored as HTML in the catalog editor, so this block
   arrives carrying its own paragraphs, lists and headings instead of being one
   run of text. These rules hold that markup to the page's own type scale. */

    .detail-about > :first-child {
        margin-top: 0;
    }

    .detail-about > :last-child {
        margin-bottom: 0;
    }

    .detail-about p {
        margin-bottom: 1rem;
    }

    .detail-about h1, .detail-about h2, .detail-about h3, .detail-about h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #f8f9fa;
        margin: 1.5rem 0 0.75rem;
    }

    .detail-about ul, .detail-about ol {
        margin-bottom: 1rem;
        padding-left: 1.25rem;
    }

    .detail-about li {
        margin-bottom: 0.35rem;
    }

    .detail-about strong {
        color: #f8f9fa;
    }

    .detail-about a {
        color: var(--line-accent, #1497E5);
    }

    .detail-about img {
        max-width: 100%;
        height: auto;
    }

/* ---- Customize tab ----
   Choices wear the spec-grid card treatment, so the tab reads as the spec
   sheet with alternatives rather than as a separate form. */

.customize-group {
    margin: 0 0 1.125rem;
    padding: 0;
    border: 0;
}

    .customize-group legend {
        margin-bottom: 0.375rem;
    }

.customize-choice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
    padding: 0.6875rem 0.875rem;
    background-color: #1a1d20;
    border: 1px solid #495057;
    border-radius: 7px;
    font-size: 0.8125rem;
    color: #f8f9fa;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .customize-choice:hover {
        border-color: #6c757d;
    }

    .customize-choice:has(input:checked) {
        border-color: var(--line-accent, #1497E5);
    }

    .customize-choice input {
        flex: none;
        margin: 0;
        accent-color: var(--line-accent, #1497E5);
    }

.customize-choice-name {
    flex: 1;
}

.customize-choice-price {
    color: darkgrey;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.customize-choice:has(input:checked) .customize-choice-price {
    color: var(--line-accent, #1497E5);
}

.customize-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid #495057;
    font-size: 0.875rem;
    color: #c7c7c8;
}

    .customize-total output {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1497E5;
        font-variant-numeric: tabular-nums;
    }

.detail-purchase-row {
    margin-bottom: 1rem;
}

/* ---- Step up ----
   The suggestion toward the next model up. Dashed rather than solid so it
   reads as an aside to the quote button, not a second call to action. */

.step-up {
    margin-bottom: 1rem;
    padding: 0.625rem 1rem;
    border: 1px dashed #495057;
    border-radius: 7px;
}

.step-up-label {
    font-size: 0.5625rem;
    color: darkgrey;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.125rem;
}

.step-up-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.4375rem 0;
    font-size: 0.875rem;
    color: #f8f9fa;
    text-decoration: none;
}

    .step-up-link + .step-up-link {
        border-top: 1px solid #343a40;
    }

    .step-up-link:hover .step-up-name {
        color: var(--line-accent, #1497E5);
    }

.step-up-name {
    font-weight: 600;
    transition: color 0.15s;
}

.step-up-price {
    font-size: 0.8125rem;
    color: var(--line-accent, #1497E5);
    white-space: nowrap;
}

.trust-row {
    display: flex;
    gap: 1.125rem;
    padding: 1rem 0;
    border-top: 1px solid #495057;
    flex-wrap: wrap;
    font-size: 0.6875rem;
    color: darkgrey;
}

.related-products {
    margin-top: 4.5rem;
}

    .related-products h2 {
        font-size: 1.625rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        text-align: center;
    }

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .line-hero-grid, .detail-grid {
        grid-template-columns: 1fr;
    }

    .line-hero-tiles {
        margin-top: 1.5rem;
    }

    .testimonials-teaser-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Quote-driven additions.
   The cart button this line replaced is gone; btn-quote takes over its slot in
   the card and detail layouts, so it reuses those metrics deliberately.
   --------------------------------------------------------------------------- */

.btn-quote {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid var(--line-accent, #1497E5);
    border-radius: 7px;
    background: var(--line-accent, #1497E5);
    color: #05070a;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    transition: filter .15s ease, box-shadow .15s ease;
}

    .btn-quote:hover {
        filter: brightness(1.08);
        box-shadow: 0 0 16px color-mix(in oklab, var(--line-accent, #1497E5) 40%, transparent);
        color: #05070a;
    }

    .btn-quote.large {
        width: 100%;
        padding: 13px 20px;
        font-size: 15px;
    }

/* A reference configuration has no price to show, so the slot carries a shorter
   descriptive label and must not inherit the price type scale. */
.product-price.quote-only,
.detail-price.quote-only {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--line-accent, #1497E5);
}

.detail-price-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #8b8f96;
}

.detail-highlights {
    margin: 18px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.9;
    color: #b6bac1;
}

.line-section-note {
    margin: -8px auto 26px;
    max-width: 70ch;
    font-size: 14px;
    line-height: 1.75;
    color: #b6bac1;
    text-align: center;
}

.line-subsection {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #2a2f38;
}

    .line-subsection h3 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
        text-align: center;
    }

.line-footnote {
    margin-top: 28px;
    max-width: 76ch;
    font-size: 12.5px;
    line-height: 1.75;
    color: #8b8f96;
    margin-inline: auto;
    text-align: center;
}

    .line-footnote a {
        color: var(--line-accent, #1497E5);
        text-decoration: none;
    }

        .line-footnote a:hover {
            text-decoration: underline;
        }

/* ---- Full-size image viewer ---- */

.lightbox-image {
    max-width: 100%;
    max-height: calc(100vh - 12rem);
    width: auto;
    height: auto;
}

.lightbox-body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #03131d;
}