/* ============================================================
   Modern 2026 — PREMIUM REDESIGN (all sizes + mobile-first)
   ------------------------------------------------------------
   Loaded LAST — overrides every legacy rule.
   ============================================================ */


/* ============================================================
   ★★★ PART 1: ALL-SIZES PREMIUM REDESIGN ★★★
   Visible on desktop, tablet AND phone.
   ============================================================ */

/* ----- Premium hero breadcrumb ----- */
.wsus__breadcrumb {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.wsus__breadcrumb::before {
    content: "";
    position: absolute; inset: 0;
 
    z-index: 1;
}
.wsus__breadcrumb::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,200,80,.12) 0, transparent 50%);
    z-index: 1;
    pointer-events: none;
}
.wsus__breadcrumb_overlay {
    position: relative;
    z-index: 2;
    background: transparent !important;
}
.wsus__breadcrumb_text h1 {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    text-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.wsus__breadcrumb_text ul {
    display: inline-flex;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    margin-top: 12px;
}
.wsus__breadcrumb_text ul li,
.wsus__breadcrumb_text ul li a {
    color: rgba(255,255,255,.92) !important;
}
.wsus__breadcrumb_text ul li a:hover {
    color: #ffd9a8 !important;
}


/* ----- CART page (all sizes) ----- */
.wsus__cart_view {
    background: linear-gradient(180deg, #fbf8f3 0%, #fff 100%);
}
.wsus__cart_list {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 50px -28px rgba(42, 31, 23, .22);
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, .04);
}
.wsus__cart_list table {
    border-collapse: separate;
    border-spacing: 0;
}
.wsus__cart_list table tr:first-child {
    background: linear-gradient(135deg, #2a1f17, #4a3322);
}
.wsus__cart_list table tr:first-child th {
    color: #f5e9d8 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px !important;
    padding: 16px 12px !important;
    border: 0 !important;
}
.wsus__cart_list table tr:first-child th:first-child { border-top-left-radius: 14px; }
.wsus__cart_list table tr:first-child th:last-child  { border-top-right-radius: 14px; }
[dir="rtl"] .wsus__cart_list table tr:first-child th:first-child { border-top-right-radius: 14px; border-top-left-radius: 0; }
[dir="rtl"] .wsus__cart_list table tr:first-child th:last-child  { border-top-left-radius: 14px; border-top-right-radius: 0; }
.wsus__cart_list table tr:first-child .clear_all {
    background: rgba(255,255,255,.12);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
    font-size: 11px !important;
    transition: all .25s ease;
    text-decoration: none !important;
}
.wsus__cart_list table tr:first-child .clear_all:hover {
    background: #dc3545;
    border-color: #dc3545;
}
.wsus__cart_list table tr:not(:first-child):hover {
    background: #fff7ef;
}
.wsus__cart_list .quentity_btn button {
    border: 0 !important;
    transition: transform .15s ease, background .25s ease !important;
}
.wsus__cart_list .quentity_btn button:hover {
    transform: scale(1.08);
}

/* Cart summary card — premium look */
.wsus__cart_list_footer_button {
    background: linear-gradient(180deg, #fff 0%, #fbf8f3 100%);
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 20px 50px -28px rgba(42, 31, 23, .25);
    padding: 28px;
    position: relative;
    overflow: hidden;
}
.wsus__cart_list_footer_button::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(184,84,26,.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.wsus__cart_list_footer_button .grand_total h6 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(184,84,26,.18);
    position: relative;
    color: #2a1f17;
}
.wsus__cart_list_footer_button .grand_total h6::before {
    content: "\f291";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    color: #b8541a;
    margin-inline-end: 10px;
}
.wsus__cart_list_footer_button .grand_total p.total {
    background: linear-gradient(135deg, #b8541a, #8a3f12);
    color: #fff !important;
    padding: 14px 18px !important;
    border-radius: 14px;
    margin: 14px -4px 18px !important;
    font-size: 17px !important;
    box-shadow: 0 12px 26px -10px rgba(184,84,26,.55);
}
.wsus__cart_list_footer_button .grand_total p.total span,
.wsus__cart_list_footer_button .grand_total p.total span * {
    color: #fff !important;
}
.wsus__cart_list_footer_button #coupon_form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.wsus__cart_list_footer_button #coupon_form input {
    flex: 1;
    border: 2px dashed rgba(184,84,26,.3) !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-weight: 600;
    color: #2a1f17;
    transition: border-color .25s ease;
}
.wsus__cart_list_footer_button #coupon_form input:focus {
    border-color: #b8541a !important;
    border-style: solid !important;
}
.wsus__cart_list_footer_button #coupon_form button {
    background: #2a1f17 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 22px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    transition: background .25s ease;
}
.wsus__cart_list_footer_button #coupon_form button:hover {
    background: #b8541a !important;
}
.wsus__cart_list_footer_button .common_btn {
    width: 100%;
    text-align: center;
    padding: 16px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #b8541a, #8a3f12) !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 30px -10px rgba(184,84,26,.55);
    transition: all .25s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    text-decoration: none;
}
.wsus__cart_list_footer_button .common_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(184,84,26,.65);
}


