/*productpage4*/

:root {
    --font-sans: system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    --color-text: #111;
    --color-muted: #7a7a7a;
    --color-border: #e2e2e2;
    --color-soft: #f7f7f7;
    --color-accent: #111;
    --color-accent-soft: #1976d2;
    --color-accent-soft-bg: #e8f2ff;
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-4xl: 48px;
    --color-border: #9e9191;
    --container: 1520px;
}

:root {
    --attachments-columns: 1;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
/* ===== HERO GRID ===== */
.hero-grid {
    max-width: var(--container);
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: flex-start;
}

@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: clamp(14px, 2.4vw, 20px);
        display: block;
    }
}




/* ===== GALLERY ===== */
.hero-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}











    





/* ===== HERO RIGHT ===== */

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.product-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
}

@media(max-width:900px) {
    .product-title {
        font-size: 24px;
    }
}

.status-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.status-instock {
    background: #e9f8f1;
    color: #2c7a62;
}

.status-badge-dot {
    font-size: 10px;
}

.product-meta {
    font-size: 14px;
    color: var(--color-muted);
    margin-top: 4px;
}





.hero-keyfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.hero-keyfact {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ececec;
    border: 1px solid #ececec;
    font-size: 12px;
    color: #5f5f5f;
}

.more-info {
    font-size: 14px;
    color: #5a5a5a;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease,transform .15s ease;
}

    .more-info span.chevron {
        font-size: 12px;
        margin-top: 1px;
    }

    .more-info:hover {
        color: #111;
        transform: translateX(2px);
    }

/* ===== PRICE + LEASE ===== */


.price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px;
}

.price-old {
    font-size: 20px;
    color: #c24141;
    text-decoration: line-through;
}

.price-current {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -.3px;
}

.price-vat, .lease-inline {
    font-size: 14px;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.lease-inline {
    cursor: pointer;
}

    .lease-inline:hover {
        color: #111;
    }

.info-icon {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #c5c5c5;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.tooltip {
    position: absolute;
    left: 50%;
    top: 110%;
    transform: translateX(-50%) translateY(4px);
    background: #111;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease,transform .15s ease;
    z-index: 10;
}

.info-icon:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lease-wrapper {
    position: relative;
    margin-top: var(--space-s);
}

.lease-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    padding: var(--space-m);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    display: none;
    z-index: 20;
    max-height: 70vh;
    overflow-y: auto;
    max-width: 594px;
}

.lease-panel-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 var(--space-s);
}

.lease-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-m);
}

.lease-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

    .lease-field label {
        color: var(--color-muted);
    }

    .lease-field input {
        height: 34px;
        border-radius: 6px;
        border: 1px solid var(--color-border);
        padding: 0 8px;
        font-family: var(--font-sans);
        font-size: 14px;
    }

.lease-summary {
    margin-top: var(--space-m);
    font-size: 14px;
}

    .lease-summary span {
        display: block;
        margin-bottom: 4px;
    }

.lease-actions {
    margin-top: var(--space-m);
    display: flex;
    justify-content: space-between;
    gap: var(--space-m);
    align-items: center;
}

.lease-buttons {
    display: flex;
    gap: var(--space-s);
}

.lease-button {
    height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: #f9f9f9;
    font-size: 13px;
    cursor: pointer;
}

    .lease-button.primary {
        border-color: #111;
        background: #111;
        color: #fff;
    }

.lease-close {
    font-size: 13px;
    color: var(--color-muted);
    cursor: pointer;
}

.lease-contact {
    margin-top: var(--space-m);
    border-top: 1px solid #f0f0f0;
    padding-top: var(--space-m);
    font-size: 13px;
}

.lease-contact-buttons {
    margin-top: var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

    .lease-contact-buttons button {
        height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        background: #fff;
        font-size: 13px;
        cursor: pointer;
    }

/* ===== OFFER + BUY NOW ===== */


.offer-row {
    display: flex;
    gap: var(--space-s);
    align-items: stretch;
}



.offer-input span {
    color: var(--color-muted);
    font-size: 15px;
}



.offer-btn {
    height: 48px;
    padding: 0 var(--space-xl);
    border-radius: 8px;
    border: none;
    background: var(--color-accent-soft);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease,transform .1s ease;
}

    .offer-btn:hover {
        background: #1458a0;
        transform: translateY(-1px);
    }

.instant-reply-row {
    margin-top: var(--space-xs);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-muted);
}

.buy-now-btn {
    width: 100%;
    height: 52px;
/*    margin: var(--space-xl) 0 var(--space-s);*/
    border-radius: 8px;
    border: none;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: background .15s ease,transform .1s ease;
}

    .buy-now-btn:hover {
        background: #000;
        transform: translateY(-1px);
    }

/* ===== TRANSPORT ===== */
.transport-wrapper {
    position: relative;
    /*    margin-bottom: var(--space-l);*/
}

.transport-link {
    font-size: 13px;
    color: var(--color-muted);
    cursor: pointer;
    text-decoration: none;
}

    .transport-link:hover {
        color: var(--color-text);
        text-decoration: underline;
    }

.transport-panel {
    position: absolute;
    left: 0;
    top: 135%;
    width: 100%;
    max-width: 420px;
    padding: var(--space-m);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    display: none;
    z-index: 15;
    font-size: 14px;
}

    .transport-panel h4 {
        margin: 0 0 var(--space-s);
        font-size: 15px;
    }

    .transport-panel label {
        display: block;
        margin-bottom: 4px;
        color: var(--color-muted);
    }

    .transport-panel select {
        width: 100%;
        height: 36px;
        border-radius: 6px;
        border: 1px solid var(--color-border);
        padding: 0 8px;
        font-family: var(--font-sans);
        font-size: 14px;
        margin-bottom: var(--space-m);
    }

.transport-result {
    font-weight: 500;
}

/* ===== CONTACT ICONS ===== */

.contact-item {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    color: var(--color-muted);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.contact-icon {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    /*    border: 1.2px solid #cfcfcf;*/
    margin-bottom: var(--space-xs);
    background: #fff;
}

.contact-item:hover .contact-icon {
    background: #f3f3f3;
}

.phone-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    color: var(--color-text);
    display: none;
    z-index: 40;
    width: max-content;
    max-width: 240px;
}

    .phone-popover strong {
        display: block;
        margin-bottom: 4px;
    }

/* ===== RECENTLY VIEWED ===== */
.recent-right {
    margin-top: var(--space-l);
}

.recent-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: var(--space-s);
}

.recent-strip {
    display: flex;
    gap: var(--space-m);
}

.recent-card {
    width: 140px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 12px;
}

.recent-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 10px;
    background: #e6e6e6;
}

/* ===== PAGE WRAP ===== */
.spec-page-wrap {
    max-width: 1200px;
    margin: var(--space-xl) auto 0;
}

/* ===== SPEC SECTIONS ===== */
.spec-block {
    padding: var(--space-xl) 0;
    border-top: 1px solid #f0f0f0;
}

    .spec-block:first-of-type {
        border-top: none;
    }

    .spec-block h3 {
        font-size: 18px;
        margin: 0 0 var(--space-m);
    }

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px 24px;
    font-size: 14px;
}

@media(max-width:800px) {
    .spec-grid {
        grid-template-columns: 1fr;
    }
}

.spec-item-label {
    color: var(--color-muted);
    margin-bottom: 2px;
}

.spec-item-value {
    color: var(--color-text);
    font-size: 15px;
}

/* Features as clean chips (fixes “weird horizontal text”) */
.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    margin-top: var(--space-m);
}

.feature-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #e6e6e6;
    background: #fff;
    color: #222;
}

    .feature-pill:hover {
        border-color: #d7d7d7;
    }

/* ===== Dimensions & Cabin Illustrations (SVG cards) ===== */










/* ===== DOCUMENTS (View 🔒 not distant) ===== */
.doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    gap: 12px;
}

.doc-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.doc-checkbox {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #cfe4d8;
    background: #e9f8f1;
    flex: 0 0 auto;
}



.doc-action {
    flex: 0 0 auto;
    font-size: 13px;
    color: #555;
    border: 1px solid #e6e6e6;
    background: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .doc-action:hover {
        border-color: #d7d7d7;
        color: #111;
    }



/* ===== DESCRIPTION + VIDEO ===== */
.description-section h2 {
    font-size: 20px;
    margin-bottom: var(--space-m);
}

.description-body {
    font-size: 14px;
    color: var(--color-muted);
    max-width: 780px;
}

.video-preview {
    margin-top: var(--space-m);
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16/9;
    border-radius: 14px;
    background: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    position: relative;
}



/* ===== QUESTIONS ===== */
.questions-section {
    padding: var(--space-xl) 0;
    border-top: 1px solid #f0f0f0;
}

    .questions-section h3 {
        font-size: 18px;
        margin-bottom: var(--space-m);
    }

.question-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.question-chip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
}

    .question-chip:hover {
        border-color: #c0c0c0;
    }

