:root {
    /* Colors */
    --color-brand-teal: #00999a;
    --color-brand-teal-dark: #003640;
    --color-table-border: #b5b5b5;
    --color-table-header: #eaeaea;
    --color-table-filter: #f0f0f0;
    --color-table-highlight: #faf9f9;
    --color-grey-light: #969696;
    --color-grey-dark: #5f5d5d;
    --gradient-shimmer: linear-gradient(90deg, #fafafa 25%, #f5f5f5 50%, #fafafa 75%);
    --size-table-cell-min: 220px;
    --size-table-cell-max: 235px;
}

/* Custom CSS */
table.dataTable thead th,
table.dataTable thead td {
	padding: 0;
	border-bottom: none;
}

th.sorting > div {
	padding: 1rem 0.5rem;
}

table.dataTable.display tbody tr > td {
	text-align: center;
	/* border: 1px solid var(--color-table-border); */
	white-space: nowrap;
	color: var(--color-grey-light) !important;
}

/* 
table.dataTable.display tbody tr > td:first-child {
    border-left: 1px solid var(--color-table-border);
    border-right: 1px solid var(--color-table-border);
}

table.dataTable.display tbody tr > td:last-child {
    border-right: 1px solid var(--color-table-border);
}
*/

table.dataTable.no-footer {
	border-bottom: none;
}

.table-buttons {
	margin-top: 2rem;
	margin-bottom: 2rem;
	position: relative;
}

.table-buttons button ,
.table-buttons .dt-buttons .dt-button {
    margin: 0 0.1rem;
    height: 36px;
    padding: 1rem 0.7rem;
    line-height: 0;
    font-size: 0.8rem;
    border: 1px solid var(--color-table-border);
    border-radius: var(--bs-border-radius);
}

.dataTables_length {
	margin-bottom: 2rem;
}

.partId.sorting {
	text-align: center;
}

#partsTable thead tr > th.sorting:nth-of-type(1) .param-header {
    background-color: var(--color-table-header);
    color: #000;
}

.info-icon {
	padding-left: 10px;
	padding-right: 10px;
}

table.dataTable.display tbody tr > td:nth-of-type(1) {
	text-align: left;
}

.dummy-scrollbar {
	overflow-x: auto;
	overflow-y: hidden;
	height: 20px;
}

.dummy-content {
	/* Set this width to be the same as your table's width when it overflows. 
    You might need to adjust this value based on your actual table width. */
	width: 2790px;
	height: 1px;
}

.dummy-scrollbar-top,
.dummy-scrollbar-bottom,
.table-container {
	overflow-x: scroll;
	overflow-y: hidden;
}

.dummy-scrollbar-top {
    display: none !important;
}

.dummy-scrollbar-bottom {
    height: 17px;
    margin-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f0f0f0;
    border-top: 1px solid #ddd;
    display: none;
}

.dummy-scrollbar-bottom.is-fixed {
    margin-top: 0;
    z-index: 999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.08);
}

.dummy-content-top,
.dummy-content-bottom {
    height: 17px;
}

.dummy-scrollbar-bottom::-webkit-scrollbar {
    height: 15px;
}

.dummy-scrollbar-bottom::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

#partsTable_filter {
    display: none;
}

.partsTable_wrapper {
	height: 200px;
	background-color: #88ff88;
	overflow: auto;
}

table.dataTable thead .sorting_asc > span {
	background-image: url("https://cdn-icons-png.flaticon.com/128/8572/8572573.png");
	background-repeat: no-repeat;
    background-position: top 1.1rem right 0.2rem;
    background-size: 1.1rem;
}

table.dataTable thead .sorting_desc > span {
    background-image: url("https://cdn-icons-png.flaticon.com/128/8572/8572572.png");
	background-repeat: no-repeat;
    background-position: top 1.1rem right 0.2rem;
    background-size: 1.1rem;
}

th:not(:first-child) .param-header span {
    display: none;
}

#partCountVal ,
table.dataTable thead .sorting {
	background-image: none !important;
}

.GFG {
	color: #FFF;
	background: green;
	padding: 5px 10px;
}

.tooltip-pdf b {
    font-weight: bold!important
}

#fadetip {
	opacity: 0;
	transition: opacity 1s;
}

#delay {
	opacity: 0;
	transition: opacity 5s;
	transition-delay: 3s;
}

.hover-text:hover #fadetip {
	opacity: 1;
}

.hover-text:hover #delay {
	opacity: 1;
}

.hover-text {
	position: relative;
	display: inline-block;
}

.hover-text a {
	color: var(--color-brand-teal);
	font-weight: bold;
}

.pdfdocicon .tooltip-pdf {
	visibility: hidden;
	width: 320px;
	background-color: #000;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
}

.pdfdocicon:hover .tooltip-pdf {
	visibility: visible;
}

.tooltip-pdf a {
	color: var(--color-brand-teal);
	font-weight: bold;
}

.new_product {
    background-color: var(--color-brand-teal);
    color: #FFF;
    padding-right: 7px;
    padding-left: 7px;
    margin-left: 2px;
    font-size: 16px;
}

.topbuttonlist,
.dt-button {
	font-family: 'titillium web';
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	text-align: center;
	color: #FFF;
	background-color: inherit;
	margin: 0 0 0 0;
	padding: 10px 20px 10px 20px;
	border: none;
	border: 1px solid #333;
	letter-spacing: 1.4px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	text-transform: uppercase;
	background-image: none;
	color: #FFF !important;
	background-color: #333 !important;
}