/* ----- LOGIN / REGISTER (all sizes) ----- */
.wsus__signin {
    position: relative;
    isolation: isolate;
}
.wsus__signin::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg,
        rgba(42, 31, 23, .55) 0%,
        rgba(184, 84, 26, .35) 50%,
        rgba(42, 31, 23, .65) 100%);
    z-index: 1;
}
.wsus__signin_overlay {
    position: relative;
    z-index: 2;
    background: transparent !important;
}
.wsus__login_area {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px !important;
    padding: 44px 38px !important;
    box-shadow:
        0 30px 80px -30px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(255, 255, 255, .8) inset;
    position: relative;
    overflow: hidden;
}
.wsus__login_area::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(184,84,26,.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.wsus__login_area h2 {
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    margin-bottom: 6px !important;
    background: linear-gradient(135deg, #2a1f17, #b8541a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}
.wsus__login_area > p {
    color: #8c7a66;
    margin-bottom: 26px !important;
    position: relative;
    z-index: 1;
}
.wsus__login_imput {
    position: relative;
    z-index: 1;
}
.wsus__login_imput label {
    font-weight: 700;
    font-size: 13px;
    color: #2a1f17;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.wsus__login_imput input {
    background: #fafaf7 !important;
    border: 2px solid #ece4d6 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    transition: all .25s ease;
    font-weight: 500;
}
.wsus__login_imput input:focus {
    background: #fff !important;
    border-color: #b8541a !important;
    box-shadow: 0 0 0 4px rgba(184,84,26,.12) !important;
    outline: 0;
}
.wsus__login_area .common_btn {
    background: linear-gradient(135deg, #b8541a, #8a3f12) !important;
    color: #fff !important;
    width: 100%;
    padding: 16px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 0;
    box-shadow: 0 14px 30px -10px rgba(184,84,26,.55);
    transition: all .25s ease;
    position: relative;
    z-index: 1;
}
.wsus__login_area .common_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(184,84,26,.65);
}
.wsus__login_area .create_account {
    text-align: center;
    margin-top: 22px !important;
    color: #8c7a66;
    font-size: 14px;
    position: relative;
    z-index: 1;
}
.wsus__login_area .create_account a {
    color: #b8541a;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .25s ease;
}
.wsus__login_area .create_account a:hover {
    border-color: #b8541a;
}


/* ----- CHECKOUT ADDRESS TILES (all sizes) ----- */
.wsus__checkout_form .wsus__check_form {
    background: #fff;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 20px 50px -30px rgba(42, 31, 23, .18);
    border: 1px solid rgba(0,0,0,.04);
    margin-bottom: 24px;
}
.wsus__checkout_form h5 {
    font-size: 18px;
    font-weight: 800;
    color: #2a1f17;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(184,84,26,.15);
    margin-bottom: 22px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.wsus__checkout_form h5 a {
    margin-inline-start: auto;
    background: linear-gradient(135deg, #b8541a, #8a3f12);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 6px 14px -6px rgba(184,84,26,.5);
    transition: transform .2s ease;
}
.wsus__checkout_form h5 a:hover {
    transform: translateY(-1px);
}
.wsus__checkout_single_address {
    background: #fff;
    border: 2px solid #ece4d6;
    border-radius: 16px;
    padding: 18px;
    transition: all .3s ease;
    cursor: pointer;
    margin-bottom: 12px;
    position: relative;
}
.wsus__checkout_single_address:hover {
    border-color: rgba(184,84,26,.5);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(42,31,23,.25);
}
.wsus__checkout_single_address:has(.address_id:checked) {
    border-color: #b8541a;
    background: linear-gradient(180deg, #fff7ef 0%, #fff 60%);
    box-shadow: 0 12px 28px -14px rgba(184,84,26,.35);
}
.wsus__checkout_single_address:has(.address_id:checked)::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #b8541a, #8a3f12);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 6px 14px -4px rgba(184,84,26,.55);
}
.wsus__checkout_single_address .icon {
    color: #b8541a;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff7ef;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}


/* ----- CHECKOUT FORM INPUTS (all sizes) ----- */
.wsus__check_single_form input,
.wsus__check_single_form textarea,
.wsus__check_single_form .select2-selection,
.wsus__check_single_form .nice-select {
    background: #fafaf7 !important;
    border: 2px solid #ece4d6 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    transition: all .25s ease;
    font-weight: 500;
}
.wsus__check_single_form input:focus,
.wsus__check_single_form textarea:focus {
    background: #fff !important;
    border-color: #b8541a !important;
    box-shadow: 0 0 0 4px rgba(184,84,26,.12) !important;
    outline: 0;
}


/* ----- PAYMENT METHOD CARDS (all sizes) ----- */
.wsus__payment_area {
    background: #fff;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 20px 50px -30px rgba(42, 31, 23, .18);
    border: 1px solid rgba(0,0,0,.04);
}
.wsus__single_payment {
    background: #fff;
    border: 2px solid #ece4d6;
    border-radius: 16px;
    padding: 22px 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    transition: all .3s cubic-bezier(.32,.72,0,1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.wsus__single_payment::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(184,84,26,.05), rgba(184,84,26,0));
    opacity: 0;
    transition: opacity .3s ease;
}
.wsus__single_payment:hover {
    border-color: #b8541a;
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -20px rgba(184,84,26,.35);
}
.wsus__single_payment:hover::before {
    opacity: 1;
}
.wsus__single_payment img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: grayscale(20%);
    transition: filter .3s ease;
}
.wsus__single_payment:hover img {
    filter: grayscale(0%);
}


/* ----- USER DASHBOARD (all sizes) ----- */
.wsus__dashboard {
    background: linear-gradient(180deg, #fbf8f3 0%, #fff 100%);
}
.wsus__dashboard_menu {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 50px -30px rgba(42, 31, 23, .18);
    border: 1px solid rgba(0,0,0,.04);
}
.wsus__dashboard_menu .dasboard_header {
    background: linear-gradient(135deg, #b8541a 0%, #8a3f12 100%);
    padding: 32px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.wsus__dashboard_menu .dasboard_header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,200,80,.10) 0, transparent 50%),
        radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 18px 18px;
    opacity: .9;
    pointer-events: none;
}
.wsus__dashboard_menu .dasboard_header_img {
    width: 110px;
    height: 110px;
    margin: 0 auto 14px;
    position: relative;
    border-radius: 50%;
    background: #fff;
    padding: 4px;
    box-shadow: 0 14px 36px -10px rgba(0,0,0,.4);
    z-index: 1;
}
.wsus__dashboard_menu .dasboard_header_img img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
}
.wsus__dashboard_menu .dasboard_header_img label {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ffd9a8, #fff);
    color: #b8541a;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.25);
    border: 3px solid #fff;
    z-index: 2;
}
.wsus__dashboard_menu .dasboard_header h2 {
    color: #fff !important;
    font-weight: 800;
    text-shadow: 0 4px 14px rgba(0,0,0,.25);
    position: relative;
    z-index: 1;
    font-size: 19px !important;
    margin: 0;
}
.wsus__dashboard_menu .nav-pills {
    padding: 14px;
    gap: 4px;
}
.wsus__dashboard_menu .nav-pills .nav-link {
    color: #2a1f17 !important;
    background: transparent !important;
    border-radius: 12px;
    padding: 13px 16px !important;
    font-weight: 700;
    transition: all .25s ease;
    display: flex !important;
    align-items: center;
    gap: 12px;
    border: 0;
}
.wsus__dashboard_menu .nav-pills .nav-link span {
    width: 36px;
    height: 36px;
    background: #fbf8f3;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b8541a;
    transition: all .25s ease;
    flex-shrink: 0;
}
.wsus__dashboard_menu .nav-pills .nav-link:hover {
    background: #fbf8f3 !important;
    color: #b8541a !important;
}
.wsus__dashboard_menu .nav-pills .nav-link:hover span {
    background: #fff;
    transform: scale(1.05);
}
.wsus__dashboard_menu .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #b8541a, #8a3f12) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px -10px rgba(184,84,26,.55);
}
.wsus__dashboard_menu .nav-pills .nav-link.active span {
    background: rgba(255,255,255,.22);
    color: #fff;
}

.wsus__dashboard_content {
    background: #fff;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 20px 50px -30px rgba(42, 31, 23, .18);
    border: 1px solid rgba(0,0,0,.04);
    min-height: 480px;
}
.wsus_dashboard_body h3 {
    font-size: 22px;
    font-weight: 800;
    color: #2a1f17;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(184,84,26,.15);
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.wsus__dsahboard_overview_item {
    background: linear-gradient(135deg, #fff7ef 0%, #fff 100%);
    padding: 24px;
    border-radius: 18px;
    border: 1px solid rgba(184,84,26,.12);
    text-align: center;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}
.wsus__dsahboard_overview_item::before {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(184,84,26,.15), transparent 70%);
    border-radius: 50%;
}
.wsus__dsahboard_overview_item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px rgba(184,84,26,.35);
}
.wsus__dsahboard_overview_item .icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #b8541a, #8a3f12);
    color: #fff;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -8px rgba(184,84,26,.5);
    position: relative;
    z-index: 1;
}
.wsus__dsahboard_overview_item.green .icon {
    background: linear-gradient(135deg, #2eb872, #1f8d54);
    box-shadow: 0 10px 22px -8px rgba(46,184,114,.5);
}
.wsus__dsahboard_overview_item.red .icon {
    background: linear-gradient(135deg, #dc3545, #a72433);
    box-shadow: 0 10px 22px -8px rgba(220,53,69,.5);
}
.wsus__dsahboard_overview_item h4 {
    font-size: 14px;
    font-weight: 700;
    color: #2a1f17;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
    position: relative;
    z-index: 1;
}
.wsus__dsahboard_overview_item h4 span {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: #b8541a;
    margin-top: 4px;
}
.wsus__dsahboard_overview_item.green h4 span { color: #2eb872; }
.wsus__dsahboard_overview_item.red h4 span { color: #dc3545; }


/* ----- ORDER TRACKING (all sizes) ----- */
.wsus__track_order {
    background: linear-gradient(180deg, #fff 0%, #fbf8f3 100%);
    border-radius: 18px;
    padding: 30px 22px;
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 14px 30px -16px rgba(42, 31, 23, .18);
    margin-bottom: 22px;
}
.wsus__track_order ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.wsus__track_order ul::before {
    content: "";
    position: absolute;
    top: 18px;
    inset-inline-start: 6%;
    inset-inline-end: 6%;
    height: 3px;
    background: #ece4d6;
    z-index: 0;
    border-radius: 999px;
}
.wsus__track_order ul li {
    flex: 1 1 0;
    text-align: center;
    padding-top: 50px;
    position: relative;
    color: #8c7a66;
    font-weight: 700;
    font-size: 13px;
    z-index: 1;
}
.wsus__track_order ul li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ece4d6;
    z-index: 2;
}
.wsus__track_order ul li.active {
    color: #b8541a;
}
.wsus__track_order ul li.active::before {
    background: linear-gradient(135deg, #b8541a, #8a3f12);
    border-color: #b8541a;
    box-shadow: 0 0 0 5px rgba(184,84,26,.18);
}
.wsus__track_order ul li.active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    z-index: 3;
}


/* ----- FAQ (all sizes) ----- */
.wsus__faq_area .accordion-item {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 16px !important;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px -14px rgba(42, 31, 23, .15);
    transition: box-shadow .25s ease;
}
.wsus__faq_area .accordion-item:hover {
    box-shadow: 0 14px 30px -14px rgba(42, 31, 23, .25);
}
.wsus__faq_area .accordion-button {
    font-weight: 700 !important;
    color: #2a1f17 !important;
    background: #fff !important;
    padding: 18px 22px !important;
    font-size: 15px !important;
    border-radius: 16px !important;
}
.wsus__faq_area .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #fff7ef 0%, #fff 100%) !important;
    color: #b8541a !important;
    box-shadow: none !important;
}
.wsus__faq_area .accordion-button::after {
    background: #fbf8f3;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 12px;
}
.wsus__faq_area .accordion-button:not(.collapsed)::after {
    background-color: #b8541a;
    filter: brightness(20);
}
.wsus__faq_area .accordion-body {
    padding: 0 22px 18px !important;
    color: #6c5d4e;
    line-height: 1.7;
}
.wsus__faq_form {
    background: #fff;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 20px 50px -30px rgba(42, 31, 23, .18);
    border: 1px solid rgba(0,0,0,.04);
}
.wsus__faq_form h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(184,84,26,.15);
    color: #2a1f17;
}
.wsus__faq_form input,
.wsus__faq_form textarea {
    width: 100%;
    background: #fafaf7 !important;
    border: 2px solid #ece4d6 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    transition: all .25s ease;
}
.wsus__faq_form input:focus,
.wsus__faq_form textarea:focus {
    background: #fff !important;
    border-color: #b8541a !important;
    box-shadow: 0 0 0 4px rgba(184,84,26,.12) !important;
    outline: 0;
}
.wsus__faq_form button[type="submit"] {
    background: linear-gradient(135deg, #b8541a, #8a3f12) !important;
    color: #fff !important;
    border: 0;
    width: 100%;
    padding: 15px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 14px 30px -10px rgba(184,84,26,.55);
    transition: all .25s ease;
}
.wsus__faq_form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(184,84,26,.65);
}


/* ----- INVOICE (all sizes) ----- */
.wsus__invoice_header {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 14px 30px -16px rgba(42, 31, 23, .18);
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
}
.wsus__invoice_header .header_address h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b8541a;
    font-weight: 800;
    margin-bottom: 8px;
}
.wsus__invoice_header .header_address p {
    margin: 4px 0;
    color: #2a1f17;
    line-height: 1.6;
}
.wsus__invoice_body {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 14px 30px -16px rgba(42, 31, 23, .18);
}
.wsus__invoice_body table thead tr,
.wsus__invoice_body .table tbody tr:first-child {
    background: linear-gradient(135deg, #2a1f17, #4a3322);
}
.wsus__invoice_body .table tbody tr:first-child th,
.wsus__invoice_body .table tbody tr:first-child td {
    color: #f5e9d8 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    padding: 14px 12px !important;
    border: 0 !important;
}
.delivary_time {
    background: linear-gradient(135deg, #fff7ef 0%, #fff 100%);
    border: 2px dashed rgba(184,84,26,.4);
    color: #b8541a;
    border-radius: 14px;
    padding: 14px 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
    font-size: 14px;
}
.delivary_time::before {
    content: "\f017";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    margin-inline-end: 10px;
}


/* ----- EMPTY STATES (all sizes) ----- */
.m-empty-state {
    background: #fff;
    border-radius: 22px;
    padding: 60px 30px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 20px 50px -30px rgba(42, 31, 23, .18);
    max-width: 560px;
    margin: 30px auto;
}
.m-empty-state i {
    font-size: 80px;
    color: #b8541a;
    background: #fff7ef;
    width: 140px;
    height: 140px;
    line-height: 140px;
    border-radius: 50%;
    margin-bottom: 22px;
    display: inline-block;
}
.m-empty-state h3 {
    font-size: 24px;
    font-weight: 800;
    color: #2a1f17;
    margin-bottom: 10px;
}
.m-empty-state p {
    color: #8c7a66;
    margin-bottom: 24px;
    font-size: 15px;
}
.m-empty-state .common_btn {
    background: linear-gradient(135deg, #b8541a, #8a3f12) !important;
    color: #fff !important;
    padding: 14px 28px !important;
    border-radius: 14px !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    box-shadow: 0 14px 30px -10px rgba(184,84,26,.55);
    text-decoration: none;
    transition: all .25s ease;
}
.m-empty-state .common_btn:hover {
    transform: translateY(-2px);
}


/* ----- BLOG (all sizes) ----- */
.wsus__single_blog {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 14px 30px -18px rgba(42, 31, 23, .18);
    transition: all .3s ease;
}
.wsus__single_blog:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -20px rgba(42, 31, 23, .28);
}
.wsus__single_blog_img {
    position: relative;
    overflow: hidden;
}
.wsus__single_blog_img img {
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform .6s ease;
}
.wsus__single_blog:hover .wsus__single_blog_img img {
    transform: scale(1.05);
}
.wsus__single_blog_text {
    padding: 22px;
}
.wsus__single_blog_text h3,
.wsus__single_blog_text h4 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 8px;
}


/* ----- ANIMATIONS ----- */
@keyframes m-fade-in-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.wsus__login_area,
.wsus__cart_list_footer_button,
.wsus__dashboard_menu,
.wsus__dashboard_content,
.wsus__faq_area .accordion-item,
.wsus__single_payment,
.wsus__checkout_single_address,
.wsus__dsahboard_overview_item {
    animation: m-fade-in-up .5s cubic-bezier(.32,.72,0,1) backwards;
}


/* ============================================================
   ★★★ END OF PART 1: ALL-SIZES PREMIUM REDESIGN ★★★
   ============================================================ */


/* ============================================================
   ★★★ PART 1B: KFC-STYLE BOLD ENERGETIC DESIGN ★★★
   Inspired by saudi.kfc.me — bold typography, red accents
   for HOT items, circular + buttons, sticky bottom CTAs,
   strong contrast, energetic feel. Works on all screens.
   ============================================================ */

:root {
    --kfc-red: #E4002B;
    --kfc-red-dark: #B30022;
    --kfc-black: #1A1A1A;
    --kfc-yellow: #FFC72C;
    --kfc-cream: #FFF7E6;
    --kfc-success: #00A651;
}


/* ----- BOLD HERO BANNER (home / breadcrumb) ----- */
.wsus__breadcrumb {
    min-height: 280px;
    display: flex;
    align-items: center;
}
.wsus__breadcrumb_text h1 {
    font-size: clamp(34px, 6vw, 64px) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -.02em;
    line-height: 1 !important;
    margin-bottom: 16px !important;
}


/* ----- BOLD PRODUCT PRICES (KFC vibe) ----- */
.wsus__menu_item .price,
.product_price,
.wsus__pro_tk h6,
.wsus__pro_status h6 {
    font-weight: 900 !important;
    color: var(--kfc-black) !important;
    font-size: 18px !important;
    letter-spacing: -.01em;
}
.wsus__menu_item .price {
    color: #b8541a !important;
}


/* ----- CIRCULAR + ADD BUTTON (KFC iconic) ----- */
.wsus__add_btn {
    width: 44px !important;
    height: 44px !important;
    background: var(--kfc-red) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px -6px rgba(228, 0, 43, .55), 0 0 0 0 rgba(228, 0, 43, .4) !important;
    border: 0 !important;
    transition: all .25s ease !important;
    cursor: pointer;
    position: relative;
}
.wsus__add_btn:hover {
    background: var(--kfc-red-dark) !important;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 12px 24px -6px rgba(228, 0, 43, .65), 0 0 0 8px rgba(228, 0, 43, .12) !important;
}
.wsus__add_btn::before {
    content: "+";
    font-size: 22px;
    line-height: 1;
}
.wsus__add_btn i { display: none; }


/* ----- HOT / NEW / SPICY BADGES (KFC iconic red badges) ----- */
.m-product__discount,
.wsus__menu_item .offer,
.wsus__menu_item .badge,
.product_badge {
    background: linear-gradient(135deg, var(--kfc-red), var(--kfc-red-dark)) !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    box-shadow: 0 6px 14px -4px rgba(228, 0, 43, .55);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
}
.m-product__discount::before,
.wsus__menu_item .offer::before {
    content: "🔥";
    font-size: 12px;
}


/* ----- STICKY BOTTOM ADD-TO-CART BAR (KFC mobile pattern) ----- */
@media (max-width: 991.98px) {
    .m-product__sticky,
    .wsus__menu_details_text .common_btn[href*="add-to-cart"]:last-child {
        position: fixed !important;
        bottom: 0;
        left: 0; right: 0;
        background: #fff !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -10px 30px -10px rgba(0,0,0,.18);
        z-index: 50;
        border-top: 1px solid rgba(0,0,0,.06);
        display: flex;
        gap: 10px;
        align-items: center;
    }
}


/* ----- KFC-STYLE BIG BOLD CTA BUTTONS ----- */
.common_btn,
button.common_btn {
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    border: 0 !important;
    transition: all .25s ease !important;
    position: relative;
    overflow: hidden;
}
.common_btn::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transition: left .6s ease;
}
.common_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -10px rgba(184, 84, 26, .65) !important;
}
.common_btn:hover::before {
    left: 100%;
}


/* ----- KFC-STYLE CATEGORY CHIPS (bigger, bolder) ----- */
.menu_filter button,
.m-category-chips .m-chip {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: all .25s cubic-bezier(.32,.72,0,1) !important;
}
.menu_filter button.active,
.m-category-chips .m-chip.active {
    background: var(--kfc-black) !important;
    color: #fff !important;
    transform: scale(1.05);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .35) !important;
}


/* ----- PRODUCT CARDS — KFC bold image, sharp shadows ----- */
.wsus__menu_item {
    background: #fff;
    border-radius: 16px !important;
    overflow: hidden;
    border: 0 !important;
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .15);
    transition: all .35s cubic-bezier(.32,.72,0,1) !important;
    position: relative;
}
.wsus__menu_item:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .25);
}
.wsus__menu_item .wsus__menu_item_img {
    overflow: hidden;
    position: relative;
    background: #fbf8f3;
}
.wsus__menu_item .wsus__menu_item_img img {
    transition: transform .6s cubic-bezier(.32,.72,0,1);
    aspect-ratio: 1/1;
    object-fit: cover;
}
.wsus__menu_item:hover .wsus__menu_item_img img {
    transform: scale(1.08);
}
.wsus__menu_item .wsus__menu_item_text {
    padding: 16px 18px 18px !important;
}
.wsus__menu_item .title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--kfc-black) !important;
    line-height: 1.3 !important;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px !important;
    min-height: 42px;
}


