:root {
    --primary-color: #111111;
    --secondary-color: #888;
    /* Aligned to the site's actual brand red (nav hover/active, .product .card
       in style.css) instead of the #e91e63 pink this token used before, which
       only ever matched one unrelated header phone-CTA widget. */
    --button-color: #E00024;
    --max-width: 1320px;
    --border-color: #e6e6e6;
    --total-price: rgb(224 0 36 / 15%);
}

.order_contanier {
    max-width: var(--max-width);
    margin: auto;
    padding: 0 60px;
}

@media (max-width: 768px) {
    .order_contanier {
        padding: 0 15px;
    }
}

.product_search {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 10px
}

.product_search_title {
    font-size: 40px;
}

@media (max-width: 768px) {
    .product_search_title {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .product_search_title {
        font-size: 24px;
    }
}
.cat_title {
        font-size: 16px;
    background-color: #e91e63;
    text-align: center;
    color: #fff;
    padding: 8px 45px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.product_search_desc {
    margin-top: 5px;
    color: var(--secondary-color)
}

.product_search_form {
    margin-top: 10px
}

.search_box {
    width: 100%;
    padding: 5px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    font-size: 16px;
    outline: none;
}

.product_cat_filter {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.product_cat_filter_left {
    width: 75%;
}

.cat_tabs {
    margin: 25px 0;
    display: flex;
    gap: 12px;
   
    flex-direction: row;
    /* white-space: nowrap; */
}

.product_cat_filter_right {
    width: 100%; 
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.product_cat_filter_right>* {
    margin-left: 10px
}

.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading:before {
    content: '';
    position: absolute;
    border: 3px solid #00000029;
    border-top: 3px solid #000;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 2s linear infinite;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.swiper-slide.tab {
    padding: 10px 18px;
    border-radius: 25px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-weight: 600;
    width: auto;
    background-color: transparent;
    color: var(--primary-color);
    text-decoration: none;
    transition: background-color .4s, color .4s;
}

.swiper-slide.tab:hover {
    background-color: var(--button-color);
    color: #fff;
}

.swiper-slide.tab.active {
    background: var(--button-color);
    color: white;
    border-color: var(--button-color);
}

.list_view,
.grid_view{
    display: inline-block;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    position: relative;
    background-color: transparent;
    color: #000;
    cursor: pointer;
    transition: background-color .4s, color .4s;
}
.cat_toggle {
    display: none;
}
.list_view i,
.grid_view i,
.cat_toggle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.list_view:hover,
.grid_view:hover,
.cat_toggle:hover {
    background-color: var(--button-color);
    color: #fff;
}

.list_view.active,
.grid_view.active,
.open_cat .cat_toggle {
    background-color: var(--button-color);
    color: white;
    border-color: var(--button-color);
}

.product_filter {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    position: relative;
    background-color: transparent;
    z-index: 9;
}

/* Product image lightbox — opens the image centered in the window */
.image_modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgb(0 0 0 / 80%);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.image_modal.open {
    display: flex;
}

.image_modal_img {
    max-width: 90%;
    max-height: 60vh;
    border-radius: 10px;
    background-color: #fff;
    object-fit: contain;
    box-shadow: 0 5px 30px rgb(0 0 0 / 50%);
}

.image_modal_close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.probgimage {
    cursor: zoom-in;
}

/* Floating cart icon — pinned to the top-right corner with a live quantity badge */
.floating_cart {
    position: fixed;
    top: 150px;
    right: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--button-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
    transition: transform .3s, background-color .3s;
}

.floating_cart:hover {
    transform: scale(1.08);
    color: #fff;
}

.floating_cart_count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .floating_cart {
        top: auto;
        bottom: 20px;
        right: 15px;
    }
}

/* Custom category dropdown — trigger matches the .product_filter (Latest) box */
.cat_dropdown {
    position: relative;
    font-size: 14px;
}

.cat_dropdown_selected {
    padding: 5px 28px 5px 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: #000;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    position: relative;
}

.cat_dropdown_selected i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    transition: transform .3s;
}

.cat_dropdown.open .cat_dropdown_selected i {
    transform: translateY(-50%) rotate(180deg);
}

/* Option list — styled exactly like the .product_list_left sidebar */
.cat_dropdown_list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 99;
    min-width: 200px;
    max-height: 320px;
    overflow: auto;
    text-align: left;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0px 1px 6px 1px rgb(0 0 0 / 20%);
    padding: 8px;
    display: none;
}

.cat_dropdown.open .cat_dropdown_list {
    display: block;
}

.cat_dropdown_list a {
    display: block;
    padding: 12px 15px;
    color: #000;
    background-color: transparent;
    border-color: transparent;
    border-radius: 15px;
    text-decoration: none;
    transition: background-color .4s, color .4s;
}

.cat_dropdown_list a.active,
.cat_dropdown_list a:hover {
    background: var(--button-color);
    color: #fff;
    border-radius: 15px;
}

/* Category dropdown is only used in mobile view; sidebar is used on desktop */


.product_list {
    font-size: 0;
    margin-top: 30px;
}

.product_list ._col {
    margin-top: 20px
}

.product_list ._row {
    margin: -20px -10px 0 -10px;
}


._col {
    display: inline-block;
    padding: 0 10px;
}

._col_4 {
    width: 33.33%;
}

.product_image {
    position: relative;
}

.product_con {
    background-color: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.probgCon {
    background: url() no-repeat 50% 50%;
    overflow: hidden;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.probgimage {
    /* position: absolute;
    left: 0;
    top: 0; */
    width: 100%;
    height: 170px;
    object-fit: contain;
}

.product_content {
    padding: 10px;
}

.product_title {
    font-size: 17px;
    color: var(--primary-color);
    width: 150px;
}

.product_desc {
    font-size: 14px;
    color: var(--secondary-color);
    margin-top: 10px;
}

.product_price_group {
    display: flex;
    justify-content: space-between;
}

.product_total_price {
    font-size: 18px;
    background-color: var(--total-price);
    padding: 5px 35px 3px 35px;
    line-height: 1.3;
    border-radius: 5px;
    color:#fff;
}

.product_price {
    display: flex;
    align-items: center;
}

.old_price {
    text-decoration: line-through;
    color: #aaa;
    font-size: 14px;
    margin-right: 10px
}

.new_price {
    color: var(--button-color);
    font-size: 20px;
    font-weight: bold;
}

.product_button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    background-color: var(--button-color);
    color: #fff;
}

.button_group {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.button_group input {
    padding: 4px 10px;
    margin: 0 10px;
    border-radius: 4px;
    text-align: center;
    width: calc(100% - 80px);font-size: 12px;
}

.product_quantity {
    background-color: var(--button-color);
    color: #fff !important;
    border: none;
    border-radius: 4px;
    line-height: 1;
    font-size: 14px;
    position: relative;
    width: 30px;
    height: 30px;
}

.product_quantity .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.product_list.list ._col._col_4 {
    width: 100%;
}

.product_list.list ._col._col_4 .product_image {
    padding-top: 0%;
    height: 80px;
    width: 80px;
}

.product_list.list ._col._col_4 .product_image .probgimage {
    height: 100%
}

.product_list.list ._col._col_4 .product_con {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.product_list.list ._col._col_4 .product_content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 10px);
    align-items: center;
}

.product_list.list ._col._col_4 .product_button {
    width: auto;
    padding: 8px 45px;
}

.product_list.list ._col._col_4 .button_group {
    width: 20%;
    margin-top: 0;
}

.product_list.list ._col._col_4 .button_group input {
    color:#000;
    font-size: 12px;
}

.product_list.list ._col._col_4 .button_group.add {
    justify-content: center;
}

.product_list.list ._col._col_4 .product_price_group .product_total_price,
.product_list .product_content>.product_total_price {
    display: none;
}

.product_list.list ._col._col_4 .product_content>.product_total_price {
    display: block;
    text-align: center;
}

.no_data {
    font-size: 16px;
    margin-top: 20px;
    text-align: center;
}

 .table td img {
    width:30px;
 }

.overall_total {
    background-color: var(--button-color);
    color: #fff;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
    font-size: 25px;
    font-weight: 600;
    border-radius: 10px;
}

.place_order_div {
    margin-top: 20px;
    text-align: center;
}

.place_order {
    font-size: 16px;
    display: inline-block;
    padding: 12px 60px;
    background-color: var(--primary-color);
    color: #ffff !important;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: border .4s, background-color .4s, color .4s;
    margin-bottom: 30px;
}

.place_order:hover {
    background-color: transparent;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
}

.cart_table_wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    vertical-align: middle;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    .table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100% !important;
    }

    .table thead {
        display: none;
    }

    .table tr {
        margin-bottom: 16px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    }

    .table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        padding: 12px 14px !important;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }

    .table td:last-child {
        border-bottom: none;
    }

    .table td:before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        font-size: 13px;
        color: #444;
        text-align: left;
    }

    .table td img {
        width: 25px;
        height: auto;
        border-radius: 4px;
    }

    .table td.cr_cart_qty .cr_cart_qty_plus_minus {
        justify-content: flex-end;
    }

    .table td.cr_cart_qty .cart_qty {
        width: 48px;
        text-align: center;
    }
}