div.dt-buttons > .dt-button:first-child {
	position: absolute;
	right: 0;
	margin-right: 2px;
}

.buttons-columnVisibility {
	background-color: #FFF !important;
	color: #333 !important;
	font-size: 13px;
}

body.circuit-protection .table-buttons {
    float: right;
}

body.circuit-protection .table-buttons .dt-button.buttons-csv {
    position: relative;
}

/* .products .parametric-search button (common/_main.css) floats every button
   right, which reverses their visual order relative to DOM order. Power
   Management's buttons render in the expected order (Customize Parameters
   first) as direct DOM children, so make .table-buttons a flex container
   instead: flex items ignore float entirely, restoring natural DOM order,
   and justify-content keeps the group flush against the right edge. */
body.power-management .table-buttons {
    display: flex;
    justify-content: flex-end;
}

/*
ADJUSTED FOR THE STICKY HEADER STARTS HERE
*/

thead th {
	position: sticky;
	top: 0;
	background-color: #f8f9fa;
	z-index: 10;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

/*
ADJUSTED FOR THE STICKY HEADER ENDS HERE
*/

#partsTable th,
#partsTable td {
	box-sizing: border-box;
	padding: 8px;
	margin: 0;
}

/* A class that sets fixed positioning but starts invisible. */
.parametrics-search--fixed {
  position: fixed;
  top: 0;
  left: 0;         
  z-index: 22;
  background: #fff;
  /* Start hidden and fade in/out with a transition. */
  opacity: 0;
  transition: opacity 0.3s ease; 
}

/* A second class that simply toggles opacity from 0 to 1. */
.parametrics-search--fixed.parametrics-search--visible {
  opacity: 1;  
}

table.dataTable thead th, table.dataTable thead td {
	padding: 0 !important;
}

/* =================================================================
   SPECIAL ELEMENTS
   ================================================================= */

#partId {
	content: "";
	display: block;
    position: relative;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	right: 10px;
	top: 20%;
	cursor: pointer;
	padding: 5px 50px 5px 10px;
	border: 1px solid #ccc;
    transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
}

.highlighted-interface {
    background-color: #ffff99;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Part number styling */
.part-number-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 28px;
}

.part-buttons {
    display: block;
    width: 100%;
    padding-left: 21px;
    margin-top: 4px;
}

.part-buttons > a:not(:last-child)::after {
    content: "|";
    margin: 0 0.5em;
    color: #ccc;
}

span.part-number {
    display: inline-block;
    flex: 1;
    width: auto;
    margin-bottom: 0;
    padding-left: 21px;
    text-align: left;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

span.part-number a {
    text-decoration: none;
    color: var(--color-grey-dark);
    white-space: nowrap !important;
    font-weight: 600;
    font-size: 18px;
}

.part-buttons span.pdfdocicon,
.part-buttons > a {
    display: inline-block;
}

span.part-number::after {
    content: none;
}

/* =================================================================
   TABLE STYLING OVERRIDES
   ================================================================= */

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr > .sorting_1 {
    text-align: left;
}

#partsTable tbody tr:first-child td {
    border-top: none;
}

table.dataTable.display tbody tr > td img {
    max-width: 20px !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* Remove DataTables row effects */
table.dataTable.stripe>tbody>tr.odd>*, 
table.dataTable.display>tbody>tr.odd>*,
table.dataTable.hover>tbody>tr:hover>*, 
table.dataTable.display>tbody>tr:hover>* {
    box-shadow: none !important;
}

/* =================================================================
   UTILITIES
   ================================================================= */

.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    position: relative;
    z-index: 1;
}

.helptexttohide {
    display: block !important;
    padding: 0;
    padding-left: 0 !important;
}

div#table-header {
    margin-bottom: 1.5rem;
}

#table-header-column-1 .dataTables_length {
    margin: 0;
    padding: 0;
    margin-bottom: 0;
}

#table-header-column-1 .dataTables_length select {
    padding: 0.375rem 0.3rem;
    height: 36px;
    margin: 0 2px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#table-header-column-1 .dataTables_length select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: gray;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

#table-header-column-2 #searchButton {
    height: 36px;
    line-height: 100%;
    margin: 0;
    margin-top: 1rem!important;
    margin-left: -0.7rem;
    background-color: var(--color-brand-teal) !important;
    font-weight: 500;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
}

@media (max-width: 1199.98px) {
    #table-header-column-2 #searchButton {
        margin-top: 0.5rem!important;
        margin-left: 0rem;
    }
}

@media (max-width: 767.98px) {
    #table-header-column-2 #searchButton {
        margin-top: -1rem!important;
    }
}

#table-header-column-2 .search-btn-wrap label {
    display: block;
}

#table-header-column-2 #searchButton:hover {
    background-color: var(--color-brand-teal-dark) !important;
    border: none;
}

#table-header-column-3 .table-buttons {
    margin: 0;
    margin-top: auto;
}

#table-header-column-3 .table-buttons button {
    height: 36px;
    padding: 1rem 0.7rem;
    margin: 0 0.1rem;
    line-height: 0;
    font-size: 0.8rem;
    border: 1px solid var(--color-table-border);
    border-radius: var(--bs-border-radius);
}

#table-header-column-3 .table-buttons button:last-of-type {
    margin-right: 0;
}

@media (max-width:767px) {
    #table-header-column-3 .table-buttons button {
        margin-bottom: 0.4rem;
    }
}

