/* =============================================================
   VisitorInformation.css
   Add-on styles for the Visitor Information / Quote Cart page.
   Requires rfq.css to already be loaded.
   ============================================================= */


/* ── PAGE LAYOUT ──────────────────────────────────────────────
   Two-column grid: form left, cart sidebar right.
   On tablet/mobile collapses to single column.
─────────────────────────────────────────────────────────────── */
.vi-page-wrapper {
    margin-top: 30px;
    margin-bottom: 60px;
}

.vi-page-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    align-items: start;
}

.vi-form-col {
    min-width: 0; /* prevent grid blowout */
}

.vi-cart-col {
    min-width: 0;
}

@media (max-width: 991px) {
    .vi-page-layout {
        grid-template-columns: 1fr;
    }
    /* Show cart above form on mobile */
    .vi-cart-col {
        order: -1;
    }
}


/* ── SECTION TITLE ────────────────────────────────────────────
   Numbered heading used for "1. Contact Information" etc.
   Mirrors the visual weight of ev-form-header but sits inside
   the grey ev-form-body area.
─────────────────────────────────────────────────────────────── */
.vi-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #1C326B;
    text-transform: uppercase;
    font-family: 'Myriad Pro', sans-serif;
    padding: 10px;
}

.vi-section-num {
    width: 26px;
    height: 26px;
    background: #1C326B;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: 'Myriad Pro', sans-serif;
}

/* Divider between sections */
.vi-section-divider {
    border: none;
    border-top: 1px solid #d0d0d0;
    margin: 24px 0;
}


/* ── FLOATING LABEL: background fix for ev-form-body context ──
   rfq.css sets background-color: #ededed on the floated label.
   This is correct — no override needed.
   This comment is here for reference only.
─────────────────────────────────────────────────────────────── */


/* ── HONEYPOT FIELD ───────────────────────────────────────────
   Hides the Contact anti-spam field (same as rfq.css .Contact_id)
─────────────────────────────────────────────────────────────── */
.Contact_id {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}


/* ── SUBMIT BUTTON ────────────────────────────────────────────
   Matches the ev-btn-submit style from rfq.css, applied to
   input[type=submit] used on this page.
─────────────────────────────────────────────────────────────── */
.vi-btn-submit {
    border: none !important;
    min-width: 200px !important;
    font-size: 18px;
    cursor:pointer;
}

/* ── CAPTCHA ERROR ────────────────────────────────────────────*/
.vi-captcha-error {
    margin-top: 16px;
    color: #dc3545;
    text-align: center;
    background: #f8d7da;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
}


/* ── CONSENT TEXT ─────────────────────────────────────────────*/
.vi-consent-text {
    color: #4d4d4d;
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.6;
}


/* ── CART SIDEBAR ─────────────────────────────────────────────
   Self-contained card that holds the cart item list and
   Add Buildings / Add Accessories buttons.
─────────────────────────────────────────────────────────────── */
.vi-cart-container {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 0;
}

/* Header – same gradient as ev-form-header */
.vi-cart-header {
    background: linear-gradient(135deg, #1C326B 0%, #2a4a8f 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vi-cart-title {
    color: white;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Myriad Pro', sans-serif;
}

.vi-cart-edit {
    color: white;
    font-size: 16px;
    border: 1px solid white;
    padding: 5px 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: 'Myriad Pro', sans-serif;
}

    .vi-cart-edit:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.55);
    }

/* Cart body uses same ededed background as ev-form-body */

/* Each cart line item rendered by VisitorInformationPatial partial */
.vi-cart-item {
    background: #ffffff;
    border-bottom: 1px solid #d5d5d5;
    padding: 16px 20px;
    margin-bottom: 2px;
}

    .vi-cart-item:last-of-type {
        border-bottom: none;
    }

