:root {
    --ink: #10202b;
    --dark: #081219;
    --yellow: #f7b500;
    --muted: #64707a;
    --line: #e5e9ec;
    --soft: #f4f7f8
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: #fff
}

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

.topbar {
    background: #0b171e;
    color: #c8d2d8;
    padding: 8px 5%;
    font-size: 13px
}

header {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 20
}

.logo {
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 19px
}

.logo span {
    background: var(--yellow);
    padding: 10px 8px;
    margin-right: 7px;
    color: #111
}

nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-weight: 700;
    font-size: 14px
}


nav a:hover {
    color: #a87900
}

nav a {
    position: relative;
    transition: color .2s ease;
}

nav a:hover {
    color: #a87900;
}

nav a.active {
    color: #a87900;
}

nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 3px;
    background: var(--yellow);
    border-radius: 3px;
}


.quote-nav,
.btn.primary {
    background: var(--yellow);
    padding: 12px 18px
}

nav a.active:not(.quote-nav) {
    color: #a87900;
}

nav a.active:not(.quote-nav)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 3px;
    background: var(--yellow);
    border-radius: 3px;
}


.menu {
    display: none;
    border: 0;
    background: none;
    font-size: 24px
}

.hero {
    min-height: 580px;
    padding: 90px 7%;
    background: linear-gradient(90deg, rgba(5, 12, 16, .88), rgba(5, 12, 16, .35)), url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1800&q=85') center/cover;
    color: white
}

/* =========================================================
   ADVANCED HERO SEARCH
========================================================= */

.advanced-search {
    width: 100%;
    max-width: 1000px;
    margin-top: 35px;
}

.search-main {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    background: #fff;

    padding: 8px;

    border-radius: 14px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.5);

    transition:
        box-shadow .2s ease,
        transform .2s ease;
}

.search-main:focus-within {
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.35);

    transform: translateY(-2px);
}


/* Search Icon */

.search-icon {
    width: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #65727a;

    font-size: 30px;

    flex-shrink: 0;
}


/* Search Input */

.search-main input {
    flex: 1;

    min-width: 0;

    height: 58px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--ink);

    font-size: 17px;

    padding: 0 10px;
}

.search-main input::placeholder {
    color: #89949b;
}


/* Clear Button */

.search-clear {
    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    color: #8b969d;

    font-size: 27px;

    cursor: pointer;

    display: none;

    align-items: center;
    justify-content: center;

    border-radius: 50%;
}

.search-clear:hover {
    background: #f1f3f4;
    color: var(--ink);
}


/* Search Button */

.search-button {
    height: 58px;

    padding: 0 30px;

    border: 0;

    border-radius: 10px;

    background: var(--yellow);

    color: #111;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.search-button:hover {
    background: #ffca28;

    transform: translateY(-1px);
}


/* Search Suggestions */

.search-help {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 14px;

    font-size: 13px;
}

.search-help span {
    color: #d7e0e4;

    font-weight: 700;

    margin-right: 3px;
}

.search-help a {
    color: #fff;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.18);

    padding: 7px 12px;

    border-radius: 20px;

    transition:
        background .2s ease,
        color .2s ease;
}

.search-help a:hover {
    background: var(--yellow);

    color: #111;

    border-color: var(--yellow);
}

.eyebrow {
    color: var(--yellow);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 12px
}

.hero h1 {
    font-size: clamp(42px, 7vw, 78px);
    max-width: 820px;
    margin: 18px 0
}

.hero p {
    font-size: 18px;
    max-width: 650px;
    line-height: 1.6;
    color: #e1e8eb
}

.searchbox {
    background: #fff;
    padding: 10px;
    max-width: 900px;
    display: flex;
    gap: 8px;
    margin-top: 35px
}

.searchbox input {
    flex: 1;
    border: 0;
    padding: 15px;
    font-size: 16px
}

.btn {
    display: inline-block;
    padding: 13px 19px;
    border: 1px solid #cfd6da;
    font-weight: 800;
    cursor: pointer;
    background: #fff
}

.btn.dark {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

.section {
    padding: 70px 6%;
    max-width: 1450px;
    margin: auto
}

.section h2 {
    font-size: 36px;
    margin: 0 0 10px
}

.lead {
    color: var(--muted);
    max-width: 800px;
    line-height: 1.6
}

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



.card {
    border: 1px solid var(--line);
    background: #fff;
    transition: .2s
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px #10202b12
}

.card img {
    width: 100%;
    height: 220px;
    object-fit: cover
}

.card .pad {
    padding: 20px
}

/* =========================================================
   PROJECT CARDS
========================================================= */

.project-card {
    text-align: center;
}

.project-card > div {
    padding: 20px;
}

.project-card h3 {
    margin: 0 0 8px;
}

.project-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.project-card {
    text-align: center;
    overflow: hidden;
}

.meta {
    font-size: 12px;
    text-transform: uppercase;
    color: #8a6800;
    font-weight: 800
}

.price {
    font-size: 23px;
    font-weight: 900;
    margin: 12px 0
}

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

.industry {
    padding: 28px;
    background: var(--soft);
    font-weight: 800
}

.industry small {
    display: block;
    color: var(--muted);
    font-weight: normal;
    margin-top: 7px
}

.band {
    max-width: 1380px;
    margin: 60px auto;
    padding: 60px 70px;

    background: var(--ink);
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    border-radius: 24px;

    box-shadow: 0 15px 40px rgba(8, 18, 25, 0.12);
}

.search {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px 30px;

    background: var(--ink);
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    border-radius: 12px;

    box-shadow: 0 15px 40px rgba(8, 18, 25, 0.12);
}

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 25px 0
}

.filters input,
.filters select,
.form input,
.form select,
.form textarea {
    padding: 13px;
    border: 1px solid #cfd6da;
    width: 100%;
    font: inherit
}

.filters input {
    max-width: 450px
}

.filters select {
    width: auto
}

.product {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 45px
}

.product img {
    width: 100%;
    height: 480px;
    object-fit: cover
}

.specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.spec {
    background: var(--soft);
    padding: 15px
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 25px 0
}

.tablewrap {
    overflow: auto
}

.compare {
    width: 100%;
    border-collapse: collapse
}

