body {
    font-family: "Cal Sans", serif;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.text-divider {
    margin: 2em 0;
    line-height: 0;
    text-align: center;}
.text-divider span {
    background-color: #f5f5f5;
    padding: 1em;}
.text-divider:before {
    content: " ";
    display: block;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #f7f7f7;}
.loading-dots {
    display: inline-block;
    font-size: 24px;}
.loading-dots .dot {
    display: inline-block;
    animation: blink 1.5s infinite;
    opacity: 0;}
.loading-dots .dot:nth-child(1) {animation-delay: 0s;}
.loading-dots .dot:nth-child(2) {animation-delay: 0.5s;}
.loading-dots .dot:nth-child(3) {animation-delay: 1s;}
@keyframes blink {
    0%,
    100% {opacity: 0;}
    50% {opacity: 1;}
}
.basic-product .img-wrapper {height: 260px;}
.c-profile input[type=text], .c-profile input[type=email], 
.c-profile input[type=url], .c-profile input[type=password], 
.c-profile input[type=search], .c-profile input[type=number], 
.c-profile input[type=tel] {
    width: 100%;
    min-height: 40px;
    padding: 3px 20px;
    color: #696969;
    border: 1px solid #F5F5F5;
    border-radius: 5px;
    outline: none;
    background-color: #F5F5F5;}
.fi-fo-field-wrp{margin-bottom: 12px;}
.c-profile .fi-select-input, .c-profile .selectric {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 3px 40px 3px 20px;
    -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #696969;
    border: 1px solid #F5F5F5;
    border-radius: 5px;
    outline: none;
    background-color: #F5F5F5;}
.c-profile .fi-fo-field-wrp-label {
    font-weight: 500;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 4px;
    color: #777;}
.c-profile [type=submit]:not(:disabled) {
    border-color: var(--theme-color);
    background-color: var(--theme-color);
    color: #FFFFFF;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 50px !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    height: 52px !important;
    padding: 0 40px !important;
    cursor: pointer;
    white-space: nowrap;
    border-width: 1px !important;
    border-style: solid;
    border-color: transparent;
    border-radius: 5px !important;
    outline: none;}
.card-gray-box{
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #eee;}
.form_search input{background-color: #FFFFFF;}
.top-header.top-header-dark{
    background-color: var(--theme-color);}
header, .category-slider-section .product-category-slider .category-box{
    background-color: var(--theme-light-color);}
footer.dark-footer .darken-layout, 
footer.dark-footer .sub-footer.dark-subfooter{
    background-color: var(--theme-dark-color);
    border-top: 1px solid #363636;}
.quantity {
    display: flex;
    border: 2px solid #3498db;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.quantity button {
    background-color: #3498db;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 20px;
    width: 30px;
    height: auto;
    text-align: center;
    transition: background-color 0.2s;}
.quantity button:hover {
    background-color: #2980b9;}
.input-box {
    width: 40px;
    text-align: center;
    border: none;
    padding: 8px 10px;
    font-size: 16px;
    outline: none;}
/* Hide the number input spin buttons */
.input-box::-webkit-inner-spin-button,
.input-box::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
.input-box[type="number"] {-moz-appearance: textfield;}
.product-tab-description ul, .description-text ul,
.cat-description ul{padding-left: 15px;}
.product-tab-description li, .description-text li,
.cat-description li{display: list-item;}
.marketplace-sidebar.sidenav .pixelstrap>li {
    padding: 5px 0 3px 24px;
}
.marketplace-sidebar.sidenav .pixelstrap>li>a{
    padding: 5px 0 3px 24px}
.category-menu {width: 250px;}
.category,
.subcategory {margin: 5px 0;}
.category-header,
.subcategory-header {
    padding: 5px;
    border-radius: 4px;
    user-select: none;
    display: flex;
    align-items: center;
    cursor: default;}
.category-header:hover,
.subcategory-header:hover {background-color: #e0e0e0;}
.toggle-icon {
    cursor: pointer;
    margin-right: 10px;
    font-size: 1.2em;
    width: 20px;
    text-align: center;}
.subcategories,
.sub-subcategories {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;}
.subcategories.show,
.sub-subcategories.show {max-height: 500px;}

.subcategory { padding-left: 25px;}
.sub-subcategory {
    padding: 8px 10px 8px 45px;
    background-color: #fafafa;}
.sub-subcategory:hover {background-color: #f0f0f0;}

li.onhover-dropdown.mobile-account i {
    color: #999 !important;
}
.top-header .header-dropdown .mobile-account i.ri-user-fill:before {
    content: "\f264" !important;
}
.service-block img {
    margin-left: 12px;
}
.collection-collapse-block .collection-accordion .accordion-item .accordion-body {
    max-height: initial !important;
}
.onhover-dropdown .onhover-show-div {
    min-width: 190px;
}
.top-header .header-dropdown .onhover-dropdown .onhover-show-div li {
    padding-bottom: 15px;
}
.brands-slider img{
    width: 80%;
    height: auto;
}
.basic-product .price{margin-top: 10px;}
.basic-product .product-title{white-space: normal;height: 65px;}
@media (max-width: 1199px) {
    .pixelstrap a {
        padding: 0;
    }
}
.page-content ul{padding-left: 20px;}
.page-content ul li{display: list-item;}
section h2, section h2 strong {
    margin-top: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 6px;
    letter-spacing: unset;
    text-transform: unset;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
    font-size: calc(18px + .00625*(100vw - 320px));
}
section h3, section h3 strong {
    margin-top: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 6px;
    letter-spacing: unset;
    text-transform: unset;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
    font-size: calc(16px + .00625*(100vw - 320px));
}
section h4, section h4 strong {
    margin-top: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 6px;
    letter-spacing: unset;
    text-transform: unset;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
    font-size: calc(15px + .00625*(100vw - 320px));
}
section p{color: #222}
.basic-product .img-wrapper {height: 110px;}
.product-page-details .description-text{display: block;}
.pixelstrap a, .pixelstrap a:hover, .pixelstrap a:active{
    padding-top: 0 !important;padding-bottom: 0 !important;}
.slick-prev:before, .slick-next:before {color: #000}
@media (max-width: 1024px){
.basic-product .img-wrapper {height: 170px;}
.search-modal .form_search {display: block;max-width: 100%;}
}
@media (max-width: 768px){
.cart-section tbody tr td .mobile-cart-content .col,
.wishlist-section tbody tr td .mobile-cart-content .col {
margin-left: 0px;margin-right: 0px;}
}

/* Tire Search Component Styles */
.search-tires-card {
    font-family: sans-serif;
    max-width: 900px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    /* Desktop: side-by-side */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-main-content {
    flex: 1;
    padding: 25px;
    border-right: 1px solid #eee;
}

.search-sidebar-guide {
    flex: 0 0 320px;
    background: #f9f9f9;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.search-title {
    margin-top: 0;
    color: #333;
    font-size: 1.5rem;
}

.product-type-group {
    margin-bottom: 20px;
}

.product-type-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

.checkbox-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.input-field-label {
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.search-select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.submit-button {
    width: 100%;
    padding: 12px;
    background: #001747;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.submit-button:hover {
    background: #c12a36;
}

/* Responsive Media Query */
@media (max-width: 768px) {
    .search-tires-card {
        flex-direction: column;
        /* Stack vertically on mobile */
    }

    .search-main-content {
        border-right: none;
        order: 2;
        /* Form comes second */
    }

    .search-sidebar-guide {
        flex: none;
        order: 1;
        /* Guide comes first on mobile */
        border-bottom: 1px solid #eee;
    }

    .search-grid {
        grid-template-columns: 1fr;
        /* Single column for dropdowns */
    }
}

/* Product Card Optimization */
.theme-product-1 {
    transition: all 0.3s ease;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 10px;
    height: 100%;
}

.theme-product-1:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.img-wrapper {
    position: relative;
    background: #f8f9fa;
    border-radius: 10px 10px 0 0;
}

/* Badge Styling */
.badge-container {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}

.product-detail {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;
    /* Ensures alignment */
}

.price-box {
    margin: 10px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e63946;
}

.spec-badge {
    background: #f1f3f5;
    color: #495057;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 5px;
}