/* Hides Number of entries and Table buttons until they're in the right location to prevent visual glitches*/
.table-scroll-wrapper > .dataTables_length,
.dummy-scrollbar-top + .table-buttons {
    display: none;
}

#table-header-column-1:empty ,
#table-header-column-3:empty {
    height: 38px; /* Set a height for empty state */
    margin-top:auto;
}
.p-search > .container-fluid:nth-child(2):not(:has(tbody))  {
    height: 600px;
    width: 100%;
    margin-top: 1.25rem !important;
}

.p-search > .container-fluid:nth-child(2):not(:has(tbody)) .mt-2  {
    margin-top: 0!important;
}

#table-header-column-3 .table-buttons .dt-button-collection {
    width: auto;
    padding: 2px;
}

#table-header-column-3 .table-buttons .dt-button-collection button {
    position: relative;
    height: fit-content;
    margin: 0;
    padding: 12px;
    padding-right: 25px;
    font-size: 12px;
}

#table-header-column-3 .table-buttons .dt-button-collection .dt-button-active:after {
    margin-top: auto;
    margin-right: -5px;
}


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

body {
    overflow-x: auto;
    min-width: 100%;
}

@media (max-width: 768px) {
    #partsTable th,
    #partsTable td {
        min-width: 100px;
        font-size: 12px;
    }
}

div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button {
    color: #fff;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px;
    background-color: transparent;
    color: inherit;
    margin-left: 15px;
    width: 90%;
    background-color: #fff;
}

#partsTable tbody tr td .carticon {
    position: relative;
    cursor: pointer;
}

/* For cells containing tooltips */
#partsTable tbody tr td:has(.carticon) {
    position: relative;
    overflow: visible !important;
}

#partsTable tbody tr td:first-child:has(.carticon):hover {
    clip-path: none !important;
    z-index: 990 !important;
    box-shadow: none !important;
}

#partsTable tbody tr td .carticon .tooltip-pdf {
    z-index: 10000 !important;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/* =================================================================
   MISCELLANEOUS
   ================================================================= */

/* Change svg to gray */
#partsTable tbody tr td img[src$=".svg"] {
  filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%) invert(50%);
  -webkit-filter: brightness(0) saturate(100%) invert(50%);
}

:is(tr.even, tr.odd) td > a::after {
  content: "|";
  margin: 0 0.5em;
  color: #ccc;
}

td:nth-child(1) > a,
td:nth-child(1) > span,
td:nth-child(1) > input {
  font-size: 1rem;
}

/* =================================================================
   TABLE STRUCTURE AND LAYOUT
   ================================================================= */

/* Main table structure */
#partsTable {
    color: var(--color-grey-light) !important;
    font-size: 14px;
    position: relative;
    border-collapse: separate;
    border-spacing: 0;
    width: 100% !important;
    z-index: 2;
}

/* Table container and wrappers */
.table-container {
    width: 100%;
    max-height: 1500px;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.table-container.loading {
    opacity: 0.5;
    pointer-events: none;
}

.table-scroll-wrapper {
    position: relative;
    overflow: hidden;
    transition: padding-top 0.2s ease;
}

.table-scroll-wrapper #loading-indicator {
/*     background: #f8f9fa; 
    background: var(--gradient-shimmer);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;  */
    margin: 20px 0;
}

#loading-indicator .spinner-border {
    width: 3rem; 
    height: 3rem;
}

#loading-indicator p {
    font-size: 16px; 
    color: #495057;
}

#loading-indicator p#retry-status {
    font-size: 14px; 
    color: #6c757d;
}

/* DataTables wrapper adjustments */
.dataTables_wrapper {
    position: relative;
    width: 100% !important;
}

.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollBody {
    overflow: visible !important;
}

.dataTables_scrollBody {
    overflow-x: auto !important;
    width: 100% !important;
}

/* =================================================================
   STICKY HEADER IMPLEMENTATION
   ================================================================= */

/* Performance optimization for sticky headers */
#partsTable thead {
    will-change: transform;
}

#partsTable thead,
#partsTable th:first-child,
#partsTable td:first-child {
    transition: none;
    position: relative;
    z-index: 9999;
}

#partsTable.column-widths-locked {
    table-layout: fixed !important;
}

#partsTable.sticky-header thead {
    position: fixed;
    top: 0; /* JS sets offset from header.header-autohide */
    z-index: 99;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    backface-visibility: hidden;
    display: block;
}

#partsTable.sticky-header thead tr {
    will-change: transform;
    display: table;
    table-layout: fixed;
    margin: 0;
}

#partsTable.sticky-header thead tr th {
    display: table-cell;
}

/* Fallback sticky positioning */
#partsTable > thead > tr {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    background-color: #fff !important;
    z-index: 1000 !important;
}

/* Header placeholder for maintaining table height */
.header-placeholder {
    visibility: collapse !important;
    line-height: 0 !important;
    height: 0 !important;
}

#partsTable.sticky-header .header-placeholder {
    visibility: visible !important;
    height: auto !important;
    line-height: normal !important;
}

.header-placeholder td {
    padding: 0 !important;
    border: none !important;
    line-height: inherit !important;
}

/* =================================================================
   FIXED FIRST COLUMN
   ================================================================= */

#partsTable tbody tr td:first-child {
    position: sticky !important;
    position: -webkit-sticky !important;
    left: 0 !important;
    z-index: 90;
    background-color: #FFF !important;
    padding-left: 0px !important;
}