/* Action buttons area */
.vi-cart-actions {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Orange CTA – Add More Buildings */
.vi-btn-orange {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #FF8201;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    transition: all 0.25s ease;
    font-family: 'Myriad Pro', sans-serif;
    letter-spacing: 0.02em;
}

    .vi-btn-orange:hover {
        background: #e07200;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 130, 1, 0.3);
        color: #ffffff;
    }

/* Navy CTA – Add Accessories */
.vi-btn-blue {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #1C326B;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    transition: all 0.25s ease;
    font-family: 'Myriad Pro', sans-serif;
    letter-spacing: 0.02em;
}

    .vi-btn-blue:hover {
        background: #2a4a8f;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(28, 50, 107, 0.35);
        color: #ffffff;
    }


/* ── RESPONSIVE TWEAKS ────────────────────────────────────────*/
@media (max-width: 767px) {
    .vi-page-wrapper {
        margin-top: 16px;
        margin-bottom: 40px;
    }

    .vi-cart-actions {
        padding: 14px 16px;
    }

    .vi-cart-header {
        padding: 14px 16px;
    }

    .vi-btn-submit {
        width: 100%;
    }
    .ev-form-body {
        padding: 20px !important;
    }
}

input[id="btnQuoteCartForm"]:disabled {
    opacity: 0.5;
}


.vi-item {
    background: #ffffff;
    border-bottom: 1px solid #d5d5d5;
    padding: 10px;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: start;
}

/*.vi-item:last-child {
        border-bottom: none;
    }*/

.vi-item-img {
    width: auto;
    height: 80px;
    /*background-color: #f5f5f5;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

    .vi-item-img img {
        width: 100%;
        height: auto;
        display: block;
    }

.vi-item-details {
    min-width: 0;
}

.vi-item-name {
    font-size: 16px;
    font-weight: 600;
    color: #1C326B;
    line-height: 1.5;
    margin-bottom: 5px;
    font-family: 'Myriad Pro', sans-serif;
}

.vi-item-table {
    width: 100%;
    border-collapse: collapse;
}

    .vi-item-table td {
        padding: 1px 6px 1px 0;
        font-size: 14px;
        line-height: 1.5;
        vertical-align: top;
    }

        .vi-item-table td:first-child {
            color: #4d4d4d;
            font-weight: 600;
            white-space: nowrap;
            font-family: 'Myriad Pro', sans-serif;
            min-width: 72px;
        }

        .vi-item-table td:last-child {
            color: #333333;
            font-family: 'Myriad Pro', sans-serif;
        }

@media (max-width: 767px) {
    .vi-item {
        padding: 12px 16px;
        grid-template-columns: 100px 1fr;
        gap: 10px;
    }
}


/* ── Design Tokens ───────────────────────────────────────── */
/* NOTE: :root removed; all var(--*) replaced with actual color values */
/* ── 2-column layout ─────────────────────────────────────── */
.qc-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
    position: relative;
}

.qc-sidebar {
    position: absolute; /* JS will control top value */
    right: 0;
    width: 300px;
}
@media (max-width: 991px) {
    .qc-sidebar {
        position: static !important;
        width: 100% !important;
        top: auto !important;
    }

}
/* ── Card ────────────────────────────────────────────────── */
.qc-card {
    background: #FFFFFF;
    border: 1px solid #E2E5EE;
    overflow: hidden;
}

    .qc-card + .qc-card {
        margin-top: 14px;
    }

.qc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #E2E5EE;
}

.qc-card-label {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #777777;
}

.qc-btn-remove-all {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #BBBBBB;
    cursor: pointer;
    transition: color .18s ease;
}

    .qc-btn-remove-all:hover {
        color: #c0392b;
    }

/* ── Product Row  [photo | name | specs | ×] ─────────────── */
.qc-pr {
    display: grid;
    grid-template-columns: 200px 1fr minmax(160px,220px) 36px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #E2E5EE;
    transition: background .18s ease;
    cursor: pointer;
}

    /*.qc-pr:last-of-type {
            border-bottom: none;
        }*/

    .qc-pr:hover {
        background: #F4F5F8;
    }

