/* =========================================================
   TOP RANK INDUSTRIES
   PRODUCT DETAIL PAGE
   ========================================================= */

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

.tr-product-page *,
.tr-product-page input,
.tr-product-page button,
.tr-product-page textarea,
.tr-product-page select {

}

.tr-product-page img {
    max-width:100%;
}


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

.tr-product-breadcrumb {
    background:#fff;
    border-bottom:1px solid var(--tr-line);
}

.tr-product-breadcrumb .tr-wrap {
    min-height:58px;
    display:flex;
    align-items:center;
    gap:11px;
    font-size:12px;
    color:var(--tr-muted);
    overflow:hidden;
}

.tr-product-breadcrumb a {
    flex:0 0 auto;
    transition:color .2s ease;
        color:var(--tr-black);
}

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

.tr-product-breadcrumb span {
    flex:0 0 auto;
    color:#aeb4ba;
}

.tr-product-breadcrumb strong {
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:var(--tr-black);
    font-weight:700;
}


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

.tr-product-hero {
    padding:65px 0 80px;
    background:
        linear-gradient(
            180deg,
            #f8f9fa 0%,
            #fff 100%
        );
}

.tr-product-grid {
    display:grid;
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(0,.92fr);
    gap:70px;
    align-items:center;
}


/* =========================================================
   PRODUCT GALLERY
   ========================================================= */

.tr-product-gallery {
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:18px;
    min-width:0;
}