.compare th,
.compare td {
    padding: 16px;
    border: 1px solid var(--line);
    text-align: left
}

.compare th {
    background: var(--ink);
    color: #fff
}

.form {
    max-width: 850px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.form .full {
    grid-column: 1/-1
}

.notice {
    padding: 15px;
    background: #e8f6ec;
    border-left: 4px solid #2d8b46;
    margin: 20px 0
}

.warning {
    padding: 15px;
    background: #fff4dc;
    border-left: 4px solid var(--yellow);
    margin: 20px 0
}

.admin-wrap {
    max-width: 1250px;
    margin: auto;
    padding: 40px
}

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

.stat {
    padding: 25px;
    background: var(--soft)
}

.stat b {
    display: block;
    font-size: 34px;
    margin-top: 8px
}

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

.admin-table td,
.admin-table th {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px
}

.finder-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 25px
}

.finder-options button {
    padding: 28px;
    text-align: left;
    border: 1px solid var(--line);
    background: white;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer
}

.finder-options button:hover {
    border-color: var(--yellow);
    box-shadow: 0 8px 20px #0001
}

footer {
    background: #081219;
    color: #cbd4d8;
    padding: 55px 7%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 30px
}

footer a {
    display: block;
    margin: 10px 0
}

.copyright {
    background: #050c10;
    color: #78868e;
    padding: 16px 7%;
    font-size: 13px
}

@media(max-width:800px) {
    nav {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 25px;
        flex-direction: column;
        align-items: stretch
    }

    .open {
        display: flex
    }

    .menu {
        display: block
    }

    .hero {
        padding: 70px 7%;
        min-height: 620px
    }

    .searchbox {
        flex-direction: column
    }

    .grid,
    .finder-options {
        grid-template-columns: 1fr
    }

    .product,
    .two {
        grid-template-columns: 1fr
    }

    .product img {
        height: 330px
    }

    .stats {
        grid-template-columns: 1fr
    }

    .form {
        grid-template-columns: 1fr
    }

    .form .full {
        grid-column: auto
    }

    footer {
        grid-template-columns: 1fr
    }

@media(max-width:800px) {

    /* your existing mobile CSS */

    .band {
        display: block;
        margin: 30px 20px;
        padding: 40px 30px;
        border-radius: 18px;
    }

    .band .btn {
        margin-top: 20px;
    }

}

    .band .btn {
        margin-top: 20px
    }
}


@media(max-width:600px) {

    /* your existing mobile CSS */

    .search {
        display: block;
        margin: 10px 5px;
        padding: 20px 10px;
        border-radius: 9px;
    }

    .search .btn {
        margin-top: 10px;
    }

}

    .search .btn {
        margin-top: 10px
    }



/* =========================================================
   ADMIN LOGIN
========================================================= */

.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.admin-login-card {
    width: 100%;
    max-width: 480px;
    padding: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
}

.admin-login-brand {
    margin-bottom: 30px;
}

.admin-login-brand a {
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.admin-login-brand p {
    margin-top: 8px;
}

.admin-login-form {
    display: grid;
    gap: 18px;
}

.admin-login-form label {
    display: grid;
    gap: 8px;
}

.admin-login-form input {
    width: 100%;
}

.error {
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #dc3545;
}

.back-home {
    margin-top: 25px;
}


/* =========================================================
   ADMIN HEADER
========================================================= */

.admin-header {
    border-bottom: 1px solid #e5e5e5;
}

.admin-header-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 18px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-brand {
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logout-div {
    display: flex;
    align-items: center;
}


/* =========================================================
   ADMIN DASHBOARD
========================================================= */

.admin-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 25px 70px;
}

.admin-dashboard-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 35px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    margin-bottom: 30px;
}

.admin-stat-card {
    padding: 25px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

.admin-stat-card span {
    display: block;
}

.admin-stat-card strong {
    display: block;
    font-size: 32px;
    margin: 10px 0;
}

.admin-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 40px;
}

.admin-section {
    margin-top: 30px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    margin-bottom: 20px;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table-wrap th,
.admin-table-wrap td {
    padding: 14px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

.empty-state {
    padding: 35px;
    border: 1px solid #e5e5e5;
    text-align: center;
}

@media (max-width: 768px) {

    .admin-header-inner,
    .admin-dashboard-title,
    .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-user {
        flex-wrap: wrap;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-login-card {
        padding: 25px;
    }

}

#compareNav {
    position: relative;
    transition:
        transform .2s ease,
        color .2s ease,
        background .2s ease;
}

#compareNav.compare-updated {
    color: var(--yellow);
    transform: scale(1.08);
}

#compareHeaderCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    border-radius: 50px;

    background: var(--yellow);
    color: var(--dark);

    font-size: 12px;
    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| CART FEEDBACK
|--------------------------------------------------------------------------
*/

.add-cart-btn.loading {
    opacity: 0.7;
    cursor: wait;
}


.add-cart-btn.added {
    transform: scale(1.03);
}


/*
|--------------------------------------------------------------------------
| CART NAVIGATION UPDATE
|--------------------------------------------------------------------------
*/

#cartNav {
    transition:
        transform .2s ease,
        color .2s ease;
}


#cartNav.cart-updated {
    transform: scale(1.08);
    color: var(--yellow);
}


/*
|--------------------------------------------------------------------------
| CART COUNT
|--------------------------------------------------------------------------
*/

#cartCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 3px;
    border-radius: 999px;
    background: var(--yellow);
    color: #111;
    font-size: 11px;
    font-weight: 800;
}

/* =========================================================
   PROFESSIONAL SHOPPING CART
========================================================= */

.cart-page {
    padding-top: 60px;
    padding-bottom: 80px;
}


.cart-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}


.cart-page-header h1 {
    margin: 8px 0 10px;
    font-size: clamp(36px, 5vw, 52px);
}


.cart-page-header .lead {
    margin: 0;
}


.cart-item-count {
    min-width: 100px;
    padding: 14px 20px;
    text-align: center;
    background: var(--soft);
    border-radius: 999px;
    font-weight: 800;
}


/* =========================================================
   CART LAYOUT
========================================================= */

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


.cart-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}