/* Photo */
.qc-pr-photo {
    width: auto;
    height: 140px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .qc-pr-photo .qc-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    .qc-pr-photo img {
        width: 100%;
        height: auto;
        display: flex;
        margin: auto;
    }

.qc-pr-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #1C326B;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}

    .qc-pr-badge.plus {
        background: #FF8201;
    }

/* Name */
.qc-pr-name-col {
    padding: 0 20px 0 16px;
    min-width: 0;
}

.qc-pr-name {
    font-size: 18px;
    font-weight: 700;
    color: #1C326B;
    line-height: 1.3;
    margin: 0;
}

/* Spec table */
.qc-pr-specs {
    display: table;
    border-collapse: collapse;
}

.qc-pr-spec-row {
    display: table-row;
}

.qc-pr-spec-label,
.qc-pr-spec-val {
    display: table-cell;
    padding: 2px 0;
    font-size: 14px;
    line-height: 1.55;
    vertical-align: middle;
}

.qc-pr-spec-label {
    font-weight: 700;
    color: #444444;
    padding-right: 12px;
    white-space: nowrap;
}

.qc-pr-spec-val {
    color: #777777;
}

.qc-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #E2E5EE;
    border-radius: 100px;
    overflow: hidden;
    background: #FFFFFF;
    height: 30px;
}

.qc-qty-btn {
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: #1C326B;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
}

    .qc-qty-btn:hover {
        background: rgba(28,50,107,.10);
    }

    .qc-qty-btn:active {
        background: #1C326B;
        color: #fff;
    }

.qc-qty-sep {
    width: 1px;
    height: 18px;
    background: #E2E5EE;
    flex-shrink: 0;
}

.qc-qty-val {
    min-width: 34px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #1C326B;
    line-height: 28px;
    padding: 0 4px;
}

.qc-qty-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Remove — filled circle × */
.qc-pr-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F4F5F8;
    border: 1.5px solid #E2E5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #777777;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    margin-left: 8px;
    padding: 0;
    text-decoration: none;
}

    .qc-pr-remove:hover {
        background: #FF8201;
        color: #fff;
        border-color: #FF8201;
        text-decoration: none;
    }

/* Mobile-only — hidden on desktop, shown in ≤640px breakpoint */
.qc-pr-mob-meta {
    display: none;
}

.qc-pr-mob-qty {
    display: none;
}

/* ── Notice ──────────────────────────────────────────────── */
.qc-notice {
    background: #FFF8F0;
    border: 1px solid #ffd099;
    border-left: 4px solid #FF8201;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 1.5;
    color: #4d4d4d;
}

    .qc-notice strong {
        color: #1C326B;
    }

/* ── Sidebar ─────────────────────────────────────────────── */
.qc-sidebar-pad {
    padding: 30px;
    background-color: #1C326B;
}

.qc-sidebar-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #777777;
    display: block;
    margin-bottom: 12px;
}

.qc-sidebar-blurb {
    font-size: 18px;
    color: white;
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: center;
}

.qc-sidebar-hr {
    border: none;
    border-top: 1px solid #E2E5EE;
    margin: 14px 0;
}

/* Buttons */
.qc-btn {
    width: 100%;
    text-align: center;
    font-size: 18px;
    margin: 10px 0px;
}

/* ── Empty ───────────────────────────────────────────────── */
.qc-empty {
    text-align: center;
    padding: 64px 20px;
}