#partsTable thead tr th:first-child {
    position: sticky !important;
    position: -webkit-sticky !important;
    left: 0 !important;
    z-index: 800;
    background-color: var(--color-table-highlight);
    padding-left: 0px !important;
}

/* Firefox only */
@-moz-document url-prefix() {
    div.dataTables_wrapper {
        padding-bottom: 1rem;
    }
}

/* Safari only */
@supports (-webkit-hyphens: none) {
    div.dataTables_wrapper {
        padding-bottom: 1rem;
    }
}

table.dataTable.display tbody tr:hover > .sorting_1, 
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
    background-color: var(--color-table-highlight)!important;
}

table.dataTable.display tbody tr.odd > .sorting_1, 
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: var(--color-table-highlight)!important;
}

table.dataTable.display tbody tr.odd > .sorting_1:first-child,
#partsTable tbody tr td:first-child {
    background-color: #FFF !important;
}

#partsTable thead tr th:first-child {
    z-index: 1000;
}

/* Apply shadow with clip-path to create continuous effect on all first column cells */
#partsTable thead tr th:first-child,
#partsTable tbody tr td:first-child {
    /* box-shadow: 0px 0px 14px 5px rgb(98 96 96 / 90%) !important; */
    box-shadow: 0px 0px 18px 5px rgba(98, 96, 96, 0.5) !important;
    clip-path: inset(0 -20px -1px 0px); /* Slight inset to hide seams between cells */
}

/* Clip the top shadow on the first header cell */
#partsTable thead tr:first-child th:first-child {
    clip-path: inset(0px  -20px 0px 0px); /* Same as others - clips top shadow */
}

/* Clip the bottom shadow on the last body cell */
#partsTable tbody tr:last-child td:first-child {
    clip-path: inset(0px -20px 0px 0px); /* Same as others - clips bottom shadow */
}

#partsTable tbody tr td:first-child {
    padding-left: 10px !important;
    padding-right: 15px !important;
}

#partsTable.sticky-header thead th:not(:first-child) {
    position: relative;
    z-index: 1;
}

#partsTable.sticky-header thead th:first-child {
    z-index: 10 !important;
    position: relative !important;
    left: 0 !important;
}

#partsTable thead th:first-child {
    z-index: 1000 !important;
}

/* th.sorting { */
th {
    min-width: var(--size-table-cell-min) !important;
    max-width: var(--size-table-cell-max) !important;
    width: auto !important;
    white-space: nowrap;
}

/* table.dataTable thead th:nth-child(1){
    min-width: var(--size-table-cell-min) !important;
    max-width: var(--size-table-cell-max) !important;
    width: auto !important;
}  */

table.dataTable thead th:nth-child(n+2){
    min-width: 90px !important;
    max-width: var(--size-table-cell-max) !important;
    width: auto !important;
} 

/* tbody td:nth-child(1) {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    gap: 0px; 
} */

#partsTable td:not(.sorting_1) {
    color: #000!important;
}

/* First column width constraints */
#partsTable.dataTable thead th:first-child,
#partsTable.dataTable tbody td:first-child {
/*     min-width: 250px!important;
    max-width: 250px!important;
    width: 250px!important; */
    white-space: nowrap!important;
}

#partsTable.dataTable thead th:first-child div {
    height: auto;
    overflow: hidden;
    text-wrap: auto;
}

#partsTable.dataTable.cp-table thead th:first-child div {
    padding-left: 0;
    padding-right: 0;
}

/* table.dataTable thead th.sorting:nth-child(n+2) { */
table.dataTable thead th:nth-child(n+2) {
    /* max-width: 190px !important; */
    max-width: 165px !important;
    white-space: normal!important;
}

/* table.dataTable thead th.sorting.slider-column { */
table.dataTable thead th.slider-column {
    min-width: 88px !important;
    max-width: 95px !important;
}

/* table.dataTable thead th.sorting.slider-column .param-header { */
table.dataTable thead th.slider-column .param-header {
    white-space: normal;
}

table#partsTable.dataTable tbody td:not(:first-child) {
    white-space: normal !important;
    max-width: 165px !important;
}

/* =================================================================
   TABLE HEADERS AND CELLS
   ================================================================= */

/* Header styling */
#partsTable thead tr th {
    padding: 0 !important;
    background-color: var(--color-table-highlight);
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
}

#partsTable thead tr th.sorting {
	vertical-align: top;
    font-size: 1rem;
    font-weight: 500;
    vertical-align: top;
    min-height: 100px !important;
    white-space: nowrap;
    background-image: none !important;
}

#partsTable thead tr th.sorting div {
    overflow-y: auto;
    max-height: 200px;
    background-color: transparent;
    transition: height 0.3s ease;
    width: 100% !important;
    color: #808080;
    text-wrap: auto;
}

#partsTable thead tr th:nth-child(2) div {
    padding-left: 0.3rem;
}

/* DataTable header and cell defaults */
table.dataTable thead th,
table.dataTable thead td {
    padding: 0;
    border-bottom: none;
    position: sticky;
    white-space: normal !important;
    vertical-align: top !important;
    background: #FFF;
    position: relative;
    overflow: visible !important;
}

table.dataTable thead th,
table.dataTable tbody td {
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 1rem 1rem!important;
    border-bottom: 1px solid #ddd;
}