/* ===== CARDS ===== */
.cards-section {
    padding: clamp(18px, 4vw, 32px) 0;
    border-top: 1px solid #f0f0f0;
}

.related-wrap {
    /* border: 1px solid #f0f0f0;
    background: #fff; */
    border-radius: 14px;
    padding: 14px 14px 10px;
    padding: var(--space-xl) 0;
    
}
.cards-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: var(--space-m);
    flex-direction: column;
}

    .cards-header a {
        font-size: 13px;
        color: var(--color-muted);
        text-decoration: none;
    }

    .cards-header h3 {
        font-size: var(--h3);
        margin: 0;
    }

.pill-tabs-wraper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 11px;
}

.cards-sub {
    font-size: 13px;
    color: var(--color-muted);
}

.pill-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
/*    border: 1px solid #ececec;*/
/*    background: #fff;*/
}

@media (max-width: 768px) {
    .cards-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.pill-tab {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    color: var(--color-muted);
    user-select: none;
    display: flex;
    align-items: center;
    border: 1px solid #f0f0f0;
}

    .pill-tab.active {
        background: var(--color-accent-bg);
        color: #111;
        display: flex;
        align-items: center;
    }

.cards-strip {
    display: flex;
    gap: var(--space-m);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.small-card {
    min-width: 210px;
    max-width: 230px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    padding: 10px;
    font-size: 13px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.02);
    position: relative; /* ← THIS IS THE KEY FIX */
    overflow: hidden;
     display: flex;
    flex-direction: column;
}

.small-card-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    background: #e5e5e5;
    margin-bottom: 8px;
    border: 1px solid #efefef;
}

.small-card-title {
    font-weight: 650;
    letter-spacing: -0.1px;
}

.small-card-price {
    margin-top: auto;
}

.small-card-meta {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 2px;
        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}



/* related items segmented (so only 1 strip shows) */
.related-note {
    font-size: 13px;
    color: var(--color-muted);
    margin-top: 2px;
}

.hidden {
    display: none !important;
}

/* ===== Related items (keeps it from feeling cluttered) ===== */
.related-tab {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #e6e6e6;
    background: #fff;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}

    .related-tab.active {
        border-color: transparent;
        background: var(--color-accent-soft-bg);
        color: #111;
    }





    

    

    

    

/* ===== TESTIMONIALS ===== */

.brand-video-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
    margin-top: 20px;
}

@media(max-width:900px) {
    .brand-video-grid {
        grid-template-columns: 1fr;
    }
}

.brand-video-card {
    border: 1px solid #ededed;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}

    .brand-video-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.05);
    }

.brand-video-thumb {
    position: relative;
    aspect-ratio: 16/10;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    color: #fff;
}

    .brand-video-thumb.one {
        background: linear-gradient(135deg,#274c77 0%,#5fa8d3 100%);
    }

    .brand-video-thumb.two {
        background: linear-gradient(135deg,#6c4f3d 0%,#c08f5a 100%);
    }

    .brand-video-thumb.three {
        background: linear-gradient(135deg,#29524a 0%,#5fb49c 100%);
    }

.brand-video-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    font-size: 12px;
}

.brand-video-play {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.brand-video-body {
    padding: 14px 14px 16px;
}

.brand-video-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}

.brand-video-meta {
    font-size: 12px;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.brand-video-text {
    font-size: 13px;
    color: #464646;
    line-height: 1.45;
}

/* ===== TRUST / SERVICES ===== */
.trust-section {
    padding: var(--space-xl) 0;
    border-top: 1px solid #f0f0f0;
}

.trust-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
    font-size: 14px;
}

.trust-list {
    margin: 0;
    padding-left: 18px;
}

.trust-highlight {
    font-weight: 500;
    margin-bottom: var(--space-s);
}

@media(max-width:900px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
}

.services-visual {
    margin-top: var(--space-l);
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--space-m);
}

.service-photo {
    aspect-ratio: 4/3;
    border-radius: 12px;
    background: #e1e1e1;
}

@media(max-width:800px) {
    .services-visual {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* ===== COMPANY INFO ===== */
.company-info {
    max-width: 1500px;
    margin: var(--space-xl) auto 0;
    border-top: 1px solid #f0f0f0;
    padding-top: var(--space-xl);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-xl);
    font-size: 14px;
}

.map-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    background: #e6e6e6;
}

.opening-hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-s);
}

    .opening-hours-table td {
        padding: 3px 0;
    }

@media(max-width:900px) {
    .company-info {
        grid-template-columns: 1fr;
    }
}

/* ===== MODALS ===== */

.form-row {
    display: flex;
    gap: var(--space-m);
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.form-label {
    color: var(--color-muted);
}

.form-input, .form-select, .form-textarea {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    font-family: var(--font-sans);
    font-size: 14px;
}

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

.input-error {
    color: #c24141;
    font-size: 12px;
    margin-top: 2px;
    display: none;
}

.modal-footer {
    margin-top: var(--space-m);
    display: flex;
    justify-content: flex-end;
}

.modal-submit {
    padding: 10px 22px;
    border-radius: 999px;
    border: none;
    background: var(--color-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

@media(max-width:700px) {
    .form-row {
        flex-direction: column;
    }
}

/* ===== ACCESS MODAL ===== */


.access-options {
    margin-top: var(--space-m);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-s);
}

.btn-secondary,
.square-btn-primary {
    padding: 9px 16px;
    /*    border-radius: 999px;*/
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--color-border);
    /*    background: #fff;*/
}


    .btn-secondary:hover {
        color: #fff;
        background-color: #5c636a;
        border-color: #565e64
    }



.square-btn-primary {
    border-color: #111;
    background: #111;
    color: #fff;
}

    .square-btn-primary:hover {
        border-color: #111;
        background: #111;
        color: #fff;
    }

.my-btn-secondary,
.my-btn-primary {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: #fff;
}

.my-btn-primary {
    border-color: #111;
    background: #111;
    color: #fff;
}

/* ===== SECTION RAIL (RIGHT) — replaces “missing sections menu” ===== */






    

    

/* ===== STICKY BOTTOM CTA BAR ===== */
 .sticky-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.97);
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
    z-index: 44;

    /* NEW: animate instead of display:none/block */
    display: block;
    transform: translateY(100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.sticky-cta-bar.show {
    transform: translateY(0);
    pointer-events: auto;
}

.sticky-cta-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: 10px var(--space-xl);
}

.sticky-thumb {
    width: 72px;
    height: 48px;
    border-radius: 10px;
    background: #dedede;
    flex-shrink: 0;
}
 
.sticky-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sticky-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-meta {
    font-size: 12px;
    color: var(--color-muted);
}

.sticky-price {
    font-size: 16px;
    font-weight: 600;
}