.qc-empty-icon {
    width: 72px;
    height: 72px;
    background: rgba(28,50,107,.10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.qc-empty h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1C326B;
    margin-bottom: 8px;
}

.qc-empty p {
    font-size: 20px;
    color: #4d4d4d;
    margin-bottom: 20px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .qc-layout {
        grid-template-columns: 1fr;
    }

    .qc-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    /* Product row: 3 cols — [photo 80px] [name+qty flex] [× 36px] */
    .qc-pr {
        grid-template-columns: 80px 1fr 36px;
        padding: 12px 14px;
    }

    .qc-pr-specs {
        display: none;
    }

    .qc-pr-name-col {
        padding: 0 8px 0 10px;
    }

    .qc-pr-name {
        font-size: 13.5px;
    }

    .qc-pr-photo {
        width: 72px;
        height: 72px;
    }
    /* Show mobile meta + qty in name column */
    .qc-pr-mob-meta {
        display: block !important;
        font-size: 11px;
        color: #777777;
        margin-top: 3px;
        line-height: 1.4;
    }

    .qc-pr-mob-qty {
        display: flex !important;
        align-items: center;
        gap: 7px;
        margin-top: 6px;
    }

    .qc-pr-mob-qty-lbl {
        font-size: 11px;
        font-weight: 700;
        color: #444444;
    }

    .qc-pr-remove {
        margin-left: 0;
        width: 26px;
        height: 26px;
    }
    /* Sidebar hidden → sticky bar */
    /*.qc-sidebar {
            display: none;
        }*/
    .qc-mobile-bar {
        display: block;
    }

    .qc-section-outer {
        margin-top: 30px;
    }

    .qc-section-title {
        font-size: 17px;
    }

    .qc-card-head {
        padding: 12px 14px;
    }
}

.qc-btn-remove-all {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #777777;
    cursor: pointer;
    transition: color .18s ease;
    white-space: nowrap;
    text-decoration: none;
}

    .qc-btn-remove-all:hover {
        color: #1C326B;
    }

body .redesign-2020 .card-with-img .item-wrap .card {
    background-color: white !important;
}

@media (max-width: 640px) {
    .qc-pr {
        grid-template-columns: 90px 1fr 36px; /* was 80px */
        padding: 14px;
    }

    .qc-pr-photo {
        width: 90px;
        height: 90px; /* was 72px */
    }

    .qc-pr-name {
        font-size: 15px; /* was 13.5px */
    }

    .qc-pr-mob-meta {
        font-size: 12px; /* was 11px */
    }

    .qc-qty-stepper {
        height: 34px; /* was 30px */
    }

    .qc-qty-btn {
        width: 34px;
        height: 34px;
    }
}

.mm-resources-section {
    background-color: #1C326B;
    background-image: url('/Content/Images/CaseStudies/mm-request-quote-background-img.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    position: relative;
    text-align: center;
}

.mm-resources-heading {
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 36px;
    font-family: 'Myriad Pro', sans-serif;
    letter-spacing: 0.01em;
}

/* Grid: 3 equal columns */
.mm-resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
}

/* Card */
.mm-resource-card {
    background: #ffffff;
    text-align: left;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .mm-resource-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    }

/* Photo */
.mm-resource-card-img {
    width: 100%;
    height: 216px;
    object-fit: cover;
    display: block;
}

/* Content below the photo */
.mm-resource-card-body {
    padding: 22px 24px 26px;
}

.mm-resource-card-title {
    line-height: 1.6;
    color: #1c326b;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 24px;
    font-family: "Myriad Pro", sans-serif;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 767px) {
    .mm-resources-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .mm-resources-heading {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .mm-resource-card-img {
        height: 200px;
    }
    .qc-pr-photo .mm_cart_prroduct {
        width: 100% !important;
        height: auto !important;
    }

    .qc-pr-photo .mm_cart_plus {
        width: 100% !important;
        height: auto !important;
    }

    .qc-pr-photo .mm_cart_purchase {
        width: 100% !important;
        height: auto !important;
    }
}
@media (min-width: 768px) {
    .qc-pr-photo .mm_cart_prroduct {
        width: 100% !important;
        height: auto !important;
    }

    .qc-pr-photo .mm_cart_plus {
        width: auto !important;
        height: 100% !important;
        max-height: max-content;
        max-width: 100%;
    }

    .qc-pr-photo .mm_cart_purchase {
        width: 100% !important;
        height: auto !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .mm-resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .mm-resources-grid .mm-resource-card:last-child {
            grid-column: 1 / -1;
            max-width: calc(50% - 10px);
            margin: 0 auto;
        }
    .vi-item {
        grid-template-columns: 180px 1fr !important;
        gap: 30px !important;
    }
    .vi-cart-actions {
        flex-direction: row;
    }
}
.qc-layout > div:first-child {
    min-height: 420px;
}



/* =============================================================
   CART CONFIRMATION — append to bottom of visitor-information.css
   ============================================================= */

/* ── Hero ─────────────────────────────────────────────────── */
.ty-hero {
    background: linear-gradient(135deg, #1C326B 0%, #2a4a8f 100%);
    padding: 52px 20px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .ty-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url(../../Content/Images/CaseStudies/mm-request-quote-background-img.webp);
        pointer-events: none;
    }

.ty-hero-check {
    width: 64px;
    height: 64px;
    background: #27ae60;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 0 0 10px rgba(39, 174, 96, .18);
    animation: ty-pop .45s cubic-bezier(.175, .885, .32, 1.275) both;
    position: relative;
}

@keyframes ty-pop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ty-hero h1 {
    color: #ffffff !important;
    font-family: 'Myriad Pro', sans-serif !important;
    text-transform: none !important;
    position: relative;
}

.ty-hero p {
    font-size: 20px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.6;
    font-family: 'Myriad Pro', sans-serif;
    text-transform: none !important;
    position: relative;
}

    .ty-hero p a {
        color: #FF8201;
    }

    .ty-hero p strong {
        color: #ffffff;
    }

        .ty-hero p strong a {
            color: #FF8201;
        }


/* ── Breadcrumb bar — sits below hero, above body ─────────── */
.ty-breadcrumb-bar {
    background: #ffffff;
    border-bottom: 1px solid #E2E5EE;
    padding: 8px 0;
}
    /* Override Bootstrap breadcrumb margin/bg inside this bar */
    .ty-breadcrumb-bar .breadcrumb {
        margin-bottom: 0;
        background: transparent;
        padding: 4px 0;
        font-size: 13px;
    }

        .ty-breadcrumb-bar .breadcrumb a {
            color: #999999;
        }

            .ty-breadcrumb-bar .breadcrumb a:hover {
                color: #1C326B;
            }

        .ty-breadcrumb-bar .breadcrumb .active {
            color: #1C326B;
            font-weight: 600;
        }

        .ty-breadcrumb-bar .breadcrumb > li + li::before {
            color: #cccccc;
        }


/* ── Info section cards ───────────────────────────────────── */
.ty-section {
    background: #ffffff;
    /*border: 1px solid #E2E5EE;*/
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

.ty-section-head {
    padding: 12px 20px;
    border-bottom: 2px solid #1C326B;
}

.ty-section-body {
    padding: 20px;
}


/* ── Label : value rows ───────────────────────────────────── */
.ty-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 4px 12px;
    padding: 15px 0;
    border-bottom: 1px solid #F0F0F0;
}

    .ty-row:last-child {
        border-bottom: none;
    }

.ty-row-label {
    font-size: 18px;
    font-weight: 700;
    color: #4d4d4d;
}

.ty-row-val {
    font-size: 18px;
    color: #1C326B;
}

    .ty-row-val.light {
        font-weight: 400;
        color: #333333;
        line-height: 1.55;
    }


/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .ty-hero {
        padding: 36px 16px 30px;
    }

        .ty-hero h1 {
            font-size: 22px !important;
        }

        .ty-hero p {
            font-size: 14px;
        }

    .ty-page {
        padding-bottom: 40px;
    }

    .ty-row {
        grid-template-columns: 120px 1fr;
    }
}

/* Desktop: label | value side by side */
.vi-spec {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #F4F5F8;
    align-items: baseline;
}

    .vi-spec:last-child {
        border-bottom: none;
    }

.vi-spec-label {
    white-space: nowrap;
    font-weight: 600;
    color: #4d4d4d;
    min-width: 90px;
    flex-shrink: 0;
    font-size: 16px;
}

.vi-spec-val {
   color: #4d4d4d;
    word-break: break-word;
    font-size: 16px;
}
@media (max-width: 767px) {

    /* Cart stacks above contact/project on mobile */
    .vi-page-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vi-cart-col {
        order: -1;
    }

    /* vi-spec: label stacks above value */
    .vi-spec {
        flex-direction: column;
        gap: 0;
        padding: 6px 0;
    }

    .vi-spec-label {
        min-width: unset;
        line-height: 1.2;
    }

    .vi-spec-val {
        line-height: 1.3;
    }

    /* ty-row (Contact / Project info): label stacks above value */
    .ty-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 0;
    }

    .ty-row-label {
        font-weight: 700;
        color: #888;
        line-height: 1.2;
    }

    .ty-row-val {
        color: #1C326B;
        font-weight: 600;
        line-height: 1.35;
        word-break: break-word;
    }

        .ty-row-val.light {
            font-weight: 400;
            color: #333;
        }

    /* CTA buttons */
    .vi-cart-actions {
        padding: 14px 16px;
        gap: 10px;
    }

    .vi-btn-orange,
    .vi-btn-blue {
        height: 52px;
        width: 100%;
    }
}
.vi-ty-page-card-p {
    font-size: 18px;
    line-height: 1.5;
    color: #4d4d4d;
    max-height: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}