/* ----- MOBILE BOTTOM TAB BAR — 2026 SLIM EDGE-TO-EDGE DOCK -----
   The bar is the page's bottom dock: full-bleed, thin, flush with the viewport
   edge, with only its top corners rounded.

   `--m-tabbar-h` publishes its exact height (safe-area included) to the rest of
   the stylesheets. Every floating bottom element — the menu's checkout CTA
   (.qrm-cartbar), the cart's action bar (.m-cart-bar), the product sticky bar
   (.pd-sticky), WhatsApp, back-to-top — parks on TOP of that height instead of
   guessing an offset, so nothing covers the tabs any more. The variable is set
   only on documents that actually render the bar, and consumers read it as
   `var(--m-tabbar-h, 0px)` so pages without one (the QR menu, which has its own
   chrome) keep their original placement. */
@media (max-width: 991.98px) {
    body:has(.m-bottom-tabs) {
        --m-tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px));
    }
    body:has(.m-bottom-tabs)::after {
        content: "";
        display: block;
        height: var(--m-tabbar-h);
    }
    .m-bottom-tabs {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        /* `--m-tabbar-h` is the bar's OUTER height — padding and border have to
           count inside it or every consumer's offset is short by 11px. */
        box-sizing: border-box;
        height: var(--m-tabbar-h, calc(58px + env(safe-area-inset-bottom, 0px)));
        background: rgba(255, 255, 255, .92);
        backdrop-filter: saturate(180%) blur(22px);
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        border: 0;
        border-top: 1px solid rgba(42, 31, 23, .08);
        border-radius: 20px 20px 0 0;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
        z-index: 60;
        box-shadow:
            0 -12px 30px -22px rgba(42, 31, 23, .55),
            inset 0 1px 0 rgba(255, 255, 255, .7);
    }
    .m-bottom-tabs a {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 0;
        padding: 0 2px;
        text-align: center;
        text-decoration: none;
        color: #7a7169;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .01em;
        border-radius: 14px;
        transition:
            color .3s cubic-bezier(.4, 0, .2, 1),
            transform .2s cubic-bezier(.4, 0, .2, 1);
    }
    /* Active marker: a hairline pill welded to the bar's top edge — it reads as
       "you are here" without adding any height. */
    .m-bottom-tabs a::before {
        content: "";
        position: absolute;
        inset-block-start: -5px;
        inset-inline: 0;
        width: 26px;
        height: 3px;
        margin-inline: auto;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, var(--kfc-red), var(--kfc-red-dark));
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }
    .m-bottom-tabs a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 26px;
        font-size: 15.5px;
        border-radius: 9px;
        background: transparent;
        color: inherit;
        transition:
            background .35s cubic-bezier(.4, 0, .2, 1),
            color .25s ease,
            box-shadow .35s ease;
    }
    .m-bottom-tabs a > span:not(.qty):not(.badge) {
        line-height: 1.1;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Arabic loses more at small sizes than Latin does. */
    html[dir="rtl"] .m-bottom-tabs a { font-size: 11px; letter-spacing: 0; }
    .m-bottom-tabs a:hover { color: var(--kfc-red); }
    .m-bottom-tabs a:active { transform: scale(.94); }
    .m-bottom-tabs a:focus-visible {
        outline: 2px solid var(--kfc-red);
        outline-offset: -2px;
    }

    .m-bottom-tabs a.active {
        color: var(--kfc-red);
    }
    .m-bottom-tabs a.active::before { transform: scaleX(1); }
    .m-bottom-tabs a.active i {
        background: linear-gradient(135deg, var(--kfc-red), var(--kfc-red-dark));
        color: #fff;
        box-shadow: 0 6px 14px -6px rgba(228, 0, 43, .55);
    }
    .m-bottom-tabs a.active > span:not(.qty):not(.badge) {
        font-weight: 800;
    }

    /* Cart badge — gold pop */
    .m-bottom-tabs a .qty,
    .m-bottom-tabs a .badge {
        position: absolute;
        top: -1px;
        inset-inline-end: calc(50% - 21px);
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        background: linear-gradient(135deg, #FFC72C, #FF8A1A);
        color: var(--kfc-black);
        font-size: 9.5px;
        font-weight: 800;
        line-height: 1;
        border-radius: 999px;
        border: 2px solid #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
        animation: m-tab-badge-pop .55s cubic-bezier(.34, 1.56, .64, 1);
    }
    @keyframes m-tab-badge-pop {
        0%   { transform: scale(0);   opacity: 0; }
        60%  { transform: scale(1.18); opacity: 1; }
        100% { transform: scale(1); }
    }

    /* Lift overlapping floating UI above the dock */
    .wsus__scroll_btn { bottom: calc(var(--m-tabbar-h, 0px) + 16px) !important; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .m-bottom-tabs a,
    .m-bottom-tabs a::before,
    .m-bottom-tabs a i,
    .m-bottom-tabs a .qty,
    .m-bottom-tabs a .badge {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 991.98px) and (prefers-color-scheme: dark) {
    .m-bottom-tabs {
        background: rgba(26, 22, 20, .92);
        border-top-color: rgba(255, 255, 255, .08);
        box-shadow:
            0 -12px 30px -20px rgba(0, 0, 0, .75),
            inset 0 1px 0 rgba(255, 255, 255, .06);
    }
    .m-bottom-tabs a { color: #b7ada1; }
    .m-bottom-tabs a .qty,
    .m-bottom-tabs a .badge { border-color: rgba(26, 22, 20, .9); }
}

/* The site's own dark switch (`body.nx-dark`) must dim the dock too — the
   media query above only covers readers whose OS is dark. */
@media (max-width: 991.98px) {
    body.nx-dark .m-bottom-tabs {
        background: rgba(26, 22, 20, .92);
        border-top-color: rgba(255, 255, 255, .08);
        box-shadow:
            0 -12px 30px -20px rgba(0, 0, 0, .75),
            inset 0 1px 0 rgba(255, 255, 255, .06);
    }
    body.nx-dark .m-bottom-tabs a { color: #b7ada1; }
    body.nx-dark .m-bottom-tabs a .qty,
    body.nx-dark .m-bottom-tabs a .badge { border-color: rgba(26, 22, 20, .9); }
}


/* ----- BOTTOM SHEET MODAL (KFC mobile add-to-cart) ----- */
@media (max-width: 767.98px) {
    .wsus__cart_popup .modal-dialog,
    #cartModal .modal-dialog {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.32,.72,0,1) !important;
    }
    .wsus__cart_popup .modal.show .modal-dialog,
    #cartModal.show .modal-dialog {
        transform: translateY(0);
    }
    .wsus__cart_popup .modal-content,
    #cartModal .modal-content {
        border-radius: 24px 24px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .wsus__cart_popup .modal-content::before,
    #cartModal .modal-content::before {
        content: "";
        position: sticky;
        top: 0;
        display: block;
        width: 48px;
        height: 5px;
        background: rgba(0,0,0,.18);
        border-radius: 999px;
        margin: 8px auto 0;
        z-index: 5;
    }
}


/* ----- ENERGETIC PRICE TAGS (KFC bold offer style) ----- */
.m-product__price-current {
    font-size: clamp(24px, 4vw, 36px) !important;
    font-weight: 900 !important;
    color: var(--kfc-red) !important;
    letter-spacing: -.02em;
}
.m-product__price-old {
    color: #aaa !important;
    text-decoration: line-through;
    font-weight: 600;
    font-size: 14px;
    margin-inline-start: 8px;
}


/* ----- HOT / SPICY chip on product cards ----- */
.wsus__menu_item .badge_hot,
.product_card_hot {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    background: var(--kfc-red);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
    box-shadow: 0 6px 14px -4px rgba(228, 0, 43, .55);
}


/* ----- SECTION HEADINGS (KFC bold style) ----- */
.wsus__section_heading h2 {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1 !important;
    font-size: clamp(28px, 4.5vw, 48px) !important;
}
.wsus__section_heading h4 {
    color: var(--kfc-red) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .15em !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}


/* ----- DESKTOP: Cart "Place Order" button — bigger, bolder ----- */
@media (min-width: 768px) {
    .wsus__cart_list_footer_button .common_btn {
        background: linear-gradient(135deg, var(--kfc-red), var(--kfc-red-dark)) !important;
        font-size: 17px !important;
        padding: 18px !important;
        box-shadow: 0 14px 30px -10px rgba(228, 0, 43, .55) !important;
    }
    .wsus__cart_list_footer_button .common_btn:hover {
        box-shadow: 0 20px 40px -12px rgba(228, 0, 43, .65) !important;
    }
}


/* ----- LOGIN PAGE — KFC-style minimal but bold ----- */
.wsus__login_area .common_btn {
    background: linear-gradient(135deg, var(--kfc-red), var(--kfc-red-dark)) !important;
    box-shadow: 0 14px 30px -10px rgba(228, 0, 43, .55) !important;
    font-size: 16px !important;
    padding: 18px !important;
}
.wsus__login_area .common_btn:hover {
    box-shadow: 0 20px 40px -12px rgba(228, 0, 43, .65) !important;
}
.wsus__login_area h2 {
    background: linear-gradient(135deg, var(--kfc-black), var(--kfc-red)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}


/* ----- DASHBOARD ACTIVE TAB — Black like KFC ----- */
.wsus__dashboard_menu .nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--kfc-black), #2a1f17) !important;
    color: #fff !important;
}


/* ----- SCROLL ANIMATIONS — KFC energetic feel ----- */
@keyframes m-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 18px -6px rgba(228, 0, 43, .55), 0 0 0 0 rgba(228, 0, 43, .4); }
    50% { transform: scale(1.05); box-shadow: 0 8px 18px -6px rgba(228, 0, 43, .65), 0 0 0 10px rgba(228, 0, 43, 0); }
}