.sticky-actions {
/*    display: flex;*/
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-outline {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #d0d0d0;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.btn-solid {
    padding: 6px 16px;
    border-radius: 999px;
    border: none;
    background: #111;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}



@media(max-width:700px) {
    .sticky-cta-inner {
        padding-inline: var(--space-l);
        flex-wrap: wrap;
        gap: 12px;
    }

    
}

/* ===== LEASE OPEN STATE ===== */
.lease-open .hide-when-lease {
    display: none !important;
}


/* ===== ENRICHED WEBSITE TECHNICAL SECTIONS ===== */


.section-lead {
    max-width: 860px;
    font-size: 14px;
    color: var(--color-muted);
    margin: 0 0 18px;
}

.attachment-spec-grid {
    margin-bottom: 16px;
}

.diagram-below-grid {
    margin-top: 18px;
}

.attachment-card .diagram-below-grid {
    margin-top: auto;
}















    

.diagram-board {
    background: #fff;
    border: 1px solid #ededf0;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .diagram-board.tight {
        padding: 16px;
    }

.diagram-board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.diagram-board-title {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.diagram-board-note {
    font-size: 12px;
    color: var(--color-muted);
}



























    



    











    



    

    

    

.attachments-stack {
    display: grid;
    gap: 14px;
}

/* If the last item is odd (1st, 3rd, 5th...), make it span both columns */
.attachments-stack > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.attachment-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.attachment-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.attachment-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}







































/* REVIEW / SOURCE COVERAGE */


    

        

        

    







    

/* DOCUMENT CTA BLOCK */




    

    

























    








/* === Full field stress-test layout === */
.spec-grid > div,
.full-field-grid > div,
.attachment-spec-grid > div {
    min-width: 0;
}

.spec-item-label {
    display: block;
    line-height: 1.24;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.spec-item-value {
    display: block;
    line-height: 1.34;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.full-field-grid {
    display: grid;
    gap: 10px 18px;
    margin-top: 4px;
}

    

    .full-field-grid.cols-4 {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    



@media(max-width:980px) {
    .full-field-grid.cols-4 {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media(max-width:680px) {
    .full-field-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

.feature-list.dense {
    gap: 6px 8px;
}

    .feature-list.dense .feature-pill {
        padding: 5px 9px;
        font-size: 12px;
    }

.feature-pill.important {
    background: #eef5ff;
    border-color: #cfe0ff;
    color: #234b86;
}





.feature-pill.success {
    background: #eef9f2;
    border-color: #cde9d6;
    color: #246748;
}















    

/* ===== v5 ergonomic refinements ===== */
.spec-layout {
    max-width: 1440px;
    margin: var(--space-xl) auto 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) 220px;
    gap: 56px;
    align-items: start;
}

.spec-main {
    min-width: 0;
}

.spec-page-wrap {
    max-width: none;
    margin: 0;
}



.spec-item-label, .spec-item-value {
    overflow-wrap: anywhere;
    word-break: normal;
}

.spec-item-value {
    line-height: 1.4;
}

.feature-pill.important, .feature-pill.success {
    background: #fff;
    border-color: #e6e6e6;
    color: #222;
}





.general-flags {
    margin-top: 18px;
}





.group-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
}

.field-subgroup {
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid #efefef;
}

    .field-subgroup:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

.field-subgroup-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: #5f5f5f;
    margin: 0 0 12px;
}







.attachment-card .feature-list {
    margin-top: 14px;
    margin-bottom: 0;
}



@media(max-width:1320px) {
    .spec-layout {
        grid-template-columns: minmax(0,1fr) 200px;
        gap: 36px;
    }
}

@media(max-width:1180px) {
    .spec-layout {
        grid-template-columns: 1fr;
    }

    

    
}




/* ===== v6 structural refinement overrides ===== */
.feature-pill.success {
    background: #eef7f0;
    border-color: #d3e7d8;
    color: #285a36;
}







.spec-layout {
    max-width: 1520px;
    grid-template-columns: minmax(0,1fr) 248px;
    gap: 72px;
    align-items: start;
}

.spec-main {
    min-width: 0;
}



@media(max-width:1500px) {
    .spec-layout {
        grid-template-columns: minmax(0,1fr);
        gap: 0;
    }

    
}



    









.axle-board-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.axle-board-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.axle-board-note {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 4px;
}





    





















    

.attachment-card .feature-list {
    margin-top: 14px;
    margin-bottom: 10px;
}

.spec-item-label, .spec-item-value {
    overflow-wrap: anywhere;
    word-break: normal;
}

.spec-item-label {
    line-height: 1.28;
}

.spec-item-value {
    line-height: 1.42;
}





.doc-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 18px;
    align-items: center;
    max-width: 920px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.doc-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}



    

    

    

.doc-action.disabled {
    opacity: .6;
    cursor: default;
    background: #fafafa;
}

    .doc-action.disabled:hover {
        border-color: var(--color-border);
        color: #666;
    }

@media(max-width:760px) {
    .doc-row {
        grid-template-columns: 1fr;
    }

    
}



.vin-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.vin-action {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex: 0 0 auto;
}

    .vin-action:hover {
        border-color: #d4d4d4;
    }





.axle-board-note strong {
    font-weight: 600;
    color: #333;
}















    





    

    

    



.doc-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}



    

    

.doc-action {
    min-width: auto;
    width: 40px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

    

    

    





    

    

    





    

    

    







.service-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 146px;
    border: 1px solid #e9e9e9;
    background: #f0f0f0;
}

    .service-photo svg {
        display: block;
        width: 100%;
        height: 100%;
    }




.hero-keyfact {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #efeaea;
    border: 1px solid #d6d3d3;
    font-size: 12px;
    color: #5f5f5f;
}




    

.doc-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 12px;
    align-items: center;
    max-width: 760px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.doc-action {
    min-width: auto;
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #666;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
}

    .doc-action:hover {
        color: #111;
        border: none;
        background: transparent;
    }

    



    

    

.questions-section {
    /* padding: 32px 0; */
    border-top: 1px solid #f0f0f0;
}

    .questions-section h3 {
        font-size: 18px;
        margin-bottom: 16px;
    }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 760px;
}

.faq-item {
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

    .faq-item summary {
        list-style: none;
        cursor: pointer;
        padding: 16px 18px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::after {
            content: "+";
            font-size: 18px;
            color: #6f6f6f;
            flex: 0 0 auto;
        }

    .faq-item[open] summary::after {
        content: "–";
    }

.faq-answer {
    padding: 0 18px 16px 18px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

    .faq-answer a {
        color: #111;
        text-decoration: none;
        border-bottom: 1px solid #dcdcdc;
    }

.small-card {
    cursor: pointer;
}



/* === v13 locked refinements === */
.hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    max-width: var(--container);
    margin-top: 50px;
}



.hero-right {
/*    padding: 0px 16px 18px;*/
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.title-row {
    align-items: flex-start;
}

.product-title {
    font-size: 32px;
    line-height: 1.12;
}

.product-meta {
    margin-top: 0;
}



/* =============== OFFER + BUY NOW =============== */


.offer-row {
    display: flex;
    gap: var(--space-s);
    align-items: stretch;
    /*    flex-wrap: wrap;*/
}

.offer-input {
    flex: 1 1 240px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 0 var(--space-m);
    display: flex;
    align-items: center;
    gap: var(--space-s);
    /*    background: #fff;*/
}

    .offer-input span {
        color: var(--color-muted);
        font-size: 15px;
    }

    .offer-input input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 15px;
        font-family: var(--font-sans);
        color: var(--color-text);
        background: var(--color-body-bg);
    }

.offer-btn {
    height: 48px;
    padding: 0 var(--space-xl);
    border-radius: 8px;
    border: none;
    background: var(--color-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.15s ease;
    flex: 0 0 auto;
}

    .offer-btn:hover {
        background: #000;
        transform: translateY(-1px);
        filter: brightness(0.95);
    }

.instant-reply-row {
    margin-top: var(--space-xs);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-muted);
}




/* =============== BUY NOW =============== */

.buy-now-btn {
    width: 100%;
    height: 52px;
/*    margin: var(--space-l) 0 var(--space-s);*/
    border-radius: 12px;
    border: none;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.1s ease, filter 0.15s ease;
}





.buy-now-btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}



.contact-row {
    margin-top: 4px;
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 8px;
}

.contact-item {
    padding: 10px 6px;
    font-size: 12px;
}

.recent-right {
    margin-top: 8px;
}

.recent-title {
    font-size: 15px;
    margin-bottom: 8px;
}

.recent-strip {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.recent-card {
    width: auto;
    gap: 4px;
    padding: 0;
}

.recent-thumb {
    width: 100%;
    height: 74px;
    border-radius: 10px;
}

.hero-keyfacts {
    align-items: center;
    gap: 7px;
}

.hero-keyfact {
    padding: 5px 10px;
}



@media(max-width:1100px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    

    .recent-strip {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}




.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.product-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    /* letter-spacing: -0.3px; */
}



.product-title-wrapper {
    position: relative;
    display: inline-block;
}

.product-title {
    max-width: 440px; /* Desktop */
}


@media (max-width: 1376px) {
    .product-title {
        max-width: 338px;
    }
}


/* Tablets */
@media (max-width: 992px) {
    .product-title {
        max-width: 320px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .product-title {
        max-width: 220px;
    }
}

/* Small phones */
@media (max-width: 375px) {
    .product-title {
        max-width: 180px;
    }
}

.cTextEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 140%;
    left: 0;
    background: #1f2937;
    color: #fff;
    /*     background: #e7e7e7;
    color: #000000; */
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 420px;
    white-space: normal;
    box-shadow: 0 8px 25px rgba(0,0,0,.2);
    transform: translateY(6px);
    transition: all .2s ease;
    z-index: 999;
}

    /* Arrow */

    .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 20px;
        border-width: 6px;
        border-style: solid;
        border-color: #1f2937 transparent transparent transparent;
    }


/* Show tooltip */

.product-title-wrapper.has-ellipsis:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.product-title-wrapper.has-ellipsis:hover .tooltip-text {
    visibility: visible;
}





/* docs */






.doc-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    max-width: 760px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.doc-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}





    

    

.doc-action {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #666;
    font-size: 15px;
    padding: 0;
}

    .doc-action:hover {
        color: #111;
        background: transparent;
    }



@media(max-width:760px) {
    .doc-row {
        grid-template-columns: 1fr;
    }
}

/* package floating promo */


    





    















    

    

    





    



    

/* service module */
.service-module {
    margin-top: 22px;
    padding: 26px;
    border: 1px solid #ececec;
    border-radius: 22px;
    background: #fff;
}

.service-module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.service-module-title {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
}

.service-module-sub {
    font-size: 14px;
    color: #666;
    max-width: 640px;
    line-height: 1.5;
}

.service-tabs {
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 10px;
    margin: 16px 0 20px;
}

.service-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    color: #444;
}

    .service-tab.active {
        border-color: #d7e0ff;
        background: #f8faff;
        color: #1b4ea8;
    }

.service-tab-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.service-tab.active .service-tab-icon {
    background: #e8efff;
}

.service-gallery {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.service-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 1.25/1;
    background: #ddd;
}

    .service-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.service-card-label {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17,17,17,.72);
    color: #fff;
    font-size: 12px;
}