/* Body cell styling */
table.dataTable.display tbody tr > td {
    padding-left: 20px !important;
    padding: 1rem 1rem!important;
    color: #000 !important;
    text-align: left !important;
    vertical-align: middle;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

/* First column cell specific */
table.dataTable tbody td:first-child,
table.dataTable.display tbody tr > td:first-child {
    text-align: left;
    white-space: normal !important;
    word-wrap: break-word !important;
    font-weight: 500;
}

/* Remove DataTables default sorting icons */
table.dataTable thead>tr>th::after, 
table.dataTable thead>tr>th::before {
    content: none !important;
}

/* =================================================================
   PARAMETER HEADERS AND FILTERS
   ================================================================= */
.form-control {
    height: 36px;
}

.param-header {
    display: block;
    padding: 1rem 1.2rem;
    background-color: var(--color-table-header);
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    border-bottom: solid 1px var(--color-table-border);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#partsTable thead tr > th .param-header, 
#partsTable thead tr > th .collapse-control, 
#partsTable thead tr > th .collapse-control + div {
    padding-left: 1rem;
    text-align: left;
}

#partsTable thead tr > th .collapse-control + div {
    padding-right: 0.1rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    width:0 !important;
    min-width: 100%;
}

.helptexttohide {
    font-size: 1rem;
}

.helptexttohide input[type="search"] {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: -10px;
    padding-left: 10px;
    padding-right: 10px;
}

.helpTextHeader .collapse-control[data-state="collapsed"] + .helptexttohide {
    display: none !important;
    height: 0;
    overflow: hidden;
}

.helpTextHeader .collapse-control[data-state="expanded"] + .helptexttohide {
    display: block !important;
    height: auto;
}

/* Second column header - additional padding */
#partsTable thead tr > th:nth-child(2) .param-header,
#partsTable thead tr > th:nth-child(2) .collapse-control,
#partsTable thead tr > th:nth-child(2) .collapse-control + div,
#partsTable thead tr > th:nth-child(2) .param-header + div {
    padding-left: 2rem;
}

#partsTable thead tr > th:nth-child(n+2) .param-header + div {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#partsTable tbody tr td:nth-child(2) {
    /* padding-left: 3rem !important; */
    padding-left: 2rem !important;
}

/* Filter areas */
#partsTable thead th > div {
    position: relative;
    z-index: 1000;
    padding: 0 1rem;
}

#partsTable thead tr th div#partsTable_filter {
    width: 100% !important;
    text-align: left;
}

#partsTable thead th:first-of-type > div {
    z-index: 999;
    padding-top: 0;
}

/* =================================================================
   COLLAPSE CONTROLS AND FILTER ICONS
   ================================================================= */
.collapse-control {
    display: block;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-grey-dark);
    padding: 1.2rem;
    padding-top: 0.5rem;
    padding-bottom: 0;
    transition: color 0.2s ease;
}

.cp-table .collapse-control {
    background-color: var(--color-table-filter);
    padding-left: 1rem !important;
}

 #partsTable thead tr > th:nth-child(2) .collapse-control {
    /* padding-left: 2.6rem !important; */
    padding-left: 2rem !important;
 }

.collapse-control[data-state="collapsed"] {
    border-bottom: none;
}

.collapse-control[data-state="expanded"] {
    border-bottom: 1px solid var(--color-table-border);
}

.collapse-control[data-state="expanded"] + div > * {
    padding-bottom: 0.5rem;
}

.collapse-control:hover {
    color: var(--color-brand-teal);
    text-decoration: none;
}

.filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.filter-icon svg {
    width: 100%;
    height: 100%;
    max-width: 14px;
}

.collapse-control:hover .filter-icon svg line,
.collapse-control:hover .filter-icon svg path {
    stroke: var(--color-brand-teal);
}

.helpTextHeader a.collapse-control,
a.collapse-control {
    outline: none;
    text-align: left;
}

#partsTable .helpTextHeader a.collapse-control {
    padding-left: 0;
    padding-right: 0;
}

a[data-state="expanded"] + div {
    text-align: left;
    padding-top: 8px !important;
}

/* =================================================================
   CHECKBOXES AND INPUTS
   ================================================================= */

.table-checkbox-inner {
    padding: 0;
    padding-bottom: 0.5rem;
    background-color: transparent;
    font-weight: normal;
    font-size: 0.8rem;
    overflow-y: auto;
    box-shadow: none;
}

.table-checkbox-inner label {
    cursor: pointer;
}

.table-checkbox-inner label input[type="checkbox"] {
    position: relative;
    margin-right: 4px;
    top: 2px;
}

#partsTable input[type="checkbox"] {
    accent-color: var(--color-brand-teal); 
    cursor: pointer;
}

.cp-table .table-checkbox-inner {
    padding-bottom: 0;
}

.table-checkbox-inner > input {
    margin-right: 0.3rem;
    position: relative;
    top: 2px;
}

.compare-checkbox {
    vertical-align: middle !important;
    overflow: hidden;
    display: inline-block;
    width: 14px;
    margin-top: -5px;
}

.part-number-container .compare-checkbox,
td:nth-child(1) input.compare-checkbox {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    margin-top: 0;
}

/* =================================================================
   SCROLLBARS
   ================================================================= */

/* Hide native horizontal scrollbar */
.table-container::-webkit-scrollbar {
    height: 0;
    display: none;
}

/* Fake horizontal scrollbar */
.fake-horizontal-scroll {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 17px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f0f0f0;
    z-index: 1000;
    display: none;
    border-top: 1px solid #ddd;
}

.fake-scroll-content {
    height: 1px;
    background: transparent;
}