/* ----- MOBILE: Floating cart button (KFC mobile pattern) ----- */
@media (max-width: 767.98px) {
    .m-floating-cart {
        position: fixed;
        bottom: 80px;
        inset-inline-end: 16px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--kfc-red), var(--kfc-red-dark));
        color: #fff;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        text-decoration: none;
        box-shadow: 0 14px 30px -8px rgba(228, 0, 43, .55);
        z-index: 55;
        animation: m-pulse 2s infinite;
    }
    .m-floating-cart .qty {
        position: absolute;
        top: -4px;
        inset-inline-end: -4px;
        background: var(--kfc-yellow);
        color: var(--kfc-black);
        min-width: 24px;
        height: 24px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        border: 2px solid #fff;
    }
}


/* ----- "OFFER" BANNER (KFC promotional) ----- */
.m-offer-banner {
    background: linear-gradient(135deg, var(--kfc-red), var(--kfc-red-dark));
    color: #fff;
    padding: 14px 20px;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
    position: relative;
    overflow: hidden;
}
.m-offer-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    animation: m-shimmer 3s infinite;
}
@keyframes m-shimmer {
    100% { left: 100%; }
}

/* ============================================================
   ★★★ END OF PART 1B: KFC-STYLE BOLD DESIGN ★★★
   Below this point: original mobile-first refinements
   ============================================================ */


/* ===========================================================
   00. BREAKPOINT TOKENS — single source of truth
   =========================================================== */
:root {
    --m-bp-xs: 380px;   /* tiny phones (iPhone SE 1st gen, ZTE) */
    --m-bp-sm: 575.98px;/* phones */
    --m-bp-md: 767.98px;/* large phones / small tablets */
    --m-bp-lg: 991.98px;/* tablet */
    --m-radius: 14px;
    --m-radius-lg: 18px;
    --m-radius-xl: 22px;
    --m-pad-x: clamp(14px, 4vw, 22px);
    --m-shadow-sm: 0 4px 14px -8px rgba(42, 31, 23, .18);
    --m-shadow-md: 0 10px 28px -14px rgba(42, 31, 23, .25);
    --m-shadow-lg: 0 18px 40px -18px rgba(42, 31, 23, .32);
    --m-brand: var(--theme-brand, #b8541a);
    --m-brand-2: #8a3f12;
    --m-bg-tint: #fbf8f3;
    --m-border: #ece4d6;
    --m-text: #2a1f17;
    --m-muted: #8c7a66;
}


/* ===========================================================
   01. GLOBAL FORM POLISH — works on every page
   ===========================================================
   • inputs ≥16px font-size on phones to stop iOS auto-zoom
   • 44×44 minimum touch target
   • consistent rounded corners + focus ring
*/
@media (max-width: 767.98px) {
    .wsus__login_imput input,
    .wsus__login_imput select,
    .wsus__login_imput textarea,
    .wsus__check_single_form input,
    .wsus__check_single_form select,
    .wsus__check_single_form textarea,
    .wsus__comment_imput_single input,
    .wsus__comment_imput_single textarea,
    .wsus__faq_form input,
    .wsus__faq_form textarea,
    .m-contact-form input,
    .m-contact-form textarea,
    .m-contact-form select,
    .reservation_input,
    #coupon_form input {
        font-size: 16px !important;        /* iOS zoom prevention */
        min-height: 48px;
        padding: 12px 16px !important;
        border-radius: var(--m-radius) !important;
    }
    textarea.reservation_input,
    .wsus__check_single_form textarea,
    .wsus__faq_form textarea,
    .m-contact-form textarea {
        min-height: 110px;
        line-height: 1.5;
    }
    /* Buttons inside forms always full-width on phones */
    .wsus__login_imput button[type="submit"],
    .wsus__faq_form button[type="submit"],
    .wsus__check_single_form button[type="submit"],
    .m-contact-form button[type="submit"],
    .wsus__reservation_form button[type="submit"] {
        width: 100%;
        min-height: 50px;
        font-size: 15px !important;
        font-weight: 800;
        letter-spacing: .04em;
    }
}


/* ===========================================================
   02. BREADCRUMB HERO — compact on phones, big focus on title
   ===========================================================
   Used on cart, checkout, payment, login, register, dashboard,
   product detail, contact, about, faq, blog, etc.
*/
@media (max-width: 767.98px) {
    .wsus__breadcrumb {
        padding-block: 70px !important;
        background-position: center !important;
        background-size: cover !important;
    }
    .wsus__breadcrumb_overlay {
        padding: 30px 0 !important;
    }
    /* Force centering on mobile regardless of which legacy CSS file
       won the cascade. style.css positions the pill absolutely with
       left:50% and translateX(-50%), the modern CSS uses flex-column
       on the wrapper — the two recipes fight on small screens and
       leave the title hugging the start edge in RTL.

       This block hard-overrides both: flex-column centred layout on
       the wrapper, static-position centred ul, and explicit
       text-align:center on the heading. !important is intentional —
       legacy desktop rules without it would otherwise override. */
    /* The wrapper itself must be a full-width centred column. Forcing
       width:100% + margin-inline:auto + float:none kills any residual
       shrink-wrap or legacy float/absolute offset that leaves it hugging
       the start (right) edge in RTL. The `.container` parent re-states the
       reset too so a stray Bootstrap/legacy alignment can't drift it. */
    .wsus__breadcrumb .container {
        text-align: center !important;
    }
    .wsus__breadcrumb_text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        inset-inline: auto !important;
        padding: 0 12px;
        position: relative !important;
    }
    .wsus__breadcrumb_text h1 {
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.18 !important;
        margin: 0 0 12px !important;
        font-weight: 800;
        letter-spacing: -.01em;
        text-align: center !important;
        width: 100%;
    }
    .wsus__breadcrumb_text ul {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        margin: 0 auto !important;
        margin-inline: auto !important;
        left: auto !important; right: auto !important;
        bottom: auto !important;
        float: none !important;
        justify-content: center !important;
        align-self: center !important;
        flex-wrap: wrap;
        gap: 4px 8px;
        font-size: 12.5px !important;
        min-width: 0 !important;
    }
    .wsus__breadcrumb_text ul li,
    .wsus__breadcrumb_text ul li a {
        font-size: 12.5px !important;
    }
}
@media (max-width: 380px) {
    .wsus__breadcrumb { padding-block: 56px !important; }
    .wsus__breadcrumb_text h1 { font-size: 22px !important; }
}


/* ============================================================
   ★★★ INNER-PAGE HERO — REFINED & CENTERED (≥ 768px) ★★★
   Used by: About, Contact, Branches, FAQ, Blog, Product detail
   and any other page that renders `.wsus__breadcrumb`.
   ------------------------------------------------------------
   Goals:
   - Compact, balanced height (no full-viewport blowouts when a
     CMS-uploaded background image is unusually tall).
   - Center-locked text + breadcrumb pill, immune to RTL drift
     or stray inline alignments from legacy templates.
   - Subtle staged entrance animation (title rises, pill fades).
   - Refined warm-bronze gradient overlay + dot texture.
   ============================================================ */
