@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&family=Roboto:wght@400;500;600;700;800&display=swap");

/* Client update overrides - safe, non-destructive UI layer */
:root {
    --client-text: #1A1A1A;
    --client-font-family: "Work Sans", "Roboto", sans-serif;
    --client-font-size: 16px;
    --client-font-weight: 600;
    --client-line-height: 24px;
    --client-letter-spacing: .01em;
    --client-primary: #0875C9;
    --client-primary-dark: #075F9F;
    --client-primary-light: #E6F3FB;
    --client-secondary: #0B563A;
    --client-accent: #F28C00;
    --client-accent-dark: #D97706;
    --client-accent-light: #FFF4DF;
    --client-background: #F8F9FA;
    --client-surface: #FFFFFF;
    --client-border: #E0E0E0;
    --client-text-muted: #6C757D;
    --client-success: #28A745;
    --client-warning: #FFC107;
    --client-danger: #DC3545;
    --client-info: #17A2B8;
    --client-light-border: var(--client-border);
    --client-gray-border: #D1D5DB; /* New variable for gray border */
    --client-gray-icon: #6B7280;   /* New variable for gray icon */
}

@media (max-width: 1199.98px) {
    #content {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: clip;
        padding-right: 8px;
    }

    html:not(.desktop-site-mode) #content {
        padding-top: 70px;
    }

    html:not(.desktop-site-mode) #navbar_top.mobile-search-open + #content {
        padding-top: 126px;
    }

    #navbar_top,
    #navbar_top .mobile-header,
    #navbar_top .mobile-search {
        background-color: var(--client-surface);
    }

    #navbar_top {
        isolation: isolate;
        z-index: 9999;
    }

    #navbar_top .mobile-search form {
        background-color: var(--client-surface);
    }

    .mobile-menu {
        background: var(--client-surface);
        bottom: 0;
        display: block !important;
        height: 100vh;
        height: 100dvh;
        left: -320px;
        max-width: 85vw;
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed !important;
        top: 0;
        transition: left .3s ease;
        width: 320px;
        z-index: 10001;
    }

    .mobile-menu.active {
        left: 0 !important;
    }

    .mobile-menu .first-nav,
    .mobile-menu .second-nav,
    .mobile-menu .third-nav {
        box-sizing: border-box;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .mobile-menu .first-nav > .parent-category,
    .mobile-menu .second-nav > .parent-subcategory,
    .mobile-menu .third-nav > .childcategory {
        box-sizing: border-box;
        display: block !important;
        float: none !important;
        position: relative;
        width: 100% !important;
    }

    .mobile-menu .first-nav > .parent-category > .menu-category-name {
        align-items: center;
        box-sizing: border-box;
        display: flex !important;
        line-height: 1.3;
        min-height: 48px;
        padding: 8px 50px 8px 12px !important;
        width: 100%;
    }

    .mobile-menu .first-nav .menu-category-name .side_cat_img {
        flex: 0 0 20px;
        height: 20px;
        margin: 0 8px 0 0;
        object-fit: contain;
        width: 20px;
    }

    .mobile-menu .first-nav .menu-category-toggle,
    .mobile-menu .second-nav .menu-subcategory-toggle {
        align-items: center;
        display: flex !important;
        height: 44px;
        justify-content: center;
        line-height: 1;
        position: absolute !important;
        right: 0;
        top: 0;
        width: 44px;
    }

    .mobile-menu .second-nav > .parent-subcategory > .menu-subcategory-name {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        line-height: 1.3;
        min-height: 44px;
        overflow-wrap: anywhere;
        padding: 8px 48px 8px 32px;
        width: 100%;
    }

    .mobile-menu .third-nav > .childcategory > .menu-childcategory-name {
        box-sizing: border-box;
        display: block;
        line-height: 1.3;
        min-height: 40px;
        overflow-wrap: anywhere;
        padding: 8px 12px 8px 52px;
        width: 100%;
    }

    .mobile-menu .second-nav {
        background: var(--client-surface);
    }

    .mobile-menu .third-nav {
        background: var(--client-background);
    }

    .magnifier,
    .cursorshade,
    .tracker {
        display: none !important;
    }

    .mobile_bottom_nav {
        box-sizing: border-box;
        left: 0;
        right: 0;
        width: 100%;
    }

    .mobile_bottom_nav .nav_container {
        box-sizing: border-box;
        display: grid;
        gap: 0;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-left: 4px;
        padding-right: 4px;
        width: 100%;
    }

    .mobile_bottom_nav .nav_item {
        box-sizing: border-box;
        justify-content: center;
        min-width: 0;
        width: auto;
    }

    .mobile_bottom_nav .nav_text {
        font-size: clamp(9px, 2.8vw, 12px);
        line-height: 1.2;
        white-space: nowrap;
    }

    .mobile_bottom_nav .home_fab {
        height: clamp(44px, 15vw, 60px);
        width: clamp(44px, 15vw, 60px);
    }

    .devniox-ai-widget {
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
    }

    .chat-widget {
        bottom: calc(166px + env(safe-area-inset-bottom)) !important;
    }

    .related-product-section {
        max-width: 100%;
        overflow: hidden;
    }

    .related-product-section > .container {
        max-width: 100%;
    }

    .related-product-section button.owl-prev {
        left: 0;
    }

    .related-product-section button.owl-next {
        right: 0;
    }
}

.logo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* Add some space between items */
}

.main-logo {
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.main-search {
    flex-grow: 1; /* Allow search to take up available space */
    margin: 0 !important; /* Remove default margins */
}

.main-search form {
    border: 1px solid var(--client-gray-border) !important; /* Gray border for search input */
    border-color: var(--client-gray-border) !important;
    height: 44px; /* Adjust height for better appearance */
    border-radius: 8px; /* Rounded corners for search input */
}

.main-search form input {
    background: var(--client-surface) !important;
    font-size: 14px !important;
    padding: 0 15px !important; /* More padding for input text */
}

.main-search form button {
    background: var(--client-surface) !important; /* White background for button */
    border-left: 1px solid var(--client-gray-border) !important; /* Separator border */
    width: 50px !important; /* Fixed width for button */
}

.main-search form button svg {
    color: var(--client-gray-icon) !important; /* Gray search icon */
    height: 22px !important;
    width: 22px !important;
}

.header-list-items {
    flex-shrink: 0; /* Prevent list items from shrinking */
    display: flex;
    align-items: center;
    gap: 15px; /* Space between header list items */
}

.header-list-items ul {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-list-items ul li {
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
}

.header-list-items ul li a {
    min-height: 40px; /* Consistent height for links */
    padding: 8px 12px !important;
}

/* Ensure mobile search is also styled */
.mobile-search form {
    border: 1px solid var(--client-gray-border) !important;
    border-color: var(--client-gray-border) !important;
    height: 44px;
    border-radius: 8px;
}

.mobile-search form input {
    background: var(--client-surface) !important;
    font-size: 14px !important;
    padding: 0 15px !important;
}

.mobile-search form button {
    background: var(--client-surface) !important;
    border-left: 1px solid var(--client-gray-border) !important;
    width: 50px !important;
}

.mobile-search form button svg {
    color: var(--client-gray-icon) !important;
    height: 22px !important;
    width: 22px !important;
}

body,
.homeproduct,
.product_item,
.details_right,
.footer-v2 {
    font-family: var(--client-font-family);
    color: var(--client-text);
}

body {
    font-family: var(--client-font-family) !important;
    color: var(--client-text) !important;
    font-size: var(--client-font-size);
    font-style: normal;
    font-weight: var(--client-font-weight);
    letter-spacing: var(--client-letter-spacing);
    line-height: var(--client-line-height);
}

body :where(p, a, span, li, label, input, select, textarea, button, td, th, small, strong, b, em, div),
.product_item :where(p, a, span, button, input),
.main-header :where(a, span, button, input),
.footer-v2 :where(a, p, span, li, label, input, button),
.category-product :where(a, p, span, button),
.main-details-page :where(a, p, span, button, input, select, textarea) {
    font-family: var(--client-font-family) !important;
    font-style: normal;
    font-weight: var(--client-font-weight);
    letter-spacing: var(--client-letter-spacing);
}

body :where(p, a, span, li, label, input, select, textarea, button, td, th, small, strong, b, em),
.product_item :where(p, a, span, button, input),
.main-header :where(a, span, button, input),
.footer-v2 :where(a, p, span, li, label, input, button),
.category-product :where(a, p, span, button) {
    font-size: var(--client-font-size);
    line-height: var(--client-line-height);
}

i,
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    letter-spacing: normal !important;
}

.main-menu ul li a,
.header-list-items ul li a,
.sidebar-menu a,
.Cat_menu a {
    border: 0 !important;
    border-radius: 999px;
    color: var(--client-text) !important;
    display: inline-flex;
    align-items: center;
    font-family: "Roboto", "Work Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 24px;
    min-height: 36px;
    padding: 7px 14px !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.main-menu ul li a:hover,
.header-list-items ul li a:hover,
.sidebar-menu a:hover,
.Cat_menu a:hover {
    background: var(--client-primary-light) !important;
    color: var(--client-primary-dark) !important;
    box-shadow: 0 8px 18px rgba(var(--client-primary-rgb), .08);
}

.main-menu ul li a:after {
    display: none !important;
}

#simple_timer.offer_timer,
#simple_timer .syotimer__body {
    align-items: center !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
}

#simple_timer .syotimer-cell {
    align-items: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: #111827 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 22px !important;
    padding: 0 !important;
    position: relative;
    text-align: center !important;
    width: auto !important;
}