/* Scrollbar styling */
.table-container::-webkit-scrollbar,
.fake-horizontal-scroll::-webkit-scrollbar {
    height: 15px;
}

.table-container::-webkit-scrollbar-track,
.fake-horizontal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-container::-webkit-scrollbar-thumb,
.fake-horizontal-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

.table-container::-webkit-scrollbar-thumb:hover,
.fake-horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Filter scrollbar styling */
.filter-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.filter-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.filter-scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.filter-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.filter-scroll-container {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Firefox scrollbar styling */
.filter-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* =================================================================
   RANGE SLIDERS
   ================================================================= */

#priceRangeSlider, 
#zipcodeRangeSlider {
    margin-top: 10px;
}

#minPriceInput, 
#maxPriceInput, 
#minZipcodeInput, 
#maxZipcodeInput {
    width: 60px;
    margin-top: 5px;
}

.range-slider-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin: 1px 0;
    height: 150px;
    position: relative;
    z-index: 1003;
    background: #FFF;
    background-color: rgba(0, 153, 154, 0.05);
    transition: height 0.3s ease;
}

.range-slider {
    height: 120px;
    margin: 5px 15px;
    transition: height 0.3s ease;
    max-width: 4px;
}

.ui-slider-vertical {
    width: 8px;
    overflow-y: initial !important;
}

.ui-slider-vertical .ui-slider-handle {
    width: 20px !important;
    height: 10px !important;
    border-radius: 2px !important;
    left: 50% !important;
    margin-left: -10px !important;
    background: var(--color-grey-dark)!important;
    color: #0a0909;
    border: 1px solid var(--color-grey-dark)!important;
    cursor: pointer !important;
}

.ui-slider-handle:hover {
    background: #00b3b4 !important;
}

.min-value-display, 
.max-value-display {
    margin: 5px 0;
    font-size: 12px;
    text-align: left;
    width: 100%;
    padding-left: 0;
    overflow-y: hidden !important;
}

/* =================================================================
   DIALOGS AND MODALS
   ================================================================= */

.dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.dialog-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.modal {
    z-index: 9998;
}

.p-search .modal-header {
    border-bottom: none;
    border-right: 1px solid #8c8c8c;
    border-radius: 0;
}

.p-search .modal-dialog {
    max-width: 750px;
    margin: 2.75rem auto;
}

.closePModal {
    position: absolute;
    right: 10px;
    top: 10px;
    border: none;
    width: 40px;
}

/* =================================================================
   HELP CONTENT
   ================================================================= */
   
.helpContent {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1100px;
    height: auto;
    text-align: left;
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid var(--color-brand-teal);
    z-index: 9999;
    display: none;
    font-size: 14px;
}

.helpContent h3 {
    background-color: var(--color-brand-teal);
    color: #fff;
    font-size: 1.7rem !important;
    line-height: 1.5;
    min-height: 41px;
    padding: 0;
    padding-left: 15px;
    padding-right: 40px;
}

.helpContent li {
    padding-left: 0px;
}

@media (max-width: 1154px){
    .helpContent {
        max-width: 95%;
        max-height: 95%;
        transform: translate(-50%, 0);
        top: 2rem;
        padding-right: 0px;
        overflow-y: auto;
    }
    .helpContent ul {
        padding-right: 10px;
    }
}

.helpClose-btn {
    display: flex;
    line-height: normal;
    position: absolute;
    right: 1px;
    top: 0px;
    padding-bottom: 4px;
    background-color: #000;
    color: #FFF;
    border-radius: 5%;
    cursor: pointer;
    height: 38px;
    aspect-ratio: 1/1;
    font-size: 2rem;
    align-items: center;
    text-transform: uppercase;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

.helpTextHeader {
    font-family: 'titillium web';
    text-align: left;
    font-size: 16px;
}

/* =================================================================
   TOOLTIPS
   ================================================================= */

.tooltip-text {
    position: absolute;
    z-index: 2;
    color: #FFF;
    font-size: 12px;
    background-color: #192733;
    border-radius: 10px;
    padding: 5px;
    width: 350px;
}

.tooltip-text a {
    color: #FFF;
    text-decoration: bold;
}

.pdfdocicon .tooltip-pdf,
.carticon .tooltip-pdf {
    visibility: hidden;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1000;
}

.carticon .tooltip-pdf {
    width: 250px;
    text-align: left;
    padding: 10px;
    z-index: 1000;
}

.pdfdocicon:hover .tooltip-pdf,
.carticon:hover .tooltip-pdf {
    visibility: visible;
}

span.pdfdocicon::after {
    content: "|";
    margin: 0 0.5em;
    color: #ccc;
}

#partsTable a.carticon::after {
    content: ""!important;
}

/* =================================================================
   Add To Cart options
   ================================================================= */
span.part-number {
  min-width: 0;
}

.cart-product-cell {
    border-left: none;
    padding-left: 0;
    padding-top: 12px;
    margin-top: 12px;
    position: static;
    width: 100%;
    max-width: 220px;
    clear: both;
    display: block;
}

#partsTable tbody tr td.sorting_1:has(.cart-product-cell),
#partsTable tbody tr td.fixed-width-column:has(.cart-product-cell) {
    vertical-align: top !important;
}

.cart-product-cell .price-in-stock .price-stock-wrap > div {
  display: inline-block;
  padding-right: .5rem;
}

.cart-product-cell .price-in-stock .price-cell-block {
  padding-top: .5rem;
}

