/*==============================
Product Compare - tray, buttons & compare page extras
(base .compare-table styles live in style.css)
=================================*/

/* ---- Compare toggle buttons (product cards + detail pages) ---- */
.dsc-compare-btn.dsc-active i {
    color: var(--ts-brand, #d25b5b);
}

/* Theme default puts the btn group bottom-right where the View Product bar now
   sits, and template 005 keeps the NEW/sale badge visible top-right (z-index 4)
   - so the free corner in both templates is the TOP-LEFT of the image */
.single-product-wrap .product-thumbnail .product-hvr-content .prod-btn-group {
    top: 10px;
    bottom: auto;
    left: 10px;
    right: auto;
}

/* Detail-page text button: secondary/outline so it never fights the main CTA */
a.btn.dsc-compare-btn {
    background-color: transparent;
    border: 1px solid #262626;
    color: #262626;
}
a.btn.dsc-compare-btn:hover {
    background-color: #262626;
    color: #fff;
}
a.btn.dsc-compare-btn.dsc-active {
    border-color: var(--ts-brand, #d25b5b);
    color: var(--ts-brand, #d25b5b);
}
a.btn.dsc-compare-btn i {
    margin-right: 6px;
    color: inherit;
}

/* ---- Floating compare tray ---- */
#dsc-compare-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--ts-card-bg, #fff);
    border-top: 2px solid var(--ts-brand, #d25b5b);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
    padding: 10px 15px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
#dsc-compare-tray.dsc-hidden {
    display: none;
}
.dsc-tray-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1170px;
    margin: 0 auto;
}
.dsc-tray-items {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* headroom so the floating x badges aren't clipped by the scroll container */
    padding: 9px 9px 2px 0;
}

/* Let the page (footer included) scroll fully clear of the fixed tray */
body.dsc-tray-open {
    padding-bottom: 120px;
}
.dsc-tray-item {
    position: relative;
    flex: 0 0 auto;
}
.dsc-tray-item img {
    width: 60px;
    height: 75px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    display: block;
}
.dsc-tray-item .dsc-compare-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #262626;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    text-align: center;
}
.dsc-tray-item .dsc-compare-remove:hover {
    background: #e74c3c;
}
.dsc-tray-count {
    font-size: 1.3rem;
    color: #262626;
    white-space: nowrap;
}
.dsc-tray-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.dsc-tray-go.dsc-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}
.dsc-compare-clear {
    border: none;
    background: transparent;
    color: #8d8d8d;
    font-size: 1.2rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}
.dsc-compare-clear:hover {
    color: #e74c3c;
}

@media only screen and (max-width: 575.98px) {
    #dsc-compare-tray {
        padding-top: 8px;
    }
    .dsc-tray-item img {
        width: 44px;
        height: 55px;
    }
    .dsc-tray-count {
        display: none;
    }
}

/* ---- Compare page ---- */
.dsc-compare-wrapper {
    margin-top: 40px;
    margin-bottom: 100px; /* keep clear of the fixed tray */
}
/* Empty state: framed panel matching the site's cards.
   (Spacing lives on this inner div - the Bootstrap m-auto col's
   margin:auto!important would swallow any margins set on the col itself.) */
.dsc-compare-empty {
    background: #fff;
    border: 1px solid var(--ts-card-border, #E4DFD3);
    border-radius: 10px;
    padding: 60px 40px;
    margin: 70px 0 110px;
    font-size: 1.4rem;
}
.dsc-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--ts-page-bg, #F5F3EC);
    border: 1px solid var(--ts-card-border, #E4DFD3);
    color: var(--ts-brand, #E8611C);
    font-size: 3rem;
    margin-bottom: 20px;
}
.dsc-compare-empty h3 {
    font-size: 2.4rem;
    color: #262626;
    margin-bottom: 12px;
}
.dsc-compare-empty p {
    color: #6B6960;
    line-height: 1.8;
    margin-bottom: 28px;
}
.dsc-compare-empty p i {
    color: var(--ts-brand, #E8611C);
    font-size: 1.6rem;
    vertical-align: middle;
    padding: 0 2px;
}
@media only screen and (max-width: 575.98px) {
    .dsc-compare-empty {
        padding: 40px 20px;
        margin: 40px 0 70px;
    }
}

/* Horizontal scroll with the label column pinned (the mobile strategy),
   framed like the site's other card panels */
.dsc-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--ts-card-border, #E4DFD3);
    border-radius: 10px;
}
.compare-table .table {
    margin-bottom: 0;
}
.compare-table .table tbody tr th.first-column {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #f2f2f2; /* sticky cell must stay opaque over sliding columns */
}

/* Product images: rounded + bordered like the catalogue cards */
.compare-table .table tbody tr td.product-image-title .image img {
    background: #fff;
    border: 1px solid var(--ts-card-border, #E4DFD3);
    border-radius: 10px;
    padding: 10px;
}
.compare-table .table tbody tr td.product-image-title .image:hover img {
    border-color: var(--ts-brand, #E8611C);
}

/* Readability: the stock compare styles are pale grey on the chalk page bg */
.compare-table .table {
    color: #4A4841;
    font-size: 1.4rem;
}
.compare-table .table tbody tr td.pro-desc p {
    color: #4A4841;
    line-height: 1.7;
}
.compare-table .table tbody tr td.pro-price .price {
    color: var(--ts-brand, #d25b5b);
    font-size: 1.6rem;
    font-weight: 600;
}
.compare-table .table tbody tr td.pro-price del {
    color: #8d8d8d;
    margin-left: 6px;
}
.compare-table .table tbody tr td.product-image-title .title {
    font-size: 1.5rem;
}

/* Tools row + diff highlighting */
.dsc-compare-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}
.dsc-diff-toggle {
    font-size: 1.3rem;
    color: #262626;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.dsc-diff-toggle input {
    margin-right: 6px;
    vertical-align: middle;
}
.compare-table.dsc-show-diff tr.dsc-diff td {
    background-color: rgba(210, 91, 91, 0.07);
}