@media(max-width:1000px) {
    .service-tabs {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .service-gallery {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media(max-width:640px) {
    .service-tabs {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .service-gallery {
        grid-template-columns: 1fr;
    }
}

/* subtle cleanup */
.section-lead {
    max-width: 860px;
}

/* v14 final audit refinements */


    



























.doc-card {
    border: 1px solid #ececec;
    border-radius: 16px;
    background: #fff;
    padding: 16px 16px 14px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.doc-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #161616;
    line-height: 1.35;
}

.doc-card-state {
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 6px;
}

    .doc-card-state.request {
        color: #8b6c36;
    }

    

.doc-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 12px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}

    .doc-card-action:hover {
        color: #111;
        border-color: #bbb;
    }











    

    



    



.company-info {
    grid-template-columns: 1.05fr .95fr .8fr;
    gap: 22px;
    border-top: 1px solid #f0f0f0;
    padding-top: 28px;
}

.company-panel {
    border: 1px solid #ececec;
    border-radius: 18px;
    background: #fff;
    padding: 18px;
}

.company-box-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.company-lines {
    display: grid;
    gap: 7px;
    font-size: 13px;
    color: #555;
}

.map-placeholder {
    background: linear-gradient(180deg,#ededed 0%,#e1e1e1 100%);
}

@media(max-width:980px) {
    .company-info {
        grid-template-columns: 1fr;
    }
}

/* ===== COMPANY INFO — RESPONSIVE (tablet + mobile); desktop layout unchanged ===== */
/* Box-sizing + min-width:0 stop grid/flex children from forcing horizontal overflow */
.company-info,
.company-info * {
    box-sizing: border-box;
}

.company-panel {
    min-width: 0;
}

/* Location chips wrap instead of overflowing the panel */
.location-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .location-switch .location-chip {
        white-space: nowrap;
    }

/* Opening-hours table can never exceed its panel width */
.opening-hours-table {
    width: 100%;
    table-layout: fixed;
}

    .opening-hours-table td {
        word-break: break-word;
    }

/* Long contact values (IBAN / phone) wrap instead of overflowing */
.company-lines {
    min-width: 0;
}

    .company-lines > div {
        overflow-wrap: anywhere;
    }

/* Tablet */
@media (max-width: 980px) {
    .company-info {
        gap: 16px;
        padding-top: 22px;
    }

    .company-panel {
        padding: 16px;
    }

    .map-placeholder {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .company-info {
        gap: 12px;
        padding-top: 18px;
        font-size: 13px;
    }

    .company-panel {
        padding: 14px;
        border-radius: 14px;
    }

    .company-box-title {
        font-size: 15px;
    }

    .map-placeholder {
        aspect-ratio: 4 / 3;
    }

    .location-switch {
        flex-direction: column;
    }

        .location-switch .location-chip {
            width: 100%;
            text-align: center;
        }
}

.service-tab-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.service-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}







    

        

        



.company-time-meta {
    font-size: 12px;
    color: #666;
    margin: 0 0 12px;
}







.contact-row {
    gap: 18px;
}

.contact-item {
    flex: 1 1 calc(20% - 18px);
}

@media(max-width:900px) {
    .contact-item {
        flex: 1 1 calc(33.33% - 18px);
    }
}

/* v15.1 cleanup overrides */


    



.attachments-stack {
    display: grid;
     grid-template-columns: repeat(var(--attachments-columns), minmax(0, 1fr));
    gap: 14px;
}

    .attachments-stack.single-attachment {
        grid-template-columns: 1fr;
    }

@media(max-width:1242px) {
    .attachments-stack 
    {
        grid-template-columns: 1fr;
    }
}




/* === v18 scenario + final proportion refinements === */
.small-card {
    min-width: 274px;
    max-width: 296px;
    padding: 14px 14px 13px;
}

.small-card-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    background: #e5e5e5;
    display: block;
}

.small-card-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.small-card-price {
    font-size: 15px;
    margin-top: auto;
}



    

    



    

.status-badge.status-reserved {
    background: #fff3da;
    color: #8a6422;
}

.status-badge.status-sold {
    background: #f4e7e7;
    color: #9b3c3c;
}

.status-badge.status-coming {
    background: #edf3ff;
    color: #365d9b;
}

.status-badge.status-instock {
    background: #e9f8f1;
    color: #2c7a62;
}



    

    

        

        

    











    







    







    







    










    











@media print {
    html, body {
        background: #fff !important;
        color: #111 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .site-header, .faq-list, #brandInfo, #relatedItems, #testimonials, #services, #companyInfo,
    .lease-wrapper, .transport-wrapper, .contact-row, .recent-right, .sticky-meta,
    .offer-section, .buy-now-btn, .modal, .service-module, .cards-section:not(#brandInfo):not(#similarVehicles):not(#relatedItems) {
        display: none !important;
    }

    .hero-grid, .spec-layout, .spec-main, .spec-page-wrap {
        max-width: none !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-grid {
        display: block !important;
    }

    .hero-left, .hero-right {
        width: 100% !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    

    

    .spec-block, .description-section, #spec-documents {
        break-inside: avoid-page;
        page-break-inside: avoid;
        margin-top: 18px !important;
        border: none !important;
        box-shadow: none !important;
    }

    .diagram-board, .attachment-card, .doc-card {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .description-section, .video-preview {
        display: none !important;
    }

    

    
}

/* Similar products / Recently viewed carousel wrapper */
.productSlider1 {
    max-width: 100%;
}

/* Image wrapper */
.rv-img-wrapper {
    aspect-ratio: 4 / 3; /* ratio, not a fixed height: card width is fluid, so a fixed
                            height letterboxed the photo as the card grew */
    overflow: hidden;
    background: #f8f9fa;
    border-radius: 10px;
}

.rv-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Content takes remaining space */

.rv-card .card-body {
    max-height: 82px;
    /* min-height: 70px !important; */
    padding: 0.2rem 0rem 0 0rem;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    overflow: visible !important;
    background: var(--color-body-bg);
}


/* Optional: tighter text */
.rv-card .card-title {
    font-size: 0.85rem !important;
}

.rv-card .card-text {
    font-size: 0.75rem !important;
    margin-bottom: 0.25rem;
}
/* RESPONSIVE HEIGHT */
@media (max-width: 576px) {
    .rv-card {
        max-height: none; /* fixed cap caused dead space below shorter content */
        width: 100%;      /* card fills the slide, which is ~full viewport width */
    }

    /* stop double-gutter: spaceBetween (JS) is the only spacing mechanism on mobile */
    .mySwiper2 .swiper-slide.px-1 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .rv-card {
        background: transparent;
    }
}


/* === NAVIGATION (optional polish) === */
.rv-nav {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,.9);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    top: 50%;
    margin-top: -14px;
    opacity: .7;
}

    .rv-nav:hover {
        opacity: 1;
    }

    .rv-nav::after {
        font-size: 12px;
        color: #333;
    }



@media (max-width: 576px) {
    .rv-card .card-body {
        /* min-height: 60px !important; */
    }
}

@media (min-width: 577px) {
    .rv-card .card-body {
        /* min-height: 70px !important; */
         flex: 1 1 auto;
        justify-content: space-between; 
    }
}








.transport-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    /* padding-bottom: 12px;
			border-bottom: 1px solid var(--color-border); */
}

.transport-panel h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.transport-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}



    

.transport-close-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .transport-close-btn:hover {
        background: #f1f1f1;
        color: #333;
    }

/* Optional: Make panel look better */
.transport-panel {
    position: absolute;
    left: 0;
    top: 140%;
    width: 100%;
    max-width: 520px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    z-index: 30;
    font-size: 14px;
}

.value-flag-img {
    width: 28px; /* Default size on desktop */
    height: 17px; /* Maintain 4:3 or 5:4 ratio */
    object-fit: cover; /* Keeps flag proportions without distortion */
    border-radius: 2px; /* Slight round corners for modern look */
    border: 1px solid #ddd; /* Optional subtle border */
    vertical-align: middle;
    margin-left: 8px; /* Space between text and flag */
    flex-shrink: 0; /* Prevent shrinking */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .value-flag-img {
        width: 24px;
        height: 18px;
        margin-left: 6px;
    }
}

@media (max-width: 480px) {
    .value-flag-img {
        width: 22px;
        height: 16px;
    }
}


.lease-error {
    display: block;
    margin-top: 6px;
    color: #d32f2f;
    font-size: 14px;
}

.transport-field {
    margin-bottom: 10px;
    font-size: 14px;
}


/* =============== TRANSPORT =============== */
.transport-wrapper {
    position: relative;
/*    margin-bottom: var(--space-l);*/
}

.transport-link {
    font-size: 13px;
    color: var(--color-muted);
    cursor: pointer;
    text-decoration: none;
}

    .transport-link:hover {
        color: var(--color-text);
        text-decoration: underline;
    }

.transport-panel {
    position: absolute;
    left: 0;
    top: 140%;
    width: 100%;
    max-width: 520px;
    padding: var(--space-m);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 20;
    font-size: 14px;
}

    .transport-panel h4 {
        margin: 0 0 var(--space-s);
        font-size: 15px;
    }

    .transport-panel label {
        display: block;
        margin-bottom: 4px;
        color: var(--color-muted);
        font-size: 13px;
    }

    .transport-panel select {
        width: 100%;
        height: 36px;
        border-radius: 10px;
        border: 1px solid var(--color-border);
        padding: 0 10px;
        font-family: var(--font-sans);
        font-size: 14px;
        margin-bottom: var(--space-m);
    }

    .transport-panel input {
        width: 100%;
        height: 40px;
        margin-bottom: 10px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        padding: 0 12px;
        font-size: 14px;
    }

.transport-result {
    font-weight: 600;
    margin-top: 15px;
    filter: none;
    /* display: none; */
    margin-top: 12px;
    padding: 12px;
    border-radius: 10px;
    background: #f3f3f3;
    font-size: 14px;
}

.transport-unlock {
    margin-top: 15px;
}


/* Add this wrapper style */
.buy-now-buttons-wrapper {
    display: flex;
    gap: 12px;
/*    margin: var(--space-l) 0 var(--space-s);*/
}

.buy-now-btn, .add-to-cart-btn {
    width: 50%;
    height: 52px;
    border-radius: 12px;
    border: none;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 650;
    cursor: pointer;
/*    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.1s ease, filter 0.15s ease;*/
    flex: 1; /* Makes both equal width */
}

.add-to-cart-btn {
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #111;
}

.pp-qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
    font-size: 18px;
}


.pp-qty {
    display: flex;
    align-items: center;
    border: 1px solid #e2e2e2;
    border-radius: 2px;
    background: #fff;
    gap: 24px;
}

.pp-stock {
    font-size: 15px;
    color: #777;
}

.pp-qty button {
    width: 34px;
    height: 34px;
    border: none;
    background: #fff;
    cursor: pointer;
}


/* Specific modes */
.hero-right.with-buyNow-addToCart {
    gap: 17px !important;
}

.hero-right.with-Only-buyNow {
    gap: 30px !important;
}

.hero-right.with-Only-makeOffer {
    gap: 27px !important;
}

.hero-right.with-buyNow-makeOffer {
    gap: 15px !important;
}

    /* Reduce gap ONLY between first, second, and third items */
    .hero-right.with-buyNow-makeOffer > :nth-child(1),
    .hero-right.with-buyNow-makeOffer > :nth-child(2),
    .hero-right.with-buyNow-makeOffer > :nth-child(3) {
        margin-bottom: -10px !important;
    }

    /* Reduce gap ONLY between first, second, and third items */
    .hero-right.with-Only-makeOffer > :nth-child(1),
    .hero-right.with-Only-makeOffer > :nth-child(2),
    .hero-right.with-Only-makeOffer > :nth-child(3) {
        margin-bottom: -21px !important;
    }

    /* Reduce gap ONLY between first, second, and third items */
    .hero-right.with-Only-buyNow > :nth-child(1),
    .hero-right.with-Only-buyNow > :nth-child(2),
    .hero-right.with-Only-buyNow > :nth-child(3) {
        margin-bottom: -21px !important;
    }


    /* Reduce gap ONLY between first, second, and third items */
    .hero-right.with-buyNow-addToCart > :nth-child(1),
    .hero-right.with-buyNow-addToCart > :nth-child(2),
    .hero-right.with-buyNow-addToCart > :nth-child(3) {
        margin-bottom: -8px !important;
    }


    @media (min-width: 768px) {
        .contact-row {
            flex-wrap: nowrap;
        }
    }
    
    @media (max-width: 767px) {
        .contact-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
    
        .product-title {
            font-size: 24px;
        }
    
        .price-current {
            font-size: 28px;
        }
    }












.section-menu-drawer {
    position: sticky;
    top: 75px;
    align-self: flex-start;
    width: 220px;
    max-width: 60vw;
    flex-shrink: 0;
    background: rgba(255,255,255,0.97);
     border-radius: 14px; 
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16); 
/*     border: 1px solid #e3e3e3; */
    padding: 14px 12px;
    font-size: 13px;
    z-index: 10;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    /*    min-height: calc(100vh - 180px);*/
}

.section-menu-header {
    font-weight: 500;
    font-size: 12px;
    /*    text-transform: uppercase;*/
    /*    letter-spacing: 0.8px;*/
    color: var(--color-muted);
    padding: 0 4px 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}

.section-menu-links {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.section-menu-link {
    padding: 6px 8px;
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    /* overflow: hidden; */
}

    .section-menu-link::before {
        content: "";
        width: 2px;
        height: 16px;
        border-radius: 999px;
        background: transparent;
    }

    .section-menu-link:hover {
        background: #fafafa;
    }

    .section-menu-link.active::before {
        background: var(--color-accent-soft);
    }

    .section-menu-link.active {
        background: var(--color-accent-soft-bg);
        color: var(--color-text);
    }

@media (max-width: 992px) {
    .spec-page-wrap {
        flex-direction: column;
        margin-top: 0;
    }

    

    .hero-right {
        padding-bottom: 0;
    }
}
/* General scrollbar styling */
.section-menu-drawer::-webkit-scrollbar,
.section-menu-links::-webkit-scrollbar {
    width: 6px; /* Vertical thickness */
    height: 6px; /* Horizontal thickness */
}

.section-menu-drawer::-webkit-scrollbar-thumb,
.section-menu-links::-webkit-scrollbar-thumb {
    background: #ccc; /* Thumb color */
    border-radius: 999px;
}

.section-menu-drawer::-webkit-scrollbar-track,
.section-menu-links::-webkit-scrollbar-track {
    background: #f0f0f0; /* Track color */
}
/* Firefox */
.section-menu-drawer,
.section-menu-links {
    scrollbar-width: thin; /* thin | auto | none */
    scrollbar-color: #ccc #f0f0f0; /* thumb track */
}



@media (max-width: 992px) {
    #sectionMenuDrawer {
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
        /* min-height: calc(100vh - 180px); */
    }

        #sectionMenuDrawer.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            position: relative;
            box-shadow: none;
        }

    .sticky-cta-inner {
        flex-wrap: wrap;
    }
}