.cart-product-cell .price-in-stock .price-cell-block > input, 
.cart-product-cell .price-in-stock .price-cell-block > div{
  display: inline-block
}

.cart-product-cell .price-in-stock .price-cell-block > input {
  border: #dee2e6 1px solid;
  border-radius: .5rem;
  font-size: 1rem;
  padding: .2rem .5rem;
  width: 70px!important;
  max-width: 100px!important;
}

.cart-product-cell .price-in-stock .price-cell-block > div > button {
  border: none;
  background: #00999a;
  border-radius: 1rem;
  color: #FFF;
  font-size: 1rem;
  padding: .1rem 1rem .2rem 1rem;
}

.cart-product-cell .price-in-stock .action-buttons {
    margin-left: 5px;
}

/* =================================================================
   BUY NOW PS
   ================================================================= */
.buy-now h2 {
    font-size: 2rem;
}

.buy-now hr {
    margin: 2rem 0!important;
}

.buy-now iframe {
    min-height: 350px;
    width: 100%;
}

.buy-now #table-header-column-2 {
    display: none!important;
  }

.buy-now #table-header-column-3 {
    width: 82%!important;
}

.buy-now .section-padding-vert {
    padding-bottom: 0!important;
}

.buy-now .caveat-note {
    margin-bottom: 2.5rem!important;
    margin-top: -1.5rem;
}

.buy-now #ps-search-navigation{
    margin-bottom: 75px;
}

.buy-now #mainTabContent {
    background: #eaeaea;
    padding: 0 1rem;
}

.buy-now #need-help-find-a-prod {
    position: relative;
}

.buy-now #need-help-find-a-prod::before {
    position: absolute;
    top: 0px;
    width: 100%;
    content: "";
    height: 1rem;
    z-index: -1;
    background: linear-gradient(360deg, rgb(255, 255, 255), rgb(238, 237, 237));
    border-top: 1px solid rgb(224, 224, 224);
}

.buy-now #need-help-find-a-prod .container h4 {
    color: #000;
    font-size: 30px;
}

.buy-now #need-help-find-a-prod .container p {
    font-weight: 1.25rem;
}

.buy-now #need-help-find-a-prod .container .options a:first-child {
    margin-right: 10px;
}

.buy-now #need-help-find-a-prod .container .options a button {
    background-color: #66E7C1;
    color: #000;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.buy-now .nav-tabs-custom {
    border-bottom: 2px solid #e0e0e0;
}
 
.buy-now .nav-tabs-custom .nav-link {
    color: #666;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}
 
.buy-now .nav-tabs-custom .nav-link:hover {
    color: #333;
    border-bottom-color: #e0e0e0;
}
 
.buy-now .nav-tabs-custom .nav-link.active {
    color: #000;
    border-bottom: 3px solid #000;
    background-color: transparent;
    font-weight: bold;
}
 
.buy-now .tab-content-custom {
    display: none;
}
 
.buy-now .tab-content-custom.active {
    display: block;
}
 
.buy-now .category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    padding: 20px 0;
}
 
.buy-now .category-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}
 
.buy-now .category-btn:hover {
    background-color: #003640;
    color: #fff;
    border: solid 1px #003640;
    text-decoration: none;
}
 
.buy-now .category-btn.active {
    background-color: #02AFAA ;
    color: #fff;
    border: 1px solid #02AFAA ;
}
 
.buy-now .category-btn.active:hover {
    background-color: #003640;
    color: #fff;
    border: solid 1px #003640;
}

/* =================================================================
   BUY-NOW SHOP (embeddable partials) — appended, does not replace above
   ================================================================= */

.buy-now-shop .bns-search-box {
    background: var(--color-brand-teal-dark, #003640) url('/uploads/images/S_-_eCart-_Banner-1.jpg') center center / cover no-repeat;
    padding: 2.5rem 0;
}

.buy-now-shop .bns-search-box__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    line-height: 1.15;
}

.buy-now-shop .bns-search-box__sub {
    color: rgba(255, 255, 255, .8);
    font-size: 1rem;
    margin: 0;
}

.buy-now-shop .bns-search-box__field {
    display: flex;
    position: relative;
    margin-top: 1rem;
}