#simple_timer .syotimer-cell:not(:last-child)::after {
    color: #111827;
    content: ":";
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-52%);
}

#simple_timer .syotimer-cell__value {
    display: inline-block !important;
    line-height: 1 !important;
}

#simple_timer .syotimer-cell__unit {
    display: none !important;
}

.search_result,
.search-box,
.search_form {
    transform: translateX(50px);
}

.category-slider .cat_item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 172px;
    min-height: 172px;
    border: 1px solid #ddd;
}

.category-slider .cat_item:hover {
    border-color: var(--client-primary);
}

.category-slider .cat_img {
    flex: 0 0 80px;
}

.category-slider .cat_name {
    flex: 1 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-slider .cat_name a {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
}

.product_item {
    border: 1px solid var(--client-border) !important;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    box-shadow: 10px 7px 11px 0px #f1efef;
}

.category-product .product_item {
    align-self: start;
    height: auto;
}
.product_item_inner,
.product_item .pro_des,
.product_item .pro_price,
.product_item .pro_btn {
    margin-top: 0 !important;
}

.product_item .pro_img {
    padding: 0 !important;
    background: #fff;
    border-bottom: 1px solid var(--client-border);
}

.product_item .pro_des {
    padding: 10px 0 !important;
}

.product_item .pro_name a {
    color: var(--client-text) !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4 !important;
}

.product_item .pro_price {
    margin-bottom: 2px !important;
    padding: 0 10px !important;
}

.product_item .pro_price p {
    margin: 0;
    font-size: 16px !important;
    color: var(--client-primary) !important;
}

.product_item .pro_btn {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 0 !important;
    padding: 0 10px 10px !important;
    min-width: 0;
    width: 100%;
}

.product_item .pro_btn > form,
.product_item .pro_btn > a {
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
}

.product_item .pro_btn > form:first-child,
.product_item .pro_btn > a.order-btn-link,
.product_item .pro_btn > a.addcartbutton {
    flex: 1 1 0%;
    min-width: 0;
}

.product_item .pro_btn > form:last-child,
.product_item .pro_btn > a.cart-icon-link,
.product_item .pro_btn > a.cart-icon-btn {
    flex: 0 0 42px;
    max-width: 42px;
    min-width: 42px;
    width: 42px;
}

.product_item .order-btn,
.product_item .order-btn-link,
.product_item .addcartbutton {
    align-items: center !important;
    background-color: var(--client-primary) !important;
    border: 1px solid var(--client-primary) !important;
    box-sizing: border-box;
    display: flex !important;
    flex: 1 1 auto;
    font-size: clamp(12px, 1.05vw, 14px) !important;
    font-weight: 700 !important;
    height: 42px !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    min-height: 42px !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 6px 4px !important;
    border-radius: 6px;
    text-align: center !important;
    text-decoration: none !important;
    color: var(--client-surface) !important;
    white-space: nowrap !important;
    width: 100% !important;
    word-break: normal !important;
}

.product_item .order-btn:hover,
.product_item .order-btn:active,
.product_item .order-btn-link:hover,
.product_item .order-btn-link:active,
.product_item .addcartbutton:hover,
.product_item .addcartbutton:active {
    background-color: var(--client-primary-dark) !important;
    border-color: var(--client-primary-dark) !important;
    color: var(--client-surface) !important;
}

.product_item .cart-icon-btn,
.product_item .cart-icon-link {
    align-items: center !important;
    box-sizing: border-box;
    display: inline-flex !important;
    flex: 0 0 42px !important;
    height: 42px !important;
    justify-content: center !important;
    max-width: 42px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    width: 42px !important;
    border-radius: 6px;
}

.product_item .cart-icon-btn i,
.product_item .cart-icon-link i {
    font-size: 16px !important;
    line-height: 1 !important;
}

.client-ad-banner {
    margin: 18px 0;
}

.client-ad-banner__grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

.client-ad-banner--split .client-ad-banner__grid {
    grid-template-columns: 1fr 1fr;
}

.client-ad-banner__item {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: var(--client-background);
}

.client-ad-banner__item img {
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    height: min(260px, 20vw);
    max-height: 260px;
    object-fit: cover;
    display: block;
}

.client-ad-banner--full .client-ad-banner__item img {
    height: min(260px, 24vw);
}

.footer-v2 a {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
}

.footer-v2 a:hover {
    color: var(--client-accent) !important;
}

.details_right .product-cart .name {
    border: 1px solid var(--client-border);
    border-radius: 8px;
    color: var(--client-text);
    font-size: 20px !important;
    font-weight: 600;
    line-height: 25px !important;
    padding: 10px 12px;
}

.details_right .stock-report {
    align-items: center;
    background: var(--client-background);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    margin: 8px 0 10px;
    padding: 7px 10px;
}

.details_right .stock-report strong {
    color: var(--client-text);
    font-size: 14px;
}

.details_right .stock-report span {
    color: var(--client-success);
    font-weight: 700;
}

.main-details-page .block__pic {
    max-height: 520px;
    object-fit: contain;
}

.description,
.product-detail-section-content,
.description.tab-content p {
    font-size: 14px !important;
    line-height: 20px !important;
}

.product-video-section .pro_vide {
    max-width: 760px;
}

.product-video-section iframe,
.product-video-section video {
    max-height: 340px;
    border-radius: 12px;
}

@media (max-width: 991px) {
    .search_result,
    .search-box,
    .search_form,
    .main-header form[action*="search"] {
        transform: none;
    }

    .client-ad-banner__item img,
    .client-ad-banner--full .client-ad-banner__item img {
        height: 180px;
        max-height: 180px;
    }
}

@media (max-width: 767px) {
    .mobile-header .menu-bag > a.margin-shopping {
        display: none;
    }

    .homeproduct .section-title-header--view-more {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: space-between;
        min-width: 0;
    }

    .homeproduct .section-title-header--view-more .section-title-name {
        bottom: auto;
        flex: 1 1 auto;
        min-width: 0;
        padding-bottom: 0;
        position: static;
    }

    .homeproduct .section-title-header--view-more > .view_more_btn {
        flex: 0 0 auto;
        float: none;
        line-height: normal;
        margin: 0;
        position: static;
        transform: none;
    }

    .client-ad-banner {
        margin: 12px 0;
    }

    .client-ad-banner--split .client-ad-banner__grid {
        display: flex;
        gap: 10px;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .client-ad-banner--split .client-ad-banner__grid::-webkit-scrollbar {
        display: none;
    }

    .client-ad-banner--split .client-ad-banner__item {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    .client-ad-banner__item img,
    .client-ad-banner--full .client-ad-banner__item img {
        height: 160px;
        max-height: 160px;
    }

    .slider-section .hidetosm,
    .slider-section .sidebar-menu,
    .slider-section .sidebar-menu .hideshow {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        visibility: hidden !important;
    }

    .slider-section .col-sm-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .main-details-page .block__pic {
        max-height: 380px;
    }

    .product-video-section iframe,
    .product-video-section video {
        max-height: 220px;
    }
}

@media (min-width: 768px) {
    .slider-section {
        overflow: visible;
        position: relative;
        z-index: 20;
    }

    .slider-section .container,
    .slider-section .row,
    .slider-section .col-sm-3.hidetosm,
    .slider-section .sidebar-menu,
    .slider-section .sidebar-menu .hideshow,
    .slider-section .sidebar-menu li {
        overflow: visible !important;
    }

    .slider-section .col-sm-3.hidetosm {
        opacity: 1;
        position: relative;
        transform: translateY(0);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        visibility: visible;
        z-index: 80;
    }

    .slider-section .sidebar-menu {
        border-color: var(--client-border);
        position: relative;
        z-index: 90;
    }

    .slider-section .sidebar-menu > .hideshow {
        position: relative;
    }

    .slider-section .sidebar-menu > .hideshow > li {
        position: relative;
    }

    .slider-section .sidebar-submenu {
        background: rgba(255, 255, 255, .98);
        border: 1px solid rgba(var(--client-text-rgb), .08);
        border-radius: 0 12px 12px 0;
        box-shadow: 0 22px 46px rgba(15, 23, 42, .14);
        display: grid;
        gap: 18px 28px;
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        left: calc(100% - 1px) !important;
        height: auto;
        max-height: 410px;
        min-height: 0;
        overflow-y: auto !important;
        padding: 24px 28px;
        pointer-events: none;
        right: auto !important;
        top: 0;
        width: min(890px, calc(100vw - 410px));
        z-index: 99999 !important;
    }

    .slider-section .sidebar-submenu::before {
        background: transparent;
        content: "";
        height: 42px;
        left: -10px;
        position: absolute;
        top: 0;
        width: 10px;
    }

    .slider-section .sidebar-menu > .hideshow > li:hover > .sidebar-submenu {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .slider-section .sidebar-menu > .hideshow > li.is-mega-open > .sidebar-submenu {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .slider-section .sidebar-menu > .hideshow > li.is-mega-open > a {
        background-color: var(--client-primary-light);
        color: var(--client-primary) !important;
    }

    .slider-section .sidebar-menu > .hideshow > li.is-mega-open > a span,
    .slider-section .sidebar-menu > .hideshow > li.is-mega-open > a i {
        color: var(--client-primary) !important;
    }

    .slider-section .sidebar-submenu > li {
        min-width: 0;
        position: static !important;
    }

    .slider-section .sidebar-submenu > li > a {
        color: var(--client-text) !important;
        font-size: 15px;
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 10px;
        padding: 0 0 8px;
        text-transform: uppercase;
    }

    .slider-section .sidebar-submenu > li > a:hover {
        background: transparent;
        color: var(--client-accent) !important;
    }

    .slider-section .sidebar-submenu > li > a i {
        display: none;
    }

    .slider-section .sidebar-childmenu {
        background: transparent;
        border-left: 0;
        opacity: 1;
        position: static;
        visibility: visible;
        width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
        z-index: auto;
    }

    .slider-section .sidebar-childmenu li a {
        color: var(--client-text-muted) !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        padding: 5px 0;
        text-transform: capitalize;
    }

    .slider-section .sidebar-childmenu li a:hover {
        background: transparent;
        color: var(--client-accent) !important;
        padding-left: 4px;
    }

    .slider-section .col-sm-9,
    .slider-section .home-slider-container,
    .slider-section .main_slider,
    .slider-section .owl-stage-outer {
        position: relative;
        z-index: 1;
    }

    .slider-section .col-sm-3.hidetosm.is-home-category-scroll-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        visibility: hidden;
    }
}

@media (max-width: 420px) {
    .client-ad-banner--split .client-ad-banner__item {
        flex-basis: 90%;
    }

    .client-ad-banner__item img,
    .client-ad-banner--full .client-ad-banner__item img {
        height: 145px;
        max-height: 145px;
    }
}

/* Client product details redesign */
.main-details-page {
    background: #fff;
    padding: 22px 0 28px;
}

.main-details-page .product-section > .container {
    max-width: 1280px;
}

.client-product-back {
    margin: 0 0 14px;
}

.client-product-back a {
    align-items: center;
    color: #6b7280;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    text-decoration: none;
}

.client-product-back a:hover {
    color: var(--client-orange);
}

.client-product-hero {
    align-items: flex-start;
    row-gap: 18px;
}

.client-product-gallery .details_slider {
    background: #fff;
    border: 1px solid var(--client-border);
    border-radius: 4px;
    overflow: hidden;
}

.client-product-gallery .dimage_item {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 500px;
    padding: 16px;
}

.client-product-gallery .block__pic {
    max-height: 500px;
    object-fit: contain;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

.client-product-gallery .indicator_thumb {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.client-product-gallery .indicator_thumb.thumb_slider {
    display: block;
}

.client-product-gallery .indicator-item {
    border: 1px solid #d8dee8;
    border-radius: 3px;
    cursor: pointer;
    flex: 0 0 62px;
    height: 100%;
    overflow: hidden;
    padding: 2px;
}

.client-product-gallery .indicator-item img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

.client-product-info .details_right {
    padding: 0;
}

.client-product-info .breadcrumb {
    display: none;
}

.client-product-info .product-cart {
    background: #fff;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.client-product-info .details_right .product-cart .name {
    border: 0;
    border-radius: 0;
    color: var(--client-text);
    font-size: 23px !important;
    font-weight: 800;
    line-height: 30px !important;
    margin: 0 0 8px;
    padding: 0;
}

.client-product-info .details-ratting-wrapper {
    align-items: center;
    border-bottom: 1px solid var(--client-border);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 12px;
    padding-bottom: 10px;
}

.client-product-info .details-ratting-wrapper i {
    color: var(--client-warning);
    font-size: 14px;
}

.client-product-info .details-ratting-wrapper span {
    color: var(--client-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.client-product-info .all-reviews-button {
    border-left: 1px solid var(--client-border);
    color: var(--client-text);
    font-size: 14px;
    line-height: 1;
    margin-left: 4px;
    padding-left: 10px;
    text-decoration: underline;
}

.client-product-info .details-price {
    align-items: baseline;
    display: flex;
    gap: 10px;
    margin: 8px 0 8px;
}

.client-product-info .details-price span {
    color: var(--client-text);
    font-size: 23px;
    font-weight: 800;
}

.client-product-info .details-price del {
    color: var(--client-text-muted);
    font-size: 15px;
    order: 2;
}

.client-product-summary {
    border-bottom: 1px solid var(--client-border);
    color: #666f7d;
    font-size: 15px;
    line-height: 24px;
    margin: 0 0 12px;
    padding: 0 0 12px;
}

.client-product-info .product-code p,
.client-product-info .pro_brand p {
    color: var(--client-text);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.client-product-info .stock-report {
    background: var(--client-accent-light);
    border: 0;
    color: var(--client-danger);
    font-size: 14px;
    margin: 2px 0 12px;
    padding: 0;
}

.client-product-info .stock-report strong {
    display: none;
}

.client-product-info .stock-report span {
    color: var(--client-danger);
    font-weight: 800;
}

.client-product-info .stock-report span:before {
    content: "";
    background: var(--client-danger);
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    margin-right: 5px;
    width: 7px;
}

.client-product-info form > .row {
    align-items: center;
    border-top: 1px solid var(--client-border);
    display: grid;
    gap: 12px;
    grid-template-columns: auto 1fr;
    margin: 14px 0 0;
    padding-top: 16px;
}

.client-product-info .qty-cart,
.client-product-info .single_product {
    max-width: none;
    padding: 0;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

.client-product-info .qty-cart .quantity {
    align-items: center;
    border: 1px solid var(--client-primary-dark);
    border-radius: 5px;
    display: grid;
    grid-template-columns: 34px 42px 34px;
    height: 38px;
    overflow: hidden;
    width: 112px;
}

.client-product-info .quantity .minus,
.client-product-info .quantity .plus {
    align-items: center;
    background: #fff;
    color: var(--client-text);
    cursor: pointer;
    display: flex;
    font-size: 17px;
    font-weight: 800;
    height: 100%;
    justify-content: center;
}

.client-product-info .quantity input {
    border: 0;
    color: var(--client-text);
    font-size: 15px;
    font-weight: 700;
    height: 100%;
    text-align: center;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

.client-product-info .single_product {
    display: grid !important;
    gap: 10px;
    grid-template-columns: 1fr;
}

.client-product-info .add_cart_btn,
.client-product-info .order_now_btn {
    border-radius: 8px !important;
    font-size: 15px;
    font-weight: 800;
    height: 44px;
    line-height: 1;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

.client-product-info .add_cart_btn {
    background: #ff751b !important;
    border-color: var(--client-accent) !important;
    color: var(--client-surface) !important;
}

.client-product-info .order_now_btn {
    background: #111827 !important;
    border-color: #111827 !important;
    color: var(--client-surface) !important;
}

.client-product-info .call_now_btn {
    background: #ff7900 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--client-surface) !important;
    font-size: 15px;
    font-weight: 800;
    min-height: 44px;
}

.client-product-info .del_charge_area .alert {
    background: #fff;
    border: 1px solid #f2b9c7;
    border-radius: 10px;
    color: var(--client-text);
}

.client-product-offer-card {
    background: #fff;
    border: 1px solid var(--client-border);
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.client-product-offer-card h3 {
    background: var(--client-background);
    border-bottom: 1px solid var(--client-border);
    color: var(--client-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    margin: 0;
    padding: 13px 14px;
    text-transform: uppercase;
}

.client-offer-row {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    padding: 16px 14px;
}

.client-offer-row span {
    align-items: center;
    background: #e8f3ff;
    border-radius: 6px;
    color: #2f80ed;
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
}

.client-offer-row strong {
    color: var(--client-text);
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
}

.client-offer-row p {
    color: var(--client-text-muted);
    font-size: 12px;
    line-height: 16px;
    margin: 4px 0 0;
}

.client-offer-action {
    align-items: center;
    border-top: 1px solid var(--client-border);
    color: #374151;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    line-height: 17px;
    min-height: 52px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

.client-offer-action:hover {
    color: var(--client-orange);
}

@media (min-width: 992px) {
    .client-product-info .single_product {
        grid-template-columns: 135px 1fr; /* Fixed width for stepper/wishlist */
    }

    .client-product-info .order_now_btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .client-product-offer-card {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-top: 12px;
        position: static;
    }

    .client-product-offer-card h3 {
        grid-column: 1 / -1;
    }

    .client-offer-action {
        border-left: 1px solid #e5e7eb;
        border-top: 0;
    }
}

@media (max-width: 767px) {
    .main-details-page {
        padding-top: 12px;
    }

    .client-product-gallery .dimage_item {
        min-height: 320px;
        padding: 10px;
    }

    .client-product-gallery .block__pic {
        max-height: 320px;
    }

    .client-product-gallery .indicator-item {
        flex-basis: 56px;
        height: 56px;
    }

    .client-product-info .details_right .product-cart .name {
        font-size: 20px !important;
        line-height: 26px !important;
        margin-top: 8px;
    }

    .client-product-info form > .row {
        grid-template-columns: 1fr;
    }

    .client-product-info .single_product {
        grid-template-columns: 1fr;
    }

    .client-product-offer-card {
        grid-template-columns: 1fr;
    }

    .client-offer-action {
        border-left: 0;
        border-top: 1px solid var(--client-border);
    }
}

/* ============================================================
   PRODUCT DETAILS — REFERENCE DESIGN OVERRIDE (image 2)
   Appended last so it wins over the legacy rules above.
   ============================================================ */

/* ---- Gallery: larger, cleaner viewing area ---- */
.client-product-gallery .dimage_item {
    min-height: 520px;
}

.client-product-gallery .block__pic {
    max-height: 520px;
}

.client-product-gallery .indicator-item {
    border-color: #e5e7eb;
    transition: border-color .2s ease;
}

.client-product-gallery .indicator-item:hover,
.client-product-gallery .indicator-item.active-item {
    border-color: #111827;
}

/* ---- Title: 20px / 25px, light border ---- */
.client-product-info .details_right .product-cart .name {
    border: 0;
    border-bottom: 1px solid #eef1f5;
    font-size: 20px !important;
    line-height: 25px !important;
    margin: 0 0 10px;
    padding: 0 0 10px;
}

/* ---- Rating directly under the title ---- */
.client-product-info .details-ratting-wrapper {
    border: 0;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
}

.client-product-info .details-ratting-wrapper i {
    font-size: 15px;
}

.client-product-info .details-ratting-wrapper i.far.fa-star {
    color: #d1d5db;
}

.client-product-info .details-ratting-wrapper span {
    font-size: 13px;
    margin-left: 2px;
}

.client-product-info .all-reviews-button {
    font-size: 13px;
}

/* ---- Price under the rating ---- */
.client-product-info .details-price {
    margin: 0 0 10px;
}

.client-product-info .details-price span {
    font-size: 22px;
    order: 1;
}

.client-product-info .details-price del {
    order: 2;
}

/* ---- Description: 14px / 20px ---- */
.client-product-summary {
    font-size: 14px;
    line-height: 20px;
}

/* ---- Product code / brand ---- */
.client-product-info .product-code p,
.client-product-info .pro_brand p {
    color: #374151;
    font-weight: 600;
}

.client-product-info .product-code p {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

/* ---- IN STOCK: separate & clearly displayed ---- */
.client-product-info .stock-report {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 3px solid #e11d48;
    display: flex;
    gap: 6px;
    margin: 10px 0 14px;
    padding: 2px 0 2px 10px;
}

/* ---- Qty + wishlist + Add to cart (one row) ---- */
.client-product-info form > .row {
    align-items: center;
    border-top: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: auto 42px minmax(min-content, 1fr);
    margin: 0 0 14px;
    padding: 0;
}

.client-product-info .qty-cart .quantity {
    border-radius: 6px;
    grid-template-columns: 32px 40px 32px;
    height: 42px;
    width: 108px;
}

.client-product-info .quantity .minus,
.client-product-info .quantity .plus {
    font-size: 16px;
}

.client-wishlist-btn {
    align-items: center;
    background: #fff !important;
    border: 1px solid #111827 !important;
    border-radius: 8px !important;
    color: #111827 !important;
    cursor: pointer;
    display: flex;
    height: 42px;
    justify-content: center;
    padding: 0;
    width: 42px;
}

.client-wishlist-btn i {
    font-size: 17px;
}

.client-wishlist-btn:hover {
    background: #f3f4f6 !important;
}

.client-wishlist-btn.is-active {
    background: #ff751b !important;
    border-color: var(--client-accent) !important;
    color: var(--client-surface) !important;
}

.client-product-info .single_product {
    display: grid !important;
    gap: 10px;
    grid-template-columns: auto 1fr;
}

.client-product-info .add_cart_btn,
.client-product-info .order_now_btn {
    font-size: 15px;
    height: 42px;
    white-space: nowrap;
}

/* Buy Now spans the full width under the row */
.client-product-info .order_now_btn {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* ---- Trust strip (Delivers in / Safe checkout) ---- */
.client-trust-strip {
    border-top: 1px solid var(--client-border);
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 0 0;
}

.client-trust-strip li {
    align-items: center;
    color: var(--client-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
    margin-bottom: 7px;
}

.client-trust-strip li:last-child {
    margin-bottom: 0;
}

.client-trust-strip li i {
    color: var(--client-text-muted);
    font-size: 13px;
}

.client-trust-strip li strong {
    color: var(--client-text);
    font-weight: 800;
}

.client-trust-link {
    border-bottom: 1px solid #111827;
    color: var(--client-text);
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
    text-decoration: none;
}

.client-trust-link:hover {
    color: var(--client-orange);
}

/* ---- Category / Tags / Share ---- */
.client-product-meta {
    border-top: 1px solid var(--client-border);
    margin: 14px 0 0;
    padding: 12px 0 0;
}

.client-meta-row {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.client-meta-row:last-child {
    margin-bottom: 0;
}

.client-meta-label {
    color: var(--client-text-muted);
    flex: 0 0 62px;
    font-size: 13px;
    font-weight: 600;
}

.client-meta-value {
    color: #374151;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    word-break: break-word;
}

.client-meta-value a {
    color: #374151;
    text-decoration: none;
}

.client-meta-value a:hover {
    color: var(--client-orange);
}

.client-meta-tags .client-meta-value a {
    margin-right: 8px;
}

.client-share-list {
    align-items: center;
    display: flex;
    gap: 8px;
}

.client-share-list a,
.client-share-copy {
    align-items: center;
    background: transparent;
    border: 0;
    color: #374151;
    display: flex;
    font-size: 15px;
    height: 26px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    width: 26px;
}

.client-share-list a:hover,
.client-share-copy:hover {
    color: var(--client-orange);
}

/* ---- Offer sidebar heading matches reference ---- */
.client-product-offer-card h3 {
    font-size: 12px;
}

/* ---- Responsive ---- */
@media (min-width: 992px) {
    .client-product-info .single_product {
        grid-column: 3;
    }
}

@media (max-width: 991px) {
    .client-product-info form > .row {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .client-product-info .qty-cart {
        grid-column: 1;
        grid-row: 1;
    }

    .client-product-info .single_product {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .client-product-info .order_now_btn {
        grid-column: 1 / -1;
    }

    .client-wishlist-btn {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 767px) {
    .client-product-gallery .dimage_item {
        min-height: 340px;
    }

    .client-product-gallery .block__pic {
        max-height: 340px;
    }

    .client-product-info form > .row {
        gap: 8px;
        grid-template-columns: 1fr 42px;
    }

    .client-product-info .qty-cart {
        grid-column: 1;
        grid-row: 1;
    }

    .client-wishlist-btn {
        grid-column: 2;
        grid-row: 1;
    }

    .client-product-info .single_product {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .client-meta-label {
        flex-basis: 54px;
    }
}

/* ============================================================
   GALLERY — Flash Sale badge + carousel arrows (reference)
   ============================================================ */

/* Flash Sale badge — top-right of the gallery */
.client-flash-badge {
    align-items: center;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 6px;
    color: var(--client-danger);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    left: auto;
    padding: 5px 10px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
}

.client-flash-badge i {
    font-size: 11px;
}

/* Carousel arrows — circular, vertically centred on the main image */
.client-gallery-nav {
    align-items: center;
    background: #fff;
    border: 1px solid var(--client-border);
    border-radius: 50%;
    color: var(--client-text);
    cursor: pointer;
    display: flex;
    height: 38px;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s ease;
    width: 38px;
    z-index: 4;
}

.client-gallery-nav i {
    font-size: 22px;
    line-height: 1;
}

.client-gallery-nav:hover {
    background: #111827;
    border-color: #111827;
    color: var(--client-surface);
}

.client-gallery-prev {
    left: 10px;
}

.client-gallery-next {
    right: 10px;
}

/* The slider itself must be the positioning context for the arrows */
.client-product-gallery .details_slider {
    position: relative;
}

/* Owl's own arrows stay hidden — we render our own */
.client-product-gallery .details_slider .owl-nav {
    display: none !important;
}

/* Discount badge: keep it clear of the Flash Sale badge */
.client-product-gallery .product-details-discount-badge {
    left: 12px;
    right: auto;
    top: 12px;
}

/* Active thumbnail highlight driven by JS */
.client-product-gallery .indicator-item.active-item {
    border-color: #111827;
    box-shadow: 0 0 0 1px #111827;
}

@media (max-width: 767px) {
    .client-gallery-nav {
        height: 32px;
        width: 32px;
    }

    .client-gallery-nav i {
        font-size: 18px;
    }

    .client-gallery-prev {
        left: 6px;
    }

    .client-gallery-next {
        right: 6px;
    }

    .client-flash-badge {
        font-size: 11px;
        padding: 4px 8px;
        right: 8px;
        top: 8px;
    }

    .client-product-gallery .product-details-discount-badge {
        left: 8px;
        top: 8px;
    }
}

/* ============================================================
   BORDER + SPACING CLEANUP
   The legacy .details_right draws a full border box around the
   product info. The reference design has NO box — just white
   space. Kill the border and the height:100% stretch.
   ============================================================ */

.client-product-info .details_right {
    background: transparent;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    padding: 0;
}

.client-product-info .product-cart,
.client-product-info .product,
.client-product-info .card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* Any leftover .features box on the details page */
.client-product-info .features,
.main-details-page .features {
    border: 0;
    border-top: 0;
    padding: 0;
}

/* ---- Delivery charge: compact strip, not a fat alert box ---- */
.del_charge_area {
    margin: 12px 0 0;
}

.del_charge_area .alert {
    background: var(--client-background);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    margin: 0;
    padding: 0;
}

.del-charge-row {
    align-items: center;
    color: var(--client-text-muted);
    display: flex;
    font-size: 13px;
    gap: 8px;
    line-height: 20px;
    padding: 9px 12px;
}

.del-charge-row i {
    color: var(--client-text-muted);
    flex: 0 0 auto;
    font-size: 13px;
}

.del-charge-row span {
    color: var(--client-text-muted);
    font-weight: 600;
}

/* The legacy wrapper divs used .mt-md-2 .mt-2 for spacing — the new
   components carry their own margins, so drop the stacked gaps. */
.client-product-info .mt-2,
.client-product-info .mt-md-2 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Tighten vertical rhythm between the stacked info blocks */
.client-product-info form > .row {
    margin-bottom: 12px;
}

.client-product-info .client-trust-strip {
    margin-top: 14px;
}

/* ============================================================
   BUTTON SIZING (superseded by the ACTION AREA rebuild below)
   ============================================================ */

.client-product-info .add_cart_btn {
    border-radius: 8px !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.client-product-info .order_now_btn {
    border-radius: 8px !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    margin-top: 10px;
}

/* ============================================================
   ACTION AREA — clean rebuild
   Neutralises legacy .qty-cart / .single_product / .px-4 rules
   that were inflating the buttons and breaking mobile.
   ============================================================ */

.client-buy-box {
    margin: 16px 0 0;
}

/* --- Row 1: qty stepper + wishlist + add to cart --- */
.client-product-info .client-buy-row {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: 112px 42px minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
    padding: 0;
}

/* qty stepper — override legacy width:130px + margin-top:10px */
.client-product-info .qty-cart,
.client-product-info .qty-cart.col-sm-12 {
    display: block;
    margin: 0;
    max-width: none;
    padding: 0;
    width: auto !important;
}

.client-product-info .qty-cart .quantity {
    border: 1px solid var(--client-primary-dark);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 34px 40px 34px;
    height: 44px;
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 112px;
}

.client-product-info .quantity .minus,
.client-product-info .quantity .plus {
    align-items: center;
    background: #fff;
    border: 0;
    color: var(--client-text);
    cursor: pointer;
    display: flex;
    font-size: 18px;
    font-weight: 500;
    height: 44px;
    line-height: 1;
    padding: 0;
    width: 34px;
}

.client-product-info .quantity .minus:hover,
.client-product-info .quantity .plus:hover {
    background: #f3f4f6;
}

.client-product-info .quantity input {
    border: 0;
    color: var(--client-text);
    font-size: 15px;
    font-weight: 600;
    height: 44px;
    line-height: 44px;
    padding: 0;
    text-align: center;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

/* the wrapper that holds wishlist + add to cart */
.client-product-info .single_product,
.client-product-info .single_product.d-flex,
.client-product-info .single_product.col-sm-12 {
    align-items: stretch;
    display: grid !important;
    gap: 10px;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: auto 1fr;
    margin: 0 !important;
    max-width: none;
    padding: 0;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

/* wishlist — square, matches stepper height */
.client-wishlist-btn {
    align-items: center;
    background: #fff !important;
    border: 1px solid #111827 !important;
    border-radius: 8px !important;
    color: #111827 !important;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 42px;
}

.client-wishlist-btn i {
    font-size: 16px;
    line-height: 1;
}

.client-wishlist-btn:hover {
    background: #f3f4f6 !important;
}

.client-wishlist-btn.is-active {
    background: #ff751b !important !important;
    border-color: var(--client-accent) !important;
    color: var(--client-surface) !important;
}

/* --- Add to cart / Buy now: no px-4, no width:50%, no mt --- */
.client-product-info .add_cart_btn,
.client-product-info .order_now_btn {
    align-items: center;
    border-radius: 8px !important;
    display: flex;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    height: 44px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0 16px;
    white-space: nowrap;
    white-space: nowrap;
    text-transform: none;
    white-space: nowrap;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

.client-product-info .add_cart_btn {
    background: #ff751b !important;
    border: 1px solid #ff751b !important;
    color: var(--client-surface) !important;
}

.client-product-info .add_cart_btn:hover {
    background: #e0671a !important;
    border-color: var(--client-accent-dark) !important;
}

.client-product-info .order_now_btn {
    background: #111827 !important;
    border: 1px solid #111827 !important;
    color: var(--client-surface) !important;
    margin-top: 10px;
}

.client-product-info .order_now_btn:hover {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
}

/* Buy Now sits outside the grid so it always spans full width */
.client-product-info .client-buy-box > .order_now_btn {
    display: flex;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

/* ============================================================
   MOBILE — single column, comfortable touch targets
   ============================================================ */
@media (max-width: 767px) {
    .client-buy-box {
        margin: 14px 0 0;
    }

    /* qty full width on its own line */
    .client-product-info .client-buy-row {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .client-product-info .qty-cart,
    .client-product-info .qty-cart.col-sm-12 {
        grid-column: 1;
        grid-row: 1;
        width: 100% !important;
    }

    .client-product-info .qty-cart .quantity {
        grid-template-columns: 40px 1fr 40px;
        height: 46px;
        width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    }

    .client-product-info .quantity .minus,
    .client-product-info .quantity .plus {
        height: 46px;
        width: 40px;
    }

    .client-product-info .quantity input {
        height: 46px;
        line-height: 46px;
    }

    /* wishlist moves to the right of the stepper */
    .client-wishlist-btn {
        grid-column: 2;
        grid-row: 1;
        height: 46px;
        width: 44px;
    }

    /* add-to-cart drops to its own full-width row */
    .client-product-info .add_cart_btn {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .client-product-info .order_now_btn {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .client-product-info .add_cart_btn,
    .client-product-info .order_now_btn {
        font-size: 15px;
        height: 46px;
        width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    }

    .client-product-info .order_now_btn {
        margin-top: 8px;
    }
}

/* Medium screens: keep the cart action usable and place Buy Now on its own row. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .client-product-info .client-buy-row {
        grid-template-columns: 112px 42px minmax(0, 1fr);
    }

    .client-product-info .client-buy-row > .add_cart_btn {
        grid-column: 3;
        grid-row: 1;
    }

    .client-product-info .client-buy-row > .order_now_btn {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.client-product-info .pro-color .color_inner {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    width: 100%;
}

.client-product-info .pro-color .color_inner > p {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    margin: 0;
}

.client-product-info .pro-color .size-container {
    margin: 0;
}

.main-details-page .client-product-info .pro-color .selector-item_label {
    align-items: center;
    aspect-ratio: 1;
    border: 2px solid var(--client-gray-border) !important;
    border-radius: 50% !important;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    width: 34px;
}

.main-details-page .client-product-info .pro-color .selector-item_label span img {
    height: 12px !important;
    object-fit: contain;
    opacity: 0;
    width: 12px !important;
}

.main-details-page .client-product-info .pro-color .selector-item_radio:checked + .selector-item_label {
    border-color: var(--client-primary) !important;
}

.main-details-page .client-product-info .pro-color .selector-item_radio:checked + .selector-item_label span img {
    opacity: 1 !important;
}

@media (min-width: 1200px) {
    .client-product-info .client-buy-row > .order_now_btn {
        grid-column: 4;
        grid-row: 1;
        margin: 0;
        min-width: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .client-product-info .client-buy-row > .order_now_btn {
        margin: 0;
        min-width: 0 !important;
    }
}

@media (max-width: 767px) {
    .client-product-info .client-buy-row > .order_now_btn {
        margin: 0;
    }
}

/* ============================================================
   PRODUCT DETAILS — DYNAMIC BREADCRUMB / INFO PANEL / QTY FIX
   ============================================================ */

/* ------------------------------------------------------------
   1. BREADCRUMB — built from real category relationships.
   The old `.client-product-info .breadcrumb { display: none }`
   rule above hid the navigation entirely, so this replaces it.
   ------------------------------------------------------------ */
.main-details-page .client-breadcrumb {
    display: block;
    margin: 0 0 10px;
}

.client-breadcrumb-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-breadcrumb-list > li {
    align-items: center;
    display: flex;
    font-size: 13px;
    gap: 4px;
    min-width: 0;
}

.client-breadcrumb-list > li + li::before {
    color: var(--client-text-muted);
    content: "/";
    font-size: 13px;
    margin-right: 4px;
}

.client-breadcrumb-list a {
    color: #6b7280;
    text-decoration: none;
    transition: color .2s ease;
}

.client-breadcrumb-list a:hover {
    color: var(--client-orange);
}

/* Current page is not a link; long product names truncate
   instead of wrapping and blowing out the layout. */
.client-breadcrumb-current {
    flex: 1 1 auto;
    min-width: 0;
}

.client-breadcrumb-current > span {
    color: var(--client-text);
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .client-breadcrumb-list > li,
    .client-breadcrumb-list > li + li::before {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .main-details-page .client-breadcrumb {
        margin-bottom: 4px;
        min-width: 0;
        overflow: hidden;
    }

    .client-breadcrumb-list {
        flex-wrap: nowrap;
        min-width: 0;
        overflow: hidden;
    }

    .client-breadcrumb-list > li:not(:first-child):not(.client-breadcrumb-current) {
        display: none;
    }

    .client-breadcrumb-list > .client-breadcrumb-current {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------
   2. STOCK STATUS — colour follows the real inventory state.
   ------------------------------------------------------------ */
.client-product-info .stock-report.is-in-stock {
    border-left-color: #16a34a;
}

.client-product-info .stock-report.is-in-stock span {
    color: var(--client-success);
}

.client-product-info .stock-report.is-in-stock span::before {
    background: #16a34a;
}

.client-product-info .stock-report.is-out-of-stock {
    border-left-color: var(--client-danger);
}

.client-product-info .stock-report.is-out-of-stock span {
    color: var(--client-danger);
}

.client-product-info .stock-report.is-out-of-stock span::before {
    background: var(--client-danger);
}

/* ------------------------------------------------------------
   3. QTY STEPPER FIX
   Root cause: style.css positions `.quantity .minus/.plus`
   absolutely. The newer grid layout below puts the input in the
   first column, so the absolute minus covers the value — the
   counter updates but the number is never readable.
   Resetting position makes the grid control the layout, which
   guarantees the input keeps its own visible column.
   ------------------------------------------------------------ */
.main-details-page .quantity .minus,
.main-details-page .quantity .plus,
.qty-cart .quantity .minus,
.qty-cart .quantity .plus {
    background: #fff;
    border: 0;
    bottom: auto;
    font-family: inherit;
    left: auto;
    line-height: 1;
    margin: 0;
    padding: 0;
    position: static;
    right: auto;
    text-align: center;
}

.main-details-page .quantity input {
    background: #fff;
    color: var(--client-text);
    display: block;
    font-family: inherit;
    min-width: 0;
    /* Legacy rule set pointer-events:none, which blocks manual entry. */
    pointer-events: auto;
}

.main-details-page .quantity input::-webkit-outer-spin-button,
.main-details-page .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.main-details-page .quantity input[type="text"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.main-details-page .quantity.is-disabled {
    background: #f3f4f6;
    opacity: .65;
}

.main-details-page .quantity .minus:disabled,
.main-details-page .quantity .plus:disabled,
.main-details-page .quantity input:disabled {
    cursor: not-allowed;
}

.main-details-page .order_now_btn.is-disabled,
.main-details-page .order_now_btn:disabled {
    background: #9ca3af !important;
    border-color: var(--client-text-muted) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* ------------------------------------------------------------
   4. AVAILABLE INFORMATION PANEL
   ------------------------------------------------------------ */
.client-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-info-row {
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    gap: 10px;
    padding: 11px 14px;
}

.client-info-row:last-child {
    border-bottom: 0;
}

.client-info-icon {
    align-items: center;
    background: #f1f5f9;
    border-radius: 6px;
    color: #475569;
    display: flex;
    flex: 0 0 30px;
    font-size: 13px;
    height: 30px;
    justify-content: center;
}

.client-info-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.client-info-label {
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 14px;
    text-transform: uppercase;
}

.client-info-value {
    color: var(--client-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.client-info-value.is-multiline {
    font-weight: 500;
}

.client-info-row.is-success .client-info-icon {
    background: var(--client-success);
    color: #15803d;
}

.client-info-row.is-success .client-info-value {
    color: #15803d;
}

.client-info-row.is-danger .client-info-icon {
    background: var(--client-danger);
    color: var(--client-danger);
}

.client-info-row.is-danger .client-info-value {
    color: var(--client-danger);
}

.client-info-row.is-offer .client-info-icon {
    background: var(--client-warning);
    color: var(--client-warning);
}

.client-info-row.is-offer .client-info-value {
    color: var(--client-warning);
}

/* Desktop: info panel lives in its own narrow column. */
.client-product-offer-col {
    min-width: 0;
}

/* Tablet/mobile: panel drops below the main product info and
   stacks its rows two-up so it never overflows the viewport. */
@media (max-width: 991px) {
    .client-info-card {
        grid-template-columns: 1fr 1fr;
    }

    .client-info-row {
        border-bottom: 1px solid #f1f5f9;
    }

    .client-offer-action {
        border-left: 1px solid #e5e7eb;
        border-top: 0;
    }
}

@media (max-width: 767px) {
    .client-info-card {
        grid-template-columns: 1fr;
    }

    .client-offer-action {
        border-left: 0;
        border-top: 1px solid var(--client-border);
    }

    /* Gallery must never exceed the viewport. */
    .client-product-gallery .details_slider,
    .client-product-gallery .dimage_item {
        max-width: 100%;
    }
}

/* ============================================================
   GLOBAL "BUY NOW" BUTTON STYLING (GREEN -> BLUE HOVER)
   ============================================================ */
:root {
    --btn-buy-now-bg: var(--client-primary);       /* Clean Green */
    --btn-buy-now-hover: var(--client-primary-dark);    /* Brand Blue */
    --btn-buy-now-text: var(--client-surface);
}

/* 1. Target all Buy Now / Order Now variations */
.order_now_btn,
.order_now_btn_m,
.order-btn,
.order-btn-link,
.cam_order_now,
.combo-order-now,
.go_cart,
.sidebar-cart-checkout-btn {
    background-color: var(--btn-buy-now-bg) !important;
    border-color: var(--btn-buy-now-bg) !important;
    color: var(--btn-buy-now-text) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* 2. Hover & Active States */
.order_now_btn:hover,
.order_now_btn:active,
.order_now_btn_m:hover,
.order_now_btn_m:active,
.order-btn:hover,
.order-btn:active,
.order-btn-link:hover,
.order-btn-link:active,
.cam_order_now:hover,
.cam_order_now:active,
.combo-order-now:hover,
.combo-order-now:active,
.go_cart:hover,
.go_cart:active,
.sidebar-cart-checkout-btn:hover,
.sidebar-cart-checkout-btn:active {
    background-color: var(--btn-buy-now-hover) !important;
    border-color: var(--btn-buy-now-hover) !important;
    color: var(--btn-buy-now-text) !important;
    opacity: 1 !important;
}

/* 3. Handle specific icon colors inside these buttons if they exist */
.order_now_btn i,
.order-btn i,
.cam_order_now i {
    color: var(--btn-buy-now-text) !important;
}

/* 4. Ensure "Out of Stock" state on details page isn't turned green */
.order_now_btn.is-disabled,
.order_now_btn:disabled {
    background-color: var(--client-text-muted) !important;
    border-color: var(--client-text-muted) !important;
    cursor: not-allowed !important;
}

/* ============================================================
   GLOBAL BUTTON STYLING (BLUE BUY NOW, ORANGE ADD TO CART, ORANGE CART ICON)
   ============================================================ */

:root {
    --color-buy-now: var(--client-primary);              /* Deep Blue */
    --color-buy-now-hover: var(--client-primary-dark);        /* Darker Blue */
    --color-add-to-cart: var(--client-accent);          /* Vibrant Orange */
    --color-add-to-cart-hover: var(--client-accent-dark);    /* Darker Orange */
    --color-white: var(--client-surface);
}

/* ------------------------------------------------------------
   1. BUY NOW BUTTONS (ALL instances: blue normal, darker blue hover)
   ------------------------------------------------------------ */
/* Product Details Page (main button) */
.main-details-page .order_now_btn,
.main-details-page .order_now_btn_m {
    background-color: var(--color-buy-now) !important;
    border-color: var(--color-buy-now) !important;
    color: var(--color-white) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.main-details-page .order_now_btn:hover,
.main-details-page .order_now_btn:active,
.main-details-page .order_now_btn_m:hover,
.main-details-page .order_now_btn_m:active {
    background-color: var(--color-buy-now-hover) !important;
    border-color: var(--color-buy-now-hover) !important;
    color: var(--color-white) !important;
}

/* Product Cards (global) */
.order-btn,
.order-btn-link {
    background-color: var(--color-buy-now) !important;
    border-color: var(--color-buy-now) !important;
    color: var(--color-white) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.order-btn:hover,
.order-btn:active,
.order-btn-link:hover,
.order-btn-link:active {
    background-color: var(--color-buy-now-hover) !important;
    border-color: var(--color-buy-now-hover) !important;
    color: var(--color-white) !important;
}

/* Campaign Page specific Buy Now */
.cam_order_now,
.combo-order-now,
.go_cart,
.sidebar-cart-checkout-btn {
    background-color: var(--color-buy-now) !important;
    border-color: var(--color-buy-now) !important;
    color: var(--color-white) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.cam_order_now:hover,
.cam_order_now:active,
.combo-order-now:hover,
.combo-order-now:active,
.go_cart:hover,
.go_cart:active,
.sidebar-cart-checkout-btn:hover,
.sidebar-cart-checkout-btn:active {
    background-color: var(--color-buy-now-hover) !important;
    border-color: var(--color-buy-now-hover) !important;
    color: var(--color-white) !important;
}

/* Out of Stock / Disabled Buy Now buttons */
.order_now_btn.is-disabled,
.order_now_btn:disabled,
.order-btn.is-disabled,
.order-btn:disabled,
.cam_order_now.is-disabled,
.cam_order_now:disabled,
.combo-order-now.is-disabled,
.combo-order-now:disabled {
    background-color: var(--client-text-muted) !important; /* Keep a neutral grey for disabled state */
    border-color: var(--client-text-muted) !important;
    cursor: not-allowed !important;
}

/* ------------------------------------------------------------
   2. ADD TO CART BUTTONS (ALL instances: orange normal, darker orange hover)
   ------------------------------------------------------------ */
/* Product Details Page (main button) */
.main-details-page .add_cart_btn {
    background-color: var(--color-add-to-cart) !important;
    border-color: var(--color-add-to-cart) !important;
    color: var(--color-white) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.main-details-page .add_cart_btn:hover,
.main-details-page .add_cart_btn:active {
    background-color: var(--color-add-to-cart-hover) !important;
    border-color: var(--color-add-to-cart-hover) !important;
    color: var(--color-white) !important;
}

/* Product Cards (global) */
.cart-icon-btn,
.cart-icon-link {
    background-color: var(--color-add-to-cart) !important;
    border-color: var(--color-add-to-cart) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.cart-icon-btn:hover,
.cart-icon-btn:active,
.cart-icon-link:hover,
.cart-icon-link:active {
    background-color: var(--color-add-to-cart-hover) !important;
    border-color: var(--color-add-to-cart-hover) !important;
}

/* Ensure cart icon inside is white */
.cart-icon-btn i,
.cart-icon-link i {
    color: var(--color-white) !important;
}

/* Quickview / AJAX buttons (if they use these classes) */
.add-to-cart.cart_store {
    background-color: var(--color-add-to-cart) !important;
    border-color: var(--color-add-to-cart) !important;
    color: var(--color-white) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.add-to-cart.cart_store:hover,
.add-to-cart.cart_store:active {
    background-color: var(--color-add-to-cart-hover) !important;
    border-color: var(--color-add-to-cart-hover) !important;
    color: var(--color-white) !important;
}

/* ------------------------------------------------------------
   3. HEADER CART ICON/BUTTON (ALL instances: orange background)
   ------------------------------------------------------------ */

/* Desktop header cart icon container */
.header-list-items ul li a.shopping-cart-icon,
.header-list-items ul li .menu-bag .shopping-cart-icon {
    background-color: var(--color-add-to-cart) !important;
    transition: background-color 0.25s ease !important;
    /* Ensure icon and text are visible */
    color: var(--color-white) !important;
}

.header-list-items ul li a.shopping-cart-icon:hover,
.header-list-items ul li a.shopping-cart-icon:active,
.header-list-items ul li .menu-bag .shopping-cart-icon:hover,
.header-list-items ul li .menu-bag .shopping-cart-icon:active {
    background-color: var(--color-add-to-cart-hover) !important;
    color: var(--color-white) !important;
}

/* Mobile header cart icon container */
.mobile-header .menu-bag a.margin-shopping {
    background-color: var(--color-add-to-cart) !important;
    transition: background-color 0.25s ease !important;
}

.mobile-header .menu-bag a.margin-shopping:hover,
.mobile-header .menu-bag a.margin-shopping:active {
    background-color: var(--color-add-to-cart-hover) !important;
}

/* Ensure cart icon and quantity badge text are white */
.mobile-header .menu-bag a.margin-shopping i,
.mobile-header .menu-bag a.margin-shopping span.mobilecart-qty {
    color: var(--color-white) !important;
}

/* Ensure the default shopping-cart-icon (from old layout) is also orange */
.shopping-cart-icon {
    background-color: var(--color-add-to-cart) !important;
    border-color: var(--color-add-to-cart) !important;
    color: var(--color-white) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.shopping-cart-icon:hover,
.shopping-cart-icon:active {
    background-color: var(--color-add-to-cart-hover) !important;
    border-color: var(--color-add-to-cart-hover) !important;
    color: var(--color-white) !important;
}

/* Product card cart icon beside "Order Now" must stay orange. */
.product_item .pro_btn .cart-icon-btn,
.product_item .pro_btn .cart-icon-link,
.product_item .pro_btn form .cart-icon-btn {
    background: var(--color-add-to-cart) !important;
    background-color: var(--color-add-to-cart) !important;
    border-color: var(--color-add-to-cart) !important;
    color: var(--color-white) !important;
}

.product_item .pro_btn .cart-icon-btn:hover,
.product_item .pro_btn .cart-icon-btn:active,
.product_item .pro_btn .cart-icon-link:hover,
.product_item .pro_btn .cart-icon-link:active,
.product_item .pro_btn form .cart-icon-btn:hover,
.product_item .pro_btn form .cart-icon-btn:active {
    background: var(--color-add-to-cart-hover) !important;
    background-color: var(--color-add-to-cart-hover) !important;
    border-color: var(--color-add-to-cart-hover) !important;
    color: var(--color-white) !important;
}

/* Header category dropdown readability on product/details pages. */
.main-header .side__bar.sidebar-menu,
.main-header .sidebar-menu.side__bar {
    background: var(--client-primary) !important;
    border: 0 !important;
    box-shadow: 0 18px 40px rgba(16, 20, 57, 0.18);
}

.main-header .side__bar.sidebar-menu > ul > li > a,
.main-header .sidebar-menu.side__bar > ul > li > a {
    color: var(--client-surface) !important;
    border-radius: 0 !important;
    min-height: auto;
}

.main-header .side__bar.sidebar-menu > ul > li > a span,
.main-header .sidebar-menu.side__bar > ul > li > a span,
.main-header .side__bar.sidebar-menu > ul > li > a i,
.main-header .sidebar-menu.side__bar > ul > li > a i {
    color: var(--client-surface) !important;
}

.main-header .side__bar.sidebar-menu > ul > li:hover > a,
.main-header .sidebar-menu.side__bar > ul > li:hover > a {
    background: var(--client-surface) !important;
    color: var(--client-accent) !important;
}

.main-header .side__bar.sidebar-menu > ul > li:hover > a span,
.main-header .sidebar-menu.side__bar > ul > li:hover > a span,
.main-header .side__bar.sidebar-menu > ul > li:hover > a i,
.main-header .sidebar-menu.side__bar > ul > li:hover > a i {
    color: var(--client-accent) !important;
}

.main-header .side__bar .sidebar-submenu,
.main-header .side__bar .sidebar-childmenu {
    background: var(--client-surface) !important;
    border: 0 !important;
    box-shadow: 0 18px 40px rgba(16, 20, 57, 0.15);
}

.main-header .side__bar .sidebar-submenu a,
.main-header .side__bar .sidebar-childmenu a {
    color: #1a1f4d !important;
    border-radius: 0 !important;
}

.main-header .side__bar .sidebar-submenu li:hover > a,
.main-header .side__bar .sidebar-childmenu li:hover > a {
    background: var(--client-accent-light) !important;
    color: var(--client-accent) !important;
}

/* Keep the full "ALL CATEGORIES" trigger block orange. */
.main-header .heder__category li.all__category__list,
.main-header li.all__category__list {
    background: var(--client-accent) !important;
    background-color: var(--client-accent) !important;
    padding: 0 !important;
}

.main-header .heder__category li.all__category__list > a,
.main-header li.all__category__list > a {
    align-items: center;
    background: var(--client-accent) !important;
    background-color: var(--client-accent) !important;
    border-radius: 0 !important;
    color: var(--client-surface) !important;
    display: flex !important;
    font-weight: 700;
    height: 48px;
    justify-content: space-between;
    line-height: 48px;
    padding: 0 16px !important;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
    flex-grow: 1;
    min-width: 0;
}

.main-header .heder__category li.all__category__list > a i,
.main-header li.all__category__list > a i {
    color: var(--client-surface) !important;
    padding-left: 0 !important;
}

.main-header .heder__category li.all__category__list:hover > a,
.main-header li.all__category__list:hover > a {
    background: var(--client-accent) !important;
    background-color: var(--client-accent) !important;
    color: var(--client-surface) !important;
}

/* ============================================================
   ROBUST RESPONSIVE CTA FIX (Fixed Ordering/Wrapping)
   ============================================================ */

/* Ensure all CTA buttons have consistent basic flex properties */
.order_now_btn, .order_now_btn_m, .add_cart_btn, .order-btn, .order-btn-link, .addcartbutton, .cam_order_now, .combo-order-now, .go_cart, .sidebar-cart-checkout-btn {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: fit-content !important;
    flex-shrink: 0 !important; /* Prevent shrinking below content */
}

/* --- Product Details Page Button Row --- */
.client-product-info form > .row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Ensure buttons stay in one line if possible */
    gap: 10px !important;
    align-items: stretch !important; /* Stretch buttons to same height */
}

.client-product-info .qty-cart { /* Quantity stepper */
    width: auto !important;
    flex: 0 0 auto !important; /* Don't grow or shrink */
}

.client-product-info .single_product { /* Wrapper for add_cart_btn and client-wishlist-btn */
    flex: 1 1 auto !important; /* Allow this container to grow */
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
}

/* Main 'Add to Cart' button on details page */
.client-product-info .add_cart_btn {
    flex: 1 1 auto !important; /* Allow to grow */
    width: auto !important;
}

/* Main 'Order Now' button on details page (often full width) */
.client-product-info .order_now_btn {
    flex: 1 1 auto !important;
    width: 100% !important; /* Take full width of its container */
}

/* Wishlist button on details page */
.client-wishlist-btn {
    flex: 0 0 44px !important; /* Fixed width, consistent with stepper height */
    width: 44px !important;
}

/* Mobile-specific adjustments for Product Details Page buttons */
@media (max-width: 480px) {
    .client-product-info form > .row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .client-product-info .qty-cart, .client-product-info .single_product, .client-product-info .add_cart_btn, .client-product-info .order_now_btn, .client-wishlist-btn {
        width: 100% !important;
        flex: 1 1 auto !important; /* All items take full width and stack */
    }
    .client-product-info .qty-cart .quantity {
        width: 100% !important; /* Quantity stepper also takes full width */
    }
}

@media (min-width: 768px) {
    .main-header .logo-header {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: clamp(12px, 1.5vw, 20px);
    }

    .main-header .main-logo {
        flex: 0 0 auto;
    }

    .main-header .main-search {
        flex: 1 1 0%;
        min-width: 0;
        position: relative;
    }

    .main-header .main-search form {
        align-items: stretch;
        box-sizing: border-box;
        display: flex;
        height: 44px;
        margin: 0;
        overflow: hidden;
        width: 100%;
    }

    .main-header .main-search .search_result {
        transform: none;
    }

    .main-header .main-search form input {
        box-sizing: border-box;
        flex: 1 1 auto;
        float: none;
        height: 100%;
        min-width: 0;
        width: auto;
    }

    .main-header .main-search form button {
        align-items: center;
        background: var(--client-primary) !important;
        border: 0;
        border-left: 1px solid var(--client-primary-dark) !important;
        box-sizing: border-box;
        display: inline-flex;
        flex: 0 0 48px;
        float: none;
        height: 100%;
        justify-content: center;
        width: 48px !important;
    }

    .main-header .main-search form button svg {
        color: var(--client-surface) !important;
        height: 20px !important;
        width: 20px !important;
    }

    .main-header .header-list-items {
        flex: 0 0 auto;
        margin: 0;
    }

    .main-header .header-list-items ul {
        align-items: center;
        display: flex;
        gap: 14px;
        margin: 0;
        padding: 0;
    }

    .main-header .header-list-items ul li {
        margin: 0;
    }

    .main-header .header-list-items ul li.track_btn > a {
        align-items: center;
        background: transparent;
        color: var(--client-primary) !important;
        display: inline-flex;
        gap: 8px;
        justify-content: center;
        min-height: 44px;
        padding: 0 4px !important;
        position: static;
        white-space: nowrap;
    }

    .main-header .header-list-items ul li.track_btn > a i {
        color: var(--client-accent);
        font-size: 18px !important;
    }

    .main-header .header-list-items ul li.track_btn > a:hover {
        background: transparent !important;
        color: var(--client-primary-dark) !important;
    }

    .main-header .header-list-items ul li.track_btn > a:hover i {
        color: var(--client-accent-dark);
    }

    .main-header .header-list-items ul li.cart-dialog > a {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 44px;
        padding: 0 4px !important;
    }

    .main-header .header-list-items ul li.cart-dialog > a .margin-shopping {
        align-items: center;
        display: inline-flex;
        margin: 0;
    }

    .main-header .header-list-items ul li.cart-dialog > a .margin-shopping > i {
        color: var(--client-accent);
    }
}

@media (min-width: 1200px) {
    .main-header .logo-header {
        display: grid;
        gap: 0;
        grid-template-columns: 25% minmax(0, 1fr) auto;
    }

    .main-header .header-list-items {
        margin-left: 20px;
    }
}

@media (min-width: 1200px) {
    .slider-section .main_slider .slider-item {
        height: 320px;
    }

    .slider-section .main_slider .slider-item img {
        height: 100%;
        max-width: none;
        object-fit: fill;
        width: 100% !important;
    }
}

@media (max-width: 1199.98px) {
    .slider-section .main_slider .slider-item {
        height: auto;
    }

    .slider-section .main_slider .slider-item img {
        display: block;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        width: 100%;
    }
}

.product_item_inner .sale-badge-box {
    background-color: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
}

.product_item_inner span.sale-badge-text {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    justify-content: center;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.product_item_inner .sale-badge-text p {
    color: #fff;
    font-size: 11px;
    line-height: 1.1;
    margin: 0;
}

html.desktop-site-mode #navbar_top .mobile-header,
html.desktop-site-mode #navbar_top .mobile-search,
html.desktop-site-mode .mobile-menu,
html.desktop-site-mode .mobile_bottom_nav,
html.desktop-site-mode #navbar_top .menu-area {
    display: none !important;
}

html.desktop-site-mode #navbar_top .main-header {
    display: block !important;
}

html.desktop-site-mode #content {
    padding-top: 0 !important;
}

html.desktop-site-mode #navbar_top {
    position: relative;
}

html.desktop-site-mode #navbar_top .mobile-header {
    background: transparent !important;
    display: block !important;
    height: 71px;
    left: 0;
    position: absolute;
    top: 0;
    width: 48px;
    z-index: 10002;
}

html.desktop-site-mode #navbar_top .mobile-header .mobile-logo {
    display: block;
    height: 71px;
}

html.desktop-site-mode #navbar_top .mobile-header .menu-bar {
    align-items: center;
    display: flex;
    height: 71px;
    justify-content: center;
    padding: 0;
}

html.desktop-site-mode #navbar_top .mobile-header .menu-bar .toggle {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 44px;
}

html.desktop-site-mode #navbar_top .mobile-header .menu-bar i {
    font-size: 20px;
    line-height: 1;
}

html.desktop-site-mode #navbar_top .mobile-header .menu-logo,
html.desktop-site-mode #navbar_top .mobile-header .menu-bag {
    display: none !important;
}

html.desktop-site-mode .mobile-menu.active {
    display: block !important;
    left: 0 !important;
}

html.desktop-site-mode #navbar_top .main-header .logo-header {
    box-sizing: border-box;
    padding-left: 48px;
}

html.desktop-site-mode .slider-section {
    margin-top: 0 !important;
}

html.desktop-site-mode .slider-section .col-sm-3.hidetosm {
    display: block !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
}

html.desktop-site-mode .slider-section .col-sm-9 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    width: 75% !important;
}

html.desktop-site-mode .slider-section .main_slider .slider-item {
    height: 320px !important;
}

html.desktop-site-mode .slider-section .main_slider .slider-item img {
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
    width: 100% !important;
}