@media (max-width: 992px) {
    .section-menu-drawer {
        flex-direction: column; /* Overall column for header + links */
        position: fixed; /* Fixed for mobile (to position above sticky bar) */
        bottom: 80px; /* Above sticky bar (adjust based on sticky-bar height) */
        left: 0;
        right: 0;
        top: 0; /* Not sticky from top on mobile */
        width: 100%;
        max-width: 100%;
        max-height: 60px; /* Compact height */
        border-radius: unset; /* Round top only */
        padding: 7px 0px; /* Smaller padding */
        /* box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1); */ /* Shadow from bottom */
        z-index: 50; /* Above content but below modals */
        /*        bottom: 123px;*/
        min-height: 51px;
    }

    .section-menu-header {
        display: none; /* Hide header on mobile for space */
    }

    .section-menu-links {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        white-space: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

        .section-menu-links::-webkit-scrollbar {
            display: none;
        }

    .section-menu-link {
        padding: 4px 10px; /* Compact padding */
        font-size: 12px; /* Smaller text */
        border-radius: 999px; /* Pill shape for tabs */
        background: #f0f0f0; /* Light bg for tabs */
    }

        .section-menu-link.active {
            background: var(--color-accent-soft-bg); /* Highlight active */
            color: var(--color-accent-soft);
        }

        .section-menu-link::before {
            display: none; /* Remove indicator on mobile */
        }
}
/* Ensure sticky-bar z-index is below drawer if needed */
.sticky-bar {
    z-index: 34; /* Keep as is */
}

.section-menu-link:hover {
    background: #fafafa;
}
















/* ===== SPEC LAYOUT RESPONSIVE ===== */
.spec-layout {
    max-width: 1520px;
    margin: var(--space-xl) auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 48px;
    align-items: start;
    padding: 0 var(--space-xl);
}

/* Tablet */
@media (max-width: 992px) {
    .spec-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 var(--space-l);
    }

        
}