.cart-items-header h2 {
    margin: 0;
    font-size: 25px;
}


.cart-items-header span {
    color: var(--muted);
    font-weight: 700;
}


/* =========================================================
   CART ITEM
========================================================= */

.cart-items {
    display: grid;
    gap: 18px;
}


.cart-item-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    border: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
    transition: .2s;
}


.cart-item-card:hover {
    box-shadow: 0 12px 30px #10202b10;
}


.cart-item-image {
    display: block;
    background: var(--soft);
}


.cart-item-image img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}


.cart-item-details {
    padding: 24px;
}


.cart-item-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}


.cart-item-top h3 {
    margin: 7px 0 0;
    font-size: 21px;
}


.cart-item-top h3 a:hover {
    color: #a87900;
}


.cart-intent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}


.cart-intent.buy {
    background: #fff4dc;
    color: #8a6800;
}


.cart-intent.rent {
    background: #e8f6ec;
    color: #2d8b46;
}


/* =========================================================
   CART PRICING
========================================================= */

.cart-pricing {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin: 25px 0;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.cart-price {
    display: block;
    font-size: 24px;
    font-weight: 900;
}


.cart-pricing small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}


.cart-line-total {
    text-align: right;
}


.cart-line-total strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
}


/* =========================================================
   QUANTITY CONTROLS
========================================================= */

.cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.quantity-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
}


.quantity-btn {
    width: 42px;
    height: 42px;
    border: 0;
    background: var(--soft);
    font-size: 20px;
    cursor: pointer;
}


.quantity-btn:hover {
    background: var(--yellow);
}


.quantity-control input {
    width: 55px;
    height: 42px;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
    font-weight: 700;
}


.cart-remove {
    color: #b42318;
    font-weight: 800;
}


.cart-remove:hover {
    text-decoration: underline;
}


/* =========================================================
   CART ACTIONS
========================================================= */

.cart-update-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.cart-summary {
    position: sticky;
    top: 100px;
}


.cart-summary-inner {
    padding: 30px;
    border: 1px solid var(--line);
    background: var(--soft);
}


.cart-summary-inner h2 {
    margin: 0 0 25px;
}


.cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}


.cart-summary-total {
    margin-top: 10px;
    padding-top: 22px;
    border-bottom: 0;
}


.cart-summary-total strong {
    font-size: 26px;
}


.cart-summary-note {
    margin: 20px 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}


.cart-checkout {
    width: 100%;
    text-align: center;
    margin-top: 5px;
}


.cart-quote-link {
    display: block;
    margin-top: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}


.cart-quote-link:hover {
    color: #a87900;
}


/* =========================================================
   EMPTY CART
========================================================= */

.cart-empty {
    max-width: 700px;
    margin: 50px auto;
    padding: 70px 40px;
    text-align: center;
    border: 1px solid var(--line);
    background: var(--soft);
}


.cart-empty-icon {
    font-size: 60px;
    margin-bottom: 20px;
}


.cart-empty h2 {
    margin: 0 0 15px;
}


.cart-empty p {
    max-width: 520px;
    margin: auto;
    color: var(--muted);
    line-height: 1.7;
}


.cart-empty-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}


/* =========================================================
   CART RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

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


    .cart-summary {
        position: static;
    }

}


@media (max-width: 700px) {

    .cart-page-header {
        align-items: flex-start;
        flex-direction: column;
    }


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


    .cart-item-image img {
        height: 240px;
        min-height: auto;
    }


    .cart-item-details {
        padding: 20px;
    }


    .cart-item-top {
        flex-direction: column;
        gap: 12px;
    }


    .cart-pricing {
        flex-direction: column;
    }


    .cart-line-total {
        text-align: left;
    }


    .cart-item-actions {
        align-items: flex-start;
        flex-direction: column;
    }


    .cart-update-actions {
        flex-direction: column;
    }


    .cart-update-actions .btn {
        width: 100%;
        text-align: center;
    }


    .cart-empty {
        padding: 45px 20px;
    }


    .cart-empty-actions {
        flex-direction: column;
    }

}

/* =========================================================
   PROFESSIONAL CHECKOUT
========================================================= */

.checkout-section {
    max-width: 1350px;
}


/* =========================================================
   HEADER
========================================================= */

.checkout-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 45px;
}

.checkout-header h1 {
    margin-bottom: 12px;
}

.checkout-header .lead {
    margin-bottom: 0;
}


/* =========================================================
   PROGRESS
========================================================= */

.checkout-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.checkout-progress-step {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #cfd6da;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.checkout-progress-step.active {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #111;
}

.checkout-progress-line {
    width: 28px;
    height: 1px;
    background: #d9e0e4;
}


/* =========================================================
   LAYOUT
========================================================= */

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
    gap: 30px;
    align-items: start;
}

.checkout-main {
    display: grid;
    gap: 25px;
}


/* =========================================================
   CHECKOUT CARD
========================================================= */

.checkout-card,
.checkout-summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px;
}

.checkout-card-header,
.checkout-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--line);
}

.checkout-card-header h2,
.checkout-summary-header h2 {
    font-size: 24px;
    margin: 5px 0 0;
}

.checkout-step-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: #8a6800;
}

.checkout-card-number {
    font-size: 32px;
    font-weight: 900;
    color: #e6ebed;
}


/* =========================================================
   FORM
========================================================= */

.checkout-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.checkout-field {
    display: grid;
    gap: 9px;
}

.checkout-field.full {
    grid-column: 1 / -1;
}

.checkout-field label {
    font-size: 14px;
    font-weight: 800;
}

.checkout-field label span {
    color: #c0392b;
}

.checkout-field input,
.checkout-field textarea {
    width: 100%;
    border: 1px solid #cfd6da;
    border-radius: 8px;
    padding: 14px;
    font: inherit;
    background: #fff;
}

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

.checkout-field input:focus,
.checkout-field textarea:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(247, 181, 0, .12);
}


/* =========================================================
   SUMMARY
========================================================= */

.checkout-summary {
    position: sticky;
    top: 100px;
}

.checkout-item-count {
    background: var(--soft);
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
}

.checkout-items {
    display: grid;
    gap: 18px;
}

.checkout-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: start;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.checkout-item img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--soft);
}