@media (min-width: 768px) {
    .wsus__breadcrumb {
        min-height: 280px !important;
        max-height: 360px;
        height: clamp(280px, 32vw, 360px);
        display: flex !important;
        align-items: center !important;
        background-size: cover !important;
        background-position: center !important;
        background-attachment: scroll;
    }
    .wsus__breadcrumb_overlay {
        padding: 0 !important;
        width: 100%;
    }
    .wsus__breadcrumb_text {
        text-align: center !important;
        margin-inline: auto !important;
        max-width: 820px;
        padding: 0 20px;
    }

    /* Decorative gradient line above the title (already defined upstream
       — re-state here to lock width and animate it in) */
    .wsus__breadcrumb_text::before {
        width: 64px !important;
        height: 3px !important;
        margin: 0 auto 22px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg,
            transparent,
            var(--m-brand, #b8541a),
            var(--m-brand-dark, #8a3f12),
            transparent
        ) !important;
        opacity: 0;
        transform: scaleX(.4);
        animation: bc-line-in .7s cubic-bezier(.4,0,.2,1) .05s forwards;
    }

    .wsus__breadcrumb_text h1 {
        font-size: clamp(2rem, 3.6vw, 3.2rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -.015em;
        margin: 0 0 22px !important;
        text-align: center !important;
        opacity: 0;
        transform: translateY(14px);
        animation: bc-rise-in .65s cubic-bezier(.4,0,.2,1) .12s forwards;
    }

    /* Glass pill — animate in after the title settles */
    .wsus__breadcrumb_text ul {
        margin: 0 auto !important;
        opacity: 0;
        transform: translateY(8px);
        animation: bc-rise-in .55s cubic-bezier(.4,0,.2,1) .25s forwards;
    }

    /* Vertical tail accent below the pill — already defined upstream;
       lock its position so it doesn't get pushed by margins. */
    .wsus__breadcrumb_text::after {
        margin: 22px auto 0 !important;
        opacity: 0;
        animation: bc-fade-in .5s ease .4s forwards;
    }

    @keyframes bc-line-in {
        to { opacity: 1; transform: scaleX(1); }
    }
    @keyframes bc-rise-in {
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes bc-fade-in {
        to { opacity: 1; }
    }

    /* Reduced-motion: skip the animation, render final state immediately */
    @media (prefers-reduced-motion: reduce) {
        .wsus__breadcrumb_text::before,
        .wsus__breadcrumb_text h1,
        .wsus__breadcrumb_text ul,
        .wsus__breadcrumb_text::after {
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
        }
    }
}

/* Tablet — slightly tighter than full desktop */
@media (min-width: 768px) and (max-width: 991.98px) {
    .wsus__breadcrumb {
        min-height: 240px !important;
        height: clamp(240px, 32vw, 300px);
    }
    .wsus__breadcrumb_text h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    }
}


/* ===========================================================
   03. CART — table flips to cards on phones
   ===========================================================
   The desktop cart uses an HTML table; on phones we hide the
   header row and turn each <tr> into a card with explicit data
   labels via :before pseudo-elements.
*/
@media (max-width: 767.98px) {
    .wsus__cart_view {
        padding-block: 26px 18px !important;
    }
    .wsus__cart_list {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .wsus__cart_list .table-responsive {
        overflow: visible !important;
        border: 0 !important;
    }
    .wsus__cart_list table,
    .wsus__cart_list tbody {
        display: block;
        width: 100%;
    }

    /* Hide the header row entirely (we replace it with per-cell labels) */
    .wsus__cart_list table tr:first-child {
        display: none;
    }

    /* Each row becomes a card */
    .wsus__cart_list table tr {
        display: grid;
        grid-template-columns: 92px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 14px;
        row-gap: 8px;
        padding: 14px;
        margin: 0 0 14px 0;
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        box-shadow: var(--m-shadow-sm);
        position: relative;
    }

    /* 1. Image in left column, spans 3 rows */
    .wsus__cart_list .wsus__pro_img {
        grid-column: 1 / 2;
        grid-row: 1 / 4;
        width: 92px !important;
        height: 92px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px;
        overflow: hidden;
        background: #faf6ef;
    }
    .wsus__cart_list .wsus__pro_img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    /* 2. Name & options in right column, top */
    .wsus__cart_list .wsus__pro_name {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        padding: 0 !important;
        border: 0 !important;
    }
    .wsus__cart_list .wsus__pro_name a {
        font-size: 15px !important;
        font-weight: 700;
        color: var(--m-text);
        line-height: 1.3;
        display: block;
        margin-bottom: 4px;
        text-decoration: none;
    }
    .wsus__cart_list .wsus__pro_name span,
    .wsus__cart_list .wsus__pro_name p {
        font-size: 12.5px;
        color: var(--m-muted);
        line-height: 1.45;
        margin: 2px 0 !important;
        display: block;
    }

    /* 3. Quantity stepper in right column, middle */
    .wsus__cart_list .wsus__pro_select {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        padding: 0 !important;
        border: 0 !important;
    }
    .wsus__cart_list .quentity_btn {
        display: inline-flex !important;
        align-items: center;
        background: var(--m-bg-tint);
        border: 1px solid var(--m-border);
        border-radius: 999px;
        padding: 4px;
        gap: 0;
    }
    .wsus__cart_list .quentity_btn button {
        width: 36px;
        height: 36px;
        border-radius: 50% !important;
        background: #fff !important;
        border: 0 !important;
        color: var(--m-text) !important;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        box-shadow: var(--m-shadow-sm);
        transition: background .2s ease, color .2s ease;
    }
    .wsus__cart_list .quentity_btn button:hover,
    .wsus__cart_list .quentity_btn button:active {
        background: var(--m-brand) !important;
        color: #fff !important;
    }
    .wsus__cart_list .quentity_btn .quantity {
        width: 44px;
        height: 36px;
        text-align: center;
        background: transparent !important;
        border: 0 !important;
        font-weight: 800;
        font-size: 14px;
        color: var(--m-text);
    }

    /* 4. Price + total + delete — bottom row spans both columns */
    .wsus__cart_list .wsus__pro_status,
    .wsus__cart_list .wsus__pro_tk,
    .wsus__cart_list .wsus__pro_icon {
        grid-row: 3 / 4;
        padding: 0 !important;
        border: 0 !important;
        display: flex !important;
        align-items: center;
    }
    .wsus__cart_list .wsus__pro_status {
        grid-column: 2 / 3;
        font-size: 12px;
        color: var(--m-muted);
    }
    .wsus__cart_list .wsus__pro_status::before {
        content: attr(data-label);
    }
    .wsus__cart_list .wsus__pro_status h6 {
        font-size: 13px !important;
        color: var(--m-muted) !important;
        font-weight: 600 !important;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }
    .wsus__cart_list .wsus__pro_tk {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        justify-content: flex-start;
        padding-top: 10px !important;
        margin-top: 8px;
        border-top: 1px dashed var(--m-border) !important;
    }
    .wsus__cart_list .wsus__pro_tk h6 {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--m-brand) !important;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .wsus__cart_list table tr {
        grid-template-rows: auto auto auto auto;
    }

    /* Delete button as a floating chip */
    .wsus__cart_list .wsus__pro_icon {
        position: absolute;
        top: 8px;
        inset-inline-end: 8px;
        grid-row: auto;
        grid-column: auto;
    }
    .wsus__cart_list .wsus__pro_icon a.remove_item {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff5f3;
        color: #dc3545;
        border-radius: 50%;
        border: 1px solid #fde2dd;
        font-size: 12px;
        transition: background .2s ease, color .2s ease;
    }
    .wsus__cart_list .wsus__pro_icon a.remove_item:hover {
        background: #dc3545;
        color: #fff;
        border-color: #dc3545;
    }
    .wsus__cart_list .wsus__pro_icon .clear_all {
        font-size: 11px;
        color: #dc3545;
        text-decoration: underline;
    }

    /* Sidebar summary card — sticky on bottom for easy CTA reach */
    .wsus__cart_list_footer_button {
        position: relative;
        margin-top: 6px;
        padding: 18px !important;
        background: #fff !important;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius-lg) !important;
        box-shadow: var(--m-shadow-md);
    }
    .wsus__cart_list_footer_button .grand_total h6 {
        font-size: 15px !important;
        font-weight: 800;
        margin-bottom: 14px;
        color: var(--m-text);
    }
    .wsus__cart_list_footer_button .grand_total p {
        font-size: 14px !important;
        margin: 6px 0 !important;
        color: var(--m-muted);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wsus__cart_list_footer_button .grand_total p span {
        color: var(--m-text);
        font-weight: 600;
    }
    .wsus__cart_list_footer_button .grand_total p.total {
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--m-border);
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--m-text) !important;
    }
    .wsus__cart_list_footer_button .grand_total p.total span {
        font-weight: 800 !important;
    }
    .wsus__cart_list_footer_button #coupon_form {
        display: flex;
        gap: 8px;
        margin: 14px 0;
    }
    .wsus__cart_list_footer_button #coupon_form input {
        flex: 1;
        font-size: 14px !important;
        height: 46px;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        border: 1px solid var(--m-border) !important;
        background: #fafaf7;
    }
    .wsus__cart_list_footer_button #coupon_form button {
        flex: 0 0 auto;
        padding: 0 18px;
        height: 46px;
        font-size: 13px;
        font-weight: 800;
        border-radius: 12px !important;
        border: 0 !important;
        background: var(--m-text) !important;
        color: #fff !important;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .wsus__cart_list_footer_button .common_btn {
        width: 100%;
        margin-top: 4px;
        padding: 16px !important;
        font-size: 15px !important;
        font-weight: 800;
        text-align: center;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* Empty cart card */
    .m-empty-state {
        text-align: center;
        padding: 40px 20px !important;
        background: #fff;
        border-radius: var(--m-radius-lg);
        border: 1px solid var(--m-border);
        margin: 18px 0;
    }
    .m-empty-state i {
        font-size: 56px !important;
        color: var(--m-brand);
        margin-bottom: 14px;
        opacity: .85;
    }
    .m-empty-state h3 {
        font-size: 18px !important;
        font-weight: 800;
        margin-bottom: 8px;
    }
    .m-empty-state p {
        font-size: 14px !important;
        color: var(--m-muted);
        margin-bottom: 18px;
    }
    .m-empty-state .common_btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px !important;
        font-size: 14px !important;
    }
}

/* Tiny phones — single image on top (vertical card) */
@media (max-width: 380px) {
    .wsus__cart_list table tr {
        grid-template-columns: 78px 1fr !important;
    }
    .wsus__cart_list .wsus__pro_img {
        width: 78px !important;
        height: 78px !important;
    }
    .wsus__cart_list .wsus__pro_name a { font-size: 14px !important; }
}


/* ===========================================================
   04. CHECKOUT — address tiles + tidy form sections
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__cart_view.mt_125 { margin-top: 32px !important; }

    .wsus__checkout_form .wsus__check_form {
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        padding: 18px !important;
        box-shadow: var(--m-shadow-sm);
        margin-bottom: 18px;
    }
    .wsus__checkout_form h5 {
        font-size: 16px !important;
        font-weight: 800;
        margin-bottom: 14px !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .wsus__checkout_form h5 a {
        font-size: 12px !important;
        background: var(--m-brand);
        color: #fff !important;
        padding: 6px 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        text-decoration: none;
    }

    /* Address tile cards */
    .wsus__checkout_single_address {
        background: #fff;
        border: 2px solid var(--m-border);
        border-radius: var(--m-radius);
        padding: 14px 14px 14px 14px !important;
        transition: border-color .2s ease, background .2s ease;
        position: relative;
        margin-bottom: 12px;
    }
    .wsus__checkout_single_address:has(.address_id:checked) {
        border-color: var(--m-brand);
        background: #fff7ef;
    }
    .wsus__checkout_single_address .form-check-input {
        position: absolute;
        top: 14px;
        inset-inline-end: 14px;
        margin: 0 !important;
        width: 22px;
        height: 22px;
    }
    .wsus__checkout_single_address .form-check-label {
        padding-inline-end: 32px !important;
        display: block;
        font-size: 13px !important;
        line-height: 1.6;
        cursor: pointer;
    }
    .wsus__checkout_single_address .icon {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px !important;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--m-brand);
        margin-bottom: 8px;
    }
    .wsus__checkout_single_address .icon i {
        font-size: 14px !important;
    }
    .wsus__checkout_single_address .address {
        display: block !important;
        font-size: 12.5px !important;
        color: var(--m-muted) !important;
        margin: 2px 0 !important;
        line-height: 1.5;
    }

    /* Form fields stack */
    .wsus__check_single_form {
        margin-bottom: 12px !important;
    }
    .wsus__check_single_form input,
    .wsus__check_single_form textarea,
    .wsus__check_single_form select {
        width: 100%;
        background: #fafaf7 !important;
        border: 1px solid var(--m-border) !important;
        color: var(--m-text) !important;
    }
    .wsus__check_single_form input:focus,
    .wsus__check_single_form textarea:focus,
    .wsus__check_single_form select:focus {
        border-color: var(--m-brand) !important;
        background: #fff !important;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(184,84,26,.12);
    }

    /* Address modal becomes near full-screen on phones */
    #address_modal .modal-dialog {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }
    #address_modal .modal-content {
        border-radius: var(--m-radius-lg);
        border: 0;
        max-height: calc(100vh - 16px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #address_modal .modal-header {
        padding: 14px 16px;
        background: linear-gradient(135deg, var(--m-brand), var(--m-brand-2));
        color: #fff;
    }
    #address_modal .modal-header .modal-title {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 800;
    }
    #address_modal .modal-header .btn-close {
        filter: invert(1) brightness(2);
        opacity: .9;
    }
    #address_modal .modal-body {
        padding: 18px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Home / Office radio choices */
    .wsus__check_single_form.check_area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .wsus__check_single_form.check_area .form-check {
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
    }
    .wsus__check_single_form.check_area .form-check-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .wsus__check_single_form.check_area .form-check-label {
        display: block;
        padding: 12px;
        text-align: center;
        background: #fafaf7;
        border: 2px solid var(--m-border);
        border-radius: var(--m-radius);
        font-size: 13px;
        font-weight: 700;
        text-transform: capitalize;
        color: var(--m-text);
        cursor: pointer;
        transition: all .2s ease;
    }
    .wsus__check_single_form.check_area .form-check-input:checked + .form-check-label {
        background: var(--m-brand);
        color: #fff;
        border-color: var(--m-brand);
        box-shadow: 0 8px 18px -8px rgba(184,84,26,.55);
    }

    /* Sticky place-order summary on the right column on tablets */
    .wsus__checkout_form ~ .col-lg-4 #sticky_sidebar,
    .wsus__cart_view #sticky_sidebar {
        position: relative !important;
        top: auto !important;
    }
}