.tr-product-thumbs {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.tr-thumb {
    position:relative;
    width:82px;
    height:82px;
    padding:6px;
    border:1px solid var(--tr-line);
    background:#fff;
    cursor:pointer;
    overflow:hidden;
    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.tr-thumb:before {
    content:"";
    position:absolute;
    left:-1px;
    top:0;
    bottom:0;
    width:3px;
    background:var(--tr-red);
    transform:scaleY(0);
    transition:transform .25s ease;
}

.tr-thumb:hover {
    border-color:#b8bec3;
    transform:translateY(-2px);
}

.tr-thumb.active {
    border-color:var(--tr-red);
    box-shadow:
        0 8px 25px rgba(9,12,16,.06);
}

.tr-thumb.active:before {
    transform:scaleY(1);
}

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


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.tr-product-main-image {
    position:relative;
    min-height:590px;
    background:#fff;
    border:1px solid var(--tr-line);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 18px 55px rgba(9,12,16,.055);
}

.tr-product-main-image:after {
    content:"";
    position:absolute;
    right:-90px;
    bottom:-110px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(230,41,48,.08) 0%,
            rgba(230,41,48,0) 70%
        );
    pointer-events:none;
}

.tr-product-main-image a {
    width:100%;
    height:100%;
    min-height:590px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.tr-product-main-image img {
    display:block;
    width:100%;
    height:100%;
    max-height:590px;
    object-fit:contain;
    transition:
        transform .6s cubic-bezier(.22,.61,.36,1);
}

.tr-product-main-image:hover img {
    transform:scale(1.035);
}


/* =========================================================
   IMAGE EXPAND
   ========================================================= */

.tr-image-expand {
    position:absolute;
    right:20px;
    bottom:20px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--tr-line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    color:var(--tr-black);
    z-index:2;
    box-shadow:
        0 8px 25px rgba(9,12,16,.08);
    pointer-events:none;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.tr-product-main-image:hover .tr-image-expand {
    background:var(--tr-red);
    color:#fff;
    transform:rotate(5deg);
}


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

.tr-product-info {
    min-width:0;
}

.tr-product-label {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--tr-red);
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.tr-product-label:before {
    content:"";
    width:25px;
    height:2px;
    background:var(--tr-red);
}

.tr-product-info h1 {
    margin:14px 0 12px;
    max-width:650px;
    font-size:54px;
    line-height:1.02;
    letter-spacing:-2.3px;
    font-weight:800;
    color:var(--tr-black);
}

.tr-product-code {
    display:inline-block;
    margin-bottom:25px;
    font-size:12px;
    font-weight:700;
    color:var(--tr-muted);
    letter-spacing:.3px;
}

.tr-product-short-description {
    margin-bottom:32px;
    max-width:620px;
    color:#5d656d;
    font-size:15px;
    line-height:1.8;
}

.tr-product-short-description p {
    margin-top:0;
    margin-bottom:12px;
}

.tr-product-short-description p:last-child {
    margin-bottom:0;
}


/* =========================================================
   PRODUCT META
   ========================================================= */

.tr-product-meta {
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    margin-bottom:27px;
    border-top:1px solid var(--tr-line);
    border-bottom:1px solid var(--tr-line);
}

.tr-meta-item {
    min-width:0;
    padding:18px 15px;
    border-right:1px solid var(--tr-line);
}

.tr-meta-item:first-child {
    padding-left:0;
}

.tr-meta-item:last-child {
    border-right:0;
}

.tr-meta-item span {
    display:block;
    margin-bottom:7px;
    color:var(--tr-muted);
    font-size:9px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.tr-meta-item strong {
    display:block;
    color:var(--tr-black);
    font-size:12px;
    line-height:1.4;
}


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

.tr-product-actions {
    display:flex;
    align-items:flex-end;
    gap:14px;
    width:100%;
}

.tr-qty-box {
    flex:0 0 auto;
}

.tr-qty-box label {
    display:block;
    margin-bottom:7px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.tr-qty-control {
    display:flex;
    height:52px;
    background:#fff;
    border:1px solid var(--tr-line);
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.tr-qty-control:focus-within {
    border-color:var(--tr-red);
    box-shadow:
        0 0 0 3px rgba(230,41,48,.08);
}

.tr-qty-control button {
    width:40px;
    padding:0;
    border:0;
    background:#fff;
    color:var(--tr-black);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease;
}

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

.tr-qty-control input {
    width:56px;
    padding:0;
    border:0;
    border-left:1px solid var(--tr-line);
    border-right:1px solid var(--tr-line);
    background:#fff;
    color:var(--tr-black);
    text-align:center;
    font-size:13px;
    font-weight:700;
    outline:0;
}

.tr-qty-control input::-webkit-outer-spin-button,
.tr-qty-control input::-webkit-inner-spin-button {
    margin:0;
    -webkit-appearance:none;
}

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


/* =========================================================
   TWO BUTTONS
   ========================================================= */

/* =========================================================
   PRODUCT BUTTONS
   ========================================================= */

.tr-product-buttons {
    flex:1;
    min-width:0;
    display:flex;
    gap:10px;
}


/* Common */

.tr-product-basket-btn,
.tr-product-quote-btn {
    position:relative;

    flex:1;
    min-width:0;
    min-height:52px;

    padding:0 18px;

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

    border:0;
    border-radius:4px;

    color:#fff;

    font-size:10px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;

    cursor:pointer;
    overflow:hidden;

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


/* =========================================================
   ARROW
   Hidden by default
   ========================================================= */

.tr-product-basket-btn::after,
.tr-product-quote-btn::after {

    content:"↗";

    position:absolute;

    right:18px;
    top:50%;

    font-size:19px;
    font-weight:400;
    line-height:1;

    opacity:0;

    transform:
        translate(8px,-50%);

    transition:
        opacity .25s ease,
        transform .3s ease;
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

.tr-product-basket-btn span,
.tr-product-quote-btn span {

    position:relative;

    z-index:2;

    transition:
        transform .3s ease;
}


/* =========================================================
   ADD TO BASKET
   ========================================================= */

.tr-product-basket-btn {

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

.tr-product-basket-btn:hover {

    background:var(--tr-black);

    transform:translateY(-2px);

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


/* Show arrow */

.tr-product-basket-btn:hover::after {

    opacity:1;

    transform:
        translate(0,-50%);
}


/* Move text slightly left */

.tr-product-basket-btn:hover span {

    transform:translateX(-4px);
}


/* =========================================================
   REQUEST QUOTE
   ========================================================= */

.tr-product-quote-btn {

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

.tr-product-quote-btn:hover {

    background:var(--tr-red);

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(230,41,48,.20);
}


/* Show arrow */

.tr-product-quote-btn:hover::after {

    opacity:1;

    transform:
        translate(0,-50%);
}


/* Move text slightly left */

.tr-product-quote-btn:hover span {

    transform:translateX(-4px);
}

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

.tr-product-description-section {
    padding:105px 0;
    background:#fff;
    border-top:1px solid var(--tr-line);
}

.tr-description-layout {
    display:grid;
    grid-template-columns:
        minmax(260px,.7fr)
        minmax(0,1.3fr);
    gap:90px;
    align-items:start;
}

.tr-section-eyebrow {
    display:block;
    color:var(--tr-red);
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.tr-description-heading h2 {
    margin:13px 0 0;
    font-size:45px;
    line-height:1.04;
    letter-spacing:-1.6px;
    font-weight:800;
}

.tr-description-content {
    max-width:760px;
    padding-top:3px;
    color:#596169;
    font-size:16px;
    line-height:1.9;
}

.tr-description-content p {
    margin-top:0;
    margin-bottom:20px;
}

.tr-description-content p:last-child {
    margin-bottom:0;
}

.tr-description-content strong,
.tr-description-content b {
    color:var(--tr-black);
}

.tr-description-content ul,
.tr-description-content ol {
    padding-left:22px;
    margin-top:18px;
    margin-bottom:20px;
}

.tr-description-content li {
    margin-bottom:8px;
}


/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

.tr-related-products {
    padding:100px 0 110px;
    background:var(--tr-soft);
    border-top:1px solid var(--tr-line);
}

.tr-related-top {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:38px;
}

.tr-related-top h2 {
    margin:11px 0 0;
    font-size:44px;
    line-height:1;
    letter-spacing:-1.7px;
    font-weight:800;
}

.tr-related-grid {
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:20px;
}


/* =========================================================
   RELATED CARD
   ========================================================= */

.tr-related-card {
    display:block;
    min-width:0;
    background:#fff;
    border:1px solid var(--tr-line);
    overflow:hidden;
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

.tr-related-card:hover {
    transform:translateY(-7px);
    border-color:#d4d8dc;
    box-shadow:
        0 20px 45px rgba(9,12,16,.09);
}


/* Image */

.tr-related-image {
    position:relative;
    height:300px;
    background:#f8f9fa;
    overflow:hidden;
}

.tr-related-image:after {
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:35%;
    background:
        linear-gradient(
            to top,
            rgba(9,12,16,.08),
            transparent
        );
    pointer-events:none;
}

.tr-related-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .6s cubic-bezier(.22,.61,.36,1);
}

.tr-related-card:hover .tr-related-image img {
    transform:scale(1.045);
}


/* Arrow */

.tr-related-arrow {
    position:absolute;
    right:18px;
    bottom:18px;
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--tr-black);
    font-size:20px;
    z-index:2;
    box-shadow:
        0 8px 22px rgba(9,12,16,.12);
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.tr-related-card:hover .tr-related-arrow {
    background:var(--tr-red);
    color:#fff;
    transform:rotate(5deg);
}


/* Info */

.tr-related-info {
    padding:20px 20px 21px;
}

.tr-related-category {
    margin-bottom:8px;
    color:var(--tr-red);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.tr-related-info h3 {
    margin:0;
    color:var(--tr-black);
    font-size:18px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.3px;
}

.tr-related-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:17px;
    padding-top:14px;
    border-top:1px solid var(--tr-line);
}

.tr-related-bottom > span:first-child {
    color:var(--tr-muted);
    font-size:10px;
    font-weight:700;
}

.tr-view-product {
    color:var(--tr-black);
    font-size:10px;
    font-weight:800;
    transition:
        color .2s ease,
        transform .2s ease;
}

.tr-related-card:hover .tr-view-product {
    color:var(--tr-red);
    transform:translateX(3px);
}


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

@media (max-width:1100px) {

    .tr-product-grid {
        gap:45px;
    }

    .tr-product-info h1 {
        font-size:48px;
    }

    .tr-product-actions {
        align-items:stretch;
        flex-direction:column;
    }

    .tr-product-buttons {
        width:100%;
    }

    .tr-qty-control {
        width:100%;
    }

    .tr-qty-control input {
        flex:1;
        width:auto;
    }

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

}


@media (max-width:991px) {

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

    .tr-product-info {
        max-width:850px;
    }

    .tr-product-info h1 {
        font-size:48px;
    }

    .tr-product-main-image,
    .tr-product-main-image a {
        min-height:540px;
    }

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

    .tr-description-heading h2 {
        font-size:40px;
    }

}


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

@media (max-width:767px) {

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


    /* Breadcrumb */

    .tr-product-breadcrumb .tr-wrap {
        min-height:52px;
        overflow:hidden;
        white-space:nowrap;
    }


    /* Hero */

    .tr-product-hero {
        padding:30px 0 50px;
    }


    /* Gallery */

    .tr-product-gallery {
        grid-template-columns:1fr;
        gap:13px;
    }

    .tr-product-thumbs {
        order:2;
        flex-direction:row;
        overflow-x:auto;
        padding-bottom:2px;
    }

    .tr-thumb {
        flex:0 0 67px;
        width:67px;
        height:67px;
    }

    .tr-product-main-image,
    .tr-product-main-image a {
        min-height:390px;
    }

    .tr-product-main-image img {
        max-height:390px;
    }


    /* Product */

    .tr-product-info h1 {
        font-size:38px;
        line-height:1.03;
        letter-spacing:-1.2px;
    }

    .tr-product-short-description {
        font-size:14px;
        line-height:1.75;
    }


    /* Meta */

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

    .tr-meta-item,
    .tr-meta-item:first-child {
        padding:15px 0;
        border-right:0;
        border-bottom:1px solid var(--tr-line);
    }

    .tr-meta-item:last-child {
        border-bottom:0;
    }


    /* Actions */

    .tr-product-actions {
        align-items:stretch;
        flex-direction:column;
        gap:14px;
    }

    .tr-qty-box {
        width:100%;
    }

    .tr-qty-control {
        width:100%;
    }

    .tr-qty-control input {
        flex:1;
        width:auto;
    }

    .tr-product-buttons {
        width:100%;
        flex-direction:column;
    }

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


    /* Description */

    .tr-product-description-section {
        padding:65px 0;
    }

    .tr-description-layout {
        gap:30px;
    }

    .tr-description-heading h2 {
        font-size:36px;
    }

    .tr-description-content {
        font-size:15px;
        line-height:1.8;
    }


    /* Related */

    .tr-related-products {
        padding:65px 0 70px;
    }

    .tr-related-top {
        margin-bottom:25px;
    }

    .tr-related-top h2 {
        font-size:36px;
    }

    .tr-related-grid {
        grid-template-columns:1fr;
        gap:25px;
    }

    .tr-related-image {
        height:360px;
    }

    .tr-related-bottom {
        flex-direction:row;
        align-items:center;
    }

}


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

@media (max-width:480px) {

    .tr-product-hero {
        padding-top:24px;
    }

    .tr-product-info h1 {
        font-size:32px;
        letter-spacing:-1px;
    }

    .tr-product-main-image,
    .tr-product-main-image a {
        min-height:320px;
    }

    .tr-product-main-image img {
        max-height:320px;
    }

    .tr-image-expand {
        width:42px;
        height:42px;
        right:12px;
        bottom:12px;
    }

    .tr-product-buttons {
        gap:9px;
    }

    .tr-product-basket-btn,
    .tr-product-quote-btn {
        min-height:50px;
        padding:0 16px;
    }

    .tr-related-image {
        height:320px;
    }

    .tr-related-bottom {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

}


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

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

    .tr-product-page *,
    .tr-product-page *:before,
    .tr-product-page *:after {
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }

}