.checkout-item-info h3 {
    font-size: 15px;
    margin: 7px 0 5px;
}

.checkout-item-info p {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--muted);
}

.checkout-intent {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.checkout-intent.buy {
    background: #eaf4ed;
    color: #23733a;
}

.checkout-intent.rent {
    background: #eef3fa;
    color: #315d98;
}

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

.checkout-item-meta span {
    margin: 0 4px;
}

.checkout-item-total {
    white-space: nowrap;
    font-size: 14px;
}


/* =========================================================
   TOTALS
========================================================= */

.checkout-totals {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 15px;
}

.checkout-totals > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: 14px;
}

.checkout-total-row {
    padding-top: 16px;
    margin-top: 5px;
    border-top: 1px solid var(--line);
    color: var(--ink) !important;
}

.checkout-total-row strong {
    font-size: 25px;
    color: var(--ink);
}


/* =========================================================
   SUMMARY NOTE
========================================================= */

.checkout-summary-note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    margin: 22px 0;
    padding: 14px;
    background: var(--soft);
    border-radius: 8px;
}


/* =========================================================
   SUBMIT
========================================================= */

.checkout-submit {
    width: 100%;
    text-align: center;
    padding: 16px;
    border: none;
}

.checkout-back-cart {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

.checkout-back-cart:hover {
    color: var(--ink);
}


/* =========================================================
   SUCCESS
========================================================= */

.checkout-success {
    max-width: 850px;
    margin: 40px auto;
    padding: 45px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    border: 1px solid #cce7d4;
    border-radius: 16px;
    background: #f5fbf7;
}

.checkout-success-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    background: #2d8b46;
    color: #fff;
}

.checkout-success h2 {
    margin: 6px 0 12px;
}

.checkout-success p {
    color: var(--muted);
    line-height: 1.7;
}

.checkout-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


/* =========================================================
   EMPTY CART
========================================================= */

.checkout-empty {
    max-width: 700px;
    margin: 50px auto;
    padding: 55px 30px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.checkout-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.checkout-empty h2 {
    margin-bottom: 10px;
}

.checkout-empty p {
    max-width: 500px;
    margin: 0 auto 25px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .checkout-header {
        display: block;
    }

    .checkout-progress {
        margin-top: 25px;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

}


@media (max-width: 650px) {

    .checkout-section {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .checkout-card,
    .checkout-summary-card {
        padding: 22px;
        border-radius: 12px;
    }

    .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-field.full {
        grid-column: auto;
    }

    .checkout-progress {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .checkout-item {
        grid-template-columns: 60px 1fr;
    }

    .checkout-item img {
        width: 60px;
        height: 60px;
    }

    .checkout-item-total {
        grid-column: 2;
    }

    .checkout-success {
        padding: 30px 22px;
        display: block;
    }

    .checkout-success-icon {
        margin-bottom: 20px;
    }

}


/* =========================================================
   ABOUT PAGE
========================================================= */

.about-hero {
    min-height: 440px;
    display: flex;
    align-items: center;
    padding: 80px 7%;
    background:
        linear-gradient(
            90deg,
            rgba(5, 12, 16, .92),
            rgba(5, 12, 16, .55)
        ),
        url('../images/about.jpg') center/cover;
    color: #fff;
}

.about-hero-content {
    max-width: 850px;
}

.about-hero h1 {
    font-size: clamp(42px, 6vw, 70px);
    line-height: 1.05;
    margin: 18px 0;
}

.about-hero h1 span {
    color: var(--yellow);
}

.about-hero p {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.7;
    color: #dce4e8;
}


/* =========================================================
   ABOUT INTRODUCTION
========================================================= */

.about-introduction {
    padding-top: 90px;
    padding-bottom: 90px;
}

.about-introduction-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.about-introduction h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    margin-top: 15px;
}

.about-introduction-text {
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
}

.about-introduction-text p {
    margin-top: 0;
    margin-bottom: 22px;
}


/* =========================================================
   ABOUT VALUES
========================================================= */

.about-values {
    background: var(--soft);
    padding: 80px 0;
}

.about-section-heading {
    max-width: 750px;
    margin-bottom: 40px;
}

.about-section-heading h2 {
    font-size: clamp(32px, 4vw, 46px);
    margin: 12px 0;
}

.about-section-heading p {
    color: var(--muted);
    line-height: 1.7;
}

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.about-value-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 30px;
    min-height: 290px;
    transition: .2s;
}

.about-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px #10202b12;
}

.about-value-number {
    color: #a87900;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 55px;
}

.about-value-card h3 {
    font-size: 23px;
    margin-bottom: 12px;
}

.about-value-card p {
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}


/* =========================================================
   ABOUT MISSION
========================================================= */

.about-mission {
    padding-top: 90px;
    padding-bottom: 90px;
}

.about-mission-card {
    background: var(--ink);
    color: #fff;
    padding: 55px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 60px;
    align-items: center;
    border-radius: 16px;
}

.about-mission-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    margin: 15px 0 25px;
}

.about-mission-content p {
    color: #cbd5da;
    line-height: 1.7;
    max-width: 750px;
}

.about-mission-highlight {
    border-left: 1px solid #ffffff30;
    padding-left: 40px;
}

.about-mission-highlight strong {
    display: block;
    font-size: 30px;
    color: var(--yellow);
    margin-bottom: 12px;
}

.about-mission-highlight span {
    display: block;
    color: #d1d9dd;
    line-height: 1.6;
}


/* =========================================================
   ABOUT INDUSTRIES
========================================================= */

