/**

 * Topland API V2 - Products Engine Styles

 * 100% Full Width Container

 * Zero Shadows (Flat, clean, enterprise design)

 * Brand Colors matching classic Topland version (#eb1c23, #111827, #ddd)

 */



:root {

    --tp-primary: #eb1c23;

    --tp-primary-hover: #c2151b;

    --tp-bg-card: #ffffff;

    --tp-border-color: #dddddd;

    --tp-text-main: #111827;

    --tp-text-muted: #6b7280;

    --tp-radius: 6px;

    --tp-sidebar-width: 280px;

    --tp-grid-cols: 3;

}



/* Master Wrapper - 100% Full Width, No Shadows, Crisp Anti-Aliased Typography */

.topland-catalog-wrap {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 10px 0 40px !important;

    font-family: inherit;

    box-sizing: border-box;

    color: var(--tp-text-main);

    box-shadow: none !important;

    text-shadow: none !important;

    overflow: visible !important;

    overflow-x: visible !important;

    overflow-y: visible !important;

    -webkit-font-smoothing: antialiased !important;

    -moz-osx-font-smoothing: grayscale !important;

    text-rendering: optimizeLegibility !important;

}



.topland-catalog-wrap * {

    box-sizing: border-box;

    box-shadow: none !important;

    text-shadow: none !important;

    -webkit-font-smoothing: antialiased !important;

    -moz-osx-font-smoothing: grayscale !important;

}



.topland-catalog-wrap h1,

.topland-catalog-wrap h2,

.topland-catalog-wrap h3,

.topland-catalog-wrap h4 {

    font-weight: 600 !important;

    letter-spacing: -0.01em;

}



/* Top Bar: Search, Result Count, Mobile Filter Trigger */

.tp-toolbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--tp-border-color);

}



.tp-search-box {

    position: relative;

    flex: 1;

    max-width: 400px;

    min-width: 240px;

}



.tp-search-box input.tp-search-input,

.tp-search-box input[type="text"] {

    width: 100%;

    height: 38px;

    padding: 0 14px 0 38px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    background: #ffffff;

    font-size: 13px;

    color: var(--tp-text-main);

    outline: none;

    transition: all 0.2s ease;

    box-shadow: none !important;

}



.tp-search-box input.tp-search-input:hover,

.tp-search-box input[type="text"]:hover {

    border-color: #9ca3af;

}



.tp-search-box input.tp-search-input:focus,

.tp-search-box input[type="text"]:focus {

    border-color: var(--tp-primary) !important;

    background: #ffffff !important;

    box-shadow: 0 0 0 2px rgba(235, 28, 35, 0.15) !important;

}



.tp-search-icon {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    pointer-events: none;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: color 0.2s ease;

}



.tp-search-box:focus-within .tp-search-icon {

    color: var(--tp-primary);

}



.tp-toolbar-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}



.tp-btn-mobile-filter {

    display: none !important;

    align-items: center;

    gap: 6px;

    padding: 8px 16px;

    background: var(--tp-primary);

    color: #fff;

    border: 1px solid var(--tp-primary);

    border-radius: var(--tp-radius);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

}



/* 2-Column Catalog Layout */

.tp-catalog-layout {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    width: 100%;

}



.tp-layout-reverse {

    flex-direction: row-reverse;

}



/* Sidebar Filter */

.tp-catalog-sidebar {

    flex: 0 0 var(--tp-sidebar-width);

    width: var(--tp-sidebar-width);

    background: #ffffff;

    border: 1px solid var(--tp-border-color);

    border-radius: var(--tp-radius);

    padding: 12px 14px;

}



.tp-sidebar-title {

    margin: 0 0 6px;

    font-size: 14px;

    font-weight: 700;

    color: var(--tp-text-main);

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 2px solid var(--tp-primary);

    padding-bottom: 4px;

    text-transform: uppercase;

    letter-spacing: 0.03em;

}



.tp-clear-filters {

    font-size: 12px;

    color: var(--tp-primary);

    cursor: pointer;

    font-weight: 600;

    text-decoration: underline;

}



.tp-filter-section {

    margin-bottom: 18px;

    border-bottom: 1px solid #f0f0f0;

    padding-bottom: 14px;

}



.tp-filter-section:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}



.tp-filter-label {

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.03em;

    color: #111827;

    margin-bottom: 10px;

    display: block;

}



.tp-filter-options {

    max-height: 190px;

    overflow-y: auto;

    padding-right: 4px;

}



.tp-filter-options::-webkit-scrollbar {

    width: 4px;

}

.tp-filter-options::-webkit-scrollbar-thumb {

    background: #ccc;

    border-radius: 4px;

}



.tp-checkbox-item {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 0 !important;

    margin-bottom: 2px !important;

    padding: 1px 0 !important;

    font-size: 12.5px;

    line-height: 1.25 !important;

    color: #374151;

    cursor: pointer;

}



.tp-checkbox-item input[type="checkbox"] {

    accent-color: var(--tp-primary);

    width: 16px;

    height: 16px;

    cursor: pointer;

}



.tp-checkbox-item input[type="checkbox"]:checked ~ .tp-checkbox-label,

.tp-checkbox-item input[type="checkbox"]:checked ~ .tp-filter-count,

.tp-checkbox-item:has(input:checked) {

    color: var(--tp-primary, #eb1c23) !important;

    font-weight: 700 !important;

}



.tp-checkbox-item:hover {

    color: var(--tp-primary);

}



/* Products Main Area */

.tp-catalog-content {

    flex: 1;

    min-width: 0;

    width: 100%;

}



/* Products Grid */

.tp-products-grid {

    display: grid;

    grid-template-columns: repeat(var(--tp-grid-cols), 1fr);

    gap: 20px;

    width: 100%;

}



/* Product Card - Clean border, no shadow */

.tp-card {

    background: var(--tp-bg-card);

    border: 1px solid var(--tp-border-color);

    border-radius: var(--tp-radius);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    transition: border-color 0.2s;

    position: relative;

    box-shadow: none !important;

}



.tp-card:hover {

    border-color: #9ca3af;

}



.tp-card-media {

    width: 100%;

    height: var(--tp-card-media-h, auto) !important;

    min-height: unset !important;

    aspect-ratio: 4/3;

    background: #f9fafb;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 10px !important;

    border-bottom: 1px solid #f3f4f6;

    text-decoration: none;

    box-sizing: border-box !important;

}



.tp-card-media img,
.tp-card-slide img,
.tp-card-slider-media img {
    max-width: 90% !important;
    max-height: var(--tp-card-img-max-h, 90%) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto !important;
    display: block !important;
}



.tp-placeholder-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    border-radius: 8px;

    background: #f1f5f9;

}



