```css
/* =========================================================
   TOP RANK INDUSTRIES
   INQUIRY BASKET
   ========================================================= */


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

.tr-basket-page {
    width:100%;
    padding-top:140px!important;
    background:#fff;
    color:var(--tr-black);
}


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

.tr-basket-hero {
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            120deg,
            #f5f6f7 0%,
            #fff 55%,
            #eef0f2 100%
        );
    border-bottom:1px solid var(--tr-line);
}

.tr-basket-hero-inner {
    min-height:300px;

    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.8fr);

    align-items:center;

    position:relative;
}


/* =========================================================
   HERO BACKGROUND LINES
   ========================================================= */

.tr-basket-hero:after {
    content:"";

    position:absolute;

    top:-180px;
    right:24%;

    width:380px;
    height:600px;

    background:
        linear-gradient(
            135deg,
            transparent 48%,
            rgba(9,12,16,.035) 49%,
            rgba(9,12,16,.035) 52%,
            transparent 53%
        );

    transform:rotate(12deg);

    pointer-events:none;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.tr-basket-hero-content {
    position:relative;
    z-index:3;
    padding:35px 0;
}

.tr-basket-breadcrumb {
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:25px;

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

.tr-basket-breadcrumb a {
    transition:
        color .2s ease;
}

.tr-basket-breadcrumb a:hover {
    color:var(--tr-red);
}

.tr-basket-breadcrumb span {
    color:#aeb4ba;
}

.tr-basket-breadcrumb strong {
    color:var(--tr-black);
    font-weight:700;
}


.tr-basket-line {
    width:53px;
    height:3px;

    margin-bottom:17px;

    background:var(--tr-red);
}


.tr-basket-hero h1 {
    margin:0 0 11px;

    font-size:52px;
    line-height:1.02;

    letter-spacing:-2.2px;

    font-weight:800;

    color:var(--tr-black);
}


.tr-basket-hero p {
    max-width:560px;

    margin:0;

    color:var(--tr-muted);

    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.tr-basket-hero-visual {
    position:relative;

    height:300px;

    overflow:hidden;
}


.tr-basket-hero-shape {
    position:absolute;

    width:390px;
    height:390px;

    right:30px;
    top:-50px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #252a2f 0%,
            #090c10 68%,
            #030405 100%
        );

    box-shadow:
        -25px 30px 80px rgba(9,12,16,.20);
}


.tr-basket-hero-shape:before,
.tr-basket-hero-shape:after {
    content:"";

    position:absolute;

    border-radius:50%;

    border:14px solid var(--tr-red);

    opacity:.9;
}


.tr-basket-hero-shape:before {
    width:170px;
    height:170px;

    left:45px;
    top:45px;
}


.tr-basket-hero-shape:after {
    width:110px;
    height:110px;

    right:55px;
    bottom:50px;

    border-width:10px;
}


.tr-basket-hero-text {
    position:absolute;

    right:0;
    top:72px;

    z-index:2;

    color:#4d5359;

    font-size:31px;
    line-height:.95;

    font-weight:900;

    letter-spacing:-1px;

    font-style:italic;
}


.tr-basket-hero-text:after {
    content:"";

    display:block;

    width:48px;
    height:3px;

    margin-top:17px;

    background:var(--tr-red);
}


.tr-basket-hero-text span {
    color:#1b1f23;
}


/* =========================================================
   BASKET SECTION
   ========================================================= */

.tr-basket-section {
    padding:55px 0 85px;
    background:#f7f8f9;
}


/* =========================================================
   BASKET CARD
   ========================================================= */

.tr-basket-card {
    background:#fff;

    border:1px solid var(--tr-line);

    box-shadow:
        0 15px 45px rgba(9,12,16,.045);
}


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

.tr-basket-table-head {
    min-height:55px;

    display:grid;

    grid-template-columns:
        28%
        36%
        25%
        11%;

    align-items:center;

    padding:0 25px;

    border-bottom:1px solid var(--tr-line);

    color:#5d656d;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
    text-transform:uppercase;
}


.tr-basket-col-product {
    min-width:0;
}


.tr-basket-col-details {
    min-width:0;
}


.tr-basket-col-qty {
    min-width:0;
}


.tr-basket-col-action {
    min-width:0;

    text-align:center;
}


/* =========================================================
   PRODUCT ROW
   ========================================================= */

.tr-basket-row {
    min-height:155px;

    display:grid;

    grid-template-columns:
        28%
        36%
        25%
        11%;

    align-items:center;

    padding:15px 25px;

    border-bottom:1px solid var(--tr-line);

    transition:
        background .2s ease;
}


.tr-basket-row:hover {
    background:#fcfcfc;
}


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

.tr-basket-product {
    display:flex;
    align-items:center;
}


.tr-basket-image {
    width:150px;
    height:125px;

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

    background:#f5f6f7;

    overflow:hidden;
}


.tr-basket-image img {
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    transition:
        transform .4s ease;
}


.tr-basket-row:hover
.tr-basket-image img {
    transform:scale(1.04);
}


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

.tr-basket-product-details {
    padding-right:25px;
}


.tr-basket-product-details h2 {
    margin:0 0 8px;

    color:var(--tr-black);

    font-size:19px;
    line-height:1.25;

    font-weight:800;

    letter-spacing:-.3px;
}


.tr-basket-art {
    margin-bottom:13px;

    color:var(--tr-muted);

    font-size:12px;
}


.tr-basket-art strong {
    color:#4c545b;
}


.tr-basket-info {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}


.tr-basket-info span {
    padding:5px 9px;

    background:#f4f5f6;

    color:#697179;

    font-size:9px;
    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;
}


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

.tr-basket-update-form {
    display:flex;
    align-items:center;
    gap:10px;
}


.tr-basket-qty-control {
    height:46px;

    display:flex;

    border:1px solid var(--tr-line);

    background:#fff;
}


.tr-basket-qty-control button {
    width:39px;

    padding:0;

    border:0;

    background:#fff;

    color:var(--tr-black);

    font-size:19px;

    cursor:pointer;

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


.tr-basket-qty-control button:hover {
    background:var(--tr-soft);
    color:var(--tr-red);
}


.tr-basket-qty {
    width:58px;

    padding:0;

    border:0;

    border-left:1px solid var(--tr-line);
    border-right:1px solid var(--tr-line);

    outline:0;

    text-align:center;

    color:var(--tr-black);

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


.tr-basket-qty::-webkit-outer-spin-button,
.tr-basket-qty::-webkit-inner-spin-button {
    margin:0;

    -webkit-appearance:none;
}


.tr-basket-qty[type=number] {
    -moz-appearance:textfield;
}


/* =========================================================
   UPDATE
   ========================================================= */

.tr-basket-update-btn {
    min-height:46px;

    padding:0 13px;

    border:1px solid var(--tr-black);

    background:#fff;

    color:var(--tr-black);

    font-size:9px;
    font-weight:800;

    letter-spacing:.5px;

    text-transform:uppercase;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.tr-basket-update-btn:hover {
    background:var(--tr-black);
    color:#fff;
}


/* =========================================================
   DELETE
   ========================================================= */

.tr-basket-delete {
    position:relative;

    width:43px;
    height:43px;

    margin:0 auto;

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

    border:1px solid transparent;

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


.tr-basket-delete:hover {
    background:#fff4f4;
    border-color:#ffd7d8;
}


/* Trash can */

.tr-basket-delete:before {
    content:"";

    width:13px;
    height:16px;

    border:2px solid var(--tr-black);

    border-radius:1px;

    transition:
        border-color .2s ease;
}


.tr-basket-delete:after {
    content:"";

    position:absolute;

    width:17px;
    height:2px;

    top:11px;

    background:var(--tr-black);

    transition:
        background .2s ease;
}


.tr-basket-delete span:before {
    content:"";

    position:absolute;

    width:7px;
    height:2px;

    top:7px;

    background:var(--tr-black);

    transition:
        background .2s ease;
}


.tr-basket-delete:hover:before {
    border-color:var(--tr-red);
}


.tr-basket-delete:hover:after,
.tr-basket-delete:hover span:before {
    background:var(--tr-red);
}


/* =========================================================
   BASKET FOOTER
   ========================================================= */

.tr-basket-footer {
    min-height:95px;

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

    gap:25px;

    padding:20px 25px;
}


.tr-basket-continue {
    display:flex;
    align-items:center;
    gap:12px;

    color:var(--tr-black);

    font-size:13px;
    font-weight:700;

    transition:
        color .2s ease;
}


.tr-basket-continue:hover {
    color:var(--tr-red);
}


.tr-basket-back-arrow {
    font-size:22px;
    font-weight:400;

    transition:
        transform .25s ease;
}


.tr-basket-continue:hover
.tr-basket-back-arrow {
    transform:translateX(-4px);
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.tr-basket-actions {
    display:flex;
    align-items:center;
    gap:10px;
}


.tr-basket-outline-btn,
.tr-basket-quote-btn {
    min-height:52px;

    padding:0 20px;

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

    gap:25px;

    border-radius:3px;

    font-size:10px;
    font-weight:800;

    letter-spacing:.6px;

    text-transform:uppercase;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.tr-basket-outline-btn {
    min-width:170px;

    border:1px solid var(--tr-black);

    background:#fff;

    color:var(--tr-black);
}


.tr-basket-outline-btn:hover {
    background:var(--tr-black);
    color:#fff;

    transform:translateY(-2px);
}


.tr-basket-outline-btn b,
.tr-basket-quote-btn b {
    font-size:19px;
    font-weight:400;

    transition:
        transform .25s ease;
}


.tr-basket-outline-btn:hover b,
.tr-basket-quote-btn:hover b {
    transform:translateX(5px);
}


.tr-basket-quote-btn {
    min-width:210px;

    border:1px solid var(--tr-red);

    background:var(--tr-red);

    color:#fff;
}


.tr-basket-quote-btn:hover {
    background:var(--tr-black);

    border-color:var(--tr-black);

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(9,12,16,.18);
}


/* =========================================================
   EMPTY BASKET
   ========================================================= */

.tr-basket-empty {
    min-height:400px;

    padding:70px 25px;

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

    flex-direction:column;

    background:#fff;

    border:1px solid var(--tr-line);

    text-align:center;

    box-shadow:
        0 15px 45px rgba(9,12,16,.045);
}


.tr-basket-empty-icon {
    width:58px;
    height:58px;

    margin-bottom:20px;

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

    border-radius:50%;

    background:var(--tr-red);

    color:#fff;

    font-size:27px;
}


.tr-basket-empty > span {
    color:var(--tr-red);

    font-size:10px;
    font-weight:800;

    letter-spacing:2px;
}


.tr-basket-empty h2 {
    margin:12px 0 8px;

    font-size:32px;
    line-height:1.1;

    letter-spacing:-1px;
}


.tr-basket-empty p {
    max-width:470px;

    margin:0 0 25px;

    color:var(--tr-muted);

    font-size:14px;
    line-height:1.7;
}


.tr-basket-empty-btn {
    min-height:50px;

    padding:0 20px;

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

    gap:25px;

    background:var(--tr-red);

    color:#fff;

    font-size:10px;
    font-weight:800;

    letter-spacing:.6px;

    text-transform:uppercase;

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


.tr-basket-empty-btn b {
    font-size:19px;
    font-weight:400;

    transition:
        transform .25s ease;
}


.tr-basket-empty-btn:hover {
    background:var(--tr-black);

    transform:translateY(-2px);
}


.tr-basket-empty-btn:hover b {
    transform:translateX(5px);
}


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

@media (max-width:1100px) {

    .tr-basket-hero-inner {
        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,.7fr);
    }


    .tr-basket-hero h1 {
        font-size:45px;
    }


    .tr-basket-hero-text {
        right:15px;
        font-size:25px;
    }


    .tr-basket-hero-shape {
        width:320px;
        height:320px;
        right:15px;
        top:-20px;
    }


    .tr-basket-table-head,
    .tr-basket-row {
        grid-template-columns:
            24%
            37%
            28%
            11%;
    }


    .tr-basket-image {
        width:125px;
        height:110px;
    }


    .tr-basket-update-form {
        flex-direction:column;
        align-items:flex-start;
    }


    .tr-basket-update-btn {
        min-height:38px;
    }

}


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

@media (max-width:767px) {

    .tr-basket-page {
        padding-top:68px;
    }


    /* Hero */

    .tr-basket-hero-inner {
        min-height:350px;

        display:block;
    }


    .tr-basket-hero-content {
        padding:28px 0 35px;
    }


    .tr-basket-hero h1 {
        font-size:38px;
        letter-spacing:-1.4px;
    }


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


    .tr-basket-hero-visual {
        display:none;
    }


    /* Section */

    .tr-basket-section {
        padding:25px 0 55px;
    }


    /* Table */

    .tr-basket-table-head {
        display:none;
    }


    .tr-basket-card {
        border:0;
        background:transparent;
        box-shadow:none;
    }


    .tr-basket-row {
        min-height:0;

        display:grid;

        grid-template-columns:
            95px
            minmax(0,1fr);

        gap:18px;

        padding:18px;

        margin-bottom:12px;

        background:#fff;

        border:1px solid var(--tr-line);

        box-shadow:
            0 8px 25px rgba(9,12,16,.04);
    }


    .tr-basket-col-product {
        grid-column:1;
        grid-row:1 / span 3;
    }


    .tr-basket-col-details {
        grid-column:2;
        grid-row:1;
    }


    .tr-basket-col-qty {
        grid-column:2;
        grid-row:2;
    }


    .tr-basket-col-action {
        grid-column:2;
        grid-row:3;

        text-align:left;
    }


    .tr-basket-image {
        width:95px;
        height:105px;
    }


    .tr-basket-product-details {
        padding-right:30px;
    }


    .tr-basket-product-details h2 {
        font-size:16px;
    }


    .tr-basket-info {
        display:none;
    }


    .tr-basket-update-form {
        flex-direction:row;
        align-items:center;
    }


    .tr-basket-delete {
        margin:0;
        width:38px;
        height:38px;
    }


    /* Footer */

    .tr-basket-footer {
        padding:20px 0;

        flex-direction:column;
        align-items:stretch;

        gap:20px;
    }


    .tr-basket-continue {
        display:none;
    }


    .tr-basket-actions {
        width:100%;

        display:flex;
        flex-direction:column;

        gap:10px;
    }


    .tr-basket-outline-btn,
    .tr-basket-quote-btn {
        width:100%;
    }


    .tr-basket-outline-btn {
        justify-content:space-between;
    }


    .tr-basket-quote-btn {
        justify-content:space-between;
    }

}


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

@media (max-width:480px) {

    .tr-basket-hero h1 {
        font-size:33px;
    }


    .tr-basket-row {
        grid-template-columns:
            78px
            minmax(0,1fr);

        gap:14px;

        padding:14px;
    }


    .tr-basket-image {
        width:78px;
        height:90px;
    }


    .tr-basket-product-details h2 {
        font-size:15px;
    }


    .tr-basket-art {
        font-size:11px;
    }


    .tr-basket-qty-control {
        height:43px;
    }


    .tr-basket-qty-control button {
        width:35px;
    }


    .tr-basket-qty {
        width:48px;
    }


    .tr-basket-update-btn {
        min-height:43px;
    }


    .tr-basket-empty {
        min-height:350px;
        padding:50px 20px;
    }


    .tr-basket-empty h2 {
        font-size:27px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .tr-basket-page *,
    .tr-basket-page *:before,
    .tr-basket-page *:after {
        transition:none !important;
        animation:none !important;
    }

}
```
/* =========================================================
   BUTTON ARROW — SHOW ONLY ON HOVER
   ========================================================= */

.tr-basket-outline-btn b,
.tr-basket-quote-btn b,
.tr-basket-empty-btn b {
    opacity:0;
    visibility:hidden;
    transform:translateX(8px);
    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s ease;
}

.tr-basket-outline-btn:hover b,
.tr-basket-quote-btn:hover b,
.tr-basket-empty-btn:hover b {
    opacity:1;
    visibility:visible;
    transform:translateX(5px);
}


/* UPDATE BUTTON — ARROW ON HOVER */

.tr-basket-update-btn {
    position:relative;
    padding-right:40px;
}

.tr-basket-update-btn:after {
    content:"↗";
    position:absolute;
    right:13px;
    top:50%;
    font-size:18px;
    font-weight:400;
    line-height:1;
    opacity:0;
    visibility:hidden;
    transform:translate(8px,-50%);
    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s ease;
}

.tr-basket-update-btn:hover:after {
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%);
}