.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table_secondary {
    --bs-table-bg: #e2e3e5;
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #cbccce;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #d1d2d4;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #cbccce;
}

.table>thead {
    vertical-align: bottom;
}

.table>tbody {
    vertical-align: inherit;
}

.cart_list .empty_cart {
    text-align: center;
    display: block;
}

.table_striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

.cth thead tr th {
    text-align: center;
    background-color: var(--primary-color) !important;
    color: #fff;
    padding: 10px 5px !important;
}

.cth tbody tr td a {
    color: #000;
    display: inline-block;
}

.cr_cart_qty_plus_minus a {
    position: relative;
    width: 30px;
}

.cr_cart_qty_plus_minus a .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}


tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    vertical-align: middle;
}

.cr_cart_qty_plus_minus {
    font-size: 0;
    text-align: center;
    display: flex;
    justify-content: center;
}

.cr_cart_qty_plus_minus>* {
    padding: 5px 10px;
    background-color: #fff;
    border: none;
    text-align: center;
    font-size: 14px;
}

.cr_cart_qty_plus_minus a:first-child {
    border: 1px solid #000;
    color:#fff;
}

.cr_cart_qty_plus_minus input {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.cr_cart_qty_plus_minus a:last-child {
    border: 1px solid #000; color:#fff;
}

.cart_form {
    margin-top: 20px;
}

.customer_details {
    max-width: 800px;
    margin: auto
}

._form_row {
    margin: 0 -20px;
    font-size: 0;
}

._form_row ._col {
    padding: 0 20px;
}

@media (max-width: 768px) {
    ._form_row {
        margin: 0 -10px;
    }

    ._form_row ._col {
        padding: 0 10px;
    }
}

._col_2 {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

@media (max-width: 768px) {
    ._col_2 {
        width: 100%;
    }
}

._form_group {
    margin-top: 20px
}

._form_group label {
    font-size: 19px;
    display: block;
}

@media (max-width: 768px) {
    ._form_group label {
        font-size: 16px;
    }
}

._form_group .form_control {
    padding: 8px 10px;
    font-size: 16px;
    margin-top: 10px;
    display: block;
    width: 100%;
    border: 1px solid #e6e6e6;
    background-color: transparent;
    z-index: 9;
    position: relative;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    ._form_group .form_control {
        font-size: 14px;
        padding: 8px 8px;
    }
}

._form_group .form_control.error_input {
    border: 1px solid #ff0000
}

.cart_summary {
    margin-top: 20px;
}

/* Original alternating brand-color row styling lived here; it's fully
   superseded by the plain bordered-table version further down (search
   "CHECKOUT PAGE REDESIGN"), which needs to win the cascade cleanly rather
   than fight this rule's :nth-child specificity. */

.cart_btns {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.order_confirm_pdf {
    margin-top: 20px;
}

.cart_btns>* {
    display: inline-block;
    vertical-align: middle;
    padding: 7px 20px;
    background-color: #198754;
    border: 1px solid transparent;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: border .4s, background-color .4s, color .4s;
}

.cart_btns>*:hover {
    background-color: transparent;
    border: 1px solid #198754;
    color: #198754;
}

@media (max-width: 576px) {
    .cart_btns {
        flex-direction: column;
    }

    .cart_btns > * {
        width: 100%;
        text-align: center;
        padding: 10px 15px;
        font-size: 14px;
    }
}

.cart_coupon_code {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.cart_coupon_code a {
    text-align: center;
    font-size: 24px;
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
}

.coupon_code_form {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 10px;
}

.coupon_code {
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 10px;
}

.coupon_code_submit {
    border: 1px solid transparent;
    padding: 5px 40px;
    color: #fff;
    font-size: 18px;
    border-radius: 10px;
    background-color: #198754;
    transition: border .4s, background-color .4s, color .4s;
}

.coupon_code_submit:hover {
    background-color: transparent;
    color: #198754;
    border: 1px solid #198754;
}

.coupon_code_clear {
    border: 1px solid transparent;
    padding: 5px 40px;
    color: #fff;
    font-size: 18px;
    border-radius: 10px;
    background-color: #dc3545;
    border-color: #dc3545;
    align-content: center;
    transition: border .4s, background-color .4s, color .4s;
}

.coupon_code_clear:hover {
    background-color: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

.coupon_code_form {
    display: none;
}

.error_text {
    font-size: 13px;
    margin-top: 5px;
    color: #ff0000;
}

.order_confirm_contanier {
    max-width: 1024px;
    margin: auto;
}

.product_list_row {
    margin: 0 -10px;
    position: relative;
}

.product_list_row>* {
    display: inline-block;
    padding: 0 10px;
    vertical-align: top;
}

.product_list_left {
    width: 20%;
    font-size: 14px;
}

.product_list_left a {
    display: block;
    padding: 15px;
    color: #000;
    background-color: transparent;
    border-color: transparent;
    border-radius: 15px;
    transition: border-color .4s, background-color .4s, border-color .4s;
}

.product_list_left a.active,
.product_list_left a:hover {
    background: var(--button-color);
    color: white;
    border-color: var(--button-color);
    border-radius: 15px;
}

.product_list_right {
    width: 80%;
}

@media (max-width:1600px) {
    .f_40 {
        font-size: 38px;
    }

    .three_col_inner_a .bsz:after {}

    .two_col_content_title {
        font-size: 22px
    }

    .page-header-box h1 {
        font-size: 70px;
    }

}

@media (max-width:1400px) {
    .f_40 {
        font-size: 36px;
    }

    ._col {
        padding: 0;
    }

    .page-header-box h1 {
        font-size: 50px;
    }

    .product_list ._col {
        padding: 0 10px;
    }

    .product_total_price {
        font-size: 17px;
    }

    .new_price {
        font-size: 18px;
    }

    .product_title {
        font-size: 16px;
    }
}

@media (max-width:1200px) {
    .f_40 {
        font-size: 32px;
    }

    .container,
    .order_contanier {
        padding: 0 40px;
    }

    .product_list_right ._col._col_4 {
        width: 50%
    }

    .sec_pad {
        padding: 60px 0
    }

    .sec_pad+.sec_pad {
        padding: 0 0 60px 0
    }

    .two_col_content_title {
        font-size: 20px
    }

    .product_title {
        font-size: 15px;
    }

    .page-header-box h1 {
        font-size: 40px;
    }
}

@media (max-width:1024px) {
    .f_40 {
        font-size: 30px;
    }
.cat_toggle {
    display: none;
}
.product_filter {
    display: none;
}
    .cat_select_wrap {
        display: block;
    }
    .left_banner_col .btn_groups.d_flex {
        flex-wrap: wrap;
    }

    .left_banner_col .btn_groups.d_flex .btn_light {
        width: calc(50% - 15px);
    }

    .banner_slider .swiper-slide .bsz:after {
        padding-top: 80%;
    }

    .menu ul li a {
        padding: 8px 10px;
    }

    body {
        font-size: 13px;
    }

    .sec_pad {
        padding: 40px 0
    }

    .sec_pad+.sec_pad {
        padding: 0 0 40px 0
    }

    .footer_row ._col_4 {
        width: calc(50% - 25px);
    }

    .product_list_left {
        position: absolute;
        width: 0%;
        overflow: hidden;
        font-size: 14px;
        background-color: #fff;
        z-index: 9;
        box-shadow: 0px 1px 6px 1px rgb(0 0 0 / 20%);
        padding: 0;
        border-radius: 15px;
        transition: width .4s, opacity .5s;
        opacity: 0;
    }

    .open_cat .product_list_left {
        width: 75%;
        opacity: 1;
        height: 100%;
        overflow: auto;
        min-height: 200px;
    }

    .product_list_right {
        width: 100%;
    }

    .product_total_price {
        font-size: 16px;
    }

    .new_price {
        font-size: 16px;
    }

    .page-header-box h1 {
        font-size: 30px;
    }

}

@media (max-width:1000px) {
    .f_30 {
        font-size: 28px;
    }

   
}

@media (max-width:820px) {
    .banner_row.d_flex {
        flex-wrap: wrap;
    }

    .left_banner_col {
        width: 100%
    }

    .left_banner_col .btn_groups.d_flex .btn_light {
        width: calc(25% - 15px);
    }

    .slider {
        width: 100%;
        margin-top: 30px;
    }

    .container,
    .order_contanier {
        padding: 0;
    }

    .banner_slider .swiper-slide .bsz:after {
        padding-top: 50%;
    }

    .f_30 {
        font-size: 26px;
    }

    .three_cl_row.d_flex,
    .four_cl_row.d_flex {
        flex-wrap: wrap;
    }

    .three_cl_row.d_flex ._col_3 {
        width: calc(50% - 15px);
    }

    .four_cl_row.d_flex ._col_4 {
        width: calc(33.33% - 15px);
    }

    .icon_grid_inner {
        padding: 10px
    }

    .f_18 {
        font-size: 16px;
    }

    .two_col_content_title {
        font-size: 18px
    }

    .product_total_price {
        font-size: 14px;
    }

}

@media (max-width:740px) {
    .f_40 {
        font-size: 28px;
    }

    .f_30 {
        font-size: 24px;
    }

    .top_header {
        text-align: center;
    }

    .top_header .header_row.d_flex {
        flex-direction: column;
    }

    .custom_navigation {
        gap: 20px;
    }

    .next_arrow,
    .prev_arrow {
        width: 40px;
        height: 40px
    }
}

@media (max-width:600px) {
    .burger_menu {
        display: block;
    }

    .header_menu .menu {
        display: none;
    }

    .footer_row ._col_4 {
        width: calc(100% - 25px);
    }

    .bottom_footer.d_flex {
        flex-direction: column;

    }

    .four_cl_row.d_flex ._col_4 {
        width: calc(50% - 15px);
    }

    .icon_grid_row ._col_3 {
        width: calc(50% - 10px);
    }

    .custom_navigation {
        gap: 20px;
    }

    .custom_navigation.mt_30 {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .two_col_content_title {
        font-size: 16px;
    }

    .two_col_slider_corner {
        display: none;
    }

    .two_col_slider {
        border-radius: 15px;
    }

    .two_col_slider_left,
    .two_col_slider_right {
        width: 100%
    }

}

@media (max-width:500px) {
    .three_cl_row.d_flex ._col_3 {
        width: calc(100% - 15px);
    }

    .icon_grid_row ._col_3 {
        width: calc(100% - 10px);
    }

    .icon_grid_row ._col_2 {
        width: calc(100% - 10px);
    }

    .product_title {
        font-size: 14px;
    }
}

@media (max-width:420px) {
    .f_30 {
        font-size: 22px;
    }

    .four_cl_row.d_flex ._col_4 {
        width: calc(100% - 15px);
    }

    .product_button {
        font-size: 14px;
    }

    .product_list_right ._col._col_4 {
        width: 100%;
    }
}

@media (max-width:320px) {
    .f_30 {
        font-size: 20px;
    }
}

/************************************/

@media only screen and (max-width: 1366px) {

    .our-testimonial-content {
        padding: 100px 50px;
    }
}

@media only screen and (max-width: 1024px) {

    .our-testimonial-content {
        padding: 50px 20px;
    }
}

@media only screen and (max-width: 991px) {

    .contact-us-form {
        margin-left: 0;
        margin-top: 20px;

    }
    .product_quantity {
        width: 20px; font-size: 12px;
    }
    

    .contact-info-box {
        gap: 20px;
        margin-top: 40px;
    }

    .contact-info-item {
        width: calc(33.33% - 13.33px);
    }

    .contact-info-item .icon-box {
        height: 50px;
        width: 50px;
        margin-right: 10px;
    }

    .contact-info-item .icon-box i {
        font-size: 16px;
    }

    .contact-info-content {
        width: calc(100% - 60px);
    }

    .contact-info-content h3 {
        font-size: 18px;
    }

    .page-single-post {
        padding: 50px 0;
    }

    .post-image {
        margin-bottom: 20px;
    }

    .post-entry blockquote {
        background-position: 25px 25px;
        background-size: 50px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
    }

    .post-entry blockquote p {
        font-size: 18px;
    }

    .post-entry h1,
    .post-entry h2 {
        font-size: 35px;
    }

    .post-entry ul li {
        font-size: 16px;
    }

    .post-tags {
        margin-bottom: 20px;
    }

    .post-social-sharing ul {
        text-align: left;
    }

    .post-tags .tag-links a {
        padding: 6px 15px;
    }

    .page-project {
        padding: 50px 0 20px;
    }

    .page-project-single {
        padding: 50px 0;
    }

    .project-single-sidebar {
        position: initial;
        margin-right: 0px;
        margin-bottom: 30px
    }

    .project-detail-list {
        padding: 20px;
        margin-bottom: 30px;
    }

    .project-single-image {
        margin-bottom: 30px;
    }

    .project-info,
    .project-design-info {
        margin-bottom: 30px;
    }

    .project-entry h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .page-gallery {
        padding: 50px 0 20px;
    }

    .page-gallery-box .photo-gallery img {
        aspect-ratio: 1 / 0.85;
    }


    .page-contact-us {
        padding: 0px 0 50px;
    }


    .custom-section .btn-default {
        padding: 14px 42px 14px 16px;
    }

    .custom-section .section-row {
        margin-bottom: 40px;
    }

    .custom-section .section-row .section-title {
        margin-bottom: 0;
        margin-right: 0px;
    }

    .custom-section .section-title-content {
        margin-left: 0;
        margin-top: 15px;
    }

    .custom-section .section-btn {
        text-align: left;
        margin-top: 15px;
    }

    .custom-section .section-title {
        margin-bottom: 30px;
    }

    .custom-section .section-title h3 {
        margin-bottom: 10px;
    }

    .custom-section .section-title h1 {
        font-size: 50px;
    }

    .custom-section .section-title h2 {
        font-size: 36px;
    }

    .custom-section .section-title p {
        margin-top: 15px;
    }


    .custom-section .about-us {
        padding: 50px 0;
    }

    .custom-section .about-us-images {
        margin: 0 0 30px 0;
    }

    .custom-section .experience-counter {
        height: 137px;
        width: 137px;
    }

    .custom-section .experience-counter h3 {
        font-size: 28px;
    }

    .custom-section .about-us-content-list {
        margin-bottom: 30px;
    }

    .custom-section .about-contact-item {
        margin-bottom: 30px;
    }


    .custom-section .how-we-work {
        padding: 50px 0;
    }

    .custom-section .how-we-work-item {
        width: calc(50% - 15px);
    }

    .custom-section .how-we-work-item .icon-box {
        margin-bottom: 20px;
    }

    .custom-section .how-work-company-slider {
        margin-top: 40px;
        padding-top: 40px;
    }



    .custom-section .testimonial-slider {
        max-width: 100%;
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .custom-section .testimonial-rating {
        margin-bottom: 15px;
    }

    .custom-section .testimonial-content {
        margin-bottom: 30px;
    }

    .custom-section .testimonial-content p {
        font-size: 18px;
    }

    .custom-section .testimonial-rating-counter .rating-counter h2 {
        font-size: 48px;
    }


    .custom-section .about-facility-list {
        margin-top: 50px;
        gap: 20px;
    }

    .custom-section .about-facility-item {
        width: 100%;
    }

    .custom-section .about-facility-item .icon-box {
        height: 45px;
        width: 45px;
        margin-right: 10px;
    }

    .about-facility-item .icon-box img {
        max-width: 20px;
    }

    .about-facility-content {
        width: calc(100% - 55px);
    }

    .about-facility-content h3 {
        font-size: 18px;
    }

    .vision-mission {
        padding: 50px 0 25px;
    }

    .vision-mission-box {
        padding: 30px 15px;
        gap: 30px 40px;
    }

    .vision-mission-item {
        width: calc(50% - 20px);
    }

    .vision-mission-item::before {
        right: -20px;
    }

    .vision-mission-item .icon-box {
        width: 70px;
        height: 70px;
    }

    .vision-mission-item .icon-box img {
        max-width: 30px;
    }

    .vision-mission-content h3 {
        margin-bottom: 15px;
    }

    .best-selling {
        padding: 25px 0 50px;
    }

    .best-selling-content {
        margin-bottom: 20px;
    }

    .best-selling-content-img {
        margin-bottom: 20px;
    }

    .our-team {
        padding: 50px 0 20px;
    }

    .team-readmore-btn {
        top: 20px;
        right: 20px;
    }

    .team-readmore-btn a {
        width: 50px;
        height: 50px;
    }

    .team-content {
        margin-bottom: 15px;
    }

    .our-faqs {
        padding: 50px 0;
    }

    .our-faqs-content {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .faq-accordion .accordion-item {
        margin-bottom: 20px;
    }

    .our-faqs-image {
        text-align: center;
        margin-left: 0px;
    }

    .our-faqs-image img {
        aspect-ratio: 1 / 1.26;
    }

    .our-clients {
        padding: 50px 0;
    }

    .our-clients .our-clients-box {
        max-width: 100%;
    }

    .faq-sidebar {
        position: initial;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .faq-catagery-list {
        padding: 20px;
        margin-bottom: 30px;
    }

    .faq-catagery-list ul li {
        margin-bottom: 15px;
    }

    .faq-catagery-list ul li a::before {
        width: 16px;
        height: 16px;
    }

    .our-faq-section.page-faq-accordion {
        margin-bottom: 40px;
    }

    .page-blog {
        padding: 50px 0;
    }

}

@media only screen and (max-width: 767px) {

    .post-entry blockquote {
        background-position: 20px 20px;
        padding: 70px 20px 20px 20px;
    }

    .post-entry h1,
    .post-entry h2 {
        font-size: 22px;
    }

    .project-single-image {
        margin-bottom: 20px;
    }

    .project-single-image img {
        aspect-ratio: 1 / 0.7;
    }

    .project-info,
    .project-design-highlight {
        margin-bottom: 20px;
    }

    .project-entry h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .project-entry p {
        margin-bottom: 15px;
    }

    .project-entry ul li {
        margin-bottom: 10px;
    }

    .project-entry ul li::before {
        font-size: 18px;
        top: 5px;
    }

    .project-gallery-images {
        gap: 20px;
    }

    .project-gallery-img {
        width: calc(50% - 10px);
    }

    .contact-us-image img {
        aspect-ratio: 1 / 0.75;
    }

    .google-map-iframe,
    .google-map-iframe iframe {
        height: 350px;
    }

    .contact-info-item {
        width: 100%;
    }


    .custom-section .section-row {
        margin-bottom: 30px;
    }

    .custom-section .section-title {
        margin-bottom: 30px;
    }

    .custom-section .section-title h1 {
        font-size: 28px;
    }

    .custom-section .section-title h2 {
        font-size: 26px;
    }


    .about-us-images {
        background-position: left 10px bottom 10px;
        background-size: 20% auto;
        padding: 10px 45px 100px 0;
    }

    .feedback-counter {
        transform: rotate(-180deg) translate(0, 0);
    }

    .feedback-counter p {
        font-size: 12px;
        height: 38px;
        width: 38px;
        margin: 0 0 6px 0;
    }

    .feedback-counter h3 {
        font-size: 12px;
        width: calc(100% - 40px);
    }

    .about-img-2 {
        max-width: 240px;
    }

    .experience-counter {
        height: 102px;
        width: 102px;
    }

    .experience-counter h3 {
        font-size: 22px;
    }

    .experience-counter p {
        font-size: 12px;
        line-height: 1.1em;
    }

    .about-us-content-body {
        gap: 0px;
    }

    .about-us-content-body::before {
        display: none;
    }

    .about-us-content-info {
        width: 100%;
        border-bottom: 1px solid var(--divider-color);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .about-us-content-list {
        margin-bottom: 20px;
    }

    .about-us-contact-list {
        width: 100%;
    }

    .about-us-content-list ul li {
        margin-bottom: 10px;
    }

    .about-us-content-list ul li::before {
        font-size: 18px;
        top: 3px;
    }

    .about-contact-item {
        margin-bottom: 20px;
    }

    .about-contact-content h3 {
        font-size: 18px;
    }

    .why-choose-item-content h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .why-choose-img-2 img {
        aspect-ratio: 1 / 1.02;
    }

    .why-choose-img-4 img {
        aspect-ratio: 1 / 1.588;
    }

    .how-we-work-item {
        width: 100%;
    }

    .how-we-work-item .icon-box img {
        max-width: 50px;
    }

    .how-we-work-content h3 {
        font-size: 18px;
    }

    .how-work-company-slider {
        margin-top: 30px;
        padding-top: 30px;
    }



    .testimonial-rating {
        margin-bottom: 10px;
    }

    .testimonial-rating i {
        font-size: 16px;
    }

    .testimonial-content {
        margin-bottom: 20px;
    }

    .testimonial-content p {
        font-size: 16px;
    }

    .testimonial-body .author-content h3 {
        font-size: 18px;
    }

    .testimonial-rating-counter .rating-counter h2 {
        font-size: 38px;
    }



    .about-facility-item {
        width: 100%;
    }

    .vision-mission {
        background: linear-gradient(180deg, var(--primary-color) 40%, var(--white-color) 40%);
    }

    .vision-mission-box {
        padding: 20px;
        gap: 40px;
    }

    .vision-mission-item {
        width: 100%;
    }

    .vision-mission-item::before {
        height: 1px;
        width: 100%;
        top: auto;
        right: 0;
        bottom: -20px;
    }

    .vision-mission-item:nth-child(2n + 2)::before {
        display: block;
    }

    .vision-mission-item:last-child::before {
        display: none;
    }

    .vision-mission-content h3 {
        font-size: 18px;
    }

    .team-content h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .faq-accordion .accordion-header .accordion-button {
        font-size: 18px;
        padding-right: 30px;
    }

    .faq-accordion .accordion-item .accordion-button::after,
    .faq-accordion .accordion-item .accordion-button.collapsed::after {
        top: 2px;
    }

    .faq-accordion .accordion-body {
        padding-right: 0;
    }

    .our-faqs-image img {
        aspect-ratio: 1 / 1.26;
    }



    .sidebar-cta-content h3 {
        font-size: 18px;
    }

}


@media (max-width: 700px) {
   .product_list.list ._col._col_4 .product_content {
           flex-direction: column;
   }
   .product_title, .product_price_group,.product_list.list ._col._col_4 .button_group, .product_list.list ._col._col_4 .button_group input, .product_list.list ._col._col_4 .product_content>.product_total_price {
        width:100%;   
   }
   .button_group quantity {
         margin-top:20px;
   }
   .product_list.list ._col._col_4 .product_content>.product_total_price {
      margin-top:20px;
       width: 100%;
               padding: 8px 45px;
   }
   .product_list.list ._col._col_4 .product_button {
     
       width: 100%;
               padding: 8px 45px;
   }
   .product_cat_filter_right > * {
       margin-left: 4px;
   }
}
/* Responsive improvements for cart page */
@media (max-width: 768px) {
    .cart_summary > * {
        padding: 12px 10px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .cart_summary > * {
        padding: 10px 8px;
        font-size: 14px;
    }

    .cart_btns > * {
        padding: 10px 15px;
        font-size: 14px;
    }

    ._form_group .form_control {
        font-size: 14px;
        padding: 8px 8px;
    }

    .product_quantity {
        width: 25px !important;
        height: 25px;
        font-size: 11px;
    }

    .cr_cart_qty_plus_minus > * {
        padding: 3px 6px;
        font-size: 12px;
    }

    .cr_cart_qty_plus_minus input {
        font-size: 11px;
    }
}

/* SweetAlert2 Responsive Styling */
.swal2-container {
    z-index: 10001;
}

.swal2-popup {
    max-width: 90vw;
    width: auto;
    border-radius: 15px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.swal2-title {
    font-size: 24px;
    margin: 20px 0 10px 0;
    padding: 0 20px;
}

.swal2-content {
    padding: 10px 20px;
    font-size: 16px;
}

/* SweetAlert2 v11 builds every icon (the success tick's two lines, the error
   X, the ring) out of `em` units relative to .swal2-icon's own font-size —
   the box is 5em square. Overriding width/height in px therefore resized the
   box without moving the strokes inside it, which pushed the success tick's
   short and long lines out of alignment so they crossed and read as an X.
   Scale via font-size instead: 5em x 12px = the same 60px box, geometry intact. */
.swal2-icon {
    font-size: 12px;
    margin: 15px auto 10px;
}

.swal2-icon svg {
    width: 100%;
    height: 100%;
}

.swal2-actions {
    gap: 10px;
    padding: 15px 20px 20px;
    justify-content: center;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
    min-width: 100px;
    padding: 10px 25px;
    font-size: 14px;
    border-radius: 8px;
}

.swal2-confirm {
    background-color: var(--button-color) !important;
}

.swal2-confirm:hover {
    background-color: #c71650 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .swal2-popup {
        max-width: 85vw;
        width: 85vw;
        margin: auto;
    }

    .swal2-title {
        font-size: 20px;
        margin: 15px 0 8px 0;
        padding: 0 15px;
    }

    .swal2-content {
        padding: 8px 15px;
        font-size: 14px;
    }

    .swal2-icon {
        font-size: 10px;
        margin: 12px auto 8px;
    }

    .swal2-actions {
        padding: 12px 15px 15px;
        gap: 8px;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        min-width: 80px;
        padding: 8px 20px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .swal2-popup {
        max-width: 95vw;
        width: 95vw;
    }

    .swal2-title {
        font-size: 18px;
        margin: 12px 0 6px 0;
        padding: 0 12px;
    }

    .swal2-content {
        padding: 6px 12px;
        font-size: 13px;
    }

    .swal2-icon {
        font-size: 9px;
        margin: 10px auto 6px;
    }

    .swal2-actions {
        flex-direction: column;
        padding: 10px 12px 12px;
        gap: 6px;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        min-width: 100%;
        width: 100%;
        padding: 10px 15px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .swal2-popup {
        max-width: 100vw;
        width: 100vw;
        margin: 0;
        border-radius: 10px;
        max-height: 95vh;
        overflow-y: auto;
    }

    .swal2-title {
        font-size: 16px;
    }

    .swal2-content {
        font-size: 12px;
    }

    .swal2-icon {
        font-size: 8px;
    }
}

/* Order confirm container responsive */
.order_confirm_contanier {
    max-width: 100%;
    margin: auto;
    padding: 0 15px;
}

@media (max-width: 768px) {
    .order_confirm_contanier {
        padding: 0 10px;
    }
}

.order_confirm_pdf {
    margin-top: 20px;
}

@media (max-width: 576px) {
    .order_confirm_pdf {
        overflow-x: auto;
    }

    .order_confirm_pdf img,
    .order_confirm_pdf iframe {
        max-width: 100%;
        height: auto;
    }
}

/* SweetAlert2 Backdrop */
.swal2-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

/* Prevent body scroll when modal is open */
body.swal2-shown {
    overflow: hidden;
}

/* Focus on modal for better accessibility */
.swal2-popup:focus {
    outline: none;
}

/* Ensure modal is visible on top of all elements */
.swal2-html-container {
    padding: 0;
    font-family: inherit;
    line-height: 1.5;
    text-align: center;
}

/* Button styling for different states */
.swal2-confirm.swal2-loading:after {
    background-color: var(--button-color);
}

/* Improved loader animation */
.swal2-loading {
    background: transparent;
    border-color: transparent;
}

.swal2-loading .swal2-confirm {
    pointer-events: none;
}

/* Success icon color — green, not the brand red used by .swal2-error below.
   A red tick on a success popup reads as a failure at a glance. */
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: #28a745;
}

.swal2-icon.swal2-success [class*='swal2-success-line'] {
    background-color: #28a745;
}

.swal2-icon.swal2-success .swal2-success-fix {
    background-color: #fff;
}

/* Error icon styling */
.swal2-icon.swal2-error .swal2-x-mark [class*='swal2-x-mark-line'] {
    background-color: #dc3545;
}

.swal2-icon.swal2-error {
    border-color: #dc3545;
}

/* Warning icon styling */
.swal2-icon.swal2-warning {
    border-color: #ffc107;
}

.swal2-icon.swal2-warning [class*='swal2-warning'] {
    background-color: #ffc107;
}

/* Info icon styling */
.swal2-icon.swal2-info {
    border-color: #0dcaf0;
}

/* Question icon styling */
.swal2-icon.swal2-question {
    border-color: #0d6efd;
}

/* Tablet adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .swal2-popup {
        max-height: 90vh;
        overflow-y: auto;
    }

    .swal2-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Extra small phone adjustments */
@media (max-width: 360px) {
    .swal2-popup {
        border-radius: 8px;
    }

    .swal2-title {
        font-size: 15px;
        word-wrap: break-word;
    }

    .swal2-content {
        word-wrap: break-word;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        min-width: 80%;
        font-size: 11px;
    }
}

/* Cart Details Responsive */
.sec_pad {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .sec_pad {
        padding: 30px 0 !important;
    }

    .order_contanier {
        padding: 0 15px !important;
    }
}

@media (max-width: 576px) {
    .sec_pad {
        padding: 20px 0 !important;
    }

    .order_contanier {
        padding: 0 10px !important;
    }
}

/* =========================================================================
   CHECKOUT PAGE REDESIGN (cart.php)
   Scoped under `.cart_details` / new `.cart_page_*` classes, all of which
   only exist in new_order_components/cart.php, so nothing here can leak
   into the order.php product-listing page or any other section reusing the
   shared ._col/._row/.form_control utility classes.
   ========================================================================= */

/* Pinned down explicitly (rather than left to the shared .sec_pad utility)
   so the checkout page gets a consistent, modest gap above/below the box
   regardless of what other pages set .sec_pad to. */
.cart_details.sec_pad {
    padding-top: 30px;
    padding-bottom: 30px;
}

.cart_details .checkout_title {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-color);
}

.cart_page_box {
    border: 2px dashed var(--button-color);
    border-radius: 24px;
    padding: 40px;
    background: #fff;
}

.cart_page_row {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.cart_page_col_billing {
    width: 36%;
}

.cart_page_col_items {
    width: 64%;
}

.cart_page_col_title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
}

/* Full-width field variant alongside the existing 50%-wide ._col_2, used for
   Address/City so they span the billing column instead of sitting at half
   width with an empty gap next to them. */
._col_1 {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

/* Qty stepper — flat black squares instead of the brand-colored pill used by
   .product_quantity on the product-listing page. align-items:center is the
   key fix here: the base .cr_cart_qty_plus_minus rule (order.css, earlier in
   this file) is display:flex with no cross-axis alignment, so once the
   buttons got an explicit fixed height below they no longer stretched to
   match the input, leaving them visually mis-aligned. */
.cr_cart_qty_plus_minus {
    align-items: center;
}

.cr_cart_qty_plus_minus a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #111;
    color: #fff;
    border: none !important;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    padding: 0 !important;
}

.cr_cart_qty_plus_minus a .fa {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

.cr_cart_qty_plus_minus input.cart_qty {
    box-sizing: border-box;
    border: 1px solid #111 !important;
    width: 46px;
    height: 26px;
    padding: 0 5px;
    font-weight: 700;
}

.cth tbody tr td a.delete_item {
    color: #e02020;
    font-size: 17px;
}

/* Summary — plain bordered rows instead of the alternating brand-color
   blocks used elsewhere. */
.cart_summary {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 25px;
}

.cart_summary > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: #fff;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.cart_summary > *:last-child {
    border-bottom: none;
}

.cart_summary > * span {
    font-weight: 800;
}

.cart_summary > .overall_total_cart {
    font-size: 19px;
}

.cart_summary > .overall_total_cart span {
    font-size: 21px;
    color: var(--button-color);
}

/* Buttons — solid pill shape instead of the outlined-on-hover style used
   elsewhere on the site. */
.cart_btns > * {
    background-color: var(--button-color);
    border-color: var(--button-color);
    border-radius: 50px;
    padding: 12px 34px;
    font-weight: 700;
}

.cart_btns > *:hover {
    background-color: transparent;
    color: var(--button-color);
    border: 1px solid var(--button-color);
}

@media (max-width: 900px) {
    .cart_page_row {
        flex-direction: column;
    }

    .cart_page_col_billing,
    .cart_page_col_items {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .cart_details .checkout_title {
        font-size: 26px;
    }

    .cart_page_box {
        padding: 15px;
        border-radius: 16px;
    }

    .cart_page_row {
        gap: 25px;
    }
}

/* Order-confirm action buttons — each a separate pill with its own colour
   (Download = brand pink, Share Whatsapp = WhatsApp green, Back = neutral dark).
   The two-class selectors below intentionally out-specify the generic
   `.cart_btns > *` pill styling above. */
.cart_btns .confirm_actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

.cart_btns .confirm_btn {
    display: inline-block;
    padding: 12px 34px;
    border-radius: 50px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: border .3s, background-color .3s, color .3s;
}

/* Download — brand pink */
.cart_btns .confirm_order_download {
    background-color: #e91e63;
    border-color: #e91e63;
}

.cart_btns .confirm_order_download:hover {
    background-color: transparent;
    color: #e91e63;
    border-color: #e91e63;
}

/* =========================================================================
   CHECKOUT REFINEMENT — qty stepper glyphs + page/card surface
   ========================================================================= */

/* The +/- glyphs were drawn with Font Awesome <i class="fa fa-minus/plus">.
   That webfont is loaded from a CDN (og.php) and a local css/font-awesome
   file, and when either fails the buttons render as empty black squares.
   Draw the glyphs in pure CSS instead so they can never disappear, and hide
   the <i> rather than editing the JS that emits the markup. */
.cr_cart_qty_plus_minus a .fa {
    display: none;
}

.cr_cart_qty_plus_minus a::before,
.cr_cart_qty_plus_minus a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: currentColor;
    border-radius: 1px;
}

/* horizontal bar — present on both buttons */
.cr_cart_qty_plus_minus a::before {
    width: 11px;
    height: 2px;
}

/* vertical bar — only the plus button gets it */
.cr_cart_qty_plus_minus a[data-type="plus"]::after {
    width: 2px;
    height: 11px;
}

.cr_cart_qty_plus_minus a {
    position: relative;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
}

.cr_cart_qty_plus_minus a:hover {
    background-color: var(--button-color);
}

.cr_cart_qty_plus_minus a:active {
    transform: scale(.92);
}

.cr_cart_qty_plus_minus input.cart_qty {
    border-radius: 4px;
    margin: 0 6px;
    outline: none;
}

.cr_cart_qty_plus_minus input.cart_qty:focus {
    border-color: var(--button-color) !important;
}

/* Page surface — a soft neutral backdrop so the white card reads as a
   panel, replacing the dashed outline with a subtle border + shadow.
   .cart_details sits inside a bootstrap .container (max-width), so this is a
   centred panel rather than a full-bleed band — rounded to make that read as
   deliberate. */
.cart_details.sec_pad {
    background: linear-gradient(180deg, #f7f8fa 0%, #eef0f4 100%);
    border-radius: 20px;
    padding-left: 12px;
    padding-right: 12px;
}

.cart_page_box {
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 24px rgba(17, 17, 17, .07);
}

/* Cart table — quieter striping than the grey .table_secondary default. */
.cart_details .cth {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.cart_details .cth thead th {
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    letter-spacing: .3px;
}

.cart_details .cth tbody tr td {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-color);
}

.cart_details .cth tbody tr:last-child td {
    border-bottom: none;
}

.cart_details .cth tbody tr:hover td {
    background: #fafafa !important;
}

/* Share Whatsapp — WhatsApp green */
.cart_btns .confirm_order_whatsapp {
    background-color: #25D366;
    border-color: #25D366;
}

.cart_btns .confirm_order_whatsapp:hover {
    background-color: transparent;
    color: #128C7E;
    border-color: #128C7E;
}

/* Back — neutral dark */
.cart_btns .confirm_order_back {
    background-color: #333333;
    border-color: #333333;
}

.cart_btns .confirm_order_back:hover {
    background-color: transparent;
    color: #333333;
    border-color: #333333;
}

@media (max-width: 576px) {
    .cart_btns .confirm_actions {
        width: 100%;
        flex-direction: column;
    }

    .cart_btns .confirm_btn {
        width: 100%;
    }
}

/* =========================================================================
   PREMIUM ORDER PAGE REDESIGN
   Scoped under `.order_details` (only the product-listing page has this
   wrapper) so nothing here can leak into cart.php or the homepage sections
   that reuse the same generic ._col/._row/.form_select utility classes.

   Colors match ccpyropark's actual site identity, not this file's own
   (now-corrected) tokens in isolation:
     --button-color   -> #E00024, the site's real accent (nav hover/active,
                          the .product .card component in style.css)
     --primary-color  (#111111, defined above)         -> ink
     --border-color   (#e6e6e6, defined above)          -> hairlines
     --od-highlight   -> #ffea00, the site's own topbar yellow (.topbg)
     --od-badge       -> #363A93, the site's own navy (.navbg / .clr)
   ========================================================================= */

.order_details {
    --od-primary: var(--button-color);
    --od-primary-dark: #a8001d;
    --od-ink: var(--primary-color);
    --od-muted: #767676;
    --od-border: var(--border-color);
    --od-highlight: #ffea00;
    --od-highlight-dark: #e0d400;
    --od-badge: #363A93;
    --od-bg: #faf9f8;
    --od-card: #ffffff;
    --od-radius-sm: 10px;
    --od-radius-md: 14px;
    --od-radius-lg: 18px;
    --od-space-1: 8px;
    --od-space-2: 16px;
    --od-space-3: 24px;
    --od-shadow-sm: 0 1px 3px rgba(17, 17, 17, .06), 0 1px 2px rgba(17, 17, 17, .05);
    --od-shadow-md: 0 8px 24px rgba(17, 17, 17, .08);
    --od-shadow-lg: 0 16px 40px rgba(17, 17, 17, .16);
    background: var(--od-bg);
}

/* Reset native button chrome for controls that used to be plain links/divs.
   Only font-family is reset (not the `font` shorthand): `.product_list` has
   a `font-size: 0` inline-block-whitespace hack further up, and a full
   `font: inherit` reset would wipe out .product_button/.place_order's own
   explicit font-size, collapsing their label text to invisible 0px. */
.order_details .cat_tab,
.order_details .cat_toggle,
.order_details .cat_dropdown_selected,
.order_details .place_order,
.order_details .product_button {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    text-align: inherit;
}

.order_details a,
.order_details button {
    text-decoration: none;
}

/* ---------------------------- Toolbar ---------------------------- */
.order_details .product_cat_filter {
    background: var(--od-card);
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-md);
    padding: var(--od-space-2);
    box-shadow: var(--od-shadow-sm);
    row-gap: var(--od-space-2);
    flex-wrap: wrap;
}

.order_details .product_cat_filter_right {
    gap: var(--od-space-1);
}

.order_details .product_cat_filter_right > * {
    margin-left: 0;
}

/* This project's `.cat_toggle` element existed in markup but had an
   unconditional `display:none` (both at base and inside the ≤1024px query),
   so mobile users had no way to open the `.product_list_left` drawer.
   Scoped rules below win on specificity and restore it on mobile only. */
.order_details .cat_toggle {
    display: none;
}

@media (max-width: 1024px) {
    .order_details .cat_toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.order_details .grid_view,
.order_details .list_view,
.order_details .cat_toggle {
    border-radius: var(--od-radius-sm);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.order_details .grid_view:hover,
.order_details .list_view:hover,
.order_details .cat_toggle:hover {
    transform: translateY(-2px);
}

.order_details .od-search-wrap {
    position: relative;
    flex: 1 1 220px;
}

.order_details .od-search-wrap .fa-magnifying-glass {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--od-muted);
    pointer-events: none;
}

.order_details .search_box {
    padding: 10px 16px 10px 38px;
    border-radius: var(--od-radius-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.order_details .search_box:focus {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(224, 0, 36, .15);
}

.order_details .cat_dropdown_selected {
    display: inline-flex;
    align-items: center;
    border-radius: var(--od-radius-sm);
    max-width: 220px;
}

.order_details .cat_dropdown_list {
    border-radius: var(--od-radius-md);
    box-shadow: var(--od-shadow-lg);
}

/* ------------------------- Category sidebar ------------------------- */
.order_details .product_list_left {
    background: var(--od-card);
    border: 1px solid var(--od-border);
    border-radius: var(--od-radius-md);
    padding: var(--od-space-1);
    box-shadow: var(--od-shadow-sm);
}

.order_details .product_list_left .cat_tab,
.order_details .cat_dropdown_list .cat_tab {
    display: block;
    width: 100%;
    border-radius: var(--od-radius-sm);
    font-weight: 600;
    padding: 12px 16px;
    background: transparent;
    color: var(--od-ink);
    margin-top:10px;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.order_details .product_list_left .cat_tab.active,
.order_details .product_list_left .cat_tab:hover,
.order_details .cat_dropdown_list .cat_tab.active,
.order_details .cat_dropdown_list .cat_tab:hover {
    background: var(--od-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(224, 0, 36, .28);
}

/* Sticky category rail — desktop only, so the ≤1024px off-canvas drawer
   behaviour already defined above is left completely alone. */
@media (min-width: 1025px) {
    .order_details .product_list_left {
        position: sticky;
        top: 90px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        align-self: flex-start;
    }
}

/* ---------------------------- Product cards ---------------------------- */
.order_details .cat_title {
    border-radius: var(--od-radius-sm);
    box-shadow: var(--od-shadow-sm);
    display: inline-block;
}

.order_details .product_con {
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.order_details .product_list:not(.list) .product_con:hover {
    transform: translateY(-4px);
    box-shadow: var(--od-shadow-md);
}

.order_details .product_image {
    background: linear-gradient(180deg, #f7f4f5, #efe9ea);
}

.order_details .product_image .probgimage {
    padding: 10px;
    box-sizing: border-box;
}

.order_details .od-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--od-muted);
    font-size: 32px;
}

.order_details .od-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: var(--od-shadow-sm);
}

.order_details .od-badge--discount {
    background: var(--od-badge);
}

.order_details .product_title {
    font-weight: 600;
    line-height: 1.35;
    min-width:150px; margin-bottom:5px;
}

.order_details .old_price {
    color: var(--od-muted);
}

.order_details .new_price {
    color: var(--od-primary);
}

.order_details .product_total_price {
    background: #fbe4e7;
    background: color-mix(in srgb, var(--od-primary) 15%, #fff);
    color: var(--od-primary-dark);
    font-weight: 700;
    border-radius: var(--od-radius-sm);
}

.order_details .product_button.add {
    border-radius: var(--od-radius-sm);
    background: var(--od-primary);
    letter-spacing: .01em;
    transition: background-color .2s ease, transform .12s ease, box-shadow .2s ease;
    box-shadow: 0 6px 16px rgba(224, 0, 36, .28);
    text-align: center;
}

.order_details .product_button.add:hover {
    background: var(--od-primary-dark);
    transform: translateY(-1px);
}

.order_details .product_button.add:active {
    transform: translateY(0);
}

.order_details .button_group {
    background: #f4f4f2;
    border-radius: var(--od-radius-sm);
    padding: 4px;
    align-items: center;
}

.order_details .button_group.add {
    background: transparent;
    padding: 0;
}

.order_details .product_quantity {
    border-radius: 8px;
    transition: background-color .2s ease, transform .1s ease;
}

.order_details .product_quantity:hover {
    background: var(--od-primary-dark);
}

.order_details .product_quantity:active {
    transform: scale(.92);
}

.order_details .button_group input.qty_input {
    background: #fff;
    border-radius: 6px;
    font-weight: 700;
}

/* Loading state — ready for any button that gains a `.loading` class */
.order_details .product_button.loading,
.order_details .place_order.loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.order_details .product_button.loading::after,
.order_details .place_order.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: od-spin .7s linear infinite;
}

@keyframes od-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------ Empty state ------------------------------ */
.order_details .no_data {
    background: var(--od-card);
    border: 1px dashed var(--od-border);
    border-radius: var(--od-radius-md);
    padding: 48px 24px;
    font-size: 16px;
    color: var(--od-muted);
}

.order_details .no_data::before {
    content: '🎇';
    display: block;
    font-size: 40px;
    margin-bottom: var(--od-space-1);
}

/* --------------------------- Sticky summary bar --------------------------- */
.order_details .od-summary-bar {
    margin-bottom:30px;
    margin-top: var(--od-space-3);
    padding-top: var(--od-space-1);
    background: linear-gradient(180deg, rgba(250, 249, 248, 0) 0%, var(--od-bg) 35%);
}

.order_details .overall_total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--od-space-1);
    text-align: left;
    border-radius: var(--od-radius-md);
    box-shadow: var(--od-shadow-lg);
    background: linear-gradient(135deg, var(--od-primary), var(--od-primary-dark));
}

.order_details .od-summary-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    opacity: .9;
}

.order_details .overall_totals {
    font-size: 26px;
}

.order_details .place_order_div {
    margin-top: var(--od-space-2);
}

.order_details .place_order {
    box-sizing: border-box;
    border-radius: var(--od-radius-sm);
    background: var(--od-highlight);
    color: #3a3200 !important;
    font-weight: 700;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(255, 234, 0, .35);
    transition: background-color .2s ease, color .2s ease, transform .12s ease;
}

.order_details .place_order:hover {
    background: var(--od-highlight-dark);
    color: #241e00 !important;
    border-color: transparent;
    transform: translateY(-1px);
}

/* ------------------------------ Accessibility ------------------------------ */
.order_details a:focus-visible,
.order_details button:focus-visible,
.order_details input:focus-visible {
    outline: 3px solid var(--od-highlight);
    outline-offset: 2px;
}

/* -------------------------------- Responsive -------------------------------- */
@media (max-width: 767px) {
    .order_details .product_cat_filter {
        flex-direction: column;
        align-items: stretch;
    }

    .order_details .product_cat_filter_right {
        justify-content: space-between;
    }

    .order_details .od-search-wrap {
        order: 3;
        flex-basis: 100%;
    }

    .order_details .overall_total {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .order_details .od-summary-label {
        font-size: 14px;
    }

    /* --- Grid (card) view: keep narrow mobile cards aligned --------------
       When an item is in the cart the pink total-price pill appears inside
       the price group. Its wide 35px side padding (base .product_total_price)
       overflows a 2-up mobile card and collides with the struck/selling
       price. Drop it onto its own full-width line — the same treatment the
       list view already gives it — so the card reads cleanly top-to-bottom. */
    .order_details .product_list:not(.list) .product_price_group {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .order_details .product_list:not(.list) .product_price_group .product_total_price {
        width: 100%;
        text-align: center;
        padding: 6px 12px;
    }

    /* The fixed 150px title width lops off longer names in a ~200px card;
       let it flow to the available card width instead. */
    .order_details .product_list:not(.list) .product_title {
        width: auto;
    }
}

/* Two columns is too cramped for the image + title + price + stepper stack
   on small phones, so cards go single-column a little earlier than the
   generic ≤420px rule further up. */
@media (max-width: 520px) {
    .order_details .product_list_right ._col._col_4 {
        width: 100%;
    }
}

/* =========================================================================
   LIST VIEW — professional mobile card (≤700px)
   The stock mobile list stacked title / price / a full-width stretched qty
   stepper / a full-width pink total into four clumsy rows. This rebuilds the
   right-hand details as a 2-column grid: title + prices span the full width,
   then the qty stepper (or Add button) and the line total share ONE tidy
   bottom row. Scoped to `.order_details .product_list.list` so the desktop
   list and the grid/card view are left untouched.
   ========================================================================= */
@media (max-width: 700px) {
    .order_details .product_list.list ._col._col_4 .product_con {
        gap: 12px;
        padding: 12px;
        align-items: stretch;
    }

    /* Larger, rounded thumbnail with the section's soft gradient backing */
    .order_details .product_list.list ._col._col_4 .product_image {
        flex: 0 0 78px;
        width: 78px;
        height: 78px;
        border-radius: 12px;
        overflow: hidden;
        align-self: flex-start;
    }

    /* The -80% badge is oversized against a 78px thumb — shrink and tuck it in */
    .order_details .product_list.list ._col._col_4 .od-badge {
        top: 5px;
        left: 5px;
        font-size: 9px;
        padding: 2px 6px;
    }

    /* Right-hand details: 2-col grid (text spans both, controls split L/R) */
    .order_details .product_list.list ._col._col_4 .product_content {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 10px;
        flex: 1;
        width: auto;
    }

    .order_details .product_list.list ._col._col_4 .product_title {
        grid-column: 1 / -1;
        width: auto;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
    }

    .order_details .product_list.list ._col._col_4 .product_price_group {
        grid-column: 1 / -1;
        width: auto;
        align-items: baseline;
        gap: 8px;
    }

    /* Empty state — full-width, comfortably tappable Add button */
    .order_details .product_list.list ._col._col_4 .button_group.add {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .order_details .product_list.list ._col._col_4 .button_group.add .product_button {
        width: 100%;
        padding: 11px;
    }

    /* In-cart state — compact stepper pill bottom-left */
    .order_details .product_list.list ._col._col_4 .button_group.quantity {
        grid-column: 1;
        justify-self: start;
        width: auto;
        margin-top: 0;
        gap: 4px;
        padding: 4px;
    }

    .order_details .product_list.list ._col._col_4 .button_group.quantity .product_quantity {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .order_details .product_list.list ._col._col_4 .button_group.quantity input.qty_input {
        flex: 0 0 46px;
        width: 46px;
        margin: 0 2px;
    }

    /* Line total — compact chip bottom-right, on the stepper's row */
    .order_details .product_list.list ._col._col_4 .product_content > .product_total_price {
        grid-column: 2;
        justify-self: end;
        width: auto;
        margin-top: 0;
        padding: 8px 16px;
        white-space: nowrap;
    }
}