/* ===========================================================
   05. PAYMENT — bigger tiles, modal polish
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__payment_page {
        margin-top: 30px !important;
        padding-bottom: 20px !important;
    }
    .wsus__payment_area {
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        padding: 14px !important;
        box-shadow: var(--m-shadow-sm);
        margin-bottom: 18px;
    }
    .wsus__payment_area .row {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }
    .wsus__single_payment {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 2px solid var(--m-border);
        border-radius: var(--m-radius);
        padding: 12px;
        min-height: 86px;
        transition: all .2s ease;
        position: relative;
    }
    .wsus__single_payment:hover,
    .wsus__single_payment:focus,
    .wsus__single_payment.active {
        border-color: var(--m-brand);
        background: #fff7ef;
        transform: translateY(-2px);
        box-shadow: var(--m-shadow-sm);
    }
    .wsus__single_payment img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 60px;
        object-fit: contain;
    }

    /* Stripe / card-form modal */
    .wsus__payment_modal .modal-dialog,
    #stripePaymentModal .modal-dialog {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }
    .wsus__payment_modal .modal-content,
    #stripePaymentModal .modal-content {
        border-radius: var(--m-radius-lg);
        border: 0;
    }
    .wsus__payment_modal .modal-body input,
    #stripePaymentModal .modal-body input {
        font-size: 16px !important;
        height: 48px;
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }
}

/* Tiny phones — 1 payment per row for clarity */
@media (max-width: 380px) {
    .wsus__payment_area > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .wsus__single_payment {
        min-height: 78px;
    }
}


/* ===========================================================
   06. LOGIN / REGISTER / FORGOT / RESET — premium card form
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__signin {
        background-position: center !important;
        background-size: cover !important;
        background-attachment: scroll !important;
    }
    .wsus__signin_overlay {
        padding: 40px 0 !important;
    }
    .wsus__signin_overlay .container > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 14px;
    }

    .wsus__login_area {
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: var(--m-radius-xl) !important;
        padding: 28px 22px !important;
        box-shadow: var(--m-shadow-lg);
        border: 1px solid rgba(255,255,255,.7);
    }
    .wsus__login_area h2 {
        font-size: clamp(22px, 6vw, 28px) !important;
        font-weight: 800;
        margin-bottom: 6px !important;
        color: var(--m-text);
    }
    .wsus__login_area > p {
        font-size: 14px !important;
        color: var(--m-muted);
        margin-bottom: 20px !important;
    }
    .wsus__login_imput {
        margin-bottom: 14px !important;
    }
    .wsus__login_imput label {
        font-size: 13px !important;
        font-weight: 700;
        color: var(--m-text);
        margin-bottom: 6px !important;
        display: block;
    }
    .wsus__login_imput input {
        width: 100%;
        background: #fafaf7 !important;
        border: 1px solid var(--m-border) !important;
        color: var(--m-text) !important;
    }
    .wsus__login_imput input:focus {
        border-color: var(--m-brand) !important;
        background: #fff !important;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(184,84,26,.12);
    }

    /* Remember-me row */
    .wsus__login_check_area {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 16px !important;
    }
    .wsus__login_check_area .form-check {
        margin: 0 !important;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .wsus__login_check_area .form-check-input {
        width: 18px;
        height: 18px;
        margin: 0 !important;
        cursor: pointer;
    }
    .wsus__login_check_area .form-check-label {
        font-size: 13px !important;
        color: var(--m-text);
        cursor: pointer;
        margin: 0;
    }
    .wsus__login_check_area > a {
        font-size: 13px !important;
        font-weight: 600;
        color: var(--m-brand);
        text-decoration: none;
    }
    .wsus__login_area .common_btn {
        width: 100%;
        padding: 15px !important;
        font-size: 15px !important;
        font-weight: 800;
        letter-spacing: .04em;
    }
    .wsus__login_area .create_account {
        text-align: center;
        font-size: 13.5px !important;
        margin-top: 18px !important;
        color: var(--m-muted);
    }
    .wsus__login_area .create_account a {
        color: var(--m-brand);
        font-weight: 700;
    }

    /* reCAPTCHA — center it */
    .wsus__login_area .g-recaptcha,
    .wsus__login_area .g-recaptcha > div,
    .wsus__faq_form .g-recaptcha,
    .wsus__faq_form .g-recaptcha > div {
        margin: 0 auto !important;
        transform: scale(.92);
        transform-origin: center;
    }
}

@media (max-width: 380px) {
    .wsus__login_area { padding: 22px 18px !important; }
    .wsus__login_area .g-recaptcha,
    .wsus__login_area .g-recaptcha > div {
        transform: scale(.82);
    }
}


/* ===========================================================
   07. USER DASHBOARD — sidebar becomes a horizontal pill bar
   ===========================================================
   On desktop the dashboard is a 2-col layout (sidebar + content).
   On phones we collapse the sidebar to a horizontal scrollable
   tab strip (Jahez/Apple style) so the user can switch tabs
   without endless scrolling.
*/
@media (max-width: 991.98px) {
    .wsus__dashboard {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
    .wsus__dashboard_area > .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 12px;
    }
    .wsus__dashboard_menu {
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        box-shadow: var(--m-shadow-sm);
        padding: 0 !important;
        overflow: hidden;
        margin: 0 12px 14px;
    }

    /* Profile header (avatar + name) */
    .wsus__dashboard_menu .dasboard_header {
        background: linear-gradient(135deg, var(--m-brand), var(--m-brand-2));
        padding: 22px 18px !important;
        text-align: center;
        position: relative;
    }
    .wsus__dashboard_menu .dasboard_header::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
        background-size: 16px 16px;
        opacity: .6;
        pointer-events: none;
    }
    .wsus__dashboard_menu .dasboard_header_img {
        width: 84px !important;
        height: 84px !important;
        margin: 0 auto 10px !important;
        position: relative;
        border-radius: 50%;
        overflow: visible !important;
        box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
    }
    .wsus__dashboard_menu .dasboard_header_img img {
        width: 84px !important;
        height: 84px !important;
        border-radius: 50% !important;
        object-fit: cover;
        border: 3px solid #fff;
        background: #fff;
    }
    .wsus__dashboard_menu .dasboard_header_img label {
        position: absolute;
        bottom: -2px;
        inset-inline-end: -2px;
        width: 30px;
        height: 30px;
        background: #fff;
        color: var(--m-brand);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,.15);
        z-index: 2;
    }
    .wsus__dashboard_menu .dasboard_header h2 {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 800;
        margin: 0 !important;
        position: relative;
        z-index: 1;
    }

    /* Nav pills → horizontal swipe tab strip */
    .wsus__dashboard_menu .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 12px;
        background: var(--m-bg-tint);
        border-bottom: 1px solid var(--m-border);
    }
    .wsus__dashboard_menu .nav-pills::-webkit-scrollbar { display: none; }
    .wsus__dashboard_menu .nav-pills .nav-link {
        flex: 0 0 auto;
        scroll-snap-align: start;
        background: #fff !important;
        color: var(--m-text) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 10px 16px !important;
        border-radius: 999px !important;
        border: 1px solid var(--m-border);
        white-space: nowrap;
        display: inline-flex !important;
        align-items: center;
        gap: 7px;
        text-align: center;
        margin: 0 !important;
        min-height: 40px;
    }
    .wsus__dashboard_menu .nav-pills .nav-link span {
        margin: 0 !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        font-size: 13px !important;
        color: inherit !important;
        line-height: 1;
    }
    .wsus__dashboard_menu .nav-pills .nav-link span i {
        font-size: 13px;
    }
    .wsus__dashboard_menu .nav-pills .nav-link.active {
        background: var(--m-brand) !important;
        color: #fff !important;
        border-color: var(--m-brand) !important;
        box-shadow: 0 8px 18px -8px rgba(184,84,26,.55);
    }
    .wsus__dashboard_menu .nav-pills .nav-link.active span,
    .wsus__dashboard_menu .nav-pills .nav-link.active span i {
        color: #fff !important;
    }

    /* Content panel */
    .wsus__dashboard_content {
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        padding: 18px !important;
        box-shadow: var(--m-shadow-sm);
        margin: 0 12px;
    }
    .wsus_dashboard_body h3 {
        font-size: 18px !important;
        font-weight: 800;
        margin-bottom: 16px !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .wsus_dashboard_body h3 a.dash_add_new_address,
    .wsus_dash_personal_info h4 a.dash_info_btn {
        font-size: 12px !important;
        background: var(--m-bg-tint);
        padding: 6px 12px;
        border-radius: 999px;
        color: var(--m-brand);
        cursor: pointer;
        margin-inline-start: auto;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid var(--m-border);
    }

    /* Overview stat cards */
    .wsus__dsahboard_overview > .row {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }
    .wsus__dsahboard_overview > .row > [class*="col-"] {
        flex: 0 0 33.33% !important;
        max-width: 33.33% !important;
    }
    .wsus__dsahboard_overview_item {
        padding: 14px 8px !important;
        text-align: center;
        border-radius: var(--m-radius);
    }
    .wsus__dsahboard_overview_item .icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
        margin: 0 auto 6px !important;
    }
    .wsus__dsahboard_overview_item h4 {
        font-size: 12px !important;
        font-weight: 700;
        margin: 0 !important;
        line-height: 1.3;
    }
    .wsus__dsahboard_overview_item h4 span {
        display: block;
        font-size: 18px !important;
        font-weight: 800;
        color: var(--m-brand);
        margin-top: 2px;
    }

    /* Personal info block */
    .wsus_dash_personal_info {
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid var(--m-border);
    }
    .wsus_dash_personal_info h4 {
        font-size: 15px !important;
        font-weight: 800;
        margin-bottom: 12px !important;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .wsus_dash_personal_info .personal_info_text p {
        font-size: 13.5px !important;
        margin: 6px 0 !important;
        line-height: 1.55;
        word-break: break-word;
    }
    .wsus_dash_personal_info .personal_info_text p span {
        font-weight: 800;
        color: var(--m-text);
        margin-inline-end: 6px;
    }

    /* Edit form fields */
    .wsus__comment_imput_single {
        margin-bottom: 12px !important;
    }
    .wsus__comment_imput_single label {
        font-size: 13px !important;
        font-weight: 700;
        margin-bottom: 4px !important;
        display: block;
    }
    .wsus__comment_imput_single input,
    .wsus__comment_imput_single textarea {
        width: 100%;
        background: #fafaf7 !important;
        border: 1px solid var(--m-border) !important;
    }

    /* Order/Wishlist/Reviews — table → cards */
    .wsus__dashboard_content .table-responsive {
        overflow-x: visible !important;
        background: transparent !important;
    }
    .wsus__dashboard_content .table-responsive table,
    .wsus__dashboard_content .table-responsive thead,
    .wsus__dashboard_content .table-responsive tbody {
        display: block;
    }
    .wsus__dashboard_content .table-responsive thead {
        display: none;
    }
    .wsus__dashboard_content .table-responsive tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        padding: 14px;
        margin-bottom: 12px;
        background: var(--m-bg-tint);
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius);
        position: relative;
    }
    .wsus__dashboard_content .table-responsive td {
        font-size: 13px !important;
        padding: 0 !important;
        border: 0 !important;
        vertical-align: middle;
        word-break: break-word;
    }
    .wsus__dashboard_content .table-responsive td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--m-muted);
        display: block;
    }
}