/* Mobile */
@media (max-width: 768px) {
    .spec-layout {
        padding: 0 var(--space-m);
    }

    .spec-block {
        padding: var(--space-l) 0;
    }

    .full-field-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spec-block h3 {
        font-size: 16px;
    }

    

    .section-lead {
        font-size: 13px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .spec-layout {
        padding: 0 var(--space-s);
        margin: 0;
    }

    .full-field-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .spec-item-value {
        font-size: 14px;
    }

    .feature-list {
        gap: 6px;
    }

    .feature-pill {
        font-size: 12px;
        padding: 5px 9px;
    }

    

    .attachments-stack 
    {
        grid-template-columns: 1fr;
    }
}


.visual-section-gallery {
    background: #fafafa;
}

/* Axle Layout — DO NOT REMOVE. Rendered when a product image has
   StylingClass "axles-tyres" (see ProductImageViewModel.StylingClass). */
.axles-container {
    max-width: 1200px;
    background: #fafafa;
    padding: 48px 0px 0px 0px;
    border-radius: 10px;
}

.axle-board-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 50px;
    padding: 0 10px;
}


.visual-single {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 428px;
    border-radius: 10px;
    background: #fff;
    border: 0.1px solid #e3e3e7;
}

.visual-section-gallery {
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-4xl);
    border-radius: 0;
    background: #fff;
    border: none;
    box-shadow: none;
    margin-top: 27px;
    background: #f7f8fb;
    /* padding: 16px; */
    background: #f5f5f7;
    /* border: 2px solid #e3e3e7; */
    border-radius: 10px;
    padding: 22px;
}

.visual-grid-dynamic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(274px, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(217px, 1fr)); */
    gap: var(--space-xl);
    align-items: start;
    background: #f5f5f7;
/*    border: 0.1px solid #e3e3e7;*/
    border-radius: 8px;
}



    .visual-section-gallery:has(.axles-container) {
        margin-top: var(--space-4xl);
        margin-bottom: var(--space-4xl);
        border: none;
        box-shadow: none;
        margin-top: 27px;
        background: #f7f8fb;
        /* padding: 16px; */
    }


    .visual-section-gallery:has(.axles-container) {
        margin-top: var(--space-4xl);
        margin-bottom: var(--space-4xl);
        border-radius: 0;
        border: none;
        box-shadow: none;
        margin-top: 27px;
        background: #fafafa;
        /* padding: 16px; */
        background: #f5f5f7;
        /* border: 2px solid #e3e3e7; */
        border-radius: 10px;
        padding: 22px;
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 16px;
    }

  

    @media(max-width:320px)
    {
        
    .visual-section-gallery:has(.axles-container) {

        padding: 16px;
        
    }

    }

    .visual-grid-dynamic:has(.axles-container) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(274px, 1fr));
        /* grid-template-columns: repeat(auto-fit, minmax(217px, 1fr)); */
        gap: var(--space-xl);
        align-items: start;
        background: #f5f5f7;
        border: none;
    }

    .visual-section-gallery:has(.axles-container) .diagram-board-header {
        display: none;
    }
    /* ==========================================================
   RESPONSIVE FIXES
   ========================================================== */
    /* --- Hero grid: horizontal padding on single-column layout --- */
    @media (max-width: 1100px) {
        .hero-grid {
            padding: 0 var(--space-m);
        }
    }

    @media (max-width: 480px) {
        .hero-grid {
            padding: 0 var(--space-s);
        }
    }
    /* --- Offer row: wrap on narrow screens so input + button stack --- */
    @media (max-width: 520px) {
        .offer-row {
            flex-wrap: wrap;
        }

        .offer-input {
            flex: 1 1 100%;
        }

        .offer-btn {
            flex: 1 1 auto;
            width: 100%;
        }
    }
    /* --- Buy-now / add-to-cart: stack on very small screens --- */
    @media (max-width: 360px) {
        .buy-now-buttons-wrapper {
            flex-direction: column;
        }

        .buy-now-btn,
        .add-to-cart-btn {
            width: 100%;
            flex: none;
        }
    }
    /* --- Transport panel: prevent overflow beyond viewport width --- */
    @media (max-width: 600px) {
        .transport-panel {
            left: 0;
            right: 0;
            max-width: 100%;
            border-radius: 10px;
        }
    }
    /* --- Lease panel: prevent overflow + stack fields on mobile --- */
    @media (max-width: 600px) {
        .lease-panel {
            left: 0;
            right: 0;
            max-width: 100%;
        }

        .lease-grid {
            grid-template-columns: 1fr;
        }

        .lease-actions {
            flex-direction: column;
            align-items: flex-start;
        }
    }
    /* --- Sticky CTA bar: compact layout on small screens --- */
    @media (max-width: 500px) {
        .sticky-cta-inner {
            padding-inline: var(--space-m);
            gap: 8px;
            flex-wrap: wrap;
        }

         .sticky-thumb {
            width: 55px;
            height: 51px;
        }
        .sticky-actions {
            width: 100%;
            justify-content: space-between;
            gap: 6px;
        }

            .sticky-actions .btn-outline,
            .sticky-actions .btn-solid {
                padding: 6px 10px;
                font-size: 12px;
            }
    }
    /* --- Contact row: 2 columns on very small screens --- */
    @media (max-width: 400px) {
        .contact-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    /* --- Price block: tighten font sizes on very small screens --- */
    @media (max-width: 380px) {
        .price-current {
            font-size: 24px;
        }

        .price-old {
            font-size: 15px;
        }

        .price-line {
            gap: 8px;
            row-gap: 4px;
        }
    }
    /* --- Product title: prevent hard overflow on phones --- */
    @media (max-width: 360px) {
        .product-title 
        {
                font-size: 20px;
                max-width: 100%;
                margin-top: 14px;
                white-space: normal;
        }
    }
    /* --- Service tabs: single column on very small screens --- */
    @media (max-width: 400px) {
        .service-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    /* --- Brand video grid: single column on small phones --- */
    @media (max-width: 480px) {
        .brand-video-grid {
            grid-template-columns: 1fr;
        }
    }
    /* --- Doc cards: single column on small phones --- */
    
    /* --- Tooltip: don't overflow viewport on mobile --- */
    @media (max-width: 600px) {
        .tooltip-text {
            max-width: min(420px, 90vw);
            left: 50%;
            transform: translateX(-50%) translateY(6px);
            white-space: normal;
        }
    }
    /* --- Section menu drawer: ensure horizontal scroll tabs don't overflow --- */
    @media (max-width: 992px) {
        .section-menu-links {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }
    }
    /* --- Hero right: ensure no horizontal overflow on stacked layout --- */
    @media (max-width: 1100px) {
        .hero-right {
            min-width: 0;
            overflow-x: visible;
        }
    }
    /* --- Quantity row: wrap on tiny screens --- */
    @media (max-width: 380px) {
        .pp-qty-row {
            flex-wrap: wrap;
            gap: 6px;
        }
    }

    .visual-section-gallery {
        width: 100% !important;
    }
    /* ACCESS MODAL */
    /* ACCESS MODAL (Doc/VIN: login or request) */

    

    .access-options {
        margin-top: var(--space-m);
        display: flex;
        justify-content: flex-end;
        gap: var(--space-s);
    }

    .access-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.22);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1050;
        padding: 1rem;
    }

        .access-modal-overlay.show {
            display: flex !important;
        }

    .access-modal-content {
        max-width: 420px;
        width: 100%;
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 18px 50px rgba(0,0,0,0.18);
    }

        .access-modal-content .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-m);
        }






    /* ============================================================
       PRODUCT IMAGE SECTIONS — DO NOT REMOVE
       These class names are assigned from the database
       (ProductImageViewModel.StylingClass), not written in the HTML.
       Not appearing in any .cshtml/.js search does NOT mean unused.
       ------------------------------------------------------------
       Dimensions & Weights : .size-weight-front-img / -side-img / -rear-img
       Body / Superstructure: .body-side-img, .body-rear-img
       Roller Configuration : .roller-axles
       Working Range        : .WorkingRange-img
       Axles & Tyres        : .axles-container and its .axles-* children
       Other StylingClass values used by this page (taillift-img,
       cranetip-img, craneextensions-img, attachment-img,
       craneattachments-img, boomattachments-img, undercarriage1-img,
       undercarriage2-img) are styled in Product/ProductDescriptionImages.css,
       not in this file — do not "restore" rules for them here.
       ============================================================ */

    /* SIZE & WEIGHT */


    .size-weight-front-img,
    .size-weight-side-img,
    .size-weight-rear-img,
    .body-side-img,
    .body-rear-img {
        padding: 27px 22px 22px 22px;
        background: #f5f5f7;
        border: none;
        position: relative;
    }


    @media (min-width: 321px) {
  .size-weight-side-img .fixed-size-image {
    width: 338px;
  }
}
   
    .size-weight-front-img .fixed-size-image, 
    .size-weight-rear-img  .fixed-size-image,
    .size-weight-side-img  .fixed-size-image
    {
          max-height: 180px;
    }



    .size-weight-rear-img .measure-wrapper
    {
            margin-right: 34px;
    }




        .size-weight-front-img .visual-card,
        .size-weight-side-img .visual-card,
        .size-weight-rear-img .visual-card,
        .body-rear-img .visual-card,
        .body-side-img .visual-card {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 428px;
            border-radius: 10px;
            background: #ffffff;
            border: 2px solid #e3e3e8;
            position: relative;
        }
        .size-weight-front-img .visual-card,
        .size-weight-side-img .visual-card,
        .size-weight-rear-img .visual-card
        {
            min-height: 370px;
            padding: 0 0 49px 0;
        }



        @media(max-width:1024px){
.visual-grid-dynamic:has(.size-weight-rear-img) {
    
    grid-template-columns:  1fr !important;
 
}
        }

    .visual-grid-dynamic:has(.size-weight-front-img),
    .visual-grid-dynamic:has(.size-weight-side-img),
    .visual-grid-dynamic:has(.size-weight-rear-img),
    .visual-grid-dynamic:has(.body-side-img),
    .visual-grid-dynamic:has(.body-rear-img) {
        border: none;
        /* padding: 22px; */
        background: #fafafa;
    }

  
    .visual-grid-dynamic:has(.size-weight-rear-img)
    {
                grid-template-columns: repeat(auto-fit, minmax(373px, 1fr));
        
    }
    .visual-grid-dynamic:has(.size-weight-rear-img) {
    display: grid;
    grid-template-columns: repeat(2, minmax(373px, 1fr));
    gap: 20px; /* optional */
}