.tp-card-body {

    padding: 16px;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.tp-card-category {

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    color: var(--tp-primary);

    letter-spacing: 0.5px;

    margin-bottom: 6px;

}



.tp-card-title {

    margin: 0 0 10px;

    padding-top: 0 !important;

    font-size: 15px;

    font-weight: 600 !important;

    color: var(--tp-text-main);

    line-height: 1.35;

    letter-spacing: -0.01em;

}



h3.tp-card-title {

    padding-top: 0 !important;

    margin-top: 0 !important;

}



.tp-card-specs {

    margin: 6px 0 14px;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.tp-spec-badge {

    background: #f3f4f6;

    color: #374151;

    font-size: 11px;

    font-weight: 600;

    padding: 3px 8px;

    border-radius: 4px;

    border: 1px solid #e5e7eb;

}



.tp-card-footer {

    margin-top: auto;

    padding-top: 12px;

    border-top: 1px solid #f3f4f6;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.tp-btn-view,

a.tp-btn-view,

.tp-card a.tp-btn-view,

.tp-card-footer a.tp-btn-view,

.tp-btn-view:visited,

a.tp-btn-view:visited {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    padding: 8px 18px !important;

    background: var(--tp-primary, #eb1c23) !important;

    color: #ffffff !important;

    border: 1px solid var(--tp-primary, #eb1c23) !important;

    border-radius: 4px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition: all 0.2s ease !important;

    box-shadow: none !important;

    line-height: 1.4 !important;

}



.tp-btn-view:hover,

a.tp-btn-view:hover,

.tp-card a.tp-btn-view:hover,

.tp-card-footer a.tp-btn-view:hover {

    background: #c81016 !important;

    border-color: #c81016 !important;

    color: #ffffff !important;

    text-decoration: none !important;

}



/* List Layout Mode Visuals */

.tp-products-grid[data-layout="list"] {

    display: flex !important;

    flex-direction: column !important;

    gap: 16px !important;

}

.tp-products-grid[data-layout="list"] .tp-card {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 6px !important;

    background: #ffffff !important;

}

.tp-products-grid[data-layout="list"] .tp-card-media {

    width: 240px !important;

    height: 180px !important;

    flex-shrink: 0 !important;

    border-right: 1px solid #f1f5f9 !important;

    border-bottom: none !important;

}

.tp-products-grid[data-layout="list"] .tp-card-body {

    flex: 1 !important;

    padding: 20px !important;

}

.tp-products-grid[data-layout="list"] .tp-card-features {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    gap: 16px !important;

    margin: 10px 0 !important;

}



/* Pagination Bar */

.tp-pagination-bar {

    margin-top: 30px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 4px;

    flex-wrap: wrap;

    padding-top: 15px;

    border-top: 1px solid var(--tp-border-color);

}



.tp-page-btn {

    min-width: 36px;

    height: 36px;

    padding: 0 10px;

    border: 1px solid var(--tp-border-color);

    background: #fff;

    color: var(--tp-text-main);

    font-size: 13px;

    font-weight: 600;

    border-radius: 4px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.15s;

    box-shadow: none !important;

}



.tp-page-btn:hover {

    background: #f3f4f6;

    border-color: #9ca3af;

}



.tp-page-active {

    background: var(--tp-primary) !important;

    color: #fff !important;

    border-color: var(--tp-primary) !important;

}



.tp-load-more-btn {

    padding: 10px 24px;

    background: #fff;

    border: 1px solid var(--tp-border-color);

    color: var(--tp-text-main);

    font-weight: 600;

    font-size: 14px;

    border-radius: var(--tp-radius);

    cursor: pointer;

    transition: all 0.2s;

    box-shadow: none !important;

}



.tp-load-more-btn:hover {

    background: var(--tp-primary);

    color: #fff;

    border-color: var(--tp-primary);

}



/* Empty State */

.tp-empty-state {

    text-align: center;

    padding: 50px 20px;

    background: #f9fafb;

    border: 1px dashed var(--tp-border-color);

    border-radius: var(--tp-radius);

    color: var(--tp-text-muted);

}



/* Responsive Breakpoints */

@media (max-width: 1024px) {

    .tp-products-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}



@media (max-width: 768px) {

    .tp-toolbar {

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 12px !important;

    }



    .tp-toolbar-left {

        display: flex !important;

        justify-content: space-between !important;

        align-items: center !important;

        width: 100% !important;

    }



    .tp-toolbar-actions {

        display: flex !important;

        flex-wrap: wrap !important;

        width: 100% !important;

        gap: 8px !important;

        align-items: center !important;

    }



    /* Mobile Search: Full 100% Width on top row */

    .tp-search-box {

        flex: 0 0 100% !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 100% !important;

        order: 1 !important;

        margin: 0 !important;

    }



    .tp-search-box input.tp-search-input,

    .tp-search-box input[type="text"] {

        width: 100% !important;

        height: 40px !important;

        padding: 0 12px 0 38px !important;

        font-size: 14px !important;

        box-sizing: border-box !important;

    }



    .tp-search-icon {

        left: 12px !important;

        display: flex !important;

        visibility: visible !important;

        z-index: 2 !important;

    }



    /* Mobile Filter Button: Side by Side with Sort */

    .tp-btn-mobile-filter {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex: 1 1 auto !important;

        order: 2 !important;

        height: 38px !important;

        padding: 0 14px !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        color: #ffffff !important;

        background: var(--tp-primary) !important;

        border: 1px solid var(--tp-primary) !important;

        border-radius: var(--tp-radius, 6px) !important;

        cursor: pointer !important;

        white-space: nowrap !important;

        gap: 6px !important;

    }



    .tp-btn-mobile-filter svg {

        display: inline-block !important;

        flex-shrink: 0 !important;

    }



    /* Mobile Sort Wrap: Side by Side with Filter */

    .tp-sort-wrap {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        flex: 1 1 auto !important;

        order: 3 !important;

        gap: 6px !important;

        height: 38px !important;

    }



    .tp-sort-label {

        font-size: 12px !important;

        white-space: nowrap !important;

        color: #64748b !important;

    }



    .tp-sort-select {

        height: 38px !important;

        flex: 1 !important;

        font-size: 12.5px !important;

        padding: 0 8px !important;

    }



    .tp-search-autocomplete {

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        z-index: 999999 !important;

    }



    .tp-catalog-layout {

        display: block;

    }



    /* Off-Canvas Mobile Drawer - No Shadow */

    .tp-catalog-sidebar {

        position: fixed;

        top: 0;

        left: -100%;

        width: 85%;

        max-width: 320px;

        height: 100vh;

        z-index: 999999;

        overflow-y: auto;

        border-right: 2px solid var(--tp-border-color);

        transition: left 0.3s ease;

        border-radius: 0;

        box-shadow: none !important;

    }



    .tp-catalog-sidebar.tp-drawer-open {

        left: 0;

    }



    .tp-drawer-backdrop {

        position: fixed;

        top: 0;

        left: 0;

        width: 100vw;

        height: 100vh;

        background: rgba(0, 0, 0, 0.5);

        z-index: 999998;

        display: none;

    }



    .tp-drawer-backdrop.tp-drawer-open {

        display: block;

    }



    .tp-products-grid {

        grid-template-columns: 1fr !important;

    }

}



/* ==========================================================================

   HAVELLS-INSPIRED CLEAN DESIGN PATTERNS

   ========================================================================== */



/* Breadcrumbs */

.tp-breadcrumbs {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    font-size: 13px;

    color: #64748b;

    margin-bottom: 16px;

}

.tp-breadcrumbs a {

    color: #334155;

    text-decoration: none;

    transition: color 0.15s;

}

.tp-breadcrumbs a:hover {

    color: var(--tp-primary);

}

.tp-breadcrumbs .tp-sep {

    color: #94a3b8;

}

.tp-breadcrumbs .tp-current {

    color: #0f172a;

    font-weight: 600;

}



/* Category Title & Results */

.tp-category-title {

    margin: 0 0 4px;

    font-size: 22px;

    font-weight: 700;

    color: #0f172a;

    letter-spacing: -0.02em;

}

.tp-result-counter {

    font-size: 13px;

    color: #64748b;

}



/* Sorting Dropdown */

.tp-sort-wrap {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    color: #475569;

}

.tp-sort-label {

    font-weight: 600;

    white-space: nowrap;

}

.tp-sort-select {

    background: #fff;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    padding: 6px 12px;

    font-size: 13px;

    color: #1f2937;

    cursor: pointer;

    outline: none;

    box-shadow: none !important;

}

.tp-sort-select:focus {

    border-color: var(--tp-primary);

}



/* Active Filter Tags Bar */

.tp-active-filters-wrap {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    padding: 10px 14px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    margin-bottom: 20px;

}

.tp-active-filters-label {

    font-size: 12px;

    font-weight: 700;

    color: #475569;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}

.tp-active-tags-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

}

.tp-filter-tag {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #fff;

    border: 1px solid #cbd5e1;

    border-radius: 4px;

    padding: 3px 8px;

    font-size: 12px;

    color: #1e293b;

    font-weight: 500;

}

.tp-filter-tag-remove {

    background: none;

    border: none;

    padding: 0;

    cursor: pointer;

    color: #94a3b8;

    display: flex;

    align-items: center;

    line-height: 1;

}

.tp-filter-tag-remove:hover {

    color: #ef4444;

}

.tp-btn-clear-all {

    background: none;

    border: none;

    color: var(--tp-primary);

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    padding: 2px 6px;

    margin-left: auto;

    text-decoration: underline;

}



/* Accordion Filters */

.tp-accordion-filters {

    display: flex;

    flex-direction: column;

    gap: 0;

    border-top: 1px solid #e5e7eb;

}

/* Sidebar Filter Accordions (Strictly Scoped) */

.tp-catalog-sidebar .tp-accordion-item,

.tp-accordion-filters .tp-accordion-item,

.tp-catalog-sidebar .tp-accordion-item,
.tp-accordion-filters .tp-accordion-item,
.tp-filter-group.tp-accordion-item,
.tp-filter-group {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tp-catalog-sidebar .tp-accordion-header,

.tp-accordion-filters .tp-accordion-header,

.tp-filter-group .tp-accordion-header,

.tp-filter-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 3px 0 !important;

    margin: 0 !important;

    min-height: 24px !important;

    font-size: 13px !important;

    line-height: 1.25 !important;

    font-weight: 700;

    color: #1f2937;

    cursor: pointer;

    user-select: none;

    background: transparent !important;

    border: none !important;

}

.tp-filter-header-title {

    font-size: 13px !important;

    font-weight: 700 !important;

    line-height: 1.25 !important;

}

.tp-catalog-sidebar .tp-accordion-header:hover,

.tp-accordion-filters .tp-accordion-header:hover,

.tp-filter-group .tp-accordion-header:hover,

.tp-filter-header:hover {

    color: var(--tp-primary);

}

.tp-accordion-filters .tp-accordion-chevron,

.tp-filter-group .tp-accordion-chevron {

    transition: transform 0.2s ease;

    color: #9ca3af;

}

.tp-accordion-filters .tp-accordion-item.is-closed .tp-accordion-chevron,

.tp-filter-group.is-closed .tp-accordion-chevron {

    transform: rotate(-90deg);

}

.tp-accordion-filters .tp-accordion-item.is-closed .tp-accordion-content,

.tp-filter-group.is-closed .tp-accordion-content {

    display: none;

}

.tp-accordion-filters .tp-accordion-content,

.tp-filter-group .tp-accordion-content,

.tp-filter-content {

    padding-top: 2px !important;

    padding-bottom: 4px !important;

    display: flex;

    flex-direction: column;

    gap: 2px !important;

}



/* ==========================================================================

   PREMIUM PRODUCT DETAIL ACCORDIONS (WORLD-CLASS INDUSTRIAL DESIGN)

   ========================================================================== */

.tp-detail-accordion-item {

    border: 1px solid #e2e8f0 !important;

    border-left: 4px solid #cbd5e1 !important;

    border-radius: 12px !important;

    margin: 0 0 14px 0 !important;

    padding: 0 !important;

    background: #ffffff !important;

    overflow: hidden !important;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.tp-detail-accordion-item:hover {

    border-color: #cbd5e1 !important;

    border-left-color: var(--tp-primary, #eb1c23) !important;

    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;

    transform: translateY(-1px);

}



.tp-detail-accordion-item.is-open,

.tp-detail-accordion-item:has(.tp-detail-accordion-header[aria-expanded="true"]) {

    border-color: #fecaca !important;

    border-left-color: var(--tp-primary, #eb1c23) !important;

    box-shadow: 0 8px 24px rgba(235, 28, 35, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;

}



.tp-detail-accordion-header {

    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 15px 22px !important;

    margin: 0 !important;

    min-height: 56px !important;

    background: #f8fafc !important;

    border: none !important;

    border-radius: 0 !important;

    cursor: pointer !important;

    text-align: left !important;

    user-select: none !important;

    transition: background 0.2s ease, border-color 0.2s ease !important;

}



.tp-detail-accordion-header:hover {

    background: #f1f5f9 !important;

}



.tp-detail-accordion-header[aria-expanded="true"] {

    background: #fff8f8 !important;

    border-bottom: 1px solid #fee2e2 !important;

}



.tp-detail-accordion-title {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

    font-size: 16.5px !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    letter-spacing: -0.01em !important;

}



.tp-detail-accordion-header:hover .tp-detail-accordion-title {

    color: var(--tp-primary, #eb1c23) !important;

}



.tp-detail-accordion-icon-badge {

    width: 38px !important;

    height: 38px !important;

    border-radius: 10px !important;

    background: rgba(235, 28, 35, 0.08) !important;

    border: 1px solid rgba(235, 28, 35, 0.16) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: var(--tp-primary, #eb1c23) !important;

    flex-shrink: 0 !important;

    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;

}



.tp-detail-accordion-header:hover .tp-detail-accordion-icon-badge {

    background: rgba(235, 28, 35, 0.14) !important;

    transform: scale(1.05);

}



.tp-detail-accordion-header[aria-expanded="true"] .tp-detail-accordion-icon-badge {

    background: var(--tp-primary, #eb1c23) !important;

    border-color: var(--tp-primary, #eb1c23) !important;

    color: #ffffff !important;

}



.tp-detail-accordion-header[aria-expanded="true"] .tp-detail-accordion-icon-badge svg {

    stroke: #ffffff !important;

}



.tp-detail-accordion-text {

    font-size: 16.5px !important;

    font-weight: 700 !important;

    color: #0f172a !important;

}



.tp-detail-accordion-chevron {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 34px !important;

    height: 34px !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    color: #64748b !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.tp-detail-accordion-header:hover .tp-detail-accordion-chevron {

    background: #ffffff !important;

    border-color: #cbd5e1 !important;

    color: var(--tp-primary, #eb1c23) !important;

}



.tp-detail-accordion-header[aria-expanded="true"] .tp-detail-accordion-chevron {

    transform: rotate(180deg) !important;

    background: var(--tp-primary, #eb1c23) !important;

    border-color: var(--tp-primary, #eb1c23) !important;

    color: #ffffff !important;

    box-shadow: 0 2px 8px rgba(235, 28, 35, 0.3) !important;

}



.tp-detail-accordion-content {

    display: none;

    padding: 22px 26px !important;

    background: #ffffff !important;

    border-top: none !important;

    animation: tpAccordionFadeIn 0.22s ease-out;

}



.tp-detail-accordion-item.is-open > .tp-detail-accordion-content {

    display: block !important;

}



.tp-detail-accordion-item.is-closed > .tp-detail-accordion-content {

    display: none !important;

}



@keyframes tpAccordionFadeIn {

    from {

        opacity: 0;

        transform: translateY(-4px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.tp-filter-count {

    margin-left: auto;

    font-size: 11px;

    color: #94a3b8;

    font-weight: normal;

}



/* Brochures Bar */

.tp-brochures-bar {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    padding: 12px 18px;

    margin-bottom: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

}



/* Havells Card Brand, Subtitle, Quick Features */

.tp-card-brand {

    font-size: 11px;

    font-weight: 700;

    color: var(--tp-primary);

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin-bottom: 4px;

}

.tp-card-subtitle {

    font-size: 12px;

    font-weight: 600;

    color: #64748b;

    margin-bottom: 8px;

}

.tp-card-features {

    list-style: none;

    padding: 0;

    margin: 4px 0 10px;

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.tp-card-features li {

    font-size: 12px;

    color: #475569;

    display: flex;

    align-items: center;

    gap: 5px;

    line-height: 1.25;

}

.tp-feature-dot {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--tp-primary);

    flex-shrink: 0;

}

.tp-compare-toggle {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    font-weight: 600;

    color: #4b5563;

    cursor: pointer;

    user-select: none;

}

.tp-compare-toggle input[type="checkbox"] {

    accent-color: var(--tp-primary);

    width: 15px;

    height: 15px;

    cursor: pointer;

}



/* Sidebar & Toolbar Compare Trigger Buttons */

.tp-btn-sidebar-compare,

.tp-btn-toolbar-compare {

    display: inline-flex;

    align-items: center !important;

    gap: 6px !important;

    background: #0f172a !important;

    color: #ffffff !important;

    border: 1px solid #334155 !important;

    border-radius: 4px !important;

    padding: 5px 12px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    box-shadow: none !important;

    text-decoration: none !important;

}

.tp-btn-sidebar-compare:hover,

.tp-btn-toolbar-compare:hover {

    background: var(--tp-primary, #eb1c23) !important;

    border-color: var(--tp-primary, #eb1c23) !important;

    color: #ffffff !important;

}

.tp-compare-count-sidebar,

.tp-compare-count-toolbar {

    background: var(--tp-primary, #eb1c23) !important;

    color: #ffffff !important;

    padding: 1px 6px !important;

    border-radius: 10px !important;

    font-size: 11px !important;

    font-weight: 700 !important;

}



/* Floating Compare Dock */

.tp-compare-dock {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    width: 100% !important;

    background: #0f172a !important;

    color: #ffffff !important;

    z-index: 9999990 !important;

    padding: 12px 24px !important;

    border-top: 2px solid var(--tp-primary, #eb1c23) !important;

    box-shadow: none !important;

}

.tp-compare-dock-inner {

    max-width: 1200px !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 20px !important;

    flex-wrap: wrap !important;

}

.tp-compare-dock-info {

    display: flex !important;

    align-items: center !important;

    gap: 15px !important;

}

.tp-compare-dock-title {

    font-size: 14px !important;

    font-weight: 600 !important;

    color: #ffffff !important;

}

.tp-compare-thumbnails {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

}

.tp-compare-thumb {

    width: 38px !important;

    height: 38px !important;

    border-radius: 4px !important;

    background: #ffffff !important;

    border: 1px solid #475569 !important;

    object-fit: contain !important;

    padding: 2px !important;

}

.tp-compare-dock-actions {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

}

.tp-btn-compare-now {

    background: var(--tp-primary, #eb1c23) !important;

    color: #ffffff !important;

    border: 1px solid var(--tp-primary, #eb1c23) !important;

    border-radius: 4px !important;

    padding: 8px 18px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: background 0.2s ease !important;

}

.tp-btn-compare-now:hover {

    background: #c81016 !important;

    border-color: #c81016 !important;

}

.tp-btn-compare-clear {

    background: transparent !important;

    color: #cbd5e1 !important;

    border: 1px solid #475569 !important;

    border-radius: 4px !important;

    padding: 8px 14px !important;

    font-size: 13px !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

}

.tp-btn-compare-clear:hover {

    color: #ffffff !important;

    border-color: #94a3b8 !important;

}



/* Compare Modal (Pure Fixed Fullscreen Overlay) */

.tp-compare-modal {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    z-index: 9999999 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}

.tp-compare-modal[style*="display: none"],

.tp-compare-modal[style*="display:none"] {

    display: none !important;

}

.tp-compare-modal-overlay {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    background: rgba(15, 23, 42, 0.75) !important;

    backdrop-filter: blur(4px) !important;

    -webkit-backdrop-filter: blur(4px) !important;

    z-index: 9999998 !important;

}

.tp-compare-modal-content {

    position: relative !important;

    z-index: 9999999 !important;

    background: #ffffff !important;

    width: 94% !important;

    max-width: 1100px !important;

    max-height: 90vh !important;

    border-radius: 8px !important;

    border: 1px solid #cbd5e1 !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;

    box-shadow: none !important;

}

.tp-compare-modal-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 16px 24px !important;

    border-bottom: 1px solid #e2e8f0 !important;

    background: #f8fafc !important;

}

.tp-compare-modal-header h2 {

    margin: 0 !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    color: #0f172a !important;

}

.tp-btn-close-modal {

    background: none !important;

    border: none !important;

    color: #64748b !important;

    cursor: pointer !important;

    padding: 6px !important;

    display: flex !important;

    align-items: center !important;

    transition: color 0.2s ease !important;

}

.tp-btn-close-modal:hover {

    color: #0f172a !important;

}

.tp-compare-modal-body {

    padding: 20px 24px !important;

    overflow-x: auto !important;

    overflow-y: auto !important;

    max-height: calc(90vh - 80px) !important;

    flex: 1 !important;

}



/* Comparison Table */

.tp-compare-table {

    width: 100% !important;

    border-collapse: collapse !important;

    font-size: 13px !important;

    text-align: left !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

}

.tp-compare-table th, 

.tp-compare-table td {

    padding: 12px 16px !important;

    border: 1px solid #e2e8f0 !important;

    vertical-align: middle !important;

}

.tp-compare-table thead tr th {

    background: #f8fafc !important;

    color: #0f172a !important;

    font-weight: 700 !important;

    text-align: center !important;

    border-bottom: 2px solid #cbd5e1 !important;

}

.tp-compare-table thead tr th:first-child {

    text-align: left !important;

    width: 22% !important;

    color: #475569 !important;

}

.tp-compare-table tbody tr:nth-child(even) td {

    background: #f8fafc !important;

}

.tp-compare-table tbody tr:hover td,

.tp-compare-table tbody tr:hover th {

    background: #f1f5f9 !important;

}

.tp-compare-table tbody th {

    background: #ffffff !important;

    font-weight: 600 !important;

    color: #334155 !important;

    font-size: 13px !important;

}

.tp-compare-table .tp-compare-prod-img {

    width: 110px !important;

    height: 80px !important;

    object-fit: contain !important;

    margin: 0 auto 8px auto !important;

    display: block !important;

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 4px !important;

    padding: 4px !important;

}

.tp-compare-table .tp-compare-remove-btn {

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    font-size: 11px !important;

    color: #ef4444 !important;

    border: 1px solid #fca5a5 !important;

    background: #fef2f2 !important;

    padding: 2px 8px !important;

    border-radius: 4px !important;

    cursor: pointer !important;

    margin-top: 6px !important;

    text-decoration: none !important;

}

.tp-compare-table .tp-compare-remove-btn:hover {

    background: #ef4444 !important;

    color: #ffffff !important;

    border-color: #ef4444 !important;

}



/* ==========================================================================

   Technical Matrix Table & Sticky Header (Freeze Header on Scroll)

   ========================================================================== */

.tp-matrix-table-wrap {

    overflow-x: auto;

    max-width: 100%;

    margin-top: 15px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    box-sizing: border-box;

}



.tp-table-sticky-wrap {

    max-height: 520px;

    overflow-y: auto;

    position: relative;

    scrollbar-width: thin;

}



.tp-table-sticky thead th {

    position: sticky !important;

    top: 0 !important;

    z-index: 25 !important;

    background: #f1f5f9 !important;

    box-shadow: 0 1px 0 #cbd5e1 !important;

    border-bottom: 2px solid #cbd5e1 !important;

}



.tp-table-striped tbody tr:nth-child(even) td {

    background-color: #f8fafc !important;

}



.tp-table-compact th,

.tp-table-compact td {

    padding: 6px 10px !important;

    font-size: 12px !important;

}



.tp-table-minimalist th {

    background: #ffffff !important;

    border-bottom: 2px solid #0f172a !important;

}



.tp-table-minimalist td {

    border-bottom: 1px solid #f1f5f9 !important;

}



/* Ensure website header remains smoothly fixed/sticky on top during page scroll */

#page-header.pos_fixed,

header.l-header.pos_fixed {

    z-index: 999 !important;

}



/* Model SKU Badges & Group Code Badges */

.tp-model-badge,

.tp-group-code-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    padding: 0 !important;

    max-width: 100%;

}



.tp-model-badge .tp-model-lbl,

.tp-group-code-badge .tp-group-code-lbl {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: #64748b;

}



.tp-model-badge .tp-model-val,

.tp-group-code-badge .tp-group-code-val {

    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    font-size: 11.5px;

    font-weight: 600;

    color: #1e293b;

    word-break: break-all;

    line-height: 1.2;

}



.tp-card:hover .tp-model-badge,

.tp-card:hover .tp-group-code-badge {

    background: transparent !important;

    border: none !important;

}



/* Detail Section Headers: Perfectly Vertically Aligned SVG & Typography */

.tp-detail-section-header {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin-top: 0 !important;

    margin-bottom: 16px !important;

    padding-bottom: 8px !important;

    border-bottom: 1px solid #f1f5f9 !important;

}



.tp-detail-section-header svg {

    display: block !important;

    flex-shrink: 0 !important;

    color: var(--tp-primary) !important;

    width: 20px !important;

    height: 20px !important;

}



.tp-detail-section-header .tp-section-heading,

.tp-section-heading {

    margin: 0 !important;

    padding: 0 !important;

    font-weight: 600 !important;

    line-height: 1.25 !important;

    letter-spacing: -0.015em !important;

    font-family: var(--tp-heading-font, 'Inter', sans-serif) !important;

    display: inline-flex !important;

    align-items: center !important;

    vertical-align: middle !important;

}



/* Side-by-Side 50% / 50% Row for Features and Applications */

.tp-features-apps-row {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    margin-bottom: 25px;

}



.tp-features-col {

    flex: 1 1 calc(50% - 15px);

    min-width: 290px;

}



.tp-apps-col {

    flex: 1 1 calc(50% - 15px);

    min-width: 290px;

    border-left: 1px solid #f1f5f9;

    padding-left: 25px;

}



.tp-features-col-spacer {

    height: 45px;

}



@media (max-width: 768px) {

    .tp-features-col-spacer {

        display: none !important;

    }

}



@media (max-width: 768px) {

    .tp-features-col,

    .tp-apps-col {

        flex: 1 1 100%;

        min-width: 100%;

        border-left: none;

        padding-left: 0;

    }

}



/* Salient Features: Clean Line List (ul li) */

.tp-features-line-list {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

}



.tp-feature-line-item {

    list-style: none !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 9px !important;

    font-size: 13.5px !important;

    line-height: 1.5 !important;

    color: #334155 !important;

    padding: 4px 0 !important;

}



.tp-feature-line-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #fef2f2;

    color: var(--tp-primary);

    flex-shrink: 0;

    margin-top: 2px;

}



.tp-feature-line-text {

    flex: 1;

}



/* Recommended Applications: Bigger Prominent Tags */

.tp-apps-wrap-large {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.tp-app-tag-lg {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #ffffff;

    color: #1e293b;

    border: 1.5px solid #e2e8f0;

    font-size: 13.5px;

    font-weight: 500;

    padding: 9px 16px;

    border-radius: 8px;

    transition: all 0.2s ease;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);

}



.tp-app-tag-lg:hover {

    border-color: var(--tp-primary);

    color: var(--tp-primary);

    background: #fef2f2;

    transform: translateY(-1px);

}



.tp-app-tag-lg .tp-app-icon-wrap {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--tp-primary);

}



/* Operating Limits & Conditions (ul li) */

.tp-operating-list {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;

    gap: 10px !important;

}



.tp-operating-item {

    list-style: none !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    padding: 8px 14px !important;

    border-radius: 6px !important;

    font-size: 13px !important;

    color: #334155 !important;

    margin: 0 !important;

}



.tp-bullet-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--tp-primary);

    flex-shrink: 0;

}



/* Table Interactive Search & Sort Styles (Compact, White Background, Grey Border, Red Focus) */

.tp-table-search-wrap {

    display: flex;

    align-items: center;

    gap: 10px;

}



.tp-table-search-box {

    position: relative;

    display: inline-flex;

    align-items: center;

}



.tp-table-live-search {

    height: 36px !important;

    padding: 0 12px 0 32px !important;

    border: 1px solid #d1d5db !important;

    border-radius: 6px !important;

    font-size: 13px !important;

    font-family: inherit !important;

    width: 240px !important;

    background: #ffffff !important;

    color: #0f172a !important;

    outline: none !important;

    transition: all 0.2s ease !important;

    box-shadow: none !important;

}



.tp-table-live-search:hover {

    border-color: #9ca3af !important;

}



.tp-table-live-search:focus {

    border-color: var(--tp-primary) !important;

    background: #ffffff !important;

    box-shadow: 0 0 0 2px rgba(235, 28, 35, 0.15) !important;

}



.tp-table-search-icon {

    position: absolute;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    pointer-events: none;

    transition: color 0.2s ease;

}



.tp-table-search-box:focus-within .tp-table-search-icon {

    color: var(--tp-primary);

}



.tp-table-counter-badge {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 12px;

    font-weight: 500;

    color: #475569;

    background: #f1f5f9;

    height: 32px;

    padding: 0 12px;

    border-radius: 16px;

    border: 1px solid #e2e8f0;

    white-space: nowrap;

}



.tp-table-counter-badge strong {

    color: var(--tp-primary);

    font-weight: 700;

}



.tp-sortable-header {

    transition: background 0.15s ease;

}



.tp-sortable-header:hover {

    background: #e2e8f0 !important;

    color: #0f172a !important;

}



.tp-sortable-header:hover .tp-sort-icon {

    color: var(--tp-primary) !important;

}



/* Zero top padding and margin for all h1 headings and card titles */

h1, .tp-catalog-layout h1, .tp-detail-view h1, .tp-category-title, .tp-product-detail-title,

h3.tp-card-title, .tp-card-title {

    padding-top: 0 !important;

    margin-top: 0 !important;

}



/* ==========================================================================

   1. CLEAN CORPORATE HERO BANNER (IMAGE 3 DESIGN CONCEPT)

   ========================================================================== */

.tp-hero-banner-wrap,

.tp-hero-clean-section {

    width: 100vw !important;

    position: relative !important;

    left: 50% !important;

    right: 50% !important;

    margin-left: -50vw !important;

    margin-right: -50vw !important;

    background: #f8fafc !important;

    color: #1e293b !important;

    padding: 5px 48px !important;

    margin-top: 0 !important;

    margin-bottom: 25px !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

}



.tp-hero-inner,

.tp-hero-banner-inner,

.tp-hero-clean-container {

    max-width: 100% !important;

    width: 100% !important;

    margin: 0 auto !important;

    padding: 0 40px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 35px !important;

    box-sizing: border-box !important;

}



.tp-hero-content,

.tp-hero-clean-content {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    max-width: 100% !important;

}



/* Red Outline Badge: TOPLAND CERTIFIED */

.tp-hero-badge,

.tp-hero-badge-clean {

    display: inline-block !important;

    border: 1.5px solid #dc2626 !important;

    color: #dc2626 !important;

    background: #ffffff !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

    padding: 4px 10px !important;

    border-radius: 4px !important;

    margin-bottom: 14px !important;

    line-height: 1.2 !important;

}



.tp-hero-badge-dot {

    display: none !important;

}



/* Bold Clean Title with Red Highlight First Word */

.tp-hero-title,

.tp-hero-clean-title {

    color: #0f172a !important;

    font-size: 38px !important;

    font-weight: 800 !important;

    letter-spacing: -0.03em !important;

    margin: 0 0 16px 0 !important;

    padding: 0 !important;

    line-height: 1.15 !important;

}



.tp-hero-red-word,

.tp-hero-clean-title .tp-title-red,

.tp-hero-title .tp-title-red {

    color: #dc2626 !important;

    font-weight: 800 !important;

}



/* Clean Editorial Description / Remarks */

.tp-hero-remark-box,

.tp-hero-clean-desc {

    border: none !important;

    background: transparent !important;

    padding: 0 !important;

    margin: 0 !important;

}



.tp-hero-remark,

.tp-hero-remark-text,

.tp-hero-clean-desc {

    color: #475569 !important;

    font-size: 15.5px !important;

    line-height: 1.8 !important;

    margin: 0 !important;

    font-weight: 400 !important;

    max-width: 100% !important;

}



/* Right Side Machinery Cutout Image - Bigger and Prominent */

.tp-hero-media,

.tp-hero-clean-media {

    flex: 0 0 auto !important;

    max-width: 440px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



.tp-hero-img,

.tp-hero-media img,

.tp-hero-clean-img {

    max-width: 420px !important;

    max-height: 330px !important;

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.08)) !important;

    transition: transform 0.3s ease !important;

    display: block !important;

}



.tp-hero-img:hover,

.tp-hero-media img:hover,

.tp-hero-clean-img:hover {

    transform: translateY(-3px) scale(1.02) !important;

}



@media (max-width: 900px) {

    .tp-hero-inner,

    .tp-hero-banner-inner,

    .tp-hero-clean-container {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 20px !important;

    }

    .tp-hero-title,

    .tp-hero-clean-title {

        font-size: 26px !important;

    }

    .tp-hero-media,

    .tp-hero-clean-media {

        align-self: center !important;

        max-width: 100% !important;

        justify-content: center !important;

    }

    .tp-hero-img,

    .tp-hero-media img,

    .tp-hero-clean-img {

        max-height: 240px !important;

        max-width: 100% !important;

    }

}



/* ==========================================================================

   2. CARD IMAGE SLIDER (DOTS PROPERLY POSITIONED BELOW IMAGE)

   ========================================================================== */

.tp-card-slider-wrap {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    position: relative !important;

    background: transparent !important;

}



.tp-card-slider-media {

    position: relative !important;

    width: 100% !important;

    height: var(--tp-card-media-h, auto) !important;

    min-height: unset !important;

    aspect-ratio: 4/3 !important;

    background: #f8fafc !important;

    border-radius: 6px !important;

    overflow: hidden !important;

    display: block !important;

    padding: 0 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

}



.tp-card-slides {

    position: relative !important;

    width: 100% !important;

    height: 100% !important;

    display: block !important;

}



.tp-card-slide {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 10px !important;

    box-sizing: border-box !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition: opacity 0.4s ease, visibility 0.4s ease !important;

}



.tp-card-slide.is-active,

.tp-card-slide.active {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 2 !important;

}



.tp-card-slide img {

    max-width: 90% !important;

    max-height: var(--tp-card-img-max-h, none) !important;

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

    margin: auto !important;

    display: block !important;

}



/* Dots positioned as absolute overlay over bottom edge of image canvas to maintain perfect grid title alignment */

.tp-card-dots {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    padding: 0 !important;

    margin: 0 !important;

    width: 100% !important;

    position: absolute !important;

    bottom: 8px !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 10 !important;

    pointer-events: auto !important;

}



.tp-card-dot {

    width: 8px !important;

    height: 8px !important;

    border-radius: 50% !important;

    background: #cbd5e1 !important;

    border: none !important;

    cursor: pointer !important;

    padding: 0 !important;

    transition: all 0.25s ease !important;

}



.tp-card-dot.is-active,

.tp-card-dot.active {

    background: var(--tp-primary, #dc2626) !important;

    width: 20px !important;

    border-radius: 10px !important;

}



/* Card Image Prev / Next Navigation Arrows */

.tp-card-arrow {

    position: absolute !important;

    top: 100px !important;

    transform: translateY(-50%) !important;

    width: 28px !important;

    height: 28px !important;

    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.95) !important;

    border: 1px solid #cbd5e1 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: #1e293b !important;

    cursor: pointer !important;

    padding: 0 !important;

    z-index: 5 !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;

    opacity: 0 !important;

    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease !important;

}



.tp-card-slider-wrap:hover .tp-card-arrow {

    opacity: 1 !important;

}



.tp-card-arrow:hover {

    background: var(--tp-primary, #dc2626) !important;

    border-color: var(--tp-primary, #dc2626) !important;

    color: #ffffff !important;

}



.tp-card-arrow-prev {

    left: 8px !important;

}



.tp-card-arrow-next {

    right: 8px !important;

}



@media (max-width: 768px) {

    .tp-card-arrow {

        opacity: 0.88 !important;

    }

}



/* ==========================================================================

   3. PRODUCT DETAIL GALLERY SLIDER (DOTS BELOW MAIN STAGE)

   ========================================================================== */

.tp-detail-gallery-wrap {

    position: relative !important;

    width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

}



.tp-detail-main-stage {

    position: relative !important;

    width: 100% !important;

    min-height: 340px !important;

    height: 520px !important;

    max-height: var(--tp-detail-stage-max-h, 520px) !important;

    background: var(--tp-detail-img-bg, #f9fafb) !important;

    border: none !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 24px !important;

}



.tp-detail-slides {

    position: relative !important;

    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



.tp-detail-slide {

    display: none !important;

    width: 100% !important;

    text-align: center !important;

}



.tp-detail-slide.is-active,

.tp-detail-slide.active {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100%

    animation: tpFadeIn 0.3s ease !important;

}



.tp-detail-slide img {

    max-width: 90% !important;

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    display: block !important;

}



/* Gallery Arrows */

.tp-gallery-arrow {

    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 28px !important;

    height: 28px !important;

    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.95) !important;

    border: 1px solid #cbd5e1 !important;

    color: #1e293b !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;

    transition: all 0.2s ease !important;

    z-index: 10 !important;

    padding: 0 !important;

}



.tp-gallery-arrow svg {

    width: 14px !important;

    height: 14px !important;

}



.tp-gallery-arrow:hover {

    background: var(--tp-primary, #dc2626) !important;

    color: #ffffff !important;

    border-color: var(--tp-primary, #dc2626) !important;

    transform: translateY(-50%) scale(1.06) !important;

}



.tp-gallery-arrow.tp-prev,

.tp-gallery-arrow-prev {

    left: 4px !important;

}



.tp-gallery-arrow.tp-next,

.tp-gallery-arrow-next {

    right: 4px !important;

}



/* Gallery Dots (Organized BELOW the stage) */

.tp-gallery-dots {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    margin: 14px 0 10px !important;

    width: 100% !important;

    position: static !important;

}



.tp-gallery-dot {

    width: 8px !important;

    height: 8px !important;

    border-radius: 50% !important;

    background: #cbd5e1 !important;

    border: none !important;

    cursor: pointer !important;

    padding: 0 !important;

    transition: all 0.25s ease !important;

}



.tp-gallery-dot.is-active,

.tp-gallery-dot.active {

    background: var(--tp-primary, #dc2626) !important;

    width: 22px !important;

    border-radius: 11px !important;

}



/* Thumbnail Strip */

.tp-gallery-thumbs {

    display: flex !important;

    gap: 10px !important;

    overflow-x: auto !important;

    padding: 6px 2px !important;

    justify-content: center !important;

    width: 100% !important;

}



.tp-gallery-thumb {

    width: 60px !important;

    height: 60px !important;

    border: 2px solid #e2e8f0 !important;

    border-radius: 6px !important;

    cursor: pointer !important;

    background: #ffffff !important;

    padding: 4px !important;

    transition: all 0.2s ease !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;

}



.tp-gallery-thumb img {

    max-width: 100% !important;

    max-height: 100% !important;

    object-fit: contain !important;

}



.tp-gallery-thumb:hover {

    border-color: #94a3b8 !important;

}



.tp-gallery-thumb.is-active,

.tp-gallery-thumb.active {

    border-color: var(--tp-primary, #dc2626) !important;

    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;

}



/* ==========================================================================

   3B. PRODUCT DETAIL 3D INTERACTIVE GLB VIEWER & 2D/3D SWITCHER

   ========================================================================== */

.tp-media-mode-bar {

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    background: #f1f5f9 !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 9999px !important;

    padding: 3px !important;

    margin-bottom: 14px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

    width: fit-content !important;

    max-width: 100% !important;

}



.tp-media-mode-btn {

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    padding: 6px 14px !important;

    border-radius: 9999px !important;

    font-size: 12.5px !important;

    font-weight: 600 !important;

    color: #64748b !important;

    background: transparent !important;

    border: none !important;

    cursor: pointer !important;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

    white-space: nowrap !important;

    line-height: 1 !important;

    outline: none !important;

}



.tp-media-mode-btn:hover {

    color: #0f172a !important;

}



.tp-media-mode-btn.is-active {

    background: #ffffff !important;

    color: #0f172a !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;

    font-weight: 700 !important;

}



.tp-media-mode-3d-btn.is-active {

    color: var(--tp-primary, #eb1c23) !important;

}



.tp-3d-live-pulse {

    display: inline-block !important;

    width: 7px !important;

    height: 7px !important;

    border-radius: 50% !important;

    background: #10b981 !important;

    box-shadow: 0 0 0 rgba(16, 185, 129, 0.4) !important;

    animation: tpPulseGreen 1.8s infinite !important;

}



@keyframes tpPulseGreen {

    0% {

        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    }

    70% {

        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);

    }

}



.tp-3d-viewer-container {

    position: relative !important;

    width: 100% !important;

    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f1f5f9 100%) !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    margin-bottom: 14px !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

    animation: tpFadeIn 0.3s ease !important;

}



.tp-3d-canvas-wrap {

    position: relative !important;

    width: 100% !important;

    height: 370px !important;

    background: transparent !important;

}



model-viewer#tp-main-model-viewer {

    width: 100% !important;

    height: 100% !important;

    display: block !important;

    outline: none !important;

    --progress-bar-color: var(--tp-primary, #eb1c23) !important;

}



.tp-3d-stage-overlay {

    position: absolute !important;

    top: 12px !important;

    right: 12px !important;

    display: flex !important;

    gap: 8px !important;

    z-index: 10 !important;

}



.tp-3d-ctrl-btn {

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    padding: 6px 11px !important;

    font-size: 11.5px !important;

    font-weight: 600 !important;

    color: #334155 !important;

    background: rgba(255, 255, 255, 0.94) !important;

    backdrop-filter: blur(6px) !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 6px !important;

    cursor: pointer !important;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;

    transition: all 0.2s ease !important;

    line-height: 1 !important;

}



.tp-3d-ctrl-btn:hover {

    background: #ffffff !important;

    color: var(--tp-primary, #eb1c23) !important;

    border-color: var(--tp-primary, #eb1c23) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 3px 8px rgba(235, 28, 35, 0.15) !important;

}



.tp-3d-poster {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    height: 100% !important;

    background: #f8fafc !important;

}



.tp-3d-poster-spinner {

    width: 36px !important;

    height: 36px !important;

    border: 3px solid #e2e8f0 !important;

    border-top-color: var(--tp-primary, #eb1c23) !important;

    border-radius: 50% !important;

    animation: tpSpin 0.8s linear infinite !important;

}



@keyframes tpSpin {

    to { transform: rotate(360deg); }

}



.tp-3d-guidance-pill {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    padding: 8px 12px !important;

    font-size: 11.5px !important;

    font-weight: 500 !important;

    color: #64748b !important;

    background: #ffffff !important;

    border-top: 1px solid #f1f5f9 !important;

    text-align: center !important;

}



/* 3D thumbnail item in thumbnail bar */

.tp-gallery-thumb.tp-thumb-3d-btn {

    background: #fef2f2 !important;

    border-color: #fecaca !important;

}



.tp-gallery-thumb.tp-thumb-3d-btn:hover,

.tp-gallery-thumb.tp-thumb-3d-btn.is-active {

    border-color: var(--tp-primary, #eb1c23) !important;

    box-shadow: 0 0 0 2px rgba(235, 28, 35, 0.25) !important;

    background: #ffffff !important;

}



.tp-thumb-3d-inner {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    height: 100% !important;

    width: 100% !important;

    text-align: center !important;

}



/* Universal Fullscreen Overlay for 3D Viewer (Supports iOS Safari, Android, iPad, Desktop) */

.tp-3d-viewer-container.tp-3d-fullscreen-active,

.tp-3d-viewer-container:fullscreen,

.tp-3d-viewer-container:-webkit-full-screen {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    max-width: 100vw !important;

    max-height: 100vh !important;

    z-index: 2147483647 !important;

    background: #f8fafc !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    box-shadow: none !important;

}



.tp-3d-viewer-container.tp-3d-fullscreen-active .tp-3d-canvas-wrap,

.tp-3d-viewer-container:fullscreen .tp-3d-canvas-wrap,

.tp-3d-viewer-container:-webkit-full-screen .tp-3d-canvas-wrap {

    flex: 1 1 auto !important;

    width: 100vw !important;

    height: calc(100vh - 44px) !important;

    max-height: calc(100vh - 44px) !important;

    border: none !important;

    border-radius: 0 !important;

    position: relative !important;

}



.tp-3d-viewer-container.tp-3d-fullscreen-active model-viewer,

.tp-3d-viewer-container:fullscreen model-viewer,

.tp-3d-viewer-container:-webkit-full-screen model-viewer {

    width: 100vw !important;

    height: 100% !important;

    max-height: 100% !important;

    border-radius: 0 !important;

    background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f1f5f9 100%) !important;

}



.tp-3d-viewer-container.tp-3d-fullscreen-active .tp-3d-stage-overlay,

.tp-3d-viewer-container:fullscreen .tp-3d-stage-overlay,

.tp-3d-viewer-container:-webkit-full-screen .tp-3d-stage-overlay {

    position: absolute !important;

    top: 18px !important;

    right: 18px !important;

    z-index: 2147483647 !important;

}



.tp-3d-viewer-container.tp-3d-fullscreen-active .tp-3d-guidance-pill,

.tp-3d-viewer-container:fullscreen .tp-3d-guidance-pill,

.tp-3d-viewer-container:-webkit-full-screen .tp-3d-guidance-pill {

    background: #ffffff !important;

    color: #475569 !important;

    border-top: 1px solid #e2e8f0 !important;

    padding: 10px 16px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    z-index: 2147483647 !important;

}



/* Hide header, sticky bottom bar and cookies when 3D fullscreen is open */

body.tp-3d-body-lock {

    overflow: hidden !important;

}



body.tp-3d-body-lock .l-header,

body.tp-3d-body-lock header,

body.tp-3d-body-lock .tp-mobile-sticky-bar,

body.tp-3d-body-lock .tp-sticky-bar,

body.tp-3d-body-lock #cookie-law-info-bar,

body.tp-3d-body-lock .cli-bar-container,

body.tp-3d-body-lock .us-cookie {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    z-index: -1 !important;

}



@media (max-width: 640px) {

    .tp-3d-canvas-wrap {

        height: 310px !important;

    }

    .tp-media-mode-bar {

        width: 100% !important;

        justify-content: center !important;

    }

    .tp-media-mode-btn {

        flex: 1 !important;

        justify-content: center !important;

        font-size: 12px !important;

        padding: 7px 10px !important;

    }

    /* Hide text from 3D control buttons on mobile; show only icons */

    .tp-3d-ctrl-btn .tp-3d-btn-text {

        display: none !important;

    }

    .tp-3d-ctrl-btn {

        padding: 8px !important;

        min-width: 34px !important;

        height: 34px !important;

        justify-content: center !important;

    }

}



/* ==========================================================================

   4. DETAIL ACTIONS: SHARE PRODUCT & PDF BROCHURE

   ========================================================================== */

.tp-detail-actions-bar {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 20px;

    padding-bottom: 16px;

    border-bottom: 1px solid #f1f5f9;

}



.tp-btn-share,

.tp-btn-pdf {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    font-weight: 600;

    padding: 8px 16px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

    text-decoration: none;

}



.tp-btn-share {

    background: #ffffff;

    color: #334155;

    border: 1px solid #d1d5db;

}



.tp-btn-share:hover {

    background: #f8fafc;

    color: var(--tp-primary);

    border-color: var(--tp-primary);

}



.tp-btn-pdf {

    background: var(--tp-primary);

    color: #ffffff !important;

    border: 1px solid var(--tp-primary);

}



.tp-btn-pdf:hover {

    background: #c81016;

    border-color: #c81016;

    box-shadow: 0 4px 12px rgba(235, 28, 35, 0.25);

}



/* ==========================================================================

   5. SOCIAL SHARE MODAL

   ========================================================================== */

.tp-share-modal-backdrop {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(15, 23, 42, 0.6);

    backdrop-filter: blur(4px);

    z-index: 999999;

    align-items: center;

    justify-content: center;

    padding: 16px;

}



.tp-share-modal-backdrop.open,

.tp-share-modal-backdrop.active,

.tp-share-modal-backdrop.is-active {

    display: flex !important;

    animation: tpModalFade 0.25s ease;

}



@keyframes tpModalFade {

    from { opacity: 0; }

    to { opacity: 1; }

}



.tp-share-modal {

    background: #ffffff;

    border-radius: 14px;

    max-width: 600px !important;

    width: 100%;

    padding: 26px 28px;

    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.3);

    position: relative;

    border: 1px solid #e2e8f0;

}



.tp-share-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;

    padding-bottom: 14px;

    border-bottom: 1px solid #f1f5f9;

}



.tp-share-modal-title {

    margin: 0 !important;

    padding: 0 !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    color: #0f172a;

    display: flex;

    align-items: center;

    gap: 8px;

}



.tp-share-modal-close {

    background: #f1f5f9;

    border: none;

    font-size: 20px;

    line-height: 1;

    color: #64748b;

    cursor: pointer;

    padding: 6px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

}



.tp-share-modal-close:hover {

    background: #e2e8f0;

    color: #0f172a;

}



.tp-share-product-preview {

    display: flex;

    align-items: center;

    gap: 14px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 12px;

    margin-bottom: 20px;

}



.tp-share-preview-thumb {

    width: 60px;

    height: 60px;

    object-fit: contain;

    background: #ffffff;

    border-radius: 6px;

    padding: 4px;

    border: 1px solid #e2e8f0;

}



.tp-share-preview-info h4 {

    margin: 0 0 4px !important;

    padding: 0 !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    color: #0f172a;

}



.tp-share-preview-info span {

    font-size: 12px;

    color: #64748b;

}



.tp-share-grid {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 10px !important;

    margin-bottom: 18px !important;

}



@media (max-width: 640px) {

    .tp-share-grid {

        grid-template-columns: 1fr !important;

    }

}



.tp-share-btn,

.tp-share-item {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    padding: 12px 18px !important;

    border-radius: 8px !important;

    text-decoration: none !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    border: 1px solid #e2e8f0 !important;

    background: #ffffff !important;

    color: #334155 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;

}



.tp-share-btn svg,

.tp-share-item svg {

    flex-shrink: 0 !important;

}



/* WhatsApp branded button */

.tp-share-wa {

    background: #25D366 !important;

    color: #ffffff !important;

    border-color: #25D366 !important;

}

.tp-share-wa svg {

    stroke: #ffffff !important;

}

.tp-share-wa:hover {

    background: #1eb956 !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.35) !important;

}



/* Email button */

.tp-share-mail {

    background: #f0f9ff !important;

    color: #0284c7 !important;

    border-color: #bae6fd !important;

}

.tp-share-mail svg {

    stroke: #0284c7 !important;

}

.tp-share-mail:hover {

    background: #0284c7 !important;

    color: #ffffff !important;

    border-color: #0284c7 !important;

}

.tp-share-mail:hover svg {

    stroke: #ffffff !important;

}



/* LinkedIn button */

.tp-share-li {

    background: #f0f7ff !important;

    color: #0a66c2 !important;

    border-color: #bfdbfe !important;

}

.tp-share-li svg {

    stroke: #0a66c2 !important;

}

.tp-share-li:hover {

    background: #0a66c2 !important;

    color: #ffffff !important;

    border-color: #0a66c2 !important;

}

.tp-share-li:hover svg {

    stroke: #ffffff !important;

}



/* Facebook button */

.tp-share-fb {

    background: #f8faff !important;

    color: #1877f2 !important;

    border-color: #c7d2fe !important;

}

.tp-share-fb svg {

    stroke: #1877f2 !important;

}

.tp-share-fb:hover {

    background: #1877f2 !important;

    color: #ffffff !important;

    border-color: #1877f2 !important;

}

.tp-share-fb:hover svg {

    stroke: #ffffff !important;

}



/* Copy Link */

.tp-share-copy {

    background: #f8fafc !important;

    color: #334155 !important;

    border-color: #cbd5e1 !important;

}

.tp-share-copy svg {

    stroke: #475569 !important;

}

.tp-share-copy:hover {

    background: #334155 !important;

    color: #ffffff !important;

    border-color: #334155 !important;

}

.tp-share-copy:hover svg {

    stroke: #ffffff !important;

}



/* Print / PDF */

.tp-share-print {

    background: #fef2f2 !important;

    color: #dc2626 !important;

    border-color: #fca5a5 !important;

}

.tp-share-print svg {

    stroke: #ffffff !important;

    fill: none !important;

}

.tp-share-print:hover {

    background: #dc2626 !important;

    color: #ffffff !important;

    border-color: #dc2626 !important;

}

.tp-share-print:hover svg {

    stroke: #ffffff !important;

}



/* Open PDF Specs in New Tab */

.tp-share-pdf {

    background: #eff6ff !important;

    color: #1d4ed8 !important;

    border-color: #bfdbfe !important;

}

.tp-share-pdf svg {

    stroke: #1d4ed8 !important;

}

.tp-share-pdf:hover {

    background: #1d4ed8 !important;

    color: #ffffff !important;

    border-color: #1d4ed8 !important;

}

.tp-share-pdf:hover svg {

    stroke: #ffffff !important;

}



.tp-share-qr-section {

    display: flex;

    align-items: center;

    gap: 16px;

    background: #f1f5f9;

    border-radius: 8px;

    padding: 12px 16px;

}



.tp-share-qr-code {

    width: 72px;

    height: 72px;

    border-radius: 4px;

    background: #ffffff;

    padding: 4px;

    border: 1px solid #e2e8f0;

}



.tp-share-qr-text {

    flex: 1;

}



.tp-share-qr-text strong {

    display: block;

    font-size: 13px;

    color: #0f172a;

    margin-bottom: 2px;

}



.tp-share-qr-text p {

    margin: 0;

    font-size: 12px;

    color: #64748b;

    line-height: 1.4;

}



.tp-copy-toast {

    position: fixed;

    bottom: 24px;

    left: 50%;

    transform: translateX(-50%) translateY(100px);

    background: #0f172a;

    color: #ffffff;

    padding: 10px 20px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 600;

    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

    z-index: 1000000;

}



.tp-copy-toast.show {

    transform: translateX(-50%) translateY(0);

    opacity: 1;

    visibility: visible;

}



/* ==========================================================================

   6. DEDICATED PRINT STYLESHEET (@media print) FOR CLEAN PDF BROCHURES

   ========================================================================== */

@media print {

    /* Reset visibility and overflow on all parents */

    html, body {

        background: #ffffff !important;

        color: #000000 !important;

        font-size: 11pt !important;

        overflow: visible !important;

        overflow-x: visible !important;

        overflow-y: visible !important;

        height: auto !important;

        min-height: auto !important;

        position: static !important;

    }



    .l-canvas, .l-main, .l-section, .l-section-h, .g-cols, .vc_col-sm-12, .vc_column-inner, .wpb_wrapper, .w-html, .topland-catalog-wrap, .topland-master-products, .topland-product-detail-wrap {

        overflow: visible !important;

        overflow-x: visible !important;

        overflow-y: visible !important;

        height: auto !important;

        min-height: auto !important;

        max-height: none !important;

        position: static !important;

        float: none !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        display: block !important;

        box-shadow: none !important;

    }



    /* Hide UI navigation, theme header/footer and interactive controls */

    header, footer, nav, aside,

    .l-header, .l-footer, .l-titlebar, .l-subheader, .w-titlebar, .titlebar, .titlebar-title, .ult-spacer,

    .tp-breadcrumbs, .tp-toolbar, .tp-detail-actions-bar, .tp-back-nav,

    .tp-gallery-arrow, .tp-gallery-dots, .tp-gallery-thumbs,

    .tp-share-modal-backdrop, #tp-share-modal, .tp-share-modal,

    .tp-table-search-wrap, .tp-table-live-search, .tp-drawer-backdrop,

    .admin-bar, #wpadminbar, .site-header, .site-footer {

        display: none !important;

        visibility: hidden !important;

    }



    /* Force display on print brochure header */

    .tp-print-header {

        display: block !important;

        margin-bottom: 20px !important;

        padding-bottom: 12px !important;

        border-bottom: 2px solid #eb1c23 !important;

    }



    .tp-print-remarks {

        display: block !important;

        margin: 10px 0 16px !important;

        padding: 10px 14px !important;

        background: #f8fafc !important;

        border-left: 3px solid #dc2626 !important;

        font-size: 10.5pt !important;

        color: #334155 !important;

        line-height: 1.5 !important;

    }



    .tp-print-header-inner {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

    }



    .tp-print-logo {

        font-size: 22pt !important;

        font-weight: 800 !important;

        color: #eb1c23 !important;

        letter-spacing: 1px !important;

    }



    .tp-print-meta {

        font-size: 9pt !important;

        color: #64748b !important;

        text-align: right !important;

    }



    /* Detail image and stage in print */

    .tp-detail-slides, .tp-detail-slide.is-active, .tp-detail-main-stage {

        display: block !important;

        overflow: visible !important;

        height: auto !important;

        max-height: none !important;

        background: transparent !important;

        border: none !important;

        padding: 0 !important;

    }



    .tp-detail-slide:not(.is-active) {

        display: none !important;

    }



    #tp-main-img,

    .tp-detail-slide img {

        max-height: 240px !important;

        width: auto !important;

        display: block !important;

        margin: 0 auto 15px auto !important;

        object-fit: contain !important;

    }



    /* Tables & Specs pagination */

    .tp-table-wrap, .tp-matrix-table-wrap, table {

        page-break-inside: auto !important;

        width: 100% !important;

        display: table !important;

    }

    thead {

        display: table-header-group !important;

    }

    tr {

        page-break-inside: avoid !important;

        page-break-after: auto !important;

    }

}

.tp-print-header,

.tp-print-remarks {

    display: none;

}



/* ==========================================================================

   INTERACTIVE ADVANCED ENHANCEMENTS (v2.6.0)

   ========================================================================== */



/* 1. Image Zoom Lens Effect */

.tp-detail-main-stage {

    cursor: crosshair !important;

}

.tp-detail-main-stage img {

    transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1) !important;

    transform-origin: center center;

    will-change: transform;

}

.tp-detail-main-stage:hover img {

    transform: scale(1.35) !important;

}



/* 2. Grid vs List View Switcher */

.tp-view-btn {

    transition: all 0.2s ease !important;

}

.tp-view-btn:hover {

    color: #0f172a !important;

}

.tp-products-grid.is-list-view {

    display: flex !important;

    flex-direction: column !important;

    gap: 16px !important;

}

.tp-products-grid.is-list-view .tp-card {

    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    padding: 12px 18px !important;

    min-height: auto !important;

    border-radius: 8px !important;

}

.tp-products-grid.is-list-view .tp-card-media {

    width: 140px !important;

    min-width: 140px !important;

    height: 120px !important;

    flex-shrink: 0 !important;

}

.tp-products-grid.is-list-view .tp-card-body {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 0 16px !important;

}

.tp-products-grid.is-list-view .tp-card-footer {

    width: auto !important;

    min-width: 180px !important;

    border-top: none !important;

    border-left: 1px solid #f1f5f9 !important;

    padding: 0 0 0 18px !important;

    margin-top: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 8px !important;

}

@media (max-width: 640px) {

    .tp-products-grid.is-list-view .tp-card {

        flex-direction: column !important;

    }

    .tp-products-grid.is-list-view .tp-card-media {

        width: 100% !important;

        height: 160px !important;

    }

    .tp-products-grid.is-list-view .tp-card-footer {

        border-left: none !important;

        border-top: 1px solid #f1f5f9 !important;

        padding-top: 12px !important;

    }

}



/* 3. Search Autocomplete Dropdown */

.tp-search-box {

    position: relative !important;

}

.tp-search-autocomplete {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    right: 0;

    min-width: 280px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    z-index: 9999;

    max-height: 280px;

    overflow-y: auto;

}

.tp-autocomplete-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 9px 14px;

    border-bottom: 1px solid #f1f5f9;

    text-decoration: none !important;

    color: #1e293b !important;

    transition: background 0.15s ease;

}

.tp-autocomplete-item:last-child {

    border-bottom: none;

}

.tp-autocomplete-item:hover {

    background: #f8fafc;

}

.tp-autocomplete-thumb {

    width: 36px;

    height: 36px;

    object-fit: contain;

    border-radius: 4px;

    background: #f8fafc;

    flex-shrink: 0;

}

.tp-autocomplete-title {

    font-size: 13px;

    font-weight: 600;

    color: #0f172a;

    line-height: 1.3;

}

.tp-autocomplete-model {

    font-size: 11.5px;

    color: #64748b;

}



/* 4. Active Matrix Row Highlight */

tr.tp-active-matrix-row {

    background: #fef2f2 !important;

    border-bottom: 1px solid #fecaca !important;

    position: relative;

}

tr.tp-active-matrix-row td {

    color: #0f172a !important;

    font-weight: 600 !important;

}

.tp-current-model-tag {

    display: inline-block;

    font-size: 10px;

    font-weight: 700;

    background: #dc2626;

    color: #ffffff !important;

    padding: 2px 7px;

    border-radius: 3px;

    margin-left: 8px;

    vertical-align: middle;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



/* Multi-Select Comparison Matrix Row Highlight */

tr.tp-selected-matrix-row {

    background: #f0f9ff !important;

    border-bottom: 1px solid #bae6fd !important;

    position: relative;

}

tr.tp-selected-matrix-row td {

    color: #0f172a !important;

    font-weight: 600 !important;

}

.tp-selected-model-tag {

    display: inline-block;

    font-size: 10px;

    font-weight: 700;

    background: #2563eb;

    color: #ffffff !important;

    padding: 2px 7px;

    border-radius: 3px;

    margin-left: 8px;

    vertical-align: middle;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);

}



/* 5. Mobile Sticky Bottom Action Bar */

.tp-mobile-sticky-bar {

    display: none;

}

@media (max-width: 768px) {

    .tp-mobile-sticky-bar {

        display: flex !important;

        position: fixed !important;

        bottom: 0 !important;

        left: 0 !important;

        right: 0 !important;

        background: #ffffff !important;

        border-top: 1px solid #e2e8f0 !important;

        padding: 8px 12px !important;

        gap: 8px !important;

        z-index: 99999 !important;

        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08) !important;

        box-sizing: border-box !important;

    }

    .tp-mobile-bar-btn {

        flex: 1 !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        padding: 10px 6px !important;

        border-radius: 6px !important;

        font-size: 12.5px !important;

        font-weight: 700 !important;

        border: none !important;

        cursor: pointer !important;

        text-decoration: none !important;

        line-height: 1 !important;

    }

    .tp-mobile-bar-pdf {

        background: #f1f5f9 !important;

        color: #0f172a !important;

    }

    .tp-mobile-bar-quote {

        background: #dc2626 !important;

        color: #ffffff !important;

    }

    .tp-mobile-bar-share {

        background: #0f172a !important;

        color: #ffffff !important;

    }

}



/* 6. Request a Quote / Inquiry Modal */

#tp-inquiry-modal .tp-share-modal {

    max-width: 520px !important;

    border-radius: 12px !important;

}

#tp-inquiry-form input:focus,

#tp-inquiry-form textarea:focus {

    border-color: #dc2626 !important;

    outline: none !important;

    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;

}



/* 7. Skeleton Shimmer Loader */

@keyframes tp-shimmer {

    0% { background-position: -200% 0; }

    100% { background-position: 200% 0; }

}

.tp-skeleton {

    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);

    background-size: 200% 100%;

    animation: tp-shimmer 1.5s infinite;

    border-radius: 4px;

}



/* ==========================================================================

   PHASE 2 DEVELOPMENTS (v2.8.0 - OCT 2026)

   ========================================================================== */



/* 1. Cards 4-Spec Expand / Collapse Toggle */

.tp-btn-toggle-specs {

    font-size: 12px !important;

    font-weight: 700 !important;

    color: var(--tp-primary, #eb1c23) !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    transition: color 0.15s ease !important;

    cursor: pointer !important;

}

.tp-btn-toggle-specs:hover {

    color: #b91c1c !important;

}

.tp-spec-more-item {

    animation: tpFadeIn 0.2s ease-in-out;

}

@keyframes tpFadeIn {

    from { opacity: 0; transform: translateY(-3px); }

    to { opacity: 1; transform: translateY(0); }

}



/* 2. Main Category Cards Subcategory Mini Slider */

.tp-card-subs-carousel {

    transition: all 0.2s ease !important;

}

.tp-sub-slide {

    transition: opacity 0.25s ease-in-out !important;

}

.tp-sub-slide img {

    transition: transform 0.2s ease !important;

}

.tp-sub-slide:hover img {

    transform: scale(1.05) !important;

}

.tp-subs-prev-btn:hover,

.tp-subs-next-btn:hover {

    background: #f1f5f9 !important;

    border-color: #94a3b8 !important;

    color: #0f172a !important;

}



/* 3. Filter Page 'No Results Found' Custom Lead Inquiry Form */

.tp-no-results-inquiry-card {

    transition: all 0.3s ease !important;

}

.tp-lead-form-grid input:focus,

.tp-lead-form-grid textarea:focus {

    border-color: var(--tp-primary, #eb1c23) !important;

    outline: none !important;

    box-shadow: 0 0 0 3px rgba(235, 28, 35, 0.12) !important;

}

.tp-inquiry-tag-pill {

    animation: tpFadeIn 0.2s ease;

}



/* 4. Cookie Consent Banner */

.tp-cookie-banner {

    animation: tpSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

@keyframes tpSlideUp {

    from { transform: translateY(50px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}

#tp-cookie-accept-all:hover {

    background: #dc2626 !important;

}

#tp-cookie-decline:hover {

    background: #1e293b !important;

    color: #ffffff !important;

}



/* ==========================================================================

   PHASE 3 ENHANCEMENTS: ZOOM, MODAL SCROLL, UNIFORM HEADINGS & ACCORDIONS

   ========================================================================== */



/* 1. Product Detail Image Stage, Sticky Column & Amazon-Style Zoom */

.tp-detail-top-grid {

    position: relative !important;

}



.tp-detail-image-col {

    position: -webkit-sticky !important;

    position: sticky !important;

    top: 105px !important;

    align-self: flex-start !important;

    z-index: 30 !important;

}



.tp-detail-main-stage {

    position: relative !important;

    width: 100% !important;

    min-height: 320px !important;

    height: 520px !important;

    max-height: var(--tp-detail-stage-max-h, 520px) !important;

    background: var(--tp-detail-img-bg, #f9fafb) !important;

    border: 1px solid #f1f5f9 !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: crosshair !important;

    user-select: none;

    -webkit-user-select: none;

}



.tp-detail-slide {

    background: var(--tp-detail-img-bg, #f9fafb) !important;

}



.tp-detail-main-stage img,

.tp-detail-slide img {

    max-width: 95% !important;

    max-height: var(--tp-detail-img-max-h, 490px) !important;

    width: auto !important;

    height: auto !important;

    display: block !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    pointer-events: none;

    transition: transform 0.2s ease-out;

    background: transparent !important;

}



/* Amazon-Style Zoom Lens (Reticle) */

.tp-zoom-lens {

    position: absolute;

    border: 1.5px solid rgba(235, 28, 35, 0.75) !important;

    background: rgba(235, 28, 35, 0.08) !important;

    cursor: crosshair !important;

    display: none;

    pointer-events: none;

    border-radius: 4px;

    z-index: 15 !important;

    box-shadow: 0 0 10px rgba(235, 28, 35, 0.25);

}



/* Amazon-Style HD Zoom Window / Flyout Viewport */

.tp-zoom-flyout {

    position: absolute !important;

    left: calc(100% + 22px) !important;

    top: 0 !important;

    width: 520px !important;

    height: 480px !important;

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 12px !important;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22) !important;

    overflow: hidden !important;

    z-index: 999999 !important;

    display: none;

    pointer-events: none;

}



.tp-zoom-flyout-inner {

    width: 100% !important;

    height: 100% !important;

    background-repeat: no-repeat !important;

    background-color: #ffffff !important;

}



@media (max-width: 1024px) {

    .tp-zoom-flyout,

    .tp-zoom-lens {

        display: none !important;

    }

    .tp-detail-image-col {

        position: static !important;

        top: auto !important;

    }

}



/* 2. Responsive Modal Scroll for Small Screens */

.tp-share-modal,

#tp-inquiry-modal .tp-share-modal,

.tp-compare-modal-content,

.spec-modal-box,

.tp-gate-dialog {

    max-height: 90vh !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

}

.tp-share-modal-backdrop,

.tp-gate-modal-backdrop {

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    padding: 16px !important;

    box-sizing: border-box !important;

}



/* 3. Detail Page All Section Titles Same 18px Font Size & Bold */

.tp-section-heading,

.tp-matrix-heading,

.tp-keyspecs-heading,

.tp-applications-heading,

.tp-features-heading,

.tp-addons-heading,

.tp-standards-heading,

.tp-moc-heading,

.tp-operating-heading,

.tp-accordion-title {

    font-size: 18px !important;

    font-weight: 700 !important;

    letter-spacing: -0.01em !important;

}



/* 4. Accordion Toggle Headers */

.tp-accordion-header {

    cursor: pointer !important;

    user-select: none !important;

}

.tp-accordion-item {

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.tp-accordion-item:hover {

    border-color: #cbd5e1 !important;

}



/* 5. Technical Matrix Column Search Filter Inputs & Sticky Table Headers */

.tp-matrix-table-wrap {

    position: relative !important;

    max-height: 70vh !important;

    overflow-y: auto !important;

}

.tp-matrix-table thead th.tp-matrix-th-top {

    position: sticky !important;

    top: 0 !important;

    z-index: 26 !important;

    background: #f8fafc !important;

}

.tp-matrix-table thead tr.tp-matrix-col-filter-row th {

    position: sticky !important;

    top: 41px !important;

    z-index: 25 !important;

    background: #ffffff !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;

}



.tp-col-search-input {

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.tp-col-search-input:focus {

    border-color: #eb1c23 !important;

    outline: none !important;

    box-shadow: 0 0 0 2px rgba(235, 28, 35, 0.15) !important;

}



/* 6. Shortened Pagination Ellipsis */

.tp-pagination-dots {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 8px;

    font-weight: 700;

    color: #94a3b8;

    user-select: none;

    font-size: 14px;

}



/* 7. Filter Bar Action Controls */

.tp-filter-bar-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px dashed #e2e8f0;

}

.tp-filter-action-btn {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 11px;

    font-weight: 600;

    color: #475569;

    background: #f1f5f9;

    padding: 4px 8px;

    border-radius: 4px;

    border: 1px solid #cbd5e1;

    cursor: pointer;

    transition: all 0.2s;

    text-decoration: none;

}

.tp-filter-action-btn:hover {

    background: #e2e8f0;

    color: #0f172a;

}

.tp-filter-action-btn.tp-filter-guide-btn {

    color: #1d4ed8;

    background: #eff6ff;

    border-color: #bfdbfe;

}

.tp-filter-action-btn.tp-filter-guide-btn:hover {

    background: #dbeafe;

    color: #1e40af;

}

.tp-filter-action-btn.tp-filter-clear-btn {

    color: #b91c1c;

    background: #fef2f2;

    border-color: #fecaca;

}

.tp-filter-action-btn.tp-filter-clear-btn:hover {

    background: #fee2e2;

    color: #991b1b;

}



/* ==========================================================================

   MOBILE & TABLET RESPONSIVE ENHANCEMENTS (DOWNLOADS, HEADER, SEARCH & BAR)

   ========================================================================== */



/* 1. Responsive Downloads Grid & Cards */

.tp-downloads-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 14px;

}



.tp-download-card {

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    padding: 16px 18px;

    background: #f8fafc;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    transition: all 0.2s ease;

    box-sizing: border-box;

}



.tp-download-card:hover {

    border-color: #cbd5e1;

    background: #ffffff;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);

}



.tp-download-card-info {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

    min-width: 0;

}



.tp-download-card-icon {

    width: 44px;

    height: 44px;

    border-radius: 10px;

    background: #fee2e2;

    color: #dc2626;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.tp-download-card-text {

    flex: 1;

    min-width: 0;

}



.tp-download-card-title {

    font-size: 14px;

    font-weight: 700;

    color: #0f172a;

    line-height: 1.35;

    word-break: break-word;

}



.tp-download-card-meta {

    font-size: 11.5px;

    color: #64748b;

    margin-top: 3px;

    font-weight: 500;

}



.tp-download-card-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 9px 16px;

    background: #dc2626;

    color: #ffffff !important;

    border-radius: 7px;

    font-weight: 600;

    font-size: 13px;

    text-decoration: none;

    white-space: nowrap;

    flex-shrink: 0;

    transition: background 0.15s ease, transform 0.15s ease;

}



.tp-download-card-btn:hover {

    background: #b91c1c;

    transform: translateY(-1px);

}



/* Mobile Stacking for Downloads: clean vertical layout on screens <= 640px */

@media (max-width: 640px) {

    .tp-downloads-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }

    .tp-download-card {

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 14px !important;

        padding: 14px 14px !important;

    }

    .tp-download-card-info {

        width: 100% !important;

    }

    .tp-download-card-title {

        font-size: 13.5px !important;

    }

    .tp-download-card-btn {

        width: 100% !important;

        padding: 11px 16px !important;

        font-size: 13.5px !important;

        border-radius: 8px !important;

    }

}



/* 2. Responsive Table Search Bar on Mobile */

@media (max-width: 640px) {

    .tp-table-search-wrap {

        flex-wrap: wrap !important;

        width: 100% !important;

        gap: 8px !important;

    }

    .tp-table-search-box {

        width: 100% !important;

        flex: 1 1 100% !important;

    }

    .tp-table-live-search {

        width: 100% !important;

        box-sizing: border-box !important;

    }

    .tp-table-counter-badge {

        align-self: flex-start !important;

    }

}



/* 3. Clearance for Mobile Sticky Bottom Bar */

@media (max-width: 768px) {

    .topland-catalog-wrap {

        padding-bottom: 75px !important;

    }

}



/* 4. Mobile Header Logo Proportional Sizing (Prevents Hamburger Collisions) */

@media (max-width: 640px) {

    .l-header .w-image-h img,

    .l-header .w-logo img {

        max-height: 48px !important;

        width: auto !important;

    }

}





/* Product Card Models Count Badge (Products: X above View Details) */

.tp-card-models-count {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 11.5px;

    font-weight: 700;

    color: #475569;

    letter-spacing: -0.01em;

    flex-shrink: 0;

}

.tp-card-models-count svg {

    color: #eb1c23;

}



/* Myntra-Style Filter Expansion: +X more button & Modal */

.tp-filter-more-btn {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: none;

    border: none;

    padding: 3px 0 0;

    margin-top: 2px;

    font-size: 12px;

    font-weight: 700;

    color: #eb1c23;

    cursor: pointer;

    text-decoration: none;

    transition: color 0.15s ease;

}

.tp-filter-more-btn:hover {

    color: #b91c1c;

    text-decoration: underline;

}



/* Modal Overlay & Container */

.tp-filter-modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(15, 23, 42, 0.65);

    backdrop-filter: blur(4px);

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

}

.tp-filter-modal-container {

    background: #ffffff;

    border-radius: 12px;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    width: 100%;

    max-width: 95vw; width: 95vw;

    max-height: 85vh;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    position: relative;

    border: 1px solid #e2e8f0;

}

.tp-filter-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 20px;

    border-bottom: 1px solid #e2e8f0;

    background: #ffffff;

}

.tp-filter-modal-header h3 {

    margin: 0;

    font-size: 16px;

    font-weight: 800;

    color: #0f172a;

}

.tp-filter-modal-close {

    background: none;

    border: none;

    font-size: 24px;

    line-height: 1;

    color: #64748b;

    cursor: pointer;

    padding: 2px 6px;

    border-radius: 4px;

}

.tp-filter-modal-close:hover {

    color: #0f172a;

    background: #f1f5f9;

}



/* Search bar & Alphabetical Bar */

.tp-filter-modal-toolbar {

    padding: 12px 20px;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

}

.tp-filter-modal-search {

    position: relative;

    flex: 0 0 240px;

}

.tp-filter-modal-search input {

    width: 100%;

    height: 36px;

    padding: 6px 12px 6px 32px;

    font-size: 13px;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    outline: none;

    box-sizing: border-box;

}

.tp-filter-modal-search input:focus {

    border-color: #eb1c23;

    box-shadow: 0 0 0 2px rgba(235, 28, 35, 0.15);

}

.tp-filter-modal-search svg {

    position: absolute;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    pointer-events: none;

}

.tp-filter-modal-alpha {

    display: flex;

    align-items: center;

    gap: 5px;

    flex-wrap: wrap;

    font-size: 12px;

    font-weight: 700;

    color: #64748b;

}

.tp-alpha-link {

    cursor: pointer;

    padding: 2px 5px;

    border-radius: 3px;

    transition: all 0.15s;

    user-select: none;

}

.tp-alpha-link:hover, .tp-alpha-link.is-active {

    color: #eb1c23;

    background: #fee2e2;

}



/* Multi-column Grid of Options */

.tp-filter-modal-body {
    padding: 24px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 10px 14px !important;
    align-content: flex-start !important;
    max-height: 65vh !important;
}

.tp-filter-modal-body .tp-modal-checkbox-item {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    font-weight: 500;

    color: #1e293b;

    cursor: pointer;

    line-height: 1.35;

    padding: 7px 14px;

    border-radius: 6px;

    border: 1px solid #e2e8f0;

    background: #ffffff;

    transition: all 0.12s ease;

    white-space: nowrap;

    flex: 0 0 auto;

    max-width: 100%;

    box-sizing: border-box;

}

.tp-filter-modal-body .tp-modal-checkbox-item:hover {

    background: #f8fafc;

    border-color: #94a3b8;

}

.tp-filter-modal-body .tp-modal-checkbox-item:has(input:checked) {

    background: #fef2f2;

    border-color: #fca5a5;

    font-weight: 700;

    color: #b91c1c;

}

.tp-filter-modal-body .tp-modal-checkbox-item.is-zero-count {

    background: #f8fafc !important;

    border-color: #e2e8f0 !important;

    color: #94a3b8 !important;

}

.tp-filter-modal-body .tp-modal-checkbox-item.is-zero-count .tp-modal-checkbox-label {

    color: #94a3b8 !important;

}

.tp-filter-modal-body .tp-modal-checkbox-item.is-zero-count .tp-modal-filter-count {

    color: #cbd5e1 !important;

}

.tp-filter-modal-body .tp-modal-checkbox-item input[type="checkbox"] {

    width: 15px;

    height: 15px;

    accent-color: #eb1c23;

    cursor: pointer;

    flex-shrink: 0;

}

.tp-filter-modal-body .tp-modal-opt-count {

    font-size: 11px;

    color: #94a3b8;

    margin-left: 2px;

}

.tp-filter-modal-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 20px;

    background: #f8fafc;

    border-top: 1px solid #e2e8f0;

}

.tp-filter-modal-footer .tp-modal-selected-summary {

    font-size: 12.5px;

    font-weight: 600;

    color: #475569;

}

.tp-filter-modal-footer .tp-modal-apply-btn {

    padding: 8px 20px;

    background: #eb1c23;

    color: #ffffff;

    border: none;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.15s ease;

}

.tp-filter-modal-footer .tp-modal-apply-btn:hover {

    background: #b91c1c;

}





/* Selected Filter Promoted from Popup to Top of Sidebar */

.tp-checkbox-item.tp-promoted-popup-item {

    background: #fef2f2 !important;

    border-left: 3px solid #eb1c23 !important;

    padding: 4px 6px !important;

    border-radius: 4px !important;

    margin-bottom: 4px !important;

}

.tp-checkbox-item.tp-promoted-popup-item .tp-checkbox-label {

    font-weight: 700 !important;

    color: #b91c1c !important;

}





/* "View Products" Scroll Button below Product Specifications Table */

.tp-view-products-btn-wrap {

    margin-top: 16px;

}

.tp-btn-view-matrix {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 20px;

    background: #eb1c23;

    color: #ffffff !important;

    border: none;

    border-radius: 6px;

    font-weight: 600;

    font-size: 13.5px;

    text-decoration: none !important;

    cursor: pointer;

    transition: all 0.2s ease;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

}

.tp-btn-view-matrix:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(235, 28, 35, 0.28) !important;

    color: #ffffff !important;

}

.tp-btn-view-matrix svg {

    transition: transform 0.2s ease;

}

.tp-btn-view-matrix:hover svg {

    transform: translateY(2px);

}



/* Subtle target focus pulse when scrolled into view */

.tp-matrix-focused {

    box-shadow: 0 0 0 2px #eb1c23, 0 10px 25px -5px rgba(235, 28, 35, 0.18) !important;

    transition: box-shadow 0.35s ease;

}



/* Checkbox Custom Styling - Redesigned Circular Radio matching Client Image 3 */
.tp-checkbox-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    padding: 2px 0 !important;
    font-size: 13px;
    line-height: 1.3 !important;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.tp-checkbox-item input[type="checkbox"],
.tp-filter-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 3px !important;
    border: 2px solid #222222 !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle !important;
    margin: 0 10px 0 0 !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.tp-checkbox-item input[type="checkbox"]:hover,
.tp-filter-checkbox:hover {
    border-color: #000000 !important;
}

.tp-checkbox-item input[type="checkbox"]:checked,
.tp-filter-checkbox:checked {
    border: 2px solid #eb1c23 !important;
    background-color: #eb1c23 !important;
    box-shadow: inset 0 0 0 3px #ffffff !important;
}

.tp-checkbox-item input[type="checkbox"]::after,
.tp-checkbox-item input[type="checkbox"]:checked::after,
.tp-filter-checkbox::after,
.tp-filter-checkbox:checked::after {
    display: none !important;
    content: none !important;
}

.tp-checkbox-item .tp-checkbox-label {
    font-size: 13px;
    color: #334155;
    transition: color 0.15s ease;
}

.tp-checkbox-item .tp-filter-count {
    font-size: 11.5px;
    color: #64748b;
    margin-left: auto;
    font-weight: 500;
}

.tp-checkbox-item input[type="checkbox"]:checked ~ .tp-checkbox-label,
.tp-checkbox-item:has(input:checked) .tp-checkbox-label,
.tp-checkbox-item.is-selected .tp-checkbox-label,
.tp-checkbox-item input:checked ~ .tp-checkbox-label {
    color: var(--tp-primary, #eb1c23) !important;
    font-weight: 700 !important;
}

.tp-checkbox-item input[type="checkbox"]:checked ~ .tp-filter-count,
.tp-checkbox-item:has(input:checked) .tp-filter-count,
.tp-checkbox-item.is-selected .tp-filter-count,
.tp-checkbox-item input:checked ~ .tp-filter-count {
    color: var(--tp-primary, #eb1c23) !important;
    font-weight: 700 !important;
}

.tp-checkbox-item:hover,
.tp-checkbox-item:hover .tp-checkbox-label,
.tp-checkbox-item:hover .tp-filter-count {
    color: var(--tp-primary, #eb1c23) !important;
}

.tp-checkbox-item:hover input[type="checkbox"]:not(:checked),
.tp-checkbox-item:hover .tp-filter-checkbox:not(:checked) {
    border-color: var(--tp-primary, #eb1c23) !important;
}

/* Excel-Style Dropdown Filter on Matrix Table (Client Request) */
.tp-matrix-excel-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 6px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: middle;
}

.tp-matrix-excel-filter-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.tp-matrix-excel-filter-btn.is-active {
    background: var(--tp-primary, #eb1c23) !important;
    border-color: var(--tp-primary, #eb1c23) !important;
    color: #ffffff !important;
}

.tp-excel-popover {
    position: absolute;
    z-index: 99999;
    width: 240px;
    max-width: 90vw;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    font-size: 12.5px;
    color: #1e293b;
    box-sizing: border-box;
    overflow: hidden;
    animation: tpFadeIn 0.12s ease-out;
}

.tp-excel-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 12px;
    color: #334155;
}

.tp-excel-popover-close {
    background: none;
    border: none;
    font-size: 15px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.tp-excel-popover-close:hover {
    color: #0f172a;
}

.tp-excel-popover-search-wrap {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
}

.tp-excel-popover-search {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 11.5px;
    outline: none;
}
.tp-excel-popover-search:focus {
    border-color: var(--tp-primary, #eb1c23);
}

.tp-excel-popover-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 6px;
    scrollbar-width: thin;
}

.tp-excel-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    color: #334155;
    user-select: none;
}
.tp-excel-item:hover {
    background: #f1f5f9;
}

.tp-excel-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--tp-primary, #eb1c23);
    width: 14px;
    height: 14px;
}

.tp-excel-popover-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 10px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.tp-excel-btn {
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}
.tp-excel-btn-apply {
    background: var(--tp-primary, #eb1c23);
    color: #fff;
}
.tp-excel-btn-apply:hover {
    opacity: 0.9;
}
.tp-excel-btn-clear {
    background: #e2e8f0;
    color: #475569;
}
.tp-excel-btn-clear:hover {
    background: #cbd5e1;
}

.tp-filter-modal-body .tp-modal-filter-count {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-left: 2px !important;
}
.tp-filter-modal-body .tp-modal-checkbox-item:has(input:checked) .tp-modal-filter-count {
    color: #dc2626 !important;
    font-weight: 700 !important;
}

/* Sidebar zero-count state (matching Image 2: light gray radio & text) */
.tp-checkbox-item.is-zero-count {
    color: #94a3b8 !important;
}
.tp-checkbox-item.is-zero-count .tp-checkbox-label {
    color: #94a3b8 !important;
}
.tp-checkbox-item.is-zero-count .tp-filter-count {
    color: #cbd5e1 !important;
}
.tp-checkbox-item.is-zero-count input.tp-filter-checkbox {
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
    cursor: default !important;
}
.tp-checkbox-item.is-zero-count input.tp-filter-checkbox:checked {
    border-color: #eb1c23 !important;
    background-color: #eb1c23 !important;
}


/* Responsive Detail Stage Mobile Clamping */
@media (max-width: 768px) {
    .tp-detail-image-col {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        position: static !important;
    }
    .tp-detail-main-stage {
        min-height: 280px !important;
        height: 380px !important;
        max-height: 380px !important;
    }
    .tp-detail-main-stage img,
    .tp-detail-slide img {
        max-height: 350px !important;
    }
}


/* Modal Checkbox Items in Columns */
.tp-filter-modal-body .tp-modal-checkbox-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    line-height: 1.35 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    transition: all 0.12s ease !important;
    white-space: normal !important;
    word-break: break-word !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tp-filter-modal-body .tp-modal-checkbox-item .tp-modal-checkbox-label {
    flex: 1 1 auto !important;
    overflow: visible !important;
    line-height: 1.35 !important;
}

.tp-filter-modal-body .tp-modal-checkbox-item .tp-modal-filter-count {
    margin-left: auto !important;
    font-size: 11.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

@media (max-width: 640px) {
    .tp-filter-modal-body {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        padding: 16px !important;
        gap: 8px !important;
    }
}

/* Card Actions Column: Products Count Above View Details Button */
.tp-card-footer {
    align-items: flex-end !important;
}

.tp-card-actions-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.tp-card-actions-col .tp-card-models-count {
    white-space: nowrap !important;
}

.tp-card-actions-col .tp-btn-view {
    white-space: nowrap !important;
}


/* ========================================================
   CRITICAL: Filter Option Selected & Hover Text Color RED
   ======================================================== */
.tp-checkbox-item:hover,
.tp-checkbox-item:hover .tp-checkbox-label,
.tp-checkbox-item:hover .tp-filter-count,
.tp-filter-group .tp-checkbox-item:hover,
.tp-filter-group .tp-checkbox-item:hover .tp-checkbox-label,
.tp-filter-group .tp-checkbox-item:hover .tp-filter-count {
    color: #eb1c23 !important;
}

.tp-checkbox-item:hover input[type="checkbox"]:not(:checked),
.tp-checkbox-item:hover .tp-filter-checkbox:not(:checked) {
    border-color: #eb1c23 !important;
}

.tp-checkbox-item input[type="checkbox"]:checked ~ .tp-checkbox-label,
.tp-checkbox-item:has(input:checked) .tp-checkbox-label,
.tp-checkbox-item.is-selected .tp-checkbox-label,
.tp-checkbox-item input:checked ~ .tp-checkbox-label,
.tp-filter-group .tp-checkbox-item input:checked ~ .tp-checkbox-label,
.tp-filter-group .tp-checkbox-item:has(input:checked) .tp-checkbox-label,
.tp-checkbox-item.is-zero-count:has(input:checked) .tp-checkbox-label,
.tp-checkbox-item.is-zero-count input:checked ~ .tp-checkbox-label {
    color: #eb1c23 !important;
    font-weight: 700 !important;
}

.tp-checkbox-item input[type="checkbox"]:checked ~ .tp-filter-count,
.tp-checkbox-item:has(input:checked) .tp-filter-count,
.tp-checkbox-item.is-selected .tp-filter-count,
.tp-checkbox-item input:checked ~ .tp-filter-count,
.tp-filter-group .tp-checkbox-item input:checked ~ .tp-filter-count,
.tp-filter-group .tp-checkbox-item:has(input:checked) .tp-filter-count,
.tp-checkbox-item.is-zero-count:has(input:checked) .tp-filter-count,
.tp-checkbox-item.is-zero-count input:checked ~ .tp-filter-count {
    color: #eb1c23 !important;
    font-weight: 700 !important;
}

/* Modal Popup Checkbox Selected & Hover */
.tp-filter-modal-body .tp-modal-checkbox-item:hover {
    border-color: #eb1c23 !important;
    background: #fff5f5 !important;
}

.tp-filter-modal-body .tp-modal-checkbox-item:hover .tp-modal-checkbox-label,
.tp-filter-modal-body .tp-modal-checkbox-item:hover .tp-modal-filter-count {
    color: #eb1c23 !important;
}

.tp-filter-modal-body .tp-modal-checkbox-item:has(input:checked) {
    border-color: #eb1c23 !important;
    background: #fef2f2 !important;
}

.tp-filter-modal-body .tp-modal-checkbox-item:has(input:checked) .tp-modal-checkbox-label,
.tp-filter-modal-body .tp-modal-checkbox-item:has(input:checked) .tp-modal-filter-count {
    color: #eb1c23 !important;
    font-weight: 700 !important;
}

/* Filter Popup Unavailable / Zero-Count Styling (Matching Left Sidebar) */
.tp-filter-modal-body .tp-modal-checkbox-item.is-zero-count {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}
.tp-filter-modal-body .tp-modal-checkbox-item.is-zero-count .tp-modal-checkbox-label {
    color: #94a3b8 !important;
}
.tp-filter-modal-body .tp-modal-checkbox-item.is-zero-count .tp-modal-filter-count {
    color: #94a3b8 !important;
}
.tp-filter-modal-body .tp-modal-checkbox-item.is-zero-count input[type="checkbox"] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Dynamic Filter Guide Modal Rich Content Styling */
#tp-filter-guide-modal .tp-filter-guide-content {
    font-size: 14px;
    line-height: 1.6;
    color: #1e293b;
    overflow-x: auto;
}
#tp-filter-guide-modal .tp-filter-guide-content * {
    box-sizing: border-box;
}
#tp-filter-guide-modal .tp-filter-guide-content table {
    border-collapse: collapse;
    margin: 16px 0;
    max-width: 100%;
}
#tp-filter-guide-modal .tp-filter-guide-content td,
#tp-filter-guide-modal .tp-filter-guide-content th {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
}
#tp-filter-guide-modal .tp-filter-guide-content blockquote {
    margin: 14px 0;
    padding: 10px 16px;
    background: #f8fafc;
    border-left: 4px solid #eb1c23;
    font-style: italic;
}
#tp-filter-guide-modal .tp-filter-guide-content pre,
#tp-filter-guide-modal .tp-filter-guide-content code {
    background: #f1f5f9;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: monospace;
}
#tp-filter-guide-modal .tp-filter-guide-content hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid #e2e8f0;
}
#tp-filter-guide-modal .tp-filter-guide-content img {
    max-width: 100%;
    height: auto;
}