/* Tiny phones — overview cards stack 1-up */
@media (max-width: 380px) {
    .wsus__dsahboard_overview > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .wsus__dashboard_menu .nav-pills .nav-link {
        font-size: 12px !important;
        padding: 9px 12px !important;
    }
}


/* ===========================================================
   08. ORDER SHOW (track + invoice)
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__track_order {
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        padding: 16px 12px !important;
        margin-bottom: 16px;
        box-shadow: var(--m-shadow-sm);
        overflow: hidden;
    }
    .wsus__track_order ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
    }
    .wsus__track_order ul::before {
        content: "";
        position: absolute;
        top: 12px;
        inset-inline-start: 6%;
        inset-inline-end: 6%;
        height: 2px;
        background: var(--m-border);
        z-index: 0;
    }
    .wsus__track_order ul li {
        flex: 1 1 0;
        min-width: 0;
        position: relative;
        padding: 30px 2px 0 !important;
        font-size: 10.5px !important;
        text-align: center;
        line-height: 1.25;
        color: var(--m-muted);
        font-weight: 600;
        z-index: 1;
        word-break: break-word;
    }
    .wsus__track_order ul li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--m-border);
        z-index: 2;
    }
    .wsus__track_order ul li.active {
        color: var(--m-brand);
    }
    .wsus__track_order ul li.active::before {
        background: var(--m-brand);
        border-color: var(--m-brand);
    }
    .wsus__track_order ul li.active::after {
        content: "\f00c";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: #fff;
        z-index: 3;
    }

    .delivary_time {
        background: #fff7ef;
        border: 1px dashed #e7c8a6;
        color: var(--m-brand);
        border-radius: var(--m-radius);
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 700;
        text-align: center;
        margin: 0 0 16px !important;
    }

    /* Invoice header — stacked 2 columns become 1 */
    .wsus__invoice_header {
        flex-direction: column !important;
        gap: 14px;
        padding: 14px !important;
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        margin-bottom: 14px;
    }
    .wsus__invoice_header .header_address {
        width: 100%;
    }
    .wsus__invoice_header .header_address h4 {
        font-size: 14px !important;
        font-weight: 800;
        margin-bottom: 6px;
    }
    .wsus__invoice_header .header_address p {
        font-size: 13px !important;
        margin: 4px 0 !important;
        line-height: 1.5;
        word-break: break-word;
    }

    /* Invoice table — flatten to cards */
    .wsus__invoice_body {
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        padding: 14px !important;
    }
    .wsus__invoice_body .table-responsive {
        overflow: visible !important;
        border: 0;
    }
    .wsus__invoice_body table,
    .wsus__invoice_body table tbody,
    .wsus__invoice_body table tfoot {
        display: block;
        width: 100%;
    }
    .wsus__invoice_body table tbody tr:first-child {
        display: none;                         /* header row */
    }
    .wsus__invoice_body table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 4px 10px;
        padding: 10px 0;
        border-bottom: 1px dashed var(--m-border) !important;
    }
    .wsus__invoice_body table tbody td {
        padding: 0 !important;
        border: 0 !important;
        font-size: 13px !important;
        word-break: break-word;
    }
    .wsus__invoice_body table tbody td.sl_no {
        grid-column: 1; grid-row: 1;
        font-weight: 800;
        color: var(--m-muted);
    }
    .wsus__invoice_body table tbody td.package {
        grid-column: 2; grid-row: 1 / 3;
    }
    .wsus__invoice_body table tbody td.package p {
        font-size: 14px !important;
        font-weight: 700;
        margin: 0 !important;
    }
    .wsus__invoice_body table tbody td.package .size,
    .wsus__invoice_body table tbody td.package .coca_cola {
        font-size: 12px;
        color: var(--m-muted);
        display: block;
        margin: 2px 0;
    }
    .wsus__invoice_body table tbody td.price {
        grid-column: 3; grid-row: 1;
        text-align: end;
        font-size: 13px !important;
        color: var(--m-muted);
    }
    .wsus__invoice_body table tbody td.qnty {
        grid-column: 1; grid-row: 2;
        font-size: 12px !important;
        color: var(--m-muted);
    }
    .wsus__invoice_body table tbody td.qnty::before {
        content: "× ";
        font-weight: 700;
    }
    .wsus__invoice_body table tbody td.total {
        grid-column: 3; grid-row: 2;
        text-align: end;
        font-weight: 800;
        color: var(--m-brand);
        font-size: 14px !important;
    }

    /* Footer totals stack */
    .wsus__invoice_body table tfoot tr {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px dashed var(--m-border) !important;
    }
    .wsus__invoice_body table tfoot tr:last-child {
        border: 0 !important;
        margin-top: 6px;
        padding-top: 12px;
        border-top: 2px solid var(--m-text) !important;
    }
    .wsus__invoice_body table tfoot td {
        padding: 0 !important;
        border: 0 !important;
        font-size: 13.5px !important;
    }
    .wsus__invoice_body table tfoot td[colspan="3"] {
        flex: 1;
        text-align: start;
    }
    .wsus__invoice_body table tfoot td.qnty { display: none; }
    .wsus__invoice_body table tfoot td.total {
        text-align: end;
        font-weight: 800;
    }
}


/* ===========================================================
   09. FAQ
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__faq {
        padding: 30px 0 50px !important;
    }
    .wsus__faq_area .accordion-item {
        background: #fff;
        border: 1px solid var(--m-border) !important;
        border-radius: var(--m-radius-lg) !important;
        margin-bottom: 10px !important;
        overflow: hidden;
        box-shadow: var(--m-shadow-sm);
    }
    .wsus__faq_area .accordion-button {
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 14px 16px !important;
        line-height: 1.4 !important;
        color: var(--m-text);
        background: #fff !important;
        border-radius: var(--m-radius-lg) !important;
        gap: 10px;
    }
    .wsus__faq_area .accordion-button:not(.collapsed) {
        background: #fff7ef !important;
        color: var(--m-brand) !important;
        box-shadow: none !important;
    }
    .wsus__faq_area .accordion-body {
        font-size: 13.5px !important;
        line-height: 1.65 !important;
        padding: 0 16px 16px !important;
        color: var(--m-muted);
    }

    /* FAQ contact form */
    .wsus__faq_form {
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-lg);
        padding: 18px !important;
        margin-top: 24px;
        box-shadow: var(--m-shadow-sm);
        position: relative !important;
        top: auto !important;
    }
    .wsus__faq_form h3 {
        font-size: 18px !important;
        font-weight: 800;
        margin-bottom: 14px !important;
    }
    .wsus__faq_form input,
    .wsus__faq_form textarea {
        width: 100%;
        margin-bottom: 12px !important;
        background: #fafaf7 !important;
        border: 1px solid var(--m-border) !important;
        color: var(--m-text);
    }
    .wsus__faq_form button[type="submit"] {
        width: 100%;
        font-size: 15px !important;
        padding: 14px !important;
    }
}


/* ===========================================================
   10. PRODUCT DETAIL — single column on phones
   =========================================================== */
