/* ============================================================
   RefurbX - Comprehensive Ecom v5 Override CSS
   Loaded LAST after theme.css and ecom.css.
   Forces Ecom v5 look on top of Shofy's base styles.
   ============================================================ */

/* --- Google Fonts via Bunny CDN (DM Sans + Kanit) --- */
@import url('https://fonts.bunny.net/css?family=dm-sans:400,500,700|kanit:700');


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Ecom Color Scheme)
   ============================================================ */
:root {
    --brand-1: #0BA9ED;
    --brand-2: #FD9636;
    --brand-3: #425A8B;
    --text-primary: #425A8B;
    --text-secondary: #5C74A6;
    --text-muted: #8C9EC5;
    --text-light: #718BC2;
    --bg-light: #F0F3F8;
    --bg-white: #ffffff;
    --border-color: #D5DFE4;
    --border-light: #EBF0F3;
    --success: #5BC694;
    --danger: #F53658;
    --font-family: 'DM Sans', sans-serif;
    --font-heading: 'DM Sans', sans-serif;
}


/* ============================================================
   2. GLOBAL RESETS & FONT OVERRIDES
   Force DM Sans everywhere, override Shofy font declarations.
   ============================================================ */
body,
body.ecom-page {
    font-family: var(--font-family) !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-white) !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    overflow-x: hidden !important;
    position: relative !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

p {
    font-family: var(--font-family) !important;
    color: var(--text-secondary) !important;
}

a {
    text-decoration: none !important;
    color: var(--brand-1) !important;
    transition: all 0.2s ease !important;
}

a:hover {
    color: var(--brand-1) !important;
}

input, select, button, textarea {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
}

::selection {
    background: var(--text-primary) !important;
    color: #fff !important;
}

::placeholder {
    color: #B2C2E1 !important;
    opacity: 1 !important;
}


/* ============================================================
   3. HIDE OLD SHOFY ELEMENTS
   Anything from the Shofy theme that leaks through.
   ============================================================ */
.tp-header-top,
.tp-header-top-area,
.tp-header-bottom,
.tp-offcanvas-area,
.tp-offcanvas-extra,
.tp-header-sticky-area,
.tp-header-category,
.tp-header-info-area {
    display: none !important;
}

/* Hide Shofy's own footer if both exist */
.tp-footer-area,
.tp-footer-top-area,
.tp-footer-bottom-area {
    display: none !important;
}

/* Shofy product section titles */
.tp-section-title-wrapper .tp-section-title__pre,
.tp-section-title-wrapper .tp-section-title-border {
    display: none !important;
}


/* ============================================================
   4. SIDEBAR LEFT (Category Navigation)
   Fixed vertical bar on the left with category icons.
   ============================================================ */
.sidebar-left {
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
    width: 50px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    border-right: 1px solid var(--border-color) !important;
    z-index: 1001 !important;
    padding-top: 0px !important;
    padding-bottom: 25px !important;
    overflow: visible !important;
    transition: none !important;
}

.sidebar-left.stick .btn.btn-open {
    height: 68px !important;
    background: #fff url(/themes/shofy/imgs/template/open.svg) no-repeat center center !important;
    border: none !important;
    cursor: pointer !important;
}

.sidebar-left .menu-icons {
    padding: 142px 0px 0px 0px !important;
    margin: 0 !important;
    list-style: none !important;
}

.sidebar-left .menu-icons li {
    list-style: none !important;
}

.sidebar-left .menu-icons li a {
    display: block !important;
    height: 50px !important;
    text-align: center !important;
    line-height: 50px !important;
    padding: 0 !important;
}

.sidebar-left .menu-icons li a img {
    vertical-align: middle !important;
    max-width: 22px !important;
    max-height: 22px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.sidebar-left .menu-icons li a:hover img {
    opacity: 1 !important;
}

/* Menu Texts panel (expanded sidebar) */
.menu-texts {
    position: absolute !important;
    top: 112px !important;
    left: 0px !important;
    background-color: #ffffff !important;
    min-width: 320px !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    z-index: 1002 !important;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05) !important;
}