/* First item takes full width */
.visual-grid-dynamic:has(.size-weight-rear-img) > :first-child {
    grid-column: 1 / -1;
}
        
 
      @media(max-width:1070px)
      {
                .visual-grid-dynamic:has(.roller-axles) 
                {
                     grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
                }
      }

       @media(max-width:388px)
       {
            .visual-grid-dynamic:has(.size-weight-rear-img),  .visual-grid-dynamic:has(.roller-axles) , .visual-grid-dynamic:has(.WorkingRange-img) 
            {
                 grid-template-columns:  1fr;
            }         
        }



    .visual-section-gallery:has(.size-weight-front-img),
    .visual-section-gallery:has(.size-weight-side-img),
    .visual-section-gallery:has(.size-weight-rear-img),
    .visual-section-gallery:has(.body-side-img),
    .visual-section-gallery:has(.body-rear-img) {
        padding: 0 !important;
    }


    .body-side-img .visual-card {
        margin-right: 0;
    }

    



    .body-side-img .fixed-size-image, .body-rear-img .fixed-size-image {
        width: 100%;
        max-height: 100px;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background: transparent;
        display: block;
        transition: transform 0.3s ease;
        max-width: 296px;
    }



    @media(max-widht:320px) {


        .body-side-img .fixed-size-image, .body-rear-img .fixed-size-image {
            max-width: 170px;
        }


        .body-side-img .visual-card {
            padding: 0 33px 0 0;
        }
    }

     /* =============== LEASE OPEN STATE =============== */
    .lease-open .hide-when-lease {
        display: none !important;
    }
    /* =============== SMALL FIXES =============== */
    a {
        color: inherit;
    }
    /* =============================================================
                   Main Product image
     =============================================================*/

    #main-slider:hover .product-overlay {
        opacity: 1;
    }

    #main-slider .splide__slide img {
        border-radius: 16px !important;
    }

    #main-slider:hover .splide__arrows {
        opacity: 1;
        pointer-events: auto;
    }
    /* Small screens: show overlay always or on touch */


    .product-overlay {
        position: absolute;
        bottom: 0;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1;
        width: 100%;
        transition: .5s ease;
        opacity: 0;
        color: white;
        font-size: 20px;
        padding: 8px;
        text-align: center;
        border-radius: 0px 0px 16px 16px;
        font-family: var(--font-sans);
    }

    .product-overlay-icons 
    {
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 5px;
        font-size: 1rem;
    }

   @media (max-width: 768px) 
    {
        #main-slider .product-overlay {
            opacity: 1; 
        }

        .product-overlay-icons {
            font-size: 0.8rem;
        }
    }


    @media (min-width: 768px) {
        .product-main-image {
            height: 708px !important;
            width: 100%;
        }
    }

    .product-main-image {
        height: auto;
    }


    
    /*Main image like icon */
    .like-icon.unliked {
        color: white;
    }

    .like-icon.liked {
        color: red;
    }

    .like-icon {
        cursor: pointer;
    }





    .ref-pill {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #111;
        color: #fff;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        z-index: 1;
    }
    /* =============================================================
                   Share product link model
                  =============================================================*/

    .icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
    }

    .share-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 22px;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

        .share-icon:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            opacity: 1;
        }

    .platform-label {
        font-size: 0.75rem; /* Small text for platform name */
        color: #6c757d;
        font-weight: 500;
    }
    /* Individual Platform Colors */
    .facebook-icon {
        background-color: #1877F2;
    }

    .twitter-icon {
        background-color: #1DA1F2;
    }

    .instagram-icon {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    }

    .whatsapp-icon {
        background-color: #25D366;
    }

    .telegram-icon {
        background-color: #0088CC;
    }
    /* --- Copy Link Styling --- */

    .copy-link-input-group-text {
        background-color: #f8f9fa;
        border-color: #dee2e6;
        color: #495057;
        border-radius: 6px 0 0 6px;
    }

    .copy-link-input {
        border-color: #dee2e6;
        border-radius: 0;
        box-shadow: none !important;
        color: #495057;
        font-size: 0.9rem;
        padding-right: 10px;
        height: 39px;
    }
    /* The specified custom color #0078D4 for the Copy button */
    .copy-btn {
        background-color: #0078D4;
        border-color: #0078D4;
        color: white;
        font-weight: 600;
        border-radius: 0 6px 6px 0;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        height: 38px;
    }

        .copy-btn:hover {
            background-color: #005a9c;
            border-color: #005a9c;
        }

    .btn-close {
        box-shadow: none !important;
        background-color: transparent !important;
        border: none !important;
        color: grey !important;
    }

    .share-model-icon-container {
        gap: 20px;
        max-width: 400px;
    }


    .input-group .copy-btn {
        display: flex;
        align-items: center;
        height: 100%;
    }


    .copy-link-input-group {
        display: flex;
        min-height: 32px;
    }

    
    /*CUSTOMER REVIEW SECTION*/
    .avatar-fallback {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #6b7280;
        color: white;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #f0f0f0;
        text-transform: uppercase;
    }

    .story-user-avatar {
        position: relative;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }


    /* PRODUCT PAGE SMALL SCREEN OVERFLOW ISSUE FIX */
    .product-page-wraper {
        max-width: 100%;
        overflow-x: clip;
        position: relative;
    }

    .location-switch {
        display: flex;
        gap: 8px;
        margin: 12px 0;
        flex-wrap: wrap;
    }

    .location-chip {
        padding: 8px 14px;
        border: 1px solid #ddd;
        border-radius: 999px;
        cursor: pointer;
        font-size: 13px;
        transition: all .2s ease;
    }

        .location-chip:hover {
            background: #f5f5f5;
        }

        .location-chip.active {
            background: #111;
            color: #fff;
            border-color: #111;
        }

    #mapBox {
        width: 100%;
        height: 280px;
        border-radius: 12px;
        overflow: hidden;
    }

    @media (max-width: 425px) {

    #main-slider .splide__track {
        aspect-ratio: 1.08 / 1;   /* pick the ratio you want all slides to share */
        overflow: hidden;
        border-radius: 14px;
    }

    #main-slider .splide__list,
    #main-slider .splide__slide {
        height: 100%;
    }

    #main-slider .splide__slide .product-img {
        display: block;
        width: 100%;
        height: 100%;
    }

    #main-slider .splide__slide .product-main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;      /* forces every image to fill the same box */
        object-position: center;
        display: block;
    }

    
    
    
}





	.axles-container {
		max-width: 1200px;
		background: #fff;
		padding: 0px 0px 0px 0px;
		border-radius: 10px;
	}
	/* margin: 40px auto; */


	.axles-row {
		display: flex;
		align-items: center;
		/* gap: 60px; */
		height: 128px;
	}

    .axles-row-wrap {
        display: flex;
		justify-content: center;
    }

	.axles-visual {
		position: relative;
		width: 454px;
		height: 127px;
		flex-shrink: 0;
	}

		.axles-visual .axles-back {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 94px;
			z-index: 1;
		}

		.axles-visual .axles-front {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 349px;
			z-index: 2;
		}

		.axles-visual .axles-tail-end {
			width: 138px;
			top: 12%;
		}

	.axles-details {
		flex: 1;
		position: relative;
		padding-left: 36px;
	}

	/* Connector: visual -> details (arrow line + arrowhead).
	   Anchored on .axles-details so it appears only on real axle rows. */
	.axles-details::before {
	    content: "";
    position: absolute;
    left: -17px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 7px solid #8c8d91;
    transform: translateY(-50%);
	}

	 
	/* ========================= */
	/* AXLE SPECS (UPDATED PART) */
	/* ========================= */

	.axles-specs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 1px 0px;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.axles-spec {
		display: flex;
		/* align-items: center; */
		min-width: 0;
		font-size: 11px;
		line-height: 1.4;
	}

	

	.axles-spec-value {
		color: #111827;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Boolean / label-only */
	.axles-spec--flag {
		font-weight: 500;
		/* 
        color: #2563eb;
	    background: rgba(37, 99, 235, 0.08); 
        */
		padding: 2px 8px;
		border-radius: 999px;
		width: fit-content;
	}
	/* Hide by default (desktop) */
	

	/* Mobile / Tablet */
	@media (max-width: 1160px) {

		

		
		/* 1 column on small mobile */
		

		

		

		
		/* Keep your existing behavior */
		.axles-details {
			display: none;
		}

		.axles-row {
			justify-content: center;
		}

		
	}

	/* Mobile / Tablet fix */
	@media (max-width: 1024px) {
		.axles-row {
			height: 113px;
		}
	
		.axles-visual {
			width: 100%; /* allow shrinking */
			max-width: 320px; /* control size */
			margin: 0 auto; /* center */
		}

			.axles-visual .axles-front {
				width: 100%;
				max-width: 100%;
				height: auto;
			}

			.axles-visual .axles-back {
				width: 28%; /* scale proportionally instead of fixed px */
				max-width: 90px;
			}

			.axles-visual .axles-tail-end {
				width: 42%;
				max-width: 133px;
				top: 21%;
			}
		/* Prevent container overflow */
		.axles-container {
			overflow: hidden;
		}
	}

	/* Extra small devices */
	@media (max-width: 600px) {

		.axles-visual {
			max-width: 260px;
		}

		.axles-row {
			height: 100px;
		}

		.axles-visual .axles-tail-end {
			width: 65% !important;
        max-width: 127px !important;
        top: 19% !important;
		}

         .axles-visual .axles-back {
				width: 33%; 
				max-width: 90px;
			}
	}


	/* Extra small devices */
	@media (max-width: 375px) {
		.axles-container {
			padding: 9px;
		}

		.axles-row {
			height: 90px;
		}

        .axles-visual .axles-back {
				width: 33%; 
				max-width: 90px;
			}

            	.axles-visual .axles-tail-end {
                    width: 57% !important;
                    max-width: 125px !important;
                    top: 18% !important;
                    left: 50%;
                }
	}

    




	.imageMobileValuse {
		display: none;
	}
	
	@media (max-width: 1160px) {
		.imageMobileValuse {
			display: block;
		}
	}


 
/* Mobile / Tablet fix */
	@media (max-width: 1024px) {
		.axles-row-wrap {
			display: block; /* break flex chain — block takes full available width so percentage children resolve correctly */
		}

		.axles-row {
			height: 113px;
		}
		}

@media(max-width:680px)
{
.Hide-False {
               display: flex;
            /* gap: 30px; */
            justify-content: space-between;
            border-bottom: 0.01px solid #e9e9e9;
            padding-bottom: 10px;
}




.Hide-False > :first-child {
    flex: 0 0 50%; /* Takes at least 50% width */
}

.Hide-False > :not(:first-child) {
    flex: 1;
     text-align: right;
}
}


.package-promo{margin:28px auto var(--space-xl);padding:22px;border:1px solid #ebe6d6;border-radius:22px;background:linear-gradient(180deg,#fffdf8 0%,#fff 100%);}
.package-promo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.package-promo-title{font-size:22px;font-weight:600;margin:0;}
.package-promo-sub{font-size:14px;color:#676767;max-width:780px;line-height:1.5;margin-top:6px;}
.package-promo-tag{display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid #eadfc0;background:#fff8e8;font-size:12px;color:#7b6430;}
.package-promo .package-card-row{margin-bottom:18px;}
.package-promo .package-card{border-radius:18px;}
.package-promo .comparison-wrap{overflow-x:auto;border:1px solid #eee4ca;border-radius:16px;background:#fff;}
.package-promo .package-table th{background:#fffaf0;}
.package-promo .package-table td,.package-promo .package-table th{font-size:13px;}


.package-teaser{margin-top:18px;padding:14px 16px;border:1px solid var(--color-border);border-radius:12px;background:#fbfbfb;}
.package-teaser-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.package-teaser-title{font-size:14px;font-weight:600;}
.package-teaser-link{font-size:13px;color:#222;text-decoration:none;}
.package-teaser-link:hover{text-decoration:underline;}
.package-teaser-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.package-mini{border:1px solid #ececec;border-radius:12px;background:#fff;padding:10px 12px;min-width:0;}
.package-mini.recommended{background:#f6f8ff;border-color:#dfe6ff;}
.package-mini strong{display:block;font-size:13px;margin-bottom:4px;}
.package-mini span{display:block;font-size:12px;color:#666;line-height:1.35;}


.package-section .comparison-wrap{overflow-x:auto;border:1px solid #ededed;border-radius:14px;background:#fff;}
.package-table{width:100%;border-collapse:collapse;min-width:760px;}
.package-table th,.package-table td{padding:14px 16px;border-bottom:1px solid #f1f1f1;font-size:14px;text-align:left;vertical-align:middle;}
.package-table th{font-size:13px;color:#666;font-weight:600;background:#fafafa;}
.package-table td strong{font-weight:600;}
.package-card-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.package-card{border:1px solid var(--color-border);border-radius:16px;background:#fff;padding:16px;}
.package-card.recommended{border-color:#dce4ff;background:#f8faff;}
.package-card h4{margin:0 0 6px;font-size:16px;}
.package-card p{margin:0;color:#666;font-size:13px;line-height:1.45;}
.package-tag{display:inline-flex;margin-top:8px;padding:5px 10px;border-radius:999px;border:1px solid #e7e7e7;background:#fafafa;font-size:12px;color:#666;}
.package-card.recommended .package-tag{background:#fff;border-color:#d9e2ff;color:#4961a8;}
@media(max-width:900px){.package-card-row{grid-template-columns:1fr;}}
.service-photo{position:relative;border-radius:16px;overflow:hidden;min-height:146px;border:1px solid #e9e9e9;background:#f0f0f0;}
.service-photo svg{display:block;width:100%;height:100%;}
.service-photo-label{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12px;font-weight:600;color:#222;box-shadow:0 4px 12px rgba(0,0,0,.08);}


.package-float{position:fixed;right:18px;bottom:18px;z-index:45;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e7e7e7;border-radius:999px;background:#111;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.16);cursor:pointer;font-size:13px;}
.package-float:hover{transform:translateY(-1px);}
.package-float-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;}
.package-drawer{position:fixed;top:0;right:-430px;width:400px;max-width:92vw;height:100vh;background:#fff;z-index:70;border-left:1px solid #ececec;box-shadow:-12px 0 28px rgba(0,0,0,.08);transition:right .22s ease;display:flex;flex-direction:column;}
.package-drawer.open{right:0;}
.package-drawer-head{padding:18px 18px 14px;border-bottom:1px solid #f0f0f0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.package-drawer-title{font-size:18px;font-weight:600;margin:0;}
.package-drawer-sub{font-size:13px;color:#666;margin-top:4px;line-height:1.45;}
.package-drawer-close{border:none;background:transparent;font-size:22px;line-height:1;color:#777;cursor:pointer;padding:0;}
.package-drawer-body{padding:16px 18px 24px;overflow:auto;}
.package-stack{display:flex;flex-direction:column;gap:12px;}
.package-drawer-card{border:1px solid #ebebeb;border-radius:14px;padding:14px;background:#fff;}
.package-drawer-card.recommended{background:#f8faff;border-color:#dfe7ff;}
.package-drawer-card h4{margin:0 0 6px;font-size:16px;}
.package-drawer-card p{margin:0;color:#666;font-size:13px;line-height:1.45;}
.package-mini-table{margin-top:14px;border-top:1px solid #f1f1f1;}
.package-mini-row{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:10px;padding:10px 0;border-bottom:1px solid #f4f4f4;font-size:13px;}
.package-mini-row strong{font-weight:600;}
.package-overlay{position:fixed;inset:0;background:rgba(0,0,0,.18);backdrop-filter:blur(2px);z-index:65;display:none;}
.package-overlay.open{display:block;}