.about-industries {
    background: #fff;
    padding: 30px 0 90px;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.industry-box {
    border: 1px solid var(--line);
    padding: 25px;
    min-height: 150px;
}

.industry-box strong {
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
}

.industry-box span {
    display: block;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   ABOUT CTA
========================================================= */

.about-cta {
    background: var(--yellow);
    padding: 60px 7%;
}

.about-cta-content {
    max-width: 1300px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.about-cta h2 {
    margin: 10px 0;
    font-size: 34px;
}

.about-cta p {
    margin: 0;
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.about-cta .btn.primary {
    background: var(--ink);
    color: #fff;
}


/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-hero {
    min-height: 390px;
    display: flex;
    align-items: center;
    padding: 80px 7%;
    background:
        linear-gradient(
            90deg,
            rgba(5, 12, 16, .92),
            rgba(5, 12, 16, .55)
        ),
        url('../images/contact.jpg') center/cover;
    color: #fff;
}

.contact-hero-content {
    max-width: 800px;
}

.contact-hero h1 {
    font-size: clamp(42px, 6vw, 68px);
    margin: 18px 0;
}

.contact-hero p {
    color: #dce4e8;
    font-size: 18px;
    line-height: 1.7;
    max-width: 700px;
}


/* =========================================================
   CONTACT LAYOUT
========================================================= */

.contact-section {
    padding-top: 80px;
    padding-bottom: 90px;
}

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

.contact-information h2,
.contact-form-heading h2 {
    font-size: 36px;
    margin: 12px 0;
}

.contact-information > p {
    line-height: 1.7;
    max-width: 550px;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {
    display: grid;
    gap: 25px;
    margin-top: 35px;
}

.contact-detail {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-detail-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #8a6800;
}

.contact-detail span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 5px;
}

.contact-detail strong,
.contact-detail a {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

.contact-detail a:hover {
    color: #a87900;
}

.contact-detail p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}


/* =========================================================
   CONTACT BUSINESS CARD
========================================================= */

.contact-business-card {
    margin-top: 40px;
    padding: 30px;
    background: var(--ink);
    color: #fff;
    border-radius: 12px;
}

.contact-business-card h3 {
    font-size: 22px;
    margin: 10px 0;
}

.contact-business-card p {
    color: #cbd5da;
    line-height: 1.6;
}

.contact-business-card .btn {
    margin-top: 10px;
}


/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 40px;
    background: #fff;
    box-shadow: 0 12px 35px #10202b0d;
}

.contact-form-heading {
    margin-bottom: 30px;
}

.contact-form-heading p {
    color: var(--muted);
    line-height: 1.6;
}

.contact-form {
    display: grid;
    gap: 20px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-field {
    display: grid;
    gap: 8px;
}

.contact-field label {
    font-size: 14px;
    font-weight: 800;
}

.contact-field label span {
    color: #c0392b;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #cfd6da;
    border-radius: 8px;
    font: inherit;
}

.contact-field textarea {
    resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(247, 181, 0, .12);
}

.contact-submit {
    width: 100%;
    padding: 15px;
    border: 0;
}

.contact-form-note {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}


/* =========================================================
   CONTACT SUCCESS
========================================================= */

.contact-success {
    min-height: 400px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 20px 5px;
}

.contact-success-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 50%;
    background: #2d8b46;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 900;
}

.contact-success h2 {
    margin: 10px 0;
}

.contact-success p {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 25px;
}


/* =========================================================
   CONTACT BOTTOM
========================================================= */

.contact-bottom {
    background: var(--soft);
}

.contact-bottom-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.contact-bottom h2 {
    margin: 10px 0;
    font-size: 32px;
}

.contact-bottom p {
    color: var(--muted);
}

.contact-bottom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .about-introduction-grid,
    .about-mission-card,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .about-value-grid,
    .industry-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-mission-highlight {
        border-left: 0;
        border-top: 1px solid #ffffff30;
        padding-left: 0;
        padding-top: 30px;
    }

}


@media (max-width: 700px) {

    .about-hero,
    .contact-hero {
        min-height: 350px;
        padding: 60px 7%;
    }

    .about-introduction-grid {
        gap: 30px;
    }

    .about-value-grid,
    .industry-grid,
    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .about-mission-card {
        padding: 30px;
    }

    .about-cta-content,
    .contact-bottom-grid {
        display: block;
    }

    .about-cta-actions,
    .contact-bottom-actions {
        margin-top: 25px;
    }

    .contact-layout {
        gap: 40px;
    }

    .contact-form-card {
        padding: 25px;
    }

    .contact-success {
        display: block;
    }

    .contact-success-icon {
        margin-bottom: 20px;
    }

}

/* =========================================================
   PROFESSIONAL CATALOGUE / PROJECT FINDER
========================================================= */

.catalog-page,
.project-finder-page {
    padding-top: 65px;
    padding-bottom: 80px;
}


/* ---------------------------------------------------------
   Page Headers
--------------------------------------------------------- */

.catalog-header,
.project-finder-header {
    max-width: 900px;
    margin-bottom: 35px;
}

.catalog-header h1,
.project-finder-header h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.1;
    margin: 12px 0 18px;
}

.catalog-header .lead,
.project-finder-header .lead {
    max-width: 760px;
    font-size: 17px;
}


/* ---------------------------------------------------------
   Results Header
--------------------------------------------------------- */

.search-results-heading,
.catalog-results-heading {
    margin: 45px 0 25px;
    padding: 22px 25px;
    border: 1px solid var(--line);
    background: var(--soft);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.search-results-heading h2,
.catalog-results-heading h2 {
    margin: 8px 0 0;
    font-size: 25px;
}

.search-results-heading strong,
.catalog-results-heading strong {
    color: var(--ink);
}

.result-count {
    flex-shrink: 0;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 800;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Equipment Grid
--------------------------------------------------------- */

.equipment-grid {
    align-items: stretch;
}


/* ---------------------------------------------------------
   Equipment Card
--------------------------------------------------------- */

.equipment-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
}

.equipment-image-wrap {
    position: relative;
    overflow: hidden;
}

.equipment-card img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform .3s ease;
}

.equipment-card:hover img {
    transform: scale(1.035);
}

.equipment-badge {
    position: absolute;
    top: 14px;
    left: 14px;

    padding: 7px 11px;

    background: var(--yellow);
    color: #111;

    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.equipment-content {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.equipment-content h3 {
    font-size: 21px;
    line-height: 1.3;
    margin: 9px 0 15px;
}

.meta {
    font-size: 11px;
    letter-spacing: .6px;
}

.meta-separator {
    margin: 0 4px;
}

.equipment-price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 3px 0 8px;
}

.equipment-price strong {
    font-size: 23px;
    font-weight: 900;
}

.equipment-price span {
    color: var(--muted);
    font-size: 12px;
}

.equipment-rental {
    display: flex;
    align-items: baseline;
    gap: 5px;

    margin-bottom: 20px;

    color: var(--muted);
    font-size: 13px;
}

.equipment-rental strong {
    color: var(--ink);
}


/* ---------------------------------------------------------
   Empty State
--------------------------------------------------------- */

.catalog-empty {
    margin-top: 35px;
    padding: 60px 30px;
}

.empty-state-icon {
    font-size: 42px;
    margin-bottom: 15px;
}

.empty-state h2 {
    margin: 0 0 12px;
}

.empty-state p {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.empty-state-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 25px;
}


/* =========================================================
   PROJECT FINDER
========================================================= */

.project-recommendation {
    margin: 35px 0 45px;
    padding: 30px;

    background: var(--soft);
    border: 1px solid var(--line);
}

.project-recommendation h2 {
    margin: 8px 0 20px;
    font-size: 25px;
}

.project-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-category {
    display: inline-flex;
    align-items: center;

    padding: 10px 14px;

    background: #fff;
    border: 1px solid var(--line);

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .catalog-page,
    .project-finder-page {
        padding-top: 45px;
    }

    .catalog-header h1,
    .project-finder-header h1 {
        font-size: 38px;
    }

    .search-results-heading,
    .catalog-results-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .result-count {
        width: 100%;
        text-align: center;
    }

    .equipment-card img {
        height: 220px;
    }

    .project-recommendation {
        padding: 22px;
    }

}

/* =========================================================
   PROFESSIONAL QUOTE PAGE
========================================================= */

.quote-section {
    max-width: 1350px;
}


/* =========================================================
   QUOTE HEADER
========================================================= */

.quote-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 45px;
}

.quote-header h1 {
    font-size: clamp(38px, 5vw, 58px);
    margin: 10px 0 15px;
}

.quote-header .lead {
    margin-bottom: 0;
}

.quote-header-badge {
    min-width: 280px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}

.quote-header-badge strong {
    display: block;
    font-size: 14px;
    margin-bottom: 7px;
}

.quote-header-badge span {
    color: var(--muted);
    font-size: 12px;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.quote-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .75fr);
    gap: 30px;
    align-items: start;
}