.menu-texts li a {
    display: block !important;
    padding: 0px 20px 0px 0px !important;
    line-height: 50px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.menu-texts li a:hover,
.menu-texts li a.active {
    color: var(--brand-1) !important;
}

.menu-texts li a:hover .img-link,
.menu-texts li a.active .img-link {
    position: relative !important;
}

.menu-texts li a:hover .img-link::before,
.menu-texts li a.active .img-link::before {
    content: "" !important;
    height: 100% !important;
    width: 2px !important;
    background-color: var(--text-primary) !important;
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
}

.menu-texts li a .img-link {
    height: 50px !important;
    width: 50px !important;
    display: inline-block !important;
    border-right: 1px solid var(--border-color) !important;
    text-align: center !important;
    margin-right: 15px !important;
    line-height: 50px !important;
}

.menu-texts li a .img-link img {
    vertical-align: middle !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

.menu-texts li a .text-link {
    vertical-align: middle !important;
}

.menu-texts li .sub-menu {
    display: none !important;
}

.menu-texts li:hover .sub-menu,
.menu-texts li.submenu-open .sub-menu {
    display: block !important;
    position: absolute !important;
    top: 0px !important;
    left: 100% !important;
    min-width: 250px !important;
    height: auto !important;
    background-color: #ffffff !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
    min-height: 100% !important;
    z-index: 1003 !important;
}

.menu-texts li:hover .sub-menu li a,
.menu-texts li.submenu-open .sub-menu li a {
    font-weight: 400 !important;
    color: var(--text-light) !important;
    padding-left: 25px !important;
    line-height: 38px !important;
}

.menu-texts li:hover .sub-menu li a:hover,
.menu-texts li.submenu-open .sub-menu li a:hover {
    color: var(--brand-1) !important;
}

/* Menu closed state */
.menu-texts.menu-close {
    min-width: auto !important;
    width: 50px !important;
    border: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.menu-texts.menu-close li a {
    padding: 0px !important;
}

.menu-texts.menu-close li a .text-link {
    display: none !important;
}

.menu-texts.menu-close li.has-children a {
    padding: 0px !important;
    background-image: none !important;
}

/* Has-children arrow */
.menu-texts > li.has-children > a {
    padding-right: 30px !important;
}


/* ============================================================
   5. HEADER & SEARCH BAR
   Override Shofy's tp-header styles with Ecom look.
   ============================================================ */

/* Main header container */
.header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.header .main-header {
    display: flex !important;
    align-items: center !important;
    padding: 15px 0 !important;
}

/* Shofy search wrapper overrides */
.tp-header-search,
.tp-header-search-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--bg-light) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    padding: 5px !important;
    width: 100% !important;
    max-width: 550px !important;
}

.tp-header-search-form,
.tp-header-search form {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Category dropdown in search */
.tp-header-search-category,
.box-category {
    position: relative !important;
    margin-right: 15px !important;
    min-width: 120px !important;
    flex-shrink: 0 !important;
}

.tp-header-search-category::before,
.box-category::before {
    content: "" !important;
    height: 14px !important;
    width: 1px !important;
    background-color: var(--border-light) !important;
    position: absolute !important;
    top: 8px !important;
    right: -14px !important;
}

.tp-header-search-category select,
.box-category select {
    height: 100% !important;
    width: 100% !important;
    border: 0px !important;
    padding: 0px 20px 0px 5px !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url(/themes/shofy/imgs/template/arrow-down.svg) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
}

/* Search input */
.tp-header-search-box,
.tp-header-search-box input,
.tp-header-search input[type="text"],
.tp-header-search input[type="search"],
.box-keysearch input {
    border: 0px !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    width: 100% !important;
    padding: 5px 10px !important;
}

/* Search button */
.tp-header-search-btn,
.tp-header-search button[type="submit"] {
    background-color: var(--brand-1) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    min-width: 44px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tp-header-search-btn:hover,
.tp-header-search button[type="submit"]:hover {
    background-color: #0990cb !important;
}

/* AJAX search results dropdown */
.tp-header-search .ajax-search-result,
.tp-header-search-wrapper .ajax-search-result {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    z-index: 999 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}


/* ============================================================
   6. HEADER SHOP ICONS (Account, Wishlist, Cart, Compare)
   ============================================================ */
.header-shop,
.tp-header-action {
    text-align: right !important;
}

.tp-header-action-item,
.header-shop .icon-list {
    display: inline-block !important;
    padding: 0px 15px 0px 30px !important;
    background-repeat: no-repeat !important;
    background-position: 0px -1px !important;
    position: relative !important;
    font-size: 16px !important;
    color: var(--text-primary) !important;
    line-height: 24px !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.tp-header-action-item:hover,
.header-shop .icon-list:hover {
    color: var(--brand-1) !important;
}

.tp-header-action-item:last-child,
.header-shop .icon-list:last-child {
    padding-right: 0px !important;
}

/* Icon backgrounds for header shop icons */
.icon-account,
.tp-header-action-item[data-action="account"] {
    background-image: url(/themes/shofy/imgs/template/account.svg) !important;
}

.icon-wishlist,
.tp-header-action-item[data-action="wishlist"] {
    background-image: url(/themes/shofy/imgs/template/wishlist.svg) !important;
    background-position: 0px 2px !important;
    padding-left: 35px !important;
}

.icon-cart,
.tp-header-action-item[data-action="cart"] {
    background-image: url(/themes/shofy/imgs/template/cart.svg) !important;
    background-position: 0px 2px !important;
    padding-left: 35px !important;
}

.icon-compare,
.tp-header-action-item[data-action="compare"] {
    background-image: url(/themes/shofy/imgs/template/compare.svg) !important;
    background-position: 0px 2px !important;
}

/* Badge / item count */
.tp-header-action-item .number-item,
.header-shop .number-item,
.tp-header-action-btn .tp-header-action-badge {
    background-color: var(--brand-2) !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: -8px !important;
    left: 14px !important;
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 20px !important;
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Shofy-specific header action button overrides */
.tp-header-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    color: var(--text-primary) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 12px !important;
    background: none !important;
    border: none !important;
}

.tp-header-action-btn:hover {
    color: var(--brand-1) !important;
}

.tp-header-action-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
}

.tp-header-action-btn span {
    font-size: 14px !important;
    font-weight: 500 !important;
}


/* ============================================================
   7. NAVIGATION / MAIN MENU
   ============================================================ */
.header .main-menu li a,
.header .nav-main-menu li a {
    font-family: var(--font-family) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--text-primary) !important;
    line-height: 24px !important;
    display: block !important;
    padding: 13px 12px !important;
    text-decoration: none !important;
}

.header .main-menu li a:hover,
.header .nav-main-menu li a:hover {
    color: var(--brand-1) !important;
}

.header .main-menu li.has-children > a::after {
    content: "\f151" !important;
    font-family: uicons-regular-rounded !important;
    font-size: 14px !important;
    margin-left: 0px !important;
    position: relative !important;
    top: 2px !important;
}


/* ============================================================
   8. BUTTONS (Ecom Style)
   ============================================================ */
.btn {
    border-radius: 4px !important;
    padding: 10px 22px !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.btn.btn-brand-2 {
    background-color: var(--brand-2) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: none !important;
}

.btn.btn-brand-2:hover {
    background-color: var(--text-primary) !important;
    color: #ffffff !important;
}

.btn.btn-brand-3 {
    background-color: var(--text-primary) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: none !important;
}

.btn.btn-brand-3:hover {
    background-color: var(--brand-2) !important;
    color: #ffffff !important;
}

.btn.btn-cart {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: bold !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--text-muted) !important;
    width: 100% !important;
    text-align: center !important;
    padding: 7px 22px !important;
    transition: all 0.3s ease 0s !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
}

.btn.btn-cart:hover {
    border: 1px solid var(--text-primary) !important;
    background-color: var(--text-primary) !important;
    color: #ffffff !important;
}

.btn.btn-buy {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    border: 1px solid var(--text-muted) !important;
    width: 100% !important;
    text-align: center !important;
    padding: 7px 22px !important;
    background-color: var(--text-primary) !important;
}

.btn.btn-buy:hover {
    border: 1px solid var(--text-primary) !important;
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
}

.btn.btn-arrow {
    font-size: 12px !important;
    line-height: 32px !important;
    color: var(--brand-1) !important;
    font-weight: bold !important;
    padding-left: 0px !important;
    padding-right: 15px !important;
    text-transform: uppercase !important;
    background: none !important;
    border: none !important;
}

.btn.btn-arrow:hover {
    color: var(--text-primary) !important;
}

.btn.btn-info {
    background-color: #27B3D2 !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

.btn.btn-info:hover {
    background-color: var(--brand-2) !important;
    border-color: var(--brand-2) !important;
}

/* Product card tool buttons (wishlist, compare, quickview) */
.btn.btn-trend,
.btn.btn-wishlist,
.btn.btn-compare,
.btn.btn-quickview {
    border: 1px solid var(--border-color) !important;
    height: 30px !important;
    width: 30px !important;
    padding: 0px !important;
    opacity: 0 !important;
    transform: translateX(10px) !important;
    transition: all 0.2s cubic-bezier(0.28, 0.12, 0.22, 1) !important;
    will-change: opacity, transform !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
}

.card-grid-style-3:hover .btn.btn-trend,
.card-grid-style-3:hover .btn.btn-wishlist,
.card-grid-style-3:hover .btn.btn-compare,
.card-grid-style-3:hover .btn.btn-quickview,
.product-cart-wrap:hover .btn.btn-trend,
.product-cart-wrap:hover .btn.btn-wishlist,
.product-cart-wrap:hover .btn.btn-compare,
.product-cart-wrap:hover .btn.btn-quickview {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.btn.btn-trend { transition-delay: 0s !important; }
.btn.btn-wishlist { transition-delay: 0.1s !important; }
.btn.btn-compare { transition-delay: 0.14s !important; }
.btn.btn-quickview { transition-delay: 0.18s !important; }

/* Shofy add-to-cart button overrides */
.tp-product-details-add-to-cart-btn,
.product-form .tp-product-details-add-to-cart-btn {
    display: inline-block !important;
    padding: 10px 30px !important;
    background-color: var(--brand-2) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tp-product-details-add-to-cart-btn:hover,
.product-form .tp-product-details-add-to-cart-btn:hover {
    background-color: #e0851e !important;
}

.tp-product-details-buy-now-btn,
.product-form .tp-product-details-buy-now-btn {
    display: inline-block !important;
    padding: 10px 30px !important;
    background-color: var(--brand-1) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tp-product-details-buy-now-btn:hover,
.product-form .tp-product-details-buy-now-btn:hover {
    background-color: #0990cb !important;
}


/* ============================================================
   9. PRODUCT CARDS (card-grid-style-3)
   ============================================================ */
.card-grid-style-3 {
    margin-bottom: 30px !important;
    transition-duration: 0.2s !important;
}

.card-grid-style-3:hover {
    transform: translateY(-2px) !important;
}

.card-grid-style-3:hover .card-grid-inner {
    border-color: var(--text-muted) !important;
}

.card-grid-style-3 .card-grid-inner {
    border-radius: 4px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    transition: border-color 0.2s ease !important;
    overflow: hidden !important;
}

.card-grid-style-3 .card-grid-inner .tools {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.card-grid-style-3 .card-grid-inner .image-box {
    position: relative !important;
    text-align: center !important;
    width: 100% !important;
    background-color: var(--bg-light) !important;
    padding: 20px 10px !important;
    min-height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.card-grid-style-3 .card-grid-inner .image-box img {
    max-height: 100% !important;
    max-width: 95% !important;
    vertical-align: middle !important;
    object-fit: contain !important;
}

.card-grid-style-3 .card-grid-inner .image-box .label {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
}

.card-grid-style-3 .card-grid-inner .info-right {
    padding: 15px !important;
}

.card-grid-style-3 .card-grid-inner .info-right a {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.card-grid-style-3 .card-grid-inner .info-right a:hover {
    color: var(--text-primary) !important;
}

.card-grid-style-3 .card-grid-inner .info-right a.btn:hover {
    color: #fff !important;
}

.card-grid-style-3 .card-grid-inner .info-right .rating {
    margin-top: 5px !important;
}

.card-grid-style-3 .card-grid-inner .info-right .rating img {
    width: 14px !important;
    height: 14px !important;
}

.card-grid-style-3 .card-grid-inner .price-info {
    margin-top: 10px !important;
}

.card-grid-style-3 .card-grid-inner .price-info .price-main {
    margin-right: 10px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.card-grid-style-3 .card-grid-inner .price-info .price-line {
    text-decoration: line-through !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--text-muted) !important;
}

/* Show btn-cart on hover for none-border cards */
.card-grid-style-3.card-grid-none-border .card-grid-inner .box-add-cart .btn-cart {
    display: none !important;
}

.card-grid-style-3.card-grid-none-border .card-grid-inner:hover .box-add-cart .btn-cart {
    display: block !important;
}

.card-grid-style-3.card-grid-none-border .card-grid-inner:hover {
    border-color: var(--text-muted) !important;
}

/* Shofy product card overrides (tp-product classes) */
.tp-product-item,
.tp-product-item-2 {
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.tp-product-item:hover,
.tp-product-item-2:hover {
    border-color: var(--text-muted) !important;
    transform: translateY(-2px) !important;
}

.tp-product-thumb {
    background-color: var(--bg-light) !important;
    text-align: center !important;
    padding: 15px !important;
}

.tp-product-content {
    padding: 15px !important;
}

.tp-product-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 20px !important;
}

.tp-product-title a {
    color: var(--text-primary) !important;
}

.tp-product-title a:hover {
    color: var(--brand-1) !important;
}

.tp-product-price-wrapper {
    margin-top: 8px !important;
}

.tp-product-price-wrapper .tp-product-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.tp-product-price-wrapper .tp-product-price-2 {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    text-decoration: line-through !important;
    margin-left: 8px !important;
}

.tp-product-rating svg,
.tp-product-rating i {
    color: var(--brand-2) !important;
    fill: var(--brand-2) !important;
    font-size: 14px !important;
}

.tp-product-action-btn {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: translateX(10px) !important;
    transition: all 0.2s cubic-bezier(0.28, 0.12, 0.22, 1) !important;
}

.tp-product-item:hover .tp-product-action-btn,
.tp-product-item-2:hover .tp-product-action-btn {
    opacity: 1 !important;
    transform: translateX(0) !important;
}


/* ============================================================
   10. SECTION BACKGROUNDS
   Force all sections to white/transparent.
   ============================================================ */
.section-box,
section,
.tp-product-area,
.tp-brand-area,
.tp-blog-area,
.tp-cta-area,
.tp-feature-area,
.tp-trending-area,
.tp-banner-area,
.tp-deal-area {
    background-color: transparent !important;
}

/* Specific Ecom sections that should be light gray */
.section-box.bg-gray,
.section-box.bg-gray-100,
.footer-1,
.bg-gray-100 {
    background-color: var(--bg-light) !important;
}


/* ============================================================
   11. BREADCRUMBS
   ============================================================ */
.tp-breadcrumb-area,
.breadcrumb-area {
    padding: 15px 0 !important;
    background: var(--bg-light) !important;
}

.breadcrumb-item a {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
    font-size: 12px !important;
}


/* ============================================================
   12. PRODUCT DETAILS PAGE
   ============================================================ */
.tp-product-details-area {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.tp-product-details-title {
    font-size: 24px !important;
    line-height: 31px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 10px !important;
}

.tp-product-details-price-wrapper {
    margin-bottom: 20px !important;
}

.tp-product-details-price.new-price {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-right: 10px !important;
}

.tp-product-details-price.old-price {
    font-size: 20px !important;
    color: var(--text-muted) !important;
    text-decoration: line-through !important;
}

.tp-product-details-description {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    line-height: 22px !important;
}

/* Product details tabs */
.tp-product-details-tab-nav .nav-tabs {
    border-bottom: 2px solid var(--border-color) !important;
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    padding-bottom: 0 !important;
}

.tp-product-details-tab-nav .nav-link {
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    margin-bottom: -2px !important;
    transition: all 0.2s ease !important;
}

.tp-product-details-tab-nav .nav-link.active,
.tp-product-details-tab-nav .nav-link:hover {
    color: var(--text-primary) !important;
    border-bottom-color: var(--brand-2) !important;
}

.tp-product-details-tab-line {
    display: none !important;
}

/* Rating stars */
.tp-product-details-rating svg {
    width: 14px !important;
    height: 14px !important;
    fill: var(--brand-2) !important;
}

.tp-product-details-rating-wrapper {
    gap: 10px !important;
}

/* Category / brand links */
.tp-product-details-category a {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

.tp-product-details-stock a {
    color: var(--success) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Variation / swatch area */
.tp-product-details-variation {
    margin-bottom: 15px !important;
}

.tp-product-details-variation-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
}

/* Quantity input */
.tp-product-quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.tp-product-quantity input {
    width: 50px !important;
    text-align: center !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

.tp-cart-minus,
.tp-cart-plus {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: var(--bg-light) !important;
    transition: all 0.2s ease !important;
}

.tp-cart-minus:hover,
.tp-cart-plus:hover {
    background: var(--border-color) !important;
}

/* Sticky product bar */
.tp-product-details-sticky-actions {
    position: fixed !important;
    bottom: -100px !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
    z-index: 999 !important;
    padding: 10px 0 !important;
    transition: bottom 0.3s ease !important;
}

.tp-product-details-sticky-actions.active {
    bottom: 0 !important;
}

.sticky-actions-img img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

.tp-product-details-action-wrapper {
    margin-top: 20px !important;
}

.tp-product-details-action-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 10px !important;
}


/* ============================================================
   13. FOOTER (Ecom Style)
   ============================================================ */
.footer,
footer {
    background-color: var(--bg-light) !important;
    color: var(--text-primary) !important;
}

.footer-1 {
    background-color: var(--bg-light) !important;
    padding: 60px 0px 40px 0px !important;
}

.footer .width-20 { width: 20% !important; }
.footer .width-25 { width: 25% !important; }
.footer .width-23 { width: 23% !important; }
.footer .width-16 { width: 16% !important; }

.footer h4,
.footer h5,
.footer .widget-title {
    color: var(--text-primary) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.footer .menu-footer {
    display: inline-block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer .menu-footer li {
    list-style: none !important;
    margin-bottom: 8px !important;
}

.footer .menu-footer li a {
    color: var(--text-primary) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0px 0px 0px 15px !important;
    transition-duration: 0.2s !important;
    position: relative !important;
}

/* Arrow bullet for footer menu links */
.footer .menu-footer li a::before {
    content: "\203A" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--text-muted) !important;
    font-size: 16px !important;
}

.footer .menu-footer li a:hover {
    color: var(--brand-1) !important;
    padding-left: 18px !important;
}

/* Shofy footer widget overrides */
.tp-footer-widget .tp-footer-widget-title {
    color: var(--text-primary) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.tp-footer-widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tp-footer-widget ul li {
    margin-bottom: 8px !important;
}

.tp-footer-widget ul li a {
    color: var(--text-primary) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0px 0px 0px 15px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.tp-footer-widget ul li a::before {
    content: "\203A" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--text-muted) !important;
}

.tp-footer-widget ul li a:hover {
    color: var(--brand-1) !important;
    padding-left: 18px !important;
}

/* Social icons in footer */
.footer .icon-socials {
    display: inline-block !important;
    margin-right: 15px !important;
    height: 32px !important;
    width: 32px !important;
    transition-duration: 0.2s !important;
}

.footer .icon-socials:hover {
    transform: translateY(-3px) !important;
}

/* Footer bottom bar */
.footer .footer-bottom,
.footer-bottom {
    border-top: 1px solid #CAD6EC !important;
    padding: 30px 0px !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

.footer .footer-bottom a,
.footer-bottom a {
    text-decoration: none !important;
    color: var(--text-muted) !important;
}

.footer .footer-bottom a:hover,
.footer-bottom a:hover {
    color: var(--brand-1) !important;
}


/* ============================================================
   14. PAGINATION
   ============================================================ */
.pagination .page-item .page-link {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-1) !important;
    border-color: var(--brand-1) !important;
    color: #fff !important;
}

.pagination .page-item .page-link:hover {
    background-color: var(--bg-light) !important;
    color: var(--text-primary) !important;
}


/* ============================================================
   15. NEWSLETTER / CTA SECTIONS
   ============================================================ */
.box-newsletter {
    background-color: var(--bg-light) !important;
    border-radius: 10px !important;
    padding: 40px !important;
}

.box-newsletter .box-form-newsletter {
    position: relative !important;
}

.box-newsletter .box-form-newsletter input {
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 12px 120px 12px 15px !important;
    width: 100% !important;
    font-size: 14px !important;
    background: #ffffff !important;
}

.box-newsletter .box-form-newsletter .btn-brand-2 {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    height: 100% !important;
    border-radius: 0 4px 4px 0 !important;
}


/* ============================================================
   16. COLOR UTILITY CLASSES
   ============================================================ */
.text-brand {
    color: var(--brand-1) !important;
}

.text-brand-2 {
    color: var(--brand-2) !important;
}

.text-brand-3,
a.text-brand-3 {
    color: var(--text-primary) !important;
}

a.text-brand-3:hover {
    color: var(--brand-1) !important;
}

.text-muted,
.color-gray-500 {
    color: var(--text-muted) !important;
}

.bg-brand-1 {
    background-color: var(--brand-1) !important;
}

.bg-brand-2 {
    background-color: var(--brand-2) !important;
}

.bg-gray-100 {
    background-color: var(--bg-light) !important;
}


/* ============================================================
   17. HOVER EFFECTS
   ============================================================ */
.hover-up {
    transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1) !important;
}

.hover-up:hover {
    transform: translateY(-2px) !important;
}


/* ============================================================
   18. FONT SIZE UTILITY CLASSES
   ============================================================ */
.font-heading,
.display-1,
.display-2,
.heading-lg,
.heading-sm-1 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.font-xs {
    font-size: 12px !important;
    line-height: 18px !important;
}

.font-sm {
    font-size: 14px !important;
    line-height: 20px !important;
}

.font-md {
    font-size: 16px !important;
    line-height: 24px !important;
}

.font-lg {
    font-size: 20px !important;
    line-height: 28px !important;
}

.font-xl {
    font-size: 28px !important;
    line-height: 32px !important;
}

.font-xxl,
.font-2xl {
    font-size: 24px !important;
    line-height: 32px !important;
}

.font-3xl {
    font-size: 30px !important;
    line-height: 36px !important;
}


/* ============================================================
   19. BACKGROUND UTILITY CLASSES (Ecom pastel BGs)
   ============================================================ */
.bg-1 { background-color: #EAE4E9 !important; }
.bg-2 { background-color: #FFF3EA !important; }
.bg-3 { background-color: #FFF2F3 !important; }
.bg-4 { background-color: #FFF1F6 !important; }
.bg-5 { background-color: #DBECE5 !important; }
.bg-6 { background-color: #E8FCFF !important; }


/* ============================================================
   20. REFURBX-SPECIFIC COMPONENTS
   Trade-in wizard, seller badges, condition labels.
   ============================================================ */

/* Seller verification badge */
.rfx-badge-verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #EAF8F1 !important;
    color: var(--success) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.rfx-badge-verified svg {
    width: 12px !important;
    height: 12px !important;
}

/* Condition grade labels */
.rfx-condition-label {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
}

.rfx-condition-label--excellent {
    background: #EAF8F1 !important;
    color: var(--success) !important;
}

.rfx-condition-label--good {
    background: #FFF4E8 !important;
    color: var(--brand-2) !important;
}

.rfx-condition-label--fair {
    background: #FEF2F2 !important;
    color: var(--danger) !important;
}

/* Trade-in wizard progress bar */
.rfx-wizard-progress {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 30px !important;
}

.rfx-wizard-step {
    flex: 1 !important;
    height: 4px !important;
    background: var(--border-color) !important;
    border-radius: 2px !important;
    transition: background 0.3s ease !important;
}

.rfx-wizard-step.active {
    background: var(--brand-1) !important;
}

.rfx-wizard-step.completed {
    background: var(--success) !important;
}


/* ============================================================
   21. BOTBLE CMS ADMIN BAR FIXES
   ============================================================ */
body.show-admin-bar {
    padding-top: 40px !important;
}

body.show-admin-bar .header.sticky-bar.stick {
    top: 40px !important;
}

body.show-admin-bar .sidebar-left {
    top: 40px !important;
}

body.show-admin-bar .mobile-header-active {
    top: 40px !important;
}

#admin-bar {
    z-index: 99999 !important;
}


/* ============================================================
   22. BOTBLE CMS WIDGET & MISC FIXES
   ============================================================ */

/* Flash messages */
.alert {
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
}

/* CK Editor content */
.ck-content {
    font-size: 14px !important;
    line-height: 24px !important;
    color: var(--text-secondary) !important;
}

.ck-content h2,
.ck-content h3,
.ck-content h4 {
    color: var(--text-primary) !important;
    margin-bottom: 15px !important;
}

.ck-content p {
    margin-bottom: 15px !important;
}

.ck-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
}

/* Disabled buttons */
.btn-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}


/* ============================================================
   23. TOPBAR
   ============================================================ */
.topbar {
    background-color: var(--bg-light) !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.topbar .container-topbar {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* ---- Header logo spacing ---- */
.header-logo {
    margin-right: 30px !important;
}

.header-logo .logo {
    margin-right: 0 !important;
}

.header-logo .logo img {
    max-height: 45px !important;
}

/* ---- Header search spacing ---- */
.header-search {
    margin-right: 20px !important;
}

/* ---- Trade-in wizard enhanced UX ---- */
.trade-in-request-page .trade-in-hero {
    background: linear-gradient(135deg, #253D4E 0%, #1a3a4f 50%, #0d2a3a 100%) !important;
    border-radius: 16px !important;
    padding: 50px 40px !important;
    box-shadow: 0 15px 40px rgba(37, 61, 78, 0.25) !important;
}

.trade-in-request-page .trade-in-wizard {
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #EBF0F3 !important;
    overflow: hidden !important;
}

.trade-in-request-page .trade-in-wizard__steps,
.trade-in-wizard__steps {
    display: flex !important;
    justify-content: space-between !important;
    background: #F8FAFB !important;
    padding: 0 !important;
    border-bottom: 2px solid #EBF0F3 !important;
    overflow-x: auto !important;
}

.trade-in-request-page .trade-in-wizard__steps span,
.trade-in-wizard__steps span {
    flex: 1 !important;
    text-align: center !important;
    padding: 16px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #8C9EC5 !important;
    white-space: nowrap !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.3s !important;
}

.trade-in-request-page .trade-in-wizard__steps span.is-active,
.trade-in-wizard__steps span.is-active {
    color: #0BA9ED !important;
    border-bottom-color: #0BA9ED !important;
}

.trade-in-request-page .trade-in-wizard__body {
    padding: 40px !important;
}

.trade-in-request-page .trade-step h4 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #253D4E !important;
    margin-bottom: 8px !important;
}

.trade-in-request-page .trade-step .text-muted {
    color: #5C74A6 !important;
    font-size: 15px !important;
}

.trade-in-request-page .refurbx-brand-card,
.trade-in-request-page .refurbx-option-card {
    border: 2px solid #D5DFE4 !important;
    border-radius: 12px !important;
    padding: 24px 16px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    background: #fff !important;
    text-align: center !important;
}

.trade-in-request-page .refurbx-brand-card:hover,
.trade-in-request-page .refurbx-option-card:hover {
    border-color: #0BA9ED !important;
    background: #F0F8FF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(11, 169, 237, 0.12) !important;
}

.trade-in-request-page .refurbx-brand-card.selected,
.trade-in-request-page .refurbx-option-card.selected {
    border-color: #0BA9ED !important;
    background: #E4F3FF !important;
    box-shadow: 0 0 0 3px rgba(11, 169, 237, 0.15) !important;
}

.trade-in-request-page .trade-in-wizard__footer {
    background: #F8FAFB !important;
    border-top: 2px solid #EBF0F3 !important;
    padding: 24px 40px !important;
}

.trade-in-request-page .trade-price-box strong {
    font-size: 32px !important;
    color: #0BA9ED !important;
    font-weight: 700 !important;
}

.trade-in-request-page .refurbx-progress__bar {
    background: linear-gradient(90deg, #0BA9ED, #5BC694) !important;
    height: 4px !important;
    border-radius: 2px !important;
    transition: width 0.4s ease !important;
}

.trade-in-request-page .refurbx-info-hint {
    background: #E4F3FF !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    color: #253D4E !important;
    border-left: 4px solid #0BA9ED !important;
}

.trade-in-request-page .form-select,
.trade-in-request-page .form-control {
    border: 2px solid #D5DFE4 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #253D4E !important;
    transition: border-color 0.2s ease !important;
}

.trade-in-request-page .form-select:focus,
.trade-in-request-page .form-control:focus {
    border-color: #0BA9ED !important;
    box-shadow: 0 0 0 3px rgba(11, 169, 237, 0.1) !important;
}

.trade-in-request-page .tp-btn,
.trade-in-request-page .tp-btn-2 {
    background: #0BA9ED !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.25s ease !important;
}

.trade-in-request-page .tp-btn:hover,
.trade-in-request-page .tp-btn-2:hover {
    background: #0990c9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(11, 169, 237, 0.3) !important;
}

.trade-in-request-page .tp-btn-border {
    background: transparent !important;
    color: #425A8B !important;
    border: 2px solid #D5DFE4 !important;
    border-radius: 10px !important;
}

.trade-in-request-page .tp-btn-border:hover {
    border-color: #0BA9ED !important;
    color: #0BA9ED !important;
    background: transparent !important;
}

.topbar a {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

.topbar a:hover {
    color: var(--brand-1) !important;
}


/* ============================================================
   24. STICKY HEADER
   ============================================================ */
.header.sticky-bar.stick {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    animation: slideDown 0.3s ease !important;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}


/* ============================================================
   25. SCROLL UP BUTTON
   ============================================================ */
#scrollUp {
    width: 42px !important;
    height: 42px !important;
    color: #ffffff !important;
    right: 30px !important;
    bottom: 30px !important;
    border-radius: 30px !important;
    text-align: center !important;
    overflow: hidden !important;
    z-index: 999 !important;
    border: 0 !important;
    background-color: var(--text-primary) !important;
    transition-duration: 0.2s !important;
}

#scrollUp i {
    display: block !important;
    line-height: 46px !important;
    font-size: 20px !important;
    color: #fff !important;
}

#scrollUp:hover {
    transform: translateY(-3px) !important;
}


/* ============================================================
   26. DROPDOWN SIDEBAR (Category dropdown in header)
   ============================================================ */
.dropdown .sidebar-left {
    top: auto !important;
    height: auto !important;
    padding: 15px 10px !important;
    position: absolute !important;
}

.dropdown .sidebar-left .menu-texts {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

.dropdown .sidebar-left .menu-texts li a {
    line-height: 45px !important;
}

.dropdown .sidebar-left .menu-texts li a .text-link {
    display: inline !important;
}

.dropdown .sidebar-left .menu-texts li a .img-link {
    border-right: 0px !important;
    height: 45px !important;
}


/* ============================================================
   27. SWIPER / SLIDER OVERRIDES
   ============================================================ */
.swiper-pagination-bullet {
    background-color: var(--border-color) !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--brand-1) !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--text-primary) !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    border-color: var(--text-primary) !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px !important;
    font-weight: 700 !important;
}


/* ============================================================
   28. WIDGET STYLES
   ============================================================ */
.widget-categories {
    background-color: #FFF3EA !important;
    padding: 20px !important;
    border-radius: 4px !important;
}

.widget-categories li {
    padding: 8px 0 !important;
}

.widget-categories li + li {
    border-top: 1px solid var(--text-primary) !important;
}

.widget-categories li a {
    color: var(--text-primary) !important;
    font-size: 16px !important;
}

.widget-categories li span.count {
    background-color: #DDD3FA !important;
    color: var(--text-primary) !important;
    border-radius: 3px !important;
    display: block !important;
    padding: 3px 5px !important;
    min-width: 26px !important;
    text-align: center !important;
}

.widget-categories li:hover span.count {
    background-color: var(--text-primary) !important;
    color: #ffffff !important;
}


/* ============================================================
   29. LINK COLOR OVERRIDES
   Ensure Shofy's colored links get Ecom colors.
   ============================================================ */
.tp-product-content a,
.tp-blog-content a {
    color: var(--text-primary) !important;
}

.tp-product-content a:hover,
.tp-blog-content a:hover {
    color: var(--brand-1) !important;
}

/* Shofy section title overrides */
.tp-section-title {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
}


/* ============================================================
   30. FORMS & INPUTS
   ============================================================ */
.form-control {
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    padding: 10px 15px !important;
}

.form-control:focus {
    border-color: var(--brand-1) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-select {
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-family) !important;
}


/* ============================================================
   31. RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1199px) {
    .sidebar-left {
        display: none !important;
    }

    body,
    body.ecom-page {
        padding-left: 0 !important;
    }
}

@media (max-width: 991px) {
    .tp-header-search,
    .tp-header-search-wrapper {
        max-width: 100% !important;
    }

    .header-shop,
    .tp-header-action {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .tp-header-action-item span,
    .header-shop .icon-list span {
        display: none !important;
    }

    .footer .width-20,
    .footer .width-25,
    .footer .width-23,
    .footer .width-16 {
        width: 50% !important;
        margin-bottom: 30px !important;
    }
}

@media (max-width: 767px) {
    .tp-header-search-category,
    .box-category {
        display: none !important;
    }

    .footer .width-20,
    .footer .width-25,
    .footer .width-23,
    .footer .width-16 {
        width: 100% !important;
    }

    .card-grid-style-3 .card-grid-inner .image-box {
        min-height: 140px !important;
        padding: 15px 5px !important;
    }
}


/* ============================================================
   32. TOPBAR HEIGHT FIX
   ============================================================ */
.topbar {
    padding: 8px 0 !important;
}

.topbar .container-topbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ============================================================
   33. BREADCRUMB HIDE ON TRADE-IN PAGE
   ============================================================ */
.trade-in-request-page ~ .breadcrumb__area,
body.trade-in-page .breadcrumb__area {
    display: none !important;
}


/* ============================================================
   34. TRADE-IN BRAND CARDS (no emoji, clean boxes)
   ============================================================ */
.refurbx-brand-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 12px 16px !important;
}

.refurbx-brand-card:hover {
    border-color: var(--brand-1) !important;
}

.refurbx-brand-card.selected {
    border-color: var(--brand-1) !important;
    background-color: rgba(11, 169, 237, 0.05) !important;
}

.refurbx-brand-card .refurbx-option-card__label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.refurbx-brand-card .refurbx-option-card__icon {
    display: none !important;
}


/* ============================================================
   35. PRINT STYLES
   ============================================================ */
@media print {
    .topbar,
    .header,
    .sidebar-left,
    .footer,
    .mobile-header-active,
    .burger-icon,
    #admin-bar,
    #scrollUp {
        display: none !important;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
    }
}


/* ============================================================
   35. SIDEBAR LEFT - HIDDEN (removed per user request)
   ============================================================ */
.sidebar-left {
    display: none !important;
}


/* ============================================================
   36. BREADCRUMB AREA - HIDDEN GLOBALLY
   ============================================================ */
.breadcrumb__area {
    display: none !important;
}

/* ============================================================
   37. VENDI PAGE - ACCORDION FIXES
   ============================================================ */
.accordion-button:not(.collapsed) {
    background-color: #F0F3F8 !important;
    color: #253D4E !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: #D5DFE4 !important;
}

.accordion-button::after {
    filter: none !important;
}


/* ============================================================
   38. VENDI PAGE - HERO BUTTONS (override theme.css .btn)
   ============================================================ */
.rx-btn-hero-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 15px 30px !important;
    background-color: #FD9636 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.rx-btn-hero-primary:hover {
    background-color: #e8841f !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(253, 150, 54, 0.4) !important;
}

.rx-btn-hero-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 15px 30px !important;
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.rx-btn-hero-secondary:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Vendi page card buttons */
.rx-btn-orange {
    display: block !important;
    text-align: center !important;
    padding: 13px !important;
    background-color: #FD9636 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: none !important;
}

.rx-btn-orange:hover {
    background-color: #e8841f !important;
    color: #fff !important;
}

.rx-btn-blue {
    display: block !important;
    text-align: center !important;
    padding: 13px !important;
    background-color: #0BA9ED !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: none !important;
}

.rx-btn-blue:hover {
    background-color: #0990c9 !important;
    color: #fff !important;
}

.rx-btn-dark {
    display: block !important;
    text-align: center !important;
    padding: 13px !important;
    background-color: #253D4E !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: none !important;
}

.rx-btn-dark:hover {
    background-color: #1a2e3d !important;
    color: #fff !important;
}


/* ============================================================
   39. PRODUCT GALLERY - Fix image size
   ============================================================ */
.bb-product-gallery-images,
.bb-product-gallery-images .slick-list,
.bb-product-gallery-images .slick-track,
.bb-product-gallery-images .slick-slide {
    width: 100% !important;
}

.bb-product-gallery-images .slick-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
}

.bb-product-gallery-images .slick-slide a {
    display: block !important;
    width: 100% !important;
}

/* Also fix the product detail image container */
.tp-product-details-thumb-wrapper,
.tp-product-details-thumb {
    width: 100% !important;
}

.tp-product-details-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
}

/* Gallery thumbnails */
.bb-product-gallery-thumbs .slick-slide {
    width: 80px !important;
    height: 80px !important;
    margin-right: 8px !important;
}

.bb-product-gallery-thumbs .slick-slide img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 2px solid #EBF0F3 !important;
}

.bb-product-gallery-thumbs .slick-slide.slick-current img {
    border-color: #0BA9ED !important;
}


/* ============================================================
   40. CATEGORY CARDS - Equal height + "Vedi tutto" at bottom
   ============================================================ */
.card-grid-style-2.card-grid-style-2-small {
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    min-height: 180px !important;
    border: 1px solid #EBF0F3 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    background: #fff !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.card-grid-style-2.card-grid-style-2-small:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.06) !important;
    border-color: #D5DFE4 !important;
}

.card-grid-style-2.card-grid-style-2-small .image-box {
    width: 70px !important;
    min-width: 70px !important;
    margin-right: 15px !important;
}

.card-grid-style-2.card-grid-style-2-small .image-box img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
}

.card-grid-style-2.card-grid-style-2-small .info-right {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 140px !important;
}

.card-grid-style-2.card-grid-style-2-small .info-right h6 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #253D4E !important;
    margin-bottom: 8px !important;
}

.card-grid-style-2.card-grid-style-2-small .list-links-disc {
    flex: 1 !important;
    margin-bottom: 10px !important;
}

.card-grid-style-2.card-grid-style-2-small .list-links-disc li {
    margin-bottom: 4px !important;
}

.card-grid-style-2.card-grid-style-2-small .list-links-disc li a {
    font-size: 13px !important;
    color: #5C74A6 !important;
}

.card-grid-style-2.card-grid-style-2-small .list-links-disc li a:hover {
    color: #0BA9ED !important;
}

.card-grid-style-2.card-grid-style-2-small .btn-gray-abs {
    margin-top: auto !important;
    align-self: flex-end !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #425A8B !important;
    background: #F0F3F8 !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
}

.card-grid-style-2.card-grid-style-2-small .btn-gray-abs:hover {
    background: #0BA9ED !important;
    color: #fff !important;
}

/* Make category row equal height */
.card-grid-style-2.card-grid-style-2-small .col-xl-3 {
    margin-bottom: 20px !important;
}


/* ============================================================
   41. BRAND LOGOS - Proper styling for text-based logos
   ============================================================ */
.list-brands .item-logo {
    padding: 15px 10px !important;
}

.list-brands .item-logo a {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #B2C2E1 !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    transition: color 0.2s ease !important;
}

.list-brands .item-logo a:hover {
    color: #425A8B !important;
}

.list-brands .item-logo img {
    max-height: 40px !important;
    filter: grayscale(100%) opacity(0.5) !important;
    transition: all 0.3s ease !important;
}

.list-brands .item-logo img:hover {
    filter: grayscale(0%) opacity(1) !important;
}

/* ============================================================
   Store Card Height Fix
   ============================================================ */
.bb-store-item-content {
    min-height: 60px !important;
    padding: 0.75rem 1rem !important;
}

/* ============================================================
   Store Banner Text Readability Fix
   ============================================================ */
.bb-shop-banner {
    position: relative !important;
}
.bb-shop-banner-overlay {
    background: rgba(0,0,0,0.5) !important;
}
.bb-shop-banner-name,
.bb-shop-banner-content h2,
.bb-shop-banner-content .bb-shop-banner-description,
.bb-shop-banner-content small,
.bb-shop-banner-info {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}


/* ============================================================
   43. BRAND LOGOS SLIDER - proper sizing and grayscale
   ============================================================ */
.list-brands .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.list-brands .item-logo {
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
}

.list-brands .item-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.list-brands .item-logo img {
    height: 30px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
    filter: grayscale(100%) opacity(0.4) !important;
    transition: all 0.3s ease !important;
}

.list-brands .item-logo img:hover {
    filter: grayscale(0%) opacity(1) !important;
}