.buy-now-shop .bns-search-box__input {
    flex: 1 1 auto;
    height: auto;
    min-width: 0;
    border: 2px solid var(--color-brand-teal, #00999a);
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: .75rem 1rem;
    font-size: 1rem;
    color: #003640;
    background: #fff;
    outline: none;
}

.buy-now-shop .bns-search-box__input::placeholder {
    color: #9aa7ad;
}

.buy-now-shop .bns-search-box__btn {
    flex: 0 0 auto;
    background: var(--color-brand-teal, #00999a);
    color: #fff;
    border: 2px solid var(--color-brand-teal, #00999a);
    border-radius: 0 4px 4px 0;
    padding: .75rem 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .2s ease;
}

.buy-now-shop .bns-search-box__btn:hover {
    background: var(--color-brand-teal-dark, #003640);
    border-color: var(--color-brand-teal-dark, #003640);
}

.buy-now-shop .bns-search-box__btn i {
    margin-right: .4rem;
}

.buy-now-shop .bns-search-box__ac {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.buy-now-shop .bns-search-box__ac:empty {
    display: none;
}

.buy-now-shop .bns-search-box__ac .ac-header {
    display: block;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-grey-dark, #5f5d5d);
    background: #f5f7f8;
    border-bottom: 1px solid #e8ecee;
}

.buy-now-shop .bns-search-box__ac .ac-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    border-bottom: 1px solid #f0f2f3;
    color: inherit;
}

.buy-now-shop .bns-search-box__ac .ac-item:hover {
    background: #f0f9f9;
}

.buy-now-shop .bns-search-box__ac .ac-thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--color-brand-teal, #00999a);
    background: linear-gradient(135deg, #e8f5f5, #c8e8e8);
}

.buy-now-shop .bns-search-box__ac .ac-info {
    flex: 1 1 auto;
    min-width: 0;
}

.buy-now-shop .bns-search-box__ac .ac-part {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a2a35;
}

.buy-now-shop .bns-search-box__ac .ac-part mark {
    background: none;
    color: #00777a;
    font-weight: 700;
    padding: 0;
}

.buy-now-shop .bns-search-box__ac .ac-desc {
    display: block;
    font-size: 12px;
    color: #6b7880;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buy-now-shop .bns-search-box__ac .ac-meta {
    flex: 0 0 auto;
    text-align: right;
}

.buy-now-shop .bns-search-box__ac .ac-price {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #1a2a35;
}

.buy-now-shop .bns-search-box__ac .ac-stock {
    display: block;
    font-size: 11px;
    color: #16a34a;
}

.buy-now-shop .bns-search-box__ac .ac-stock.low {
    color: #d97706;
}

.buy-now-shop .bns-search-box__ac .psv2-no-results-link {
    display: block;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #00777a;
    background: #f5f7f8;
}

.buy-now-shop .bns-quicklinks {
    background: #f0f7f7;
    border-top: 1px solid #c8e8e8;
    padding: .75rem 0;
    font-size: .9rem;
}

.buy-now-shop .bns-quicklinks__label {
    color: var(--color-brand-teal-dark, #003640);
    font-weight: 700;
    margin-right: .5rem;
}

.buy-now-shop .bns-quicklinks__link {
    color: #00777a;
    font-weight: 600;
    text-decoration: none;
    margin: 0 .35rem;
}

.buy-now-shop .bns-quicklinks__link:hover {
    text-decoration: underline;
}

.buy-now-shop .bns-quicklinks__sep {
    color: #b6dede;
}

.buy-now-shop .bns-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid #e8ecee;
}

.buy-now-shop .bns-cat-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #00777a;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.buy-now-shop .bns-cat-tab i {
    font-size: 14px;
    color: var(--color-brand-teal, #00999a);
}

.buy-now-shop .bns-cat-tab:hover {
    background: #f0f9f9;
    border-color: #c0e4e4;
}

.buy-now-shop .bns-cat-tab.active {
    background: #fff;
    border-color: var(--color-brand-teal, #00999a);
    color: var(--color-brand-teal-dark, #003640);
}

.buy-now-shop .bns-subcats {
    display: none;
    padding: 1.5rem 0 .5rem;
}

.buy-now-shop .bns-subcats.is-open {
    display: block;
}

.buy-now-shop .bns-subcat-group__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-grey-dark, #5f5d5d);
    margin: 0 0 1rem;
}

.buy-now-shop .bns-subcat-group__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.75rem;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #c0e4e4 #f0f9f9;
}

.buy-now-shop .bns-subcat-group__track::-webkit-scrollbar {
    height: 6px;
}

.buy-now-shop .bns-subcat-group__track::-webkit-scrollbar-track {
    background: #f0f9f9;
    border-radius: 3px;
}

.buy-now-shop .bns-subcat-group__track::-webkit-scrollbar-thumb {
    background: #c0e4e4;
    border-radius: 3px;
}

.buy-now-shop .bns-subcat-group__track::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand-teal, #00999a);
}

.buy-now-shop .bns-subcat-card-wrap {
    flex: 0 0 auto;
    width: 220px;
    max-width: min(220px, 78vw);
    scroll-snap-align: start;
}

.buy-now-shop .bns-subcat-card-wrap--hidden {
    display: none;
}

.buy-now-shop .bns-subcat-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    padding: 14px 16px;
    background: #fafbfc;
    border: 1px solid #e0e6ea;
    border-radius: 5px;
    text-decoration: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.buy-now-shop .bns-subcat-card:hover {
    border-color: var(--color-brand-teal, #00999a);
    box-shadow: 0 2px 8px rgba(0, 153, 154, .12);
    text-decoration: none;
}

.buy-now-shop .bns-subcat-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    margin-bottom: .75rem;
    background: #f5f7f8;
    border: 1px solid #e8ecee;
    border-radius: 4px;
    overflow: hidden;
}

.buy-now-shop .bns-subcat-card__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: .5rem;
}

.buy-now-shop .bns-subcat-card__thumb--icon {
    background: linear-gradient(135deg, #e8f5f5, #c8e8e8);
    border-color: transparent;
}

.buy-now-shop .bns-subcat-card__thumb--icon i {
    font-size: 28px;
    color: var(--color-brand-teal, #00999a);
}

.buy-now-shop .bns-subcat-card__name {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: #1a2a35;
    margin-bottom: .15rem;
}

.buy-now-shop .bns-subcat-card__desc {
    display: block;
    font-size: .75rem;
    color: var(--color-grey-dark, #5f5d5d);
    line-height: 1.4;
}

.buy-now-shop #ps-search-navigation {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .buy-now-shop .bns-search-box {
        padding-top: 1.5rem;
    }
    .buy-now-shop .bns-search-box__btn span {
        display: none;
    }
}