.quote-main {
    display: grid;
    gap: 25px;
}


/* =========================================================
   QUOTE CARDS
========================================================= */

.quote-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px;
}

.quote-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 22px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--line);
}

.quote-card-header h2 {
    margin: 6px 0;
    font-size: 24px;
}

.quote-card-header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.quote-step {
    display: block;
    color: #8a6800;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 900;
}

.quote-card-number {
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    color: #e6ebed;
}


/* =========================================================
   FORM GRID
========================================================= */

.quote-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.quote-field {
    display: grid;
    gap: 9px;
}

.quote-field.full {
    grid-column: 1 / -1;
}

.quote-field label {
    font-size: 14px;
    font-weight: 800;
}

.quote-field label span {
    color: #c0392b;
}

.quote-field input,
.quote-field select,
.quote-field textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #cfd6da;
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

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

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(247, 181, 0, .12);
}


/* =========================================================
   REQUEST TYPES
========================================================= */

.quote-request-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.quote-type-option {
    position: relative;
    cursor: pointer;
}

.quote-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quote-type-content {
    display: block;
    min-height: 100px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    transition: .2s;
}

.quote-type-content strong {
    display: block;
    margin-bottom: 8px;
}

.quote-type-content small {
    display: block;
    line-height: 1.5;
    color: var(--muted);
}

.quote-type-option:hover .quote-type-content {
    border-color: var(--yellow);
    transform: translateY(-2px);
}

.quote-type-option input:checked + .quote-type-content {
    border-color: var(--yellow);
    background: #fffaf0;
    box-shadow: 0 0 0 2px rgba(247, 181, 0, .15);
}


/* =========================================================
   SIDEBAR
========================================================= */

.quote-sidebar {
    position: sticky;
    top: 100px;
}

.quote-summary {
    background: var(--ink);
    color: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 18px 40px rgba(8, 18, 25, .15);
}

.quote-summary-top {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.quote-summary-top .quote-step {
    color: var(--yellow);
}

.quote-summary-top h2 {
    margin: 7px 0 0;
    font-size: 26px;
}


/* =========================================================
   SUMMARY LINES
========================================================= */

.quote-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.quote-summary-line span {
    color: #aebbc1;
    font-size: 13px;
}

.quote-summary-line strong {
    text-align: right;
    max-width: 55%;
    font-size: 13px;
    color: #fff;
}

.quote-summary-divider {
    height: 10px;
}


/* =========================================================
   SUMMARY FEATURES
========================================================= */

.quote-summary-feature {
    display: flex;
    gap: 13px;
    margin-top: 20px;
}

.quote-summary-icon {
    width: 25px;
    height: 25px;
    min-width: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    color: #111;
    font-size: 13px;
    font-weight: 900;
}

.quote-summary-feature strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.quote-summary-feature p {
    margin: 0;
    color: #aebbc1;
    line-height: 1.5;
    font-size: 12px;
}


/* =========================================================
   SUBMIT
========================================================= */

.quote-submit {
    width: 100%;
    border: 0;
    padding: 16px;
    margin-top: 28px;
    text-align: center;
}

.quote-privacy {
    margin: 15px 0 0;
    color: #8d9aa0;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}


/* =========================================================
   SUCCESS
========================================================= */

.quote-success {
    max-width: 850px;
    margin: 40px auto;
    padding: 45px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    border: 1px solid #cce7d4;
    border-radius: 16px;
    background: #f5fbf7;
}

.quote-success-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2d8b46;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}

.quote-success h2 {
    margin: 6px 0 12px;
}

.quote-success p {
    color: var(--muted);
    line-height: 1.7;
}

.quote-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .quote-header {
        display: block;
    }

    .quote-header-badge {
        margin-top: 25px;
    }

    .quote-layout {
        grid-template-columns: 1fr;
    }

    .quote-sidebar {
        position: static;
    }

}


