/* ============================================================
   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 PREMIUM FLOATING PILL ----- */
@media (max-width: 991.98px) {
    body::after {
        content: "";
        display: block;
        height: calc(96px + env(safe-area-inset-bottom));
    }
    .m-bottom-tabs {
        position: fixed;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 12px;
        right: 12px;
        background: rgba(255, 255, 255, .78);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: 24px;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        padding: 8px 6px;
        z-index: 60;
        box-shadow:
            0 14px 36px -10px rgba(228, 0, 43, .14),
            0 6px 18px -6px rgba(0, 0, 0, .10),
            inset 0 1px 0 rgba(255, 255, 255, .65);
    }
    .m-bottom-tabs a {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 6px 4px;
        text-align: center;
        text-decoration: none;
        color: #6b6357;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .01em;
        border-radius: 16px;
        transition:
            color .35s cubic-bezier(.4, 0, .2, 1),
            transform .25s cubic-bezier(.4, 0, .2, 1);
    }
    .m-bottom-tabs a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: 17px;
        border-radius: 12px;
        background: transparent;
        color: inherit;
        transition:
            background .4s cubic-bezier(.4, 0, .2, 1),
            color .25s ease,
            transform .4s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow .4s 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;
    }
    .m-bottom-tabs a:hover { color: var(--kfc-red); }
    .m-bottom-tabs a:active { transform: scale(.94); }

    .m-bottom-tabs a.active {
        color: var(--kfc-red);
    }
    .m-bottom-tabs a.active i {
        background: linear-gradient(135deg, var(--kfc-red), var(--kfc-red-dark));
        color: #fff;
        transform: translateY(-3px);
        box-shadow:
            0 10px 22px -6px rgba(228, 0, 43, .50),
            0 4px 8px -3px rgba(228, 0, 43, .28);
    }
    .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: 2px;
        inset-inline-end: calc(50% - 24px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: linear-gradient(135deg, #FFC72C, #FF8A1A);
        color: var(--kfc-black);
        font-size: 10px;
        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 new pill */
    .wsus__scroll_btn { bottom: 170px !important; }
}

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

@media (max-width: 991.98px) and (prefers-color-scheme: dark) {
    .m-bottom-tabs {
        background: rgba(26, 22, 20, .78);
        border-color: rgba(255, 255, 255, .08);
        box-shadow:
            0 14px 36px -10px rgba(0, 0, 0, .55),
            0 6px 18px -6px rgba(0, 0, 0, .35),
            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); }
}


/* ----- 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; }
}