@media (max-width: 767.98px) {
    .m-product {
        padding: 18px 0 24px !important;
    }
    .m-product__grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .m-product__gallery {
        order: 1;
    }
    .m-product__info {
        order: 2;
    }
    .m-product__title {
        font-size: clamp(20px, 5.5vw, 26px) !important;
        line-height: 1.25 !important;
        margin: 6px 0 8px !important;
    }
    .m-product__crumb {
        font-size: 11.5px !important;
        padding: 4px 10px !important;
    }
    .m-product__rating {
        font-size: 13px !important;
    }
    .m-product__rating .count {
        font-size: 12px;
    }
    .m-product__chips {
        gap: 6px !important;
    }
    .m-product__chip {
        font-size: 11.5px !important;
        padding: 5px 10px !important;
    }
    .m-product__discount {
        top: 10px !important;
        inset-inline-start: 10px !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    /* Sticky bottom CTA — keep above footer & ramadan layer */
    .m-product__sticky {
        position: fixed !important;
        bottom: 0;
        left: 0; right: 0;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -8px 22px -10px rgba(0,0,0,.15);
        z-index: 40;
        border-top: 1px solid var(--m-border);
    }
    body.has-product-sticky {
        padding-bottom: 86px;        /* leave room for sticky CTA */
    }

    .m-size-list, .m-addon-list {
        gap: 8px !important;
    }
    .m-size-list label, .m-addon-list label {
        font-size: 13.5px !important;
        padding: 10px 12px !important;
        min-height: 44px;
    }
}


/* ===========================================================
   11. ABOUT / CONTACT — extra polish (most rules already in
   modern-2026-mobile.css; this tightens a few corners)
   =========================================================== */
@media (max-width: 767.98px) {
    .m-about-section {
        padding-block: 30px !important;
    }
    .m-about-eyebrow {
        font-size: 11.5px !important;
        letter-spacing: .15em !important;
    }
    .m-about-heading {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.22 !important;
    }
    .m-about-lead {
        font-size: 14px !important;
        line-height: 1.65;
    }

    /* Contact tiles — already styled; tighten gap */
    .m-contact-section {
        padding-block: 26px !important;
    }
    .m-contact-card {
        padding: 18px !important;
        border-radius: var(--m-radius-lg) !important;
    }
    .m-contact-card h3 {
        font-size: 17px !important;
    }
}


/* ===========================================================
   12. BLOG / BLOG DETAIL
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__blog,
    .wsus__blog_details {
        padding: 30px 0 !important;
    }
    .wsus__blog .col-xl-4,
    .wsus__blog .col-md-6,
    .wsus__blog .col-sm-6 {
        margin-bottom: 16px;
    }
    .wsus__single_blog {
        border-radius: var(--m-radius-lg) !important;
        overflow: hidden;
        box-shadow: var(--m-shadow-sm);
    }
    .wsus__single_blog_img img {
        aspect-ratio: 16/10;
        object-fit: cover;
    }
    .wsus__single_blog_text {
        padding: 16px !important;
    }
    .wsus__single_blog_text h3,
    .wsus__single_blog_text h4 {
        font-size: 16px !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }
    .wsus__single_blog_text p {
        font-size: 13.5px !important;
        line-height: 1.6;
    }

    .wsus__blog_details_text h2,
    .wsus__blog_details_text h3 {
        font-size: clamp(20px, 5.5vw, 26px) !important;
        line-height: 1.25 !important;
    }
    .wsus__blog_details_text p {
        font-size: 14.5px !important;
        line-height: 1.75;
    }
    .details_bloger {
        font-size: 12.5px !important;
        gap: 10px 16px !important;
    }
    .details_bloger li {
        font-size: 12.5px !important;
    }

    /* Comment section */
    .wsus__comment {
        padding: 18px 14px !important;
        background: #fff;
        border-radius: var(--m-radius-lg);
        border: 1px solid var(--m-border);
        margin-top: 18px;
    }
    .wsus__comment .single_comment {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    .wsus__comment .single_comment .img {
        width: 56px !important;
        flex: 0 0 56px;
    }
    .wsus__comment .single_comment .img img {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
    }
    .wsus__comment .single_comment .text h5 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    .wsus__comment .single_comment .text p {
        font-size: 13.5px !important;
        line-height: 1.6;
    }

    /* Comment form */
    .comment_input input,
    .comment_input textarea {
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: #fafaf7 !important;
        border: 1px solid var(--m-border) !important;
    }
    .comment_input button {
        width: 100%;
        padding: 14px !important;
        font-size: 15px !important;
    }
}


/* ===========================================================
   13. CART POPUP MODAL (ajax product modal) on phones
   =========================================================== */
@media (max-width: 575.98px) {
    .wsus__cart_popup .modal-dialog {
        max-width: calc(100vw - 12px) !important;
        margin: 8px auto !important;
    }
    .wsus__cart_popup .modal-content {
        border-radius: var(--m-radius-lg) !important;
        max-height: calc(100vh - 16px);
        overflow: hidden;
    }
    .wsus__cart_popup .modal-body {
        padding: 16px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wsus__cart_popup .btn-close {
        width: 36px;
        height: 36px;
        background: rgba(0,0,0,.05);
        border-radius: 50%;
        opacity: 1;
    }

    /* Reservation modal */
    #staticBackdrop .modal-dialog {
        max-width: calc(100vw - 12px) !important;
        margin: 8px auto !important;
    }
    #staticBackdrop .modal-content {
        border-radius: var(--m-radius-lg) !important;
    }
    #staticBackdrop .modal-header {
        padding: 14px 16px;
    }
    #staticBackdrop .modal-header h1 {
        font-size: 17px !important;
        font-weight: 800;
    }
    #staticBackdrop .modal-body {
        padding: 16px !important;
    }
}


/* ===========================================================
   14. MINI CART DRAWER on phones (.wsus__menu_cart_area)
   =========================================================== */
@media (max-width: 575.98px) {
    .wsus__menu_cart_area .wsus__menu_cart_boody {
        width: min(94vw, 360px) !important;
        padding: 16px !important;
    }
    .wsus__menu_cart_area .menu_cart_img {
        width: 70px !important;
        height: 70px !important;
        border-radius: 12px !important;
    }
    .wsus__menu_cart_area .menu_cart_text .title {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    .wsus__menu_cart_area .menu_cart_text .size,
    .wsus__menu_cart_area .menu_cart_text .extra {
        font-size: 12px !important;
    }
    .wsus__menu_cart_area .menu_cart_text .price {
        font-size: 14px !important;
        font-weight: 800;
    }
    .wsus__menu_cart_area .cart_view,
    .wsus__menu_cart_area .checkout {
        font-size: 14px !important;
        padding: 13px !important;
    }
}


/* ===========================================================
   15. SAUDI RIYAL ICON sizing — keep it consistent with text
   =========================================================== */
@media (max-width: 767.98px) {
    .Saudi_Riyal {
        width: 14px;
        height: 14px;
        vertical-align: -2px;
        display: inline-block;
    }
    .wsus__cart_list_footer_button .grand_total p.total .Saudi_Riyal {
        width: 16px;
        height: 16px;
    }
}


/* ===========================================================
   16. FORGOT / RESET PASSWORD — share the login skin
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__forget_password,
    .wsus__reset_password {
        padding-block: 30px !important;
    }
}


/* ===========================================================
   17. CUSTOM PAGE / TERMS / PRIVACY
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__terms_condition,
    .wsus__career_det_text {
        padding-block: 30px !important;
    }
    .wsus__terms_condition h2,
    .wsus__terms_condition h3 {
        font-size: 18px !important;
    }
    .wsus__terms_condition p,
    .wsus__terms_condition li {
        font-size: 14.5px !important;
        line-height: 1.7;
    }
    .wsus__terms_condition ul,
    .wsus__terms_condition ol {
        padding-inline-start: 18px;
    }
}


/* ===========================================================
   18. RTL FLIPS — track-order arrows, address chevrons, etc.
   =========================================================== */
[dir="rtl"] .wsus__cart_list_footer_button .grand_total p {
    /* Already handled by flex justify-content: space-between */
}
[dir="rtl"] .wsus__checkout_single_address .form-check-label {
    padding-inline-end: 32px !important;
    padding-inline-start: 0 !important;
}


/* ===========================================================
   19. FIX: Ramadan decorative SVG should never block taps
   ===========================================================
   Belt-and-braces — the layout already sets pointer-events:none,
   but at very low z-index this still occasionally captures touches
   in iOS Safari due to rendering order. Lock it down.
*/
#ramadan-elegant-bg {
    pointer-events: none !important;
    -webkit-user-select: none;
    user-select: none;
}
@media (max-width: 575.98px) {
    /* On tiny screens the lanterns can crowd the hero — fade them. */
    #ramadan-elegant-bg { opacity: .35; }
}


/* ===========================================================
   20. SWEETALERT, TOASTR — phone-friendly width
   =========================================================== */
@media (max-width: 575.98px) {
    .swal2-container .swal2-popup {
        font-size: 14px !important;
        padding: 22px 18px !important;
        border-radius: var(--m-radius-lg) !important;
        width: calc(100vw - 24px) !important;
        max-width: 380px;
    }
    .swal2-title {
        font-size: 18px !important;
    }
    .swal2-actions button {
        font-size: 14px !important;
        padding: 10px 18px !important;
        border-radius: 12px !important;
    }
    #toast-container > div {
        width: calc(100vw - 24px) !important;
        max-width: 360px;
        font-size: 13.5px !important;
        border-radius: 12px !important;
    }
}


/* ===========================================================
   16. BRANCHES SLIDER — mobile fixes (contact page)
   The slider was hard to use on phones: cards too tall,
   negative slick margins caused horizontal overflow, and
   dots were hidden behind the next section. This block
   keeps the slick behavior intact and just rescales it.
   =========================================================== */
@media (max-width: 767.98px) {
    .m-branches {
        padding: 40px 0 60px !important;
        overflow: hidden;                  /* contain any slick overflow */
    }
    .m-branches .container {
        overflow: hidden;                  /* prevent horizontal scrollbar */
        padding-inline: 16px;
    }
    .m-branches__head {
        margin-bottom: 24px !important;
    }
    .m-branches__head h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important;
        margin: 10px 0 8px !important;
    }
    .m-branches__head p {
        font-size: .92rem;
        line-height: 1.55;
    }

    /* Slick rails — neutralize the desktop -12px pull that bleeds
       past Bootstrap's 12px container padding on phones. */
    .m-branches__slider .slick-list {
        margin: 0 !important;
        padding: 4px 0 38px !important;
        /* Clip overflow on mobile. `overflow:visible` (the desktop
           setting) combined with slick's RTL translateX bug pushed
           cards completely off-screen on Arabic phones — the user
           saw only the dots. `hidden` keeps the box honest, and
           the dots already give the visual cue that more cards exist. */
        overflow: hidden !important;
        /* Force LTR layout direction for slick's internal flex math
           even when the page is RTL. Slick reverses visual order via
           the rtl:true option (which we keep on desktop) — but on
           the 1-slide mobile view we set rtl:false, and this CSS
           guarantees the track lands at left:0 / x:0 regardless. */
        direction: ltr !important;
    }
    .m-branches__slider .slick-slide {
        padding: 0 6px !important;
        float: left !important;            /* slick expects this in LTR */
    }
    .m-branches__slider .slick-track {
        display: flex !important;
        align-items: stretch;
        margin-inline: auto;
    }

    /* Hide arrows on phones (slick is also configured with
       arrows:false at <=768, but force-hide as a safety net). */
    .m-branches__slider .slick-prev,
    .m-branches__slider .slick-next {
        display: none !important;
    }

    /* Visible, well-spaced dots */
    .m-branches__slider .slick-dots {
        bottom: 6px !important;
        display: flex !important;
        justify-content: center;
        gap: 6px;
        padding: 0;
        margin: 0;
        line-height: 1;
    }
    .m-branches__slider .slick-dots li {
        width: 22px;
        height: 22px;
        margin: 0;
    }
    .m-branches__slider .slick-dots li button {
        width: 22px;
        height: 22px;
        padding: 0;
    }
    .m-branches__slider .slick-dots li button:before {
        font-size: 10px !important;
        line-height: 22px !important;
        width: 22px;
        height: 22px;
        opacity: .35;
    }
    .m-branches__slider .slick-dots li.slick-active button:before {
        opacity: 1 !important;
        transform: scale(1.15);
    }

    /* Card — compact on phones */
    .m-branch-card {
        min-height: auto !important;
        padding: 22px 18px 18px !important;
        gap: 10px !important;
        border-radius: var(--m-r-lg) !important;
    }
    .m-branch-card__icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 17px !important;
        border-radius: 12px !important;
    }
    .m-branch-card__badge {
        font-size: 10.5px !important;
        padding: 3px 9px !important;
    }
    .m-branch-card__name {
        font-size: 1rem !important;
        min-height: auto !important;
        -webkit-line-clamp: unset !important;
        margin-top: 2px !important;
    }
    .m-branch-card__row {
        font-size: .85rem !important;
    }
    .m-branch-card__row > span {
        min-height: auto !important;
        -webkit-line-clamp: unset !important;
    }
    .m-branch-card__actions {
        padding-top: 12px !important;
        gap: 6px !important;
    }
    .m-branch-card__btn {
        padding: 9px 12px !important;
        font-size: 12px !important;
    }
    .m-branch-card__btn i {
        font-size: 12px;
    }
}

/* Tablet (single-arrow padding fix) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .m-branches { overflow: hidden; }
    .m-branches__slider .slick-prev { left: 4px !important; right: auto !important; }
    .m-branches__slider .slick-next { right: 4px !important; left: auto !important; }
    html[dir="rtl"] .m-branches__slider .slick-prev { right: 4px !important; left: auto !important; }
    html[dir="rtl"] .m-branches__slider .slick-next { left: 4px !important; right: auto !important; }
}