@media (max-width: 650px) {

    .quote-section {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .quote-card,
    .quote-summary {
        padding: 22px;
        border-radius: 12px;
    }

    .quote-form-grid {
        grid-template-columns: 1fr;
    }

    .quote-field.full {
        grid-column: auto;
    }

    .quote-request-types {
        grid-template-columns: 1fr;
    }

    .quote-success {
        display: block;
        padding: 30px 22px;
    }

    .quote-success-icon {
        margin-bottom: 20px;
    }

}

/* =========================================================
   PROFESSIONAL PRODUCT PAGE
========================================================= */

.product-page {
    max-width: 1450px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 30px;
    color: var(--muted);
    font-size: 13px;
}

.product-breadcrumb a {
    font-weight: 700;
}

.product-breadcrumb a:hover {
    color: #a87900;
}

.product-breadcrumb span {
    color: #9aa5ab;
}


/* =========================================================
   MAIN PRODUCT LAYOUT
========================================================= */

.product-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 55px;
    align-items: start;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-gallery {
    position: sticky;
    top: 105px;
}

.product-image-card {
    background: var(--soft);
    border: 1px solid var(--line);
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image-card img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.product-image-note {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 2px;
    color: var(--muted);
    font-size: 12px;
}

.product-image-note span:first-child {
    font-weight: 800;
    color: #8a6800;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-information {
    padding-top: 5px;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.product-meta span {
    padding: 7px 11px;
    background: var(--soft);
    color: #52616a;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.product-title {
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.05;
    margin: 0 0 22px;
    letter-spacing: -1px;
}

.product-description {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 700px;
    margin-bottom: 30px;
}


/* =========================================================
   PRODUCT PRICING
========================================================= */

.product-pricing {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    padding: 25px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 25px;
}

.price-label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 7px;
}

.price-main strong {
    display: block;
    font-size: 36px;
    font-weight: 900;
}

.rental-price {
    padding-left: 35px;
    border-left: 1px solid var(--line);
}

.rental-price strong {
    font-size: 27px;
    font-weight: 900;
}

.rental-price small {
    color: var(--muted);
    margin-left: 4px;
}


/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.product-actions .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-action-buy {
    min-width: 210px;
}


/* =========================================================
   PRODUCT HIGHLIGHTS
========================================================= */

.product-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line);
}

.product-highlight {
    padding: 17px;
    border-right: 1px solid var(--line);
}

.product-highlight:last-child {
    border-right: 0;
}

.product-highlight strong {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.product-highlight span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   PRODUCT DETAILS
========================================================= */

.product-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 45px;
    margin-top: 70px;
    padding-top: 60px;
    border-top: 1px solid var(--line);
}

.product-section-heading {
    margin-bottom: 30px;
}

.product-section-heading h2 {
    font-size: 34px;
    margin: 10px 0;
}

.product-section-heading p {
    color: var(--muted);
    line-height: 1.6;
    max-width: 750px;
}


/* =========================================================
   SPECIFICATION GRID
========================================================= */

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

.product-spec {
    padding: 20px;
    background: var(--soft);
    border: 1px solid transparent;
    min-height: 75px;
}

.product-spec:hover {
    border-color: var(--line);
}

.product-spec span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 7px;
}

.product-spec strong {
    display: block;
    font-size: 15px;
}


/* =========================================================
   PRODUCT SIDEBAR
========================================================= */

.product-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-side-card {
    border: 1px solid var(--line);
    padding: 27px;
    background: #fff;
}

.product-side-card h3 {
    margin: 10px 0 15px;
    font-size: 23px;
}

.product-side-card p {
    color: var(--muted);
    line-height: 1.6;
}

.rental-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.rental-option span {
    color: var(--muted);
    font-size: 14px;
}

.rental-option strong {
    font-size: 19px;
}

.full-width {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.project-quote-card {
    background: var(--soft);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
    padding: 30px;
    background: var(--soft);
    color: var(--muted);
    border: 1px solid var(--line);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.product-bottom-cta {
    margin-top: 70px;
    padding: 45px;
    background: var(--ink);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    border-radius: 12px;
}

.product-bottom-cta h2 {
    margin: 10px 0;
    font-size: 32px;
}

.product-bottom-cta p {
    margin: 0;
    color: #cbd4d8;
    line-height: 1.6;
    max-width: 700px;
}

.product-bottom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.product-bottom-actions .btn {
    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .product-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .product-gallery {
        position: static;
    }

    .product-image-card {
        min-height: 420px;
    }

    .product-image-card img {
        height: 420px;
    }

    .product-details {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .product-title {
        font-size: 38px;
    }

    .product-pricing {
        gap: 20px;
    }

    .rental-price {
        padding-left: 20px;
    }

    .product-highlights {
        grid-template-columns: 1fr;
    }

    .product-highlight {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .product-spec-grid {
        grid-template-columns: 1fr;
    }

    .product-bottom-cta {
        display: block;
        padding: 30px;
    }

    .product-bottom-actions {
        margin-top: 25px;
    }

    .product-bottom-actions .btn {
        width: 100%;
    }

    .product-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-actions .btn {
        width: 100%;
    }

    .product-image-card {
        min-height: 300px;
    }

    .product-image-card img {
        height: 300px;
    }

    .product-image-note {
        display: block;
    }

    .product-image-note span {
        display: block;
        margin-bottom: 5px;
    }

}


/* ==========================================================================
   EQUIPMENT DETAIL PAGE
   Global Equipment Marketplace
   ========================================================================== */


/* ==========================================================================
   PAGE CONTAINER
   ========================================================================== */

.equipment-detail-page,
.detail {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 50px 0 80px;
}


/* ==========================================================================
   MAIN DETAIL LAYOUT
   ========================================================================== */

.detail {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
    gap: 48px;
    align-items: start;
}


/* ==========================================================================
   IMAGE SECTION
   ========================================================================== */

.detail > div:first-child {
    position: sticky;
    top: 100px;
}


.detail > div:first-child img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 480px;
    max-height: 680px;
    object-fit: cover;
    border-radius: 18px;
    background: #f3f5f7;
    border: 1px solid #e4e7eb;
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.08);
}


/* ==========================================================================
   IMAGE PLACEHOLDER
   ========================================================================== */

.equipment-image-placeholder {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eef2f6
        );
    border: 1px solid #e4e7eb;
    color: #64748b;
    font-size: 16px;
}


/* ==========================================================================
   EQUIPMENT INFORMATION
   ========================================================================== */

.detail > div:last-child {
    padding: 10px 0;
}


/* ==========================================================================
   CATEGORY / META INFORMATION
   ========================================================================== */

.detail > div:last-child > p:first-child {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eef4f8;
    color: #425466;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ==========================================================================
   EQUIPMENT TITLE
   ========================================================================== */

.detail h1 {
    margin: 0 0 24px;
    color: #14212b;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.035em;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.detail h1 + p {
    margin: 0;
    padding-bottom: 28px;
    color: #5d6b76;
    font-size: 16px;
    line-height: 1.8;
    border-bottom: 1px solid #e7ebee;
}


/* ==========================================================================
   PRICE
   ========================================================================== */

.detail h2 {
    margin: 28px 0;
    color: #14212b;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}


.detail h2::before {
    content: "Purchase Price";
    display: block;
    margin-bottom: 8px;
    color: #71808c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}


.actions form {
    display: contents;
}


.actions .btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


/* Primary Button */

.actions .btn:not(.secondary) {
    background: #14212b;
    color: #ffffff;
}


.actions .btn:not(.secondary):hover {
    background: #243746;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 10px 24px rgba(20, 33, 43, 0.18);
}


/* Secondary Button */

.actions .btn.secondary {
    background: #ffffff;
    color: #14212b;
    border-color: #d8dee3;
}


.actions .btn.secondary:hover {
    background: #f5f7f8;
    border-color: #b8c2ca;
    transform: translateY(-2px);
}


/* Add To Cart Button */

.actions form .btn {
    background: #e9eef1;
    color: #14212b;
    border-color: #dbe2e6;
}


.actions form .btn:hover {
    background: #dce5e9;
    transform: translateY(-2px);
}


/* ==========================================================================
   ADDITIONAL EQUIPMENT DETAILS
   ========================================================================== */

.equipment-details {
    width: min(1200px, calc(100% - 40px));
    margin: 70px auto 0;
    padding-top: 60px;
    border-top: 1px solid #e5e9ec;
}


.equipment-details-header {
    max-width: 720px;
    margin-bottom: 36px;
}


.equipment-details-header .eyebrow {
    display: block;
    margin-bottom: 10px;
}


.equipment-details-header h2 {
    margin: 0 0 14px;
    color: #14212b;
    font-size: 32px;
    font-weight: 800;
}


.equipment-details-header p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


/* ==========================================================================
   SPECIFICATION GRID
   ========================================================================== */

.specifications-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


.specification-item {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e9ec;
    border-radius: 12px;
}


.specification-item span {
    display: block;
    margin-bottom: 7px;
    color: #7a8791;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.specification-item strong {
    color: #14212b;
    font-size: 16px;
}


/* ==========================================================================
   EQUIPMENT INFORMATION CARD
   ========================================================================== */

.equipment-info-card {
    margin-top: 28px;
    padding: 28px;
    border-radius: 16px;
    background: #f7f9fa;
    border: 1px solid #e4e9ec;
}


.equipment-info-card h3 {
    margin: 0 0 12px;
    color: #14212b;
    font-size: 20px;
}


.equipment-info-card p {
    margin: 0;
    color: #65727c;
    line-height: 1.7;
}


/* ==========================================================================
   PURCHASE / RENTAL OPTIONS
   ========================================================================== */

.purchase-rental-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}


.purchase-rental-card {
    padding: 26px;
    border: 1px solid #e3e8eb;
    border-radius: 16px;
    background: #ffffff;
}


.purchase-rental-card small {
    display: block;
    margin-bottom: 10px;
    color: #7a8791;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.purchase-rental-card strong {
    display: block;
    color: #14212b;
    font-size: 28px;
    font-weight: 800;
}


.purchase-rental-card p {
    margin: 10px 0 0;
    color: #66747e;
    line-height: 1.6;
}


/* ==========================================================================
   TRUST / MARKETPLACE INFORMATION
   ========================================================================== */

.equipment-trust {
    margin-top: 60px;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    background: #14212b;
    border-radius: 18px;
    color: #ffffff;
}


.equipment-trust-item {
    padding-right: 20px;
}


.equipment-trust-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}


.equipment-trust-item strong {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
}


.equipment-trust-item span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.detail hr {
    height: 1px;
    margin: 30px 0;
    border: 0;
    background: #e5e9ec;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .detail {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .detail > div:first-child {
        position: static;
    }


    .detail > div:first-child img {
        min-height: 400px;
        max-height: 600px;
    }


    .equipment-trust {
        grid-template-columns: 1fr;
    }


    .equipment-trust-item {
        padding: 0 0 22px;
    }


    .equipment-trust-item:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .equipment-detail-page,
    .detail {
        width: min(100% - 28px, 1200px);
        padding-top: 30px;
        padding-bottom: 50px;
    }


    .detail {
        gap: 25px;
    }


    .detail > div:first-child img {
        min-height: 280px;
        max-height: 440px;
        border-radius: 14px;
    }


    .detail h1 {
        font-size: 34px;
    }


    .detail h2 {
        font-size: 28px;
    }


    .detail h1 + p {
        font-size: 15px;
    }


    .actions {
        flex-direction: column;
    }


    .actions .btn {
        width: 100%;
    }


    .actions form {
        display: block;
        width: 100%;
    }


    .actions form .btn {
        width: 100%;
    }


    .specifications-grid,
    .purchase-rental-grid {
        grid-template-columns: 1fr;
    }


    .equipment-details {
        width: min(100% - 28px, 1200px);
        margin-top: 50px;
        padding-top: 40px;
    }


    .equipment-trust {
        margin-top: 40px;
        padding: 28px 22px;
        border-radius: 14px;
    }

}


/* ==========================================================================
   SMALL MOBILE DEVICES
   ========================================================================== */

@media (max-width: 420px) {

    .detail h1 {
        font-size: 30px;
    }


    .detail > div:first-child img {
        min-height: 230px;
    }


    .detail h2 {
        font-size: 25px;
    }


    .actions .btn {
        font-size: 13px;
        padding: 12px 16px;
    }

}