/* ============================================================
   ASTRONORA - MOBILE RESPONSIVE FIXES
   Final pass that normalises layout on phones/tablets across
   every page (home, breadcrumb pages, shop, cart, blog, auth,
   profile, contact, etc.). Loaded last in header.php so its
   rules win over style.css / premium.css for sub-991px screens.
   ============================================================ */

/* ---------- 0e. MINI CART POPUP (header hover dropdown) ----------
   Without these overrides the popup balloons to ~600px because
   the legacy style.css sets bigger thumbnails and full-size buttons,
   and Bootstrap's .as_btn padding makes the action row overflow.
   Lock it to a compact 320px panel, fix thumbnail size, and only
   show when actually hovered. */
.as_cart { position: relative; }

.as_cart_box {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    width: 320px !important;
    max-width: calc(100vw - 24px);
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.as_cart:hover .as_cart_box,
.as_cart:focus-within .as_cart_box,
.as_cart.cart_open .as_cart_box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.as_cart_list ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 260px;
    overflow-y: auto;
}

.as_cart_list li {
    display: flex !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(240, 211, 141, .14) !important;
    float: none !important;
}
.as_cart_list li:last-child { border-bottom: 0 !important; }

.as_cart_list .as_cart_img {
    float: none !important;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(20, 17, 29, .55);
    border: 1px solid rgba(214, 173, 98, .25);
}
.as_cart_list .as_cart_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    margin: 0 !important;
}

.as_cart_info {
    flex: 1;
    min-width: 0;
    position: relative;
    padding-right: 24px;
}
.as_cart_info a:not(.as_cart_remove) {
    display: block;
    color: var(--ab-text, #f3dfbd) !important;
    font-size: 13px !important;
    font-weight: 600;
    margin: 0 0 4px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.as_cart_info a:not(.as_cart_remove):hover { color: var(--gold-light, #f0d38d) !important; }
.as_cart_info p {
    color: var(--gold-light, #f0d38d) !important;
    font-size: 12px !important;
    font-weight: 600;
    margin: 0 !important;
}
.as_cart_info .as_cart_remove {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ff9a8a !important;
    background: rgba(255, 100, 90, .08);
    font-size: 11px !important;
    margin: 0 !important;
    transition: background .18s ease, color .18s ease;
}
.as_cart_info .as_cart_remove:hover {
    background: rgba(255, 100, 90, .22);
    color: #ffb3a6 !important;
}

.as_cart_btn {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(240, 211, 141, .18) !important;
}
.as_cart_btn .as_btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    letter-spacing: .3px !important;
    border-radius: 999px !important;
    height: auto !important;
    line-height: 1.2 !important;
}

@media (max-width: 575.98px) {
    .as_cart_box {
        right: 0 !important;
        width: min(94vw, 320px) !important;
    }
}

/* ---------- 0d. USER DROPDOWN (logged-in profile menu) ----------
   The topbar (.as_info_detail) and the main nav (.as_header_wrapper
   > .container > .row) are siblings inside .as_header_wrapper. By
   default, the later sibling (main nav) renders on top, which clips
   the dropdown when it opens downward. Lifting the topbar into its
   own stacking context above the main nav fixes that. */
.as_info_detail {
    position: relative;
    z-index: 50;
}
.as_user_dropdown {
    position: relative;
    display: inline-block;
    z-index: 60;
}
.as_user_dropdown .as_logged_user {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 14px 4px 4px !important;
    border-radius: 999px !important;
    background: rgba(20, 17, 29, .45) !important;
    border: 1px solid rgba(214, 173, 98, .42) !important;
    color: var(--ab-text, #f3dfbd) !important;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}
.as_user_dropdown .as_logged_user img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--gold-light, #f0d38d) !important;
    flex: 0 0 32px;
}
.as_user_dropdown .as_logged_user .as_user_name,
.as_user_dropdown .as_logged_user span {
    display: inline-block !important;
    color: var(--ab-text, #f3dfbd) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.as_user_dropdown .as_logged_user::after {
    content: '\25BE'; /* ▾ */
    color: var(--gold-light, #f0d38d);
    font-size: 11px;
    margin-left: 2px;
}
.as_user_dropdown .as_logged_user:hover,
.as_user_dropdown.is-open .as_logged_user {
    background: rgba(214, 173, 98, .14) !important;
    border-color: var(--gold-light, #f0d38d) !important;
}

.as_user_dropdown .dropdown-menu.user-menu {
    display: none;
    /* position:fixed so the menu escapes the sticky header's
       stacking context — was getting clipped/hidden behind the
       main nav row otherwise. JS sets `top` and `right` based on
       the toggle's bounding rect when the menu opens. */
    position: fixed;
    top: 60px;             /* JS overrides */
    right: 20px;           /* JS overrides */
    min-width: 280px;
    padding: 0;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    z-index: 100000;
    background: linear-gradient(165deg, #1a1428 0%, #14202b 100%) !important;
    border: 1px solid rgba(214, 173, 98, .35) !important;
    border-top: 3px solid var(--gold-light, #f0d38d) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .65), 0 0 38px rgba(214, 173, 98, .16) !important;
    /* Stop Bootstrap's float-left and other Bootstrap dropdown noise */
    float: none !important;
    text-align: left;
    list-style: none;
}

.as_user_dropdown .dropdown-menu.user-menu .user-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(214, 173, 98, .18), rgba(20, 110, 100, .12));
    border-bottom: 1px solid rgba(240, 211, 141, .18);
}
.as_user_dropdown .dropdown-menu.user-menu .user-menu-head img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-light, #f0d38d);
    flex: 0 0 48px;
}
.as_user_dropdown .dropdown-menu.user-menu .user-menu-head strong {
    display: block;
    color: var(--ab-ink, #fff2d2);
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}
.as_user_dropdown .dropdown-menu.user-menu .user-menu-head small {
    display: block;
    color: var(--ab-muted, #c9b89c);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

.as_user_dropdown .dropdown-menu.user-menu .user-menu-group {
    padding: 6px 0;
    border-bottom: 1px solid rgba(240, 211, 141, .12);
}
.as_user_dropdown .dropdown-menu.user-menu .user-menu-group:last-of-type {
    border-bottom: 0;
}

.as_user_dropdown .dropdown-menu.user-menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 18px !important;
    color: var(--ab-text, #f3dfbd) !important;
    font-size: 13px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.as_user_dropdown .dropdown-menu.user-menu a i {
    width: 18px;
    text-align: center;
    color: var(--gold-light, #f0d38d);
    font-size: 14px;
}
.as_user_dropdown .dropdown-menu.user-menu a:hover {
    background: rgba(214, 173, 98, .14) !important;
    color: var(--gold-light, #f0d38d) !important;
    padding-left: 24px !important;
}

.as_user_dropdown .dropdown-menu.user-menu .user-menu-badge {
    margin-left: auto;
    background: var(--gold-light, #f0d38d);
    color: #1a1424;
    font-weight: 700;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
    line-height: 1.5;
}

.as_user_dropdown .dropdown-menu.user-menu a.admin-link {
    color: var(--gold-light, #f0d38d) !important;
    font-weight: 600;
}

.as_user_dropdown .dropdown-menu.user-menu .user-menu-logout {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 18px !important;
    color: #ff9a8a !important;
    font-weight: 600;
    background: rgba(255, 100, 90, .06);
    border-top: 1px solid rgba(255, 100, 90, .14);
}
.as_user_dropdown .dropdown-menu.user-menu .user-menu-logout:hover {
    background: rgba(255, 100, 90, .18) !important;
    color: #ffb3a6 !important;
    padding-left: 24px !important;
}
.as_user_dropdown .dropdown-menu.user-menu .user-menu-logout i {
    color: #ff9a8a;
}

/* Open the menu on hover (desktop) AND when the toggle is clicked
   (touch / keyboard). The click state survives moving the cursor.
   Both rules use high specificity + !important to beat the
   Bootstrap .dropdown-menu { display:none } from bootstrap.css. */
.as_user_dropdown:hover > .dropdown-menu.user-menu,
.as_user_dropdown.is-open > .dropdown-menu.user-menu,
.as_user_dropdown:focus-within > .dropdown-menu.user-menu {
    display: block !important;
    animation: userMenuFade .2s ease;
}

@keyframes userMenuFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Guest "Login" button - show a real label, not just an icon */
.as_user .as_guest_btn {
    padding: 6px 14px 6px 10px !important;
    background: rgba(20, 17, 29, .45) !important;
    border: 1px solid rgba(214, 173, 98, .42) !important;
    color: var(--ab-text, #f3dfbd) !important;
    border-radius: 999px !important;
    gap: 8px;
}
.as_user .as_guest_btn:hover {
    background: var(--gold-grad, linear-gradient(135deg, #9b6b29 0%, #d6ad62 45%, #fff0ae 58%, #b57b2b 100%)) !important;
    color: #1a1424 !important;
    border-color: transparent !important;
}
.as_user .as_guest_btn i { font-size: 16px; line-height: 1; }
.as_user .as_guest_label {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
}

/* Mobile: open the dropdown as a full-width panel anchored under
   the icon, so the long menu still fits on phones. */
@media (max-width: 575.98px) {
    .as_user_dropdown .as_logged_user span { display: none; }
    .as_user_dropdown .dropdown-menu.user-menu {
        position: fixed !important;
        top: 64px !important;
        right: 8px !important;
        left: auto !important;
        width: min(92vw, 320px);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .as_user .as_guest_label { display: none; }
    .as_user .as_guest_btn { padding: 8px 10px !important; }
}

/* ---------- 0c. FLOATING CIRCULAR ICONS ----------
   Make the inner image always fit the circle cleanly (so a DB-stored
   portrait crops to a tidy avatar instead of squashing) and give the
   image itself a gentle, composite-only floating motion. The
   container keeps its existing hover rotate/scale because the
   animation is on the child, not on it. */
.as_service_box .as_icon,
.as_sign_box .as_sign,
.as_team_box .team-avatar {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(214, 173, 98, .18),
                inset 0 0 0 2px rgba(214, 173, 98, .35);
}

.as_service_box .as_icon img,
.as_sign_box .as_sign img,
.as_team_box .team-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    will-change: transform;
    animation: as_floaty 4.6s ease-in-out infinite;
}

/* Stagger so the cards don't bob in lock-step */
.as_service_wrapper .col-lg-6:nth-child(2) .as_icon img,
.as_service_wrapper .col-md-6:nth-child(2) .as_icon img,
.as_horoscope_wrapper .col-lg-2:nth-child(3n+2) .as_sign img,
.as_team_wrapper .col-lg-3:nth-child(2) .team-avatar img { animation-delay: .55s; }

.as_service_wrapper .col-lg-6:nth-child(3) .as_icon img,
.as_horoscope_wrapper .col-lg-2:nth-child(3n+3) .as_sign img,
.as_team_wrapper .col-lg-3:nth-child(3) .team-avatar img { animation-delay: 1.1s; }

.as_service_wrapper .col-lg-6:nth-child(4) .as_icon img,
.as_team_wrapper .col-lg-3:nth-child(4) .team-avatar img { animation-delay: 1.65s; }

/* Tighten the astrologer gold ring so the image isn't floating
   inside an oversized halo. */
.as_team_box .team-avatar {
    box-shadow: 0 10px 30px rgba(214, 173, 98, .22),
                inset 0 0 0 3px rgba(214, 173, 98, .55);
}

/* translate3d is GPU-composited only - no Layout/Paint. */
@keyframes as_floaty {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .as_service_box .as_icon img,
    .as_sign_box .as_sign img,
    .as_team_box .team-avatar img { animation: none; }
}

/* ---------- 0b. REMOVE TESTIMONIAL CARD DECORATIVE PSEUDO ----------
   The cosmic theme paints .testimonial-card::before with the gold
   gradient, leaving a stray rectangle in the top-left corner. Hide it. */
.testimonial-card::before {
    display: none !important;
    content: none !important;
}

/* ---------- 0a. SELECT2 DROPDOWN ON COSMIC THEME ----------
   Override the default white panel so the dropdown matches the
   cosmic dark surface instead of flashing white. */
.select2-dropdown,
.select2-dropdown.select2-dropdown--above,
.select2-dropdown.select2-dropdown--below {
    background-color: #1f1926 !important;
    border-color: rgba(214, 173, 98, .35) !important;
    color: #f3dfbd !important;
}
.select2-search--dropdown .select2-search__field {
    background-color: #1f1926 !important;
    border: 1px solid rgba(214, 173, 98, .35) !important;
    color: #f3dfbd !important;
}
.select2-results__option {
    color: #f3dfbd !important;
}
.select2-results__option--highlighted,
.select2-results__option:hover,
.select2-results__option[aria-selected="true"],
.select2-results__option.select2-results__option--selected {
    background-color: rgba(214, 173, 98, .18) !important;
    color: #fff0ae !important;
}

/* ---------- 0. PRICING CARD READABILITY ----------
   On the cosmic dark theme the default rule
       .as_pricing_box ul li:not(.as_inactive) { color: var(--dark-color1); }
   resolves to near-black, making feature lists invisible on dark
   pricing cards. Restore readable colour for non-popular cards
   while keeping the popular (gold-bg) card intact. */
.as_pricing_box:not(.as_pricing_popular) ul li:not(.as_inactive) {
    color: var(--ab-text, #f3dfbd) !important;
}
.as_pricing_box:not(.as_pricing_popular) ul li.as_inactive {
    color: rgba(247, 231, 199, .42) !important;
    text-decoration: line-through;
}
.as_pricing_box:not(.as_pricing_popular) .as_btn {
    background: var(--gold-grad, linear-gradient(135deg, #9b6b29 0%, #d6ad62 45%, #fff0ae 58%, #b57b2b 100%)) !important;
    color: #120e1d !important;
}

/* ---------- 1. GLOBAL: prevent horizontal scroll ---------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

.container,
.container-fluid {
    width: 100%;
}

/* Avoid runaway inline-styled cards on narrow screens */
[style*="padding:35px"],
[style*="padding: 35px"],
[style*="padding:30px"],
[style*="padding: 30px"],
[style*="padding:25px"],
[style*="padding: 25px"] {
    box-sizing: border-box;
    max-width: 100%;
}

/* ---------- 2. TABLET (<= 991px) ---------- */
@media (max-width: 991.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Section padding compaction */
    .as_padderTop80 {padding-top: 30px !important;}
    .as_padderBottom80 { padding-bottom: 50px !important; }
    .as_padderTop60 { padding-top: 40px !important; }
    .as_padderBottom60 { padding-bottom: 40px !important; }
    .as_padderTop50 {padding-top: 15px !important;}
    .as_padderBottom50 { padding-bottom: 36px !important; }
    .as_padderTop40 { padding-top: 28px !important; }
    .as_padderBottom40 {/* padding-bottom: 28px !important; */margin-top: 0px;}

    .as_heading { font-size: 28px !important; line-height: 1.25; }
    .as_subheading { font-size: 18px !important; }

    /* Breadcrumb */
    .as_breadcrum_wrapper { padding: 60px 0 !important; }
    .as_breadcrum_wrapper h1 { font-size: 30px; }
    .as_breadcrum_wrapper .breadcrumb { font-size: 13px; flex-wrap: wrap; justify-content: center; }

    /* Banner */
    .as_banner_wrapper {
        padding: 80px 0 60px !important;
        text-align: center;
    }
    .as_banner_detail h1 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    .as_banner_detail h5 { font-size: 16px !important; }
    .as_banner_detail p { font-size: 14px; }
    .as_banner_img {
        max-width: 80%;
        margin: 30px auto 0;
    }
    .as_hand_bg,
    .as_hand { max-width: 100%; height: auto; }

    /* Services grid spacing */
    .as_service_box,
    .as_team_box,
    .as_product_box,
    .as_blog_box,
    .as_sign_box,
    .testimonial-card,
    .pricing-card,
    .as_pricing_box,
    .contact-info-card,
    .stat-box {
        margin-bottom: 25px;
    }

    /* About */
    .as_about_detail { padding-left: 0; margin-top: 30px; }
    .as_aboutimg { text-align: center !important; }
    .as_aboutimg img { display: inline-block; }

    /* Service block - circle/hand image */
    .as_service_img {
        margin: 0px auto 0px auto !important;
    }

    /* Forms */
    .as_appointment_form,
    .as_contact_form,
    form.as_appointment_form {
        padding: 22px !important;
    }
    .form-control,
    .select2-container .select2-selection {
        font-size: 14px !important;
    }
    textarea.form-control { min-height: 110px; }

    /* Tables - allow horizontal scroll */
    .table-responsive {
        overflow-x: auto;
    }
    .table-responsive table { min-width: 520px; }

    /* Footer */
    .as_footer_widget { margin-bottom: 32px; }
    .as_footer_heading { font-size: 18px !important; }
    .as_copyright_wrapper { padding: 16px 0; text-align: center; }
    .as_copyright_wrapper p { font-size: 12px; line-height: 1.7; }
    .footer-social { justify-content: flex-start; }

    /* Newsletter input */
    .as_newsletter_wrapper .as_newsletter_box { width: 100%; }

    /* Header right info compaction */
    .as_right_info {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 0;
    }
    .topbar-social { display: none; }
    .as_search_wrapper form input[type="text"] {
        width: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .as_search_wrapper { display: none; }
    .as_user .as_guest_btn { padding: 8px; }
}

/* ---------- 3. PHONE (<= 767px) ---------- */
@media (max-width: 767.98px) {
    .as_heading { font-size: 24px !important; }
    .as_subheading { font-size: 16px !important; }
    p { font-size: 14px; line-height: 1.65; }

    .as_banner_detail h1 { font-size: 28px !important; line-height: 1.22 !important; }
    .as_banner_detail h5 { font-size: 14px !important; }
    .as_banner_wrapper {padding: 20px 0 30px !important;}
    .as_banner_img { max-width: 88%; }

    .as_breadcrum_wrapper { padding: 45px 0 !important; }
    .as_breadcrum_wrapper h1 { font-size: 24px; }

    /* Buttons full-width helpers on tight screens */
    .as_btn {
        padding: 10px 22px !important;
        font-size: 13px !important;
    }

    /* Horoscope signs grid - 2 per row */
    .as_horoscope_wrapper .col-xs-6 { width: 50% !important; flex: 0 0 50%; max-width: 50%; }
    .as_sign_box { padding: 18px 10px !important; margin: 0 0 16px !important; }
    .as_sign_box .as_sign { width: 70px !important; height: 70px !important; }
    .as_sign_box h5 { font-size: 14px; }
    .as_sign_box p { font-size: 11px; margin: 0; }

    /* Service / team / product / blog cards - 1 or 2 per row */
    .as_team_box .team-avatar img { width: 90px; height: 90px; }
    .as_product_box .as_product_img img { width: 100%; height: auto; }

    /* Inline cards with hard padding */
    [style*="padding:35px"],
    [style*="padding: 35px"] { padding: 18px !important; }
    [style*="padding:30px"],
    [style*="padding: 30px"] { padding: 18px !important; }
    [style*="padding:25px"],
    [style*="padding: 25px"] { padding: 16px !important; }

    /* Flex blocks that overflow */
    [style*="display:flex"][style*="gap:20px"],
    [style*="display: flex"][style*="gap:20px"],
    [style*="display:flex"][style*="gap:25px"],
    [style*="display: flex"][style*="gap:25px"] {
        flex-wrap: wrap;
        gap: 14px !important;
    }

    /* Horoscope detail row */
    .as_padderTop80 .row > .col-lg-8,
    .as_padderTop80 .row > .col-lg-4 { margin-bottom: 20px; }

    /* Cart / checkout tables */
    .as_padderTop60.as_padderBottom80 .col-lg-8 { margin-bottom: 24px; }

    /* Shop sidebar comes after products on mobile */
    .as_shop_page .as_shop_sidebar { margin-top: 30px; }

    /* Blog single - sidebar gaps */
    .as_blog_detail .col-lg-4 { margin-top: 26px; }

    /* Pricing cards stack tightly */
    .as_pricing_box { margin-bottom: 22px; }

    /* Profile / auth pages */
    .as_login_wrapper { padding: 30px 0 !important; }
    .as_login_slider {
        min-height: 220px;
        border-radius: 12px 12px 0 0 !important;
    }
    .as_login_detail {
        min-height: 0;
        padding: 15px 22px !important;
        border-radius: 0 0 12px 12px !important;
    }
    .as_login_data { gap: 8px; text-align: center !important; }
    .as_login_data .as_btn { width: 100%; }

    /* Headings inside breadcrumb */
    .as_breadcrum_wrapper .breadcrumb li { font-size: 12px; }

    /* Counters / stats single column */
    .as_counter_box { margin-bottom: 18px; text-align: center; }

    /* Contact info cards single column with full width */
    .contact-info-card { padding: 22px 18px !important; }

    /* Map iframe */
    iframe[src*="google.com/maps"],
    iframe[src*="maps.google.com"] {
        width: 100%;
        min-height: 260px;
    }

    /* Astrologer details bio */
    .as_team_box p { font-size: 13px; }

    /* Cart mini-popup over header */
    .as_cart_box { right: 5px !important; width: 92vw !important; max-width: 320px; }

    /* Forms: rows become single column even when bootstrap col-md is used */
    .as_appointment_form .col-md-6,
    .as_appointment_form .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Footer copyright text */
    .as_copyright_wrapper p { padding: 0 5px; }
}

/* ---------- 4. SMALL PHONE (<= 575px) ---------- */
@media (max-width: 575.98px) {
    .as_heading { font-size: 22px !important; }
    .as_banner_detail h1 { font-size: 24px !important; }
    .as_banner_detail h5 { font-size: 13px !important; }

    .as_breadcrum_wrapper h1 { font-size: 22px; }
    .as_breadcrum_wrapper { padding: 36px 0 !important; }

    /* 1 column for product/blog/team/service if they were col-xs-6 */
    .as_shop_wrapper [class*="col-xs-6"],
    .as_team_wrapper [class*="col-xs-6"],
    .as_blog_wrapper [class*="col-xs-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Horoscope: keep 2 per row but tighter padding */
    .as_horoscope_wrapper .col-xs-6 { padding-left: 8px; padding-right: 8px; }
    .as_sign_box { padding: 14px 8px !important; }
    .as_sign_box .as_sign { width: 58px !important; height: 58px !important; }
    .as_sign_box .as_sign img { width: 36px; }
    .as_sign_box h5 { font-size: 13px; margin: 8px 0 2px; }
    .as_sign_box p { font-size: 10px; }

    /* Buttons on cards */
    .as_team_box .as_btn,
    .as_product_box .as_btn,
    .as_blog_box .as_btn {
        font-size: 11px !important;
        padding: 8px 16px !important;
        margin-right: 10px;
    }

    /* Tables go to scroll mode */
    .table-responsive table { min-width: 480px; }
    .table td,
    .table th { padding: 8px 10px !important; font-size: 13px; }

    /* Inline style cards - tighter */
    [style*="padding:35px"],
    [style*="padding: 35px"],
    [style*="padding:30px"],
    [style*="padding: 30px"] { padding: 14px !important; }

    /* Horoscope sign detail header */
    .as_padderTop80 [style*="display:flex"][style*="gap:20px"],
    .as_padderTop80 [style*="display: flex"][style*="gap:20px"] {
        flex-direction: column;
        text-align: center;
    }
    .as_padderTop80 [style*="display:flex"][style*="gap:20px"] img,
    .as_padderTop80 [style*="display: flex"][style*="gap:20px"] img {
        margin: 0 auto 8px;
    }

    /* Pagination wraps */
    .as_pagination ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    .as_pagination ul li { margin: 0 !important; }
    .as_pagination ul li a,
    .as_pagination ul li span {
        height: 32px !important;
        padding: 0 10px !important;
        line-height: 32px !important;
        font-size: 12px;
    }

    /* Footer widget headings center if needed */
    .as_footer_widget { text-align: left; }
    .as_footer_logo img { max-height: 42px; }

    /* Logo */
    .as_logo img { max-height: 32px; }

    /* Topbar info / search hidden, simplify header */
    .as_info_detail { display: none !important; }

    /* Cart wrapper smaller */
    .as_cart_wrapper > a { font-size: 12px; }
    .as_cartnumber {
        font-size: 10px !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
    }

    /* Star/icons inside team cards */
    .as_team_box h4 { font-size: 16px; }

    /* Admin login / auth narrow */
    .ad_login_box { padding: 22px 18px !important; }
}

/* ---------- 5. TINY (<= 400px) ---------- */
@media (max-width: 400px) {
    .as_heading { font-size: 20px !important; }
    .as_banner_detail h1 { font-size: 22px !important; }
    .as_breadcrum_wrapper h1 { font-size: 20px; }

    .as_logo img { max-height: 28px; }

    .as_horoscope_wrapper .col-xs-6 { width: 100% !important; flex: 0 0 100%; max-width: 100%; }
    .as_sign_box { padding: 16px 10px !important; }
    .as_sign_box .as_sign { width: 64px !important; height: 64px !important; }

    .as_btn {
        padding: 9px 18px !important;
        font-size: 12px !important;
    }

    /* Stack pricing currency */
    .as_price { font-size: 16px !important; }

    /* Footer copyright */
    .as_copyright_wrapper p { font-size: 11px; }
}

/* ---------- 5b. SLICK SLIDER ARROWS (banner) ---------- */
@media (max-width: 991.98px) {
    /* Make room under the banner text so arrows are visible */
    .as_banner_slider {
        margin: 0 0 70px !important;
        padding-bottom: 0 !important;
    }

    .as_banner_slider .slick-arrow.as_btn,
    .as_banner_slider .slick-arrow.slick-prev,
    .as_banner_slider .slick-arrow.slick-next {
        position: absolute !important;
        top: auto !important;
        bottom: -60px !important;
        right: auto !important;
        transform: none !important;
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 248, 237, .12) !important;
        border: 1px solid rgba(214, 173, 98, .45) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .25) !important;
        z-index: 4;
    }

    .as_banner_slider .slick-arrow.slick-prev {
        display: none !important;
        left: calc(50% - 50px) !important;
    }

    .as_banner_slider .slick-arrow.slick-next {
         display: none !important;
        left: calc(50% + 6px) !important;
    }

    .as_banner_slider .slick-arrow > span {
        display: inline-flex !important;
    }

    .as_banner_slider .slick-arrow svg,
    .as_banner_slider .slick-arrow svg image {
        width: 10px !important;
        height: auto !important;
    }

    /* Center the banner-detail text/buttons block above the arrows */
    .as_banner_detail { padding-bottom: 10px; }
}

@media (max-width: 575.98px) {
    .as_banner_slider {
        margin: 0 0 64px !important;
    }
    .as_banner_slider .slick-arrow.as_btn,
    .as_banner_slider .slick-arrow.slick-prev,
    .as_banner_slider .slick-arrow.slick-next {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        bottom: -54px !important;
    }
    .as_banner_slider .slick-arrow.slick-prev { left: calc(50% - 46px) !important; }
    .as_banner_slider .slick-arrow.slick-next { left: calc(50% + 6px) !important; }
}

/* ============================================================
   7. ISSUE-PATCH PASS — 2026-05-16
   Tightens header logo, cart badge, footer logo + newsletter,
   product card spacing, and login/register layout reported in
   the latest mobile screenshots.
   ============================================================ */

/* ---------- 7a. HEADER LOGO + ICONS ON MOBILE ----------
   Layout target (phones/tablets):
       [  LOGO (larger)  ]  …  [ CART ]  [ ☰ TOGGLE ]
   The hamburger toggle sits at the far right; the cart sits just to
   its left. Wishlist moves into the user dropdown menu on mobile so
   the header stays uncluttered. The slide-out menu becomes a full-
   width overlay instead of a 200-px side drawer. */
@media (max-width: 991.98px) {
    /* Lock the row so logo never pushes the icons off-screen */
    .as_header_wrapper > .container > .row { align-items: center; }

    .as_header_wrapper .as_logo {
        display: flex;
        align-items: center;
        max-width: 60%;
    }
    .as_header_wrapper .as_logo a {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
    }
    .as_header_wrapper .as_logo img {
        width: auto !important;
        max-width: 100%;
        max-height: 56px !important;
        height: auto !important;
        object-fit: contain;
    }

    .as_header_wrapper .col-xs-6:first-child,
    .as_header_wrapper .col-sm-4 {
        padding-right: 8px;
    }
    .as_header_wrapper .col-xs-6:last-child,
    .as_header_wrapper .col-sm-8 {
        padding-left: 8px;
    }

    /* Re-order right-side icons:  cart -> toggle (toggle is last) */
    .as_header_wrapper .as_right_info {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 10px !important;
    }
    .as_header_wrapper .as_right_info .as_wishlist { order: 1; }
    .as_header_wrapper .as_right_info .as_cart     { order: 2; }
    .as_header_wrapper .as_right_info .as_menu_wrapper { order: 3; }

    /* Hide wishlist in the header — it lives in the user dropdown now */
    .as_header_wrapper .as_right_info .as_wishlist { display: none !important; }

    /* Cart icon — clean pill button with a small badge */
    .as_cart_wrapper > a {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 50%;
        background: rgba(20, 17, 29, .55);
        border: 1px solid rgba(214, 173, 98, .42);
    }
    .as_cart_wrapper > a > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .as_cart_wrapper > a img {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
    .as_cart_wrapper .as_cartnumber {
        position: absolute !important;
        top: -4px !important;
        right: -6px !important;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        background: linear-gradient(135deg, #c8a96e, #f0d38d) !important;
        color: #1a1424 !important;
        font-size: 10px !important;
        font-weight: 700;
        line-height: 18px !important;
        border-radius: 999px !important;
        text-align: center !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.35);
    }

    /* Hamburger toggle — match the cart pill, anchor to far right.
       Keep it ABOVE the fullscreen menu overlay so the same tap closes
       the menu. When the menu is open, swap the icon for an ✕. */
    .as_header_wrapper .as_toggle {
        position: relative;
        z-index: 10001;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: rgba(20, 17, 29, .55) !important;
        border: 1px solid rgba(214, 173, 98, .42) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
    .as_header_wrapper .as_toggle img {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        transition: opacity .15s ease;
    }
    /* When drawer is open, hide the hamburger entirely — the close
       button inside the drawer is the dismiss affordance. This
       prevents the old X overlay from sitting on top of the in-drawer
       avatar. */
    .as_menu_wrapper.menu_open .as_toggle {
        visibility: hidden;
        pointer-events: none;
    }
    .as_menu_wrapper { padding: 0 !important; }

    /* Slide-out menu — 60% width drawer, full viewport height.
       A dim backdrop fills the remaining 40% so the underlying page
       fades but is still visible. */
    .as_menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 60vw !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: linear-gradient(160deg, rgba(20, 17, 29, .98), rgba(18, 39, 39, .98)) !important;
        border-right: 1px solid rgba(214, 173, 98, .25) !important;
        box-shadow: 6px 0 24px rgba(0, 0, 0, .35);
        z-index: 9999 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .3s ease, opacity .25s ease, visibility .25s ease;
        overflow-y: auto;
        padding: 70px 18px 28px !important;
    }
    /* No backdrop — drawer sits over the page like the profile
       dropdown does. Tapping the visible page area closes the
       drawer (handled by custom.js document click listener). */
    .as_menu::after { display: none !important; }
    .menu_open .as_menu {
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }
    .menu_open .as_menu::after { display: none !important; }
    .as_menu > ul {
        list-style: none;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .as_menu > ul > li {
        border-bottom: 1px solid rgba(214, 173, 98, .14) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .as_menu > ul > li > a {
        display: block !important;
        padding: 16px 8px !important;
        color: var(--ab-text, #f3dfbd) !important;
        font-size: 16px !important;
        font-weight: 600;
        letter-spacing: .3px;
    }
    .as_menu > ul > li > a.active,
    .as_menu > ul > li > a:hover {
        color: var(--gold-light, #f0d38d) !important;
    }
    .as_menu .as_submenu li a {
        padding: 12px 18px !important;
        font-size: 14px !important;
        color: var(--ab-muted, #c9b89c) !important;
        font-weight: 500 !important;
    }

    /* Lock body scroll while the full-screen menu is open */
    body.as_menu_is_open { overflow: hidden; }
}

@media (max-width: 575.98px) {
    .as_header_wrapper .as_logo { max-width: 58%; }
    .as_header_wrapper .as_logo img { max-height: 50px !important; }
    .as_header_wrapper .as_right_info { gap: 8px !important; }
    .as_cart_wrapper > a,
    .as_header_wrapper .as_toggle {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 380px) {
    .as_header_wrapper .as_logo { max-width: 54%; }
    .as_header_wrapper .as_logo img { max-height: 44px !important; }
    .as_cart_wrapper > a,
    .as_header_wrapper .as_toggle {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ---------- 7b. FOOTER LOGO + WIDGET LAYOUT ---------- */
.as_footer_logo {
    display: block;
    margin-bottom: 16px;
}
.as_footer_logo a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}
.as_footer_logo img {
    /* width: auto !important; */
    /* max-width: 220px; */
    /* max-height: 50px; */
    /* height: auto !important; */
    /* object-fit: contain; */
    /* display: block; */
}

@media (max-width: 991.98px) {
    .as_footer_widget {/* margin-bottom: 28px; */}
    .as_footer_widget p,
    .as_footer_widget .as_contact_list li p { text-align: left; }
    .as_footer_logo img {/* max-width: 180px; *//* max-height: 44px; */}
}

@media (max-width: 575.98px) {
    .as_footer_logo img {max-width: 95%;max-height: fit-content;/* padding-top: 5px; */}
}

/* ---------- 7c. FOOTER NEWSLETTER FORM ---------- */
.as_footer_widget .as_newsletter_wrapper { display: block; }
.as_footer_widget .as_newsletter_box {
    display: flex !important;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 360px;
    margin: 0;
    position: relative;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(20, 17, 29, .55);
    border: 1px solid rgba(214, 173, 98, .35);
}
.as_footer_widget .as_newsletter_box input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 10px 16px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ab-text, #f3dfbd) !important;
    font-size: 13px;
    border-radius: 0 !important;
    margin: 0 !important;
}
.as_footer_widget .as_newsletter_box input[type="email"]::placeholder {
    color: rgba(243, 223, 189, .55);
}
.as_footer_widget .as_newsletter_box .as_btn {
    flex: 0 0 56px;
    width: 56px !important;
    height: 46px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 999px 999px 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--gold-grad, linear-gradient(135deg, #9b6b29 0%, #d6ad62 45%, #fff0ae 58%, #b57b2b 100%)) !important;
}
.as_footer_widget .as_newsletter_box .as_btn img {
    width: 18px;
    height: 18px;
    margin: 0;
}

@media (max-width: 767.98px) {
    /* Override the older rule that stacked the field on top of a
       full-width button — that's the layout the user flagged. */
    .as_newsletter_box {
        flex-wrap: nowrap !important;
    }
    .as_newsletter_box input {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
    }
    .as_newsletter_box .as_btn {
        border-radius: 0 999px 999px 0 !important;
        width: 56px !important;
    }
}

/* ---------- 7d. PRODUCT CARD — KILL DEAD SPACE ON TOUCH SCREENS ----------
   premium.css turns the hover-action list into a static beige block
   on phones/tablets which the user flagged as cluttering the card.
   Hide it everywhere hover doesn't apply — tapping the image still
   opens the product page, and the new detail strip below gives stock
   + category info anyway. */
@media (max-width: 991.98px) {
    .as_product_img ul,
    .as_product_box .as_product_img > ul {
        display: none !important;
    }
    .as_product_img {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .as_product_box {
        margin-bottom: 18px;
    }
    .as_product_box .as_product_detail {
        padding: 14px 14px 16px !important;
    }
    /* Smaller, contained image so the product (gemstone / yantra)
       isn't blown up — keeps the entire item visible on phones. */
    .as_product_img img {
        height: 160px !important;
        object-fit: contain !important;
        background: #fff;
        padding: 10px !important;
    }
}

/* Override legacy style.css that locks .as_product_box to a 483-px tall
   card on smaller laptops — leaves a big empty space below the price
   on the dark theme. Auto height + sensible min-height instead. */
@media (max-width: 1199px) {
    .as_product_box {
        min-height: 0 !important;
    }
}

/* Richer product-card content strip (added in shop pages) */
.as_product_box .product-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--ab-muted, #c9b89c);
    align-items: center;
}
.as_product_box .product-extra .pe-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(214, 173, 98, .12);
    border: 1px solid rgba(214, 173, 98, .28);
    color: var(--gold-light, #f0d38d);
    font-weight: 600;
    letter-spacing: .2px;
}
.as_product_box .product-extra .pe-chip.in-stock {
    color: #8ccc96;
    background: rgba(46, 139, 87, .12);
    border-color: rgba(46, 139, 87, .35);
}
.as_product_box .product-extra .pe-chip.out-stock {
    color: #ff9a8a;
    background: rgba(255, 100, 90, .12);
    border-color: rgba(255, 100, 90, .35);
}
.as_product_box .product-extra .pe-desc {
    flex: 1 1 100%;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ab-text, #f3dfbd);
    opacity: .82;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 7e. APPOINTMENT FORM — TIME PICKER ----------
   Time slot is a styled <select>. Keep the icon span on top but
   non-interactive so the dropdown still opens on tap. */
.as_appointment_form .form-group > span {
    pointer-events: none;
}
.as_appointment_form select.form-control,
.as_appointment_form select.as_time_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: 50px;
    cursor: pointer;
}

/* ---------- 7f-pre. CHECKOUT PAYMENT METHOD BOX ----------
   Restores readable contrast — the old inline-styled cream labels
   showed unreadable light-on-light text on the dark cosmic theme. */
.checkout-payment-box {
    background: linear-gradient(145deg, rgba(44, 32, 49, .96), rgba(30, 23, 36, .98));
    border: 1px solid rgba(214, 173, 98, .25);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
}
.checkout-payment-box h5 {
    color: var(--gold-light, #f0d38d) !important;
    margin: 0 0 14px;
    font-size: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(214, 173, 98, .18);
}
.checkout-payment-box .pay-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin: 0 0 10px;
    background: rgba(20, 17, 29, .55);
    border: 1px solid rgba(214, 173, 98, .25);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    font-weight: 400;
}
.checkout-payment-box .pay-option:hover {
    border-color: rgba(214, 173, 98, .55);
    background: rgba(214, 173, 98, .08);
}
.checkout-payment-box .pay-option input[type="radio"] {
    margin: 4px 0 0;
    accent-color: var(--gold-light, #f0d38d);
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.checkout-payment-box .pay-option:has(input:checked) {
    border-color: var(--gold-light, #f0d38d);
    background: rgba(214, 173, 98, .14);
    box-shadow: inset 0 0 0 1px rgba(240, 211, 141, .35);
}
.checkout-payment-box .pay-option-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.checkout-payment-box .pay-option-body strong {
    color: var(--ab-ink, #fff2d2);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .2px;
}
.checkout-payment-box .pay-option-desc {
    color: var(--ab-muted, #c9b89c);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ---------- 7f. ORDER SUCCESS BANNER ---------- */
.order-success-banner {
    background: linear-gradient(135deg, rgba(34, 139, 84, .15), rgba(214, 173, 98, .18));
    border: 1px solid rgba(34, 139, 84, .35);
    border-radius: 12px;
    padding: 22px 24px;
    color: var(--ab-text, #f3dfbd);
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.order-success-banner .osb-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e8b57, #4caf50);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 52px;
}
.order-success-banner h4 {
    margin: 0 0 4px;
    color: var(--gold-light, #f0d38d);
    font-size: 18px;
}
.order-success-banner p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
}
.order-success-banner .osb-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.order-success-banner .osb-actions .as_btn {
    padding: 9px 18px;
    font-size: 12px;
}
@media (max-width: 575.98px) {
    .order-success-banner { padding: 18px; }
    .order-success-banner .osb-actions { width: 100%; margin-left: 0; }
    .order-success-banner .osb-actions .as_btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- 7g. LOGIN / REGISTER PAGE RESPONSIVE ---------- */
.as_login_wrapper { padding: 60px 0; }
.ad_login_box {
    max-width: 980px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(28, 21, 35, .92), rgba(18, 39, 39, .92));
    border: 1px solid rgba(240, 211, 141, .25);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.ad_login_box .as_login_slider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: radial-gradient(circle at 30% 40%, rgba(214, 173, 98, .22), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(20, 110, 100, .25), transparent 60%);
}
.ad_login_box .as_login_slider img {
    max-width: 86%;
    max-height: 300px;
    height: auto;
    object-fit: contain;
}
.ad_login_box .as_login_detail {
    padding: 40px 36px;
    background: rgba(20, 17, 29, .35);
}
.ad_login_box .as_login_detail h1 {
    color: var(--gold-light, #f0d38d);
    font-size: 26px;
    margin-bottom: 6px;
}
.ad_login_box .as_login_detail form .form-control {
    background: rgba(20, 17, 29, .55) !important;
    border: 1px solid rgba(214, 173, 98, .35) !important;
    color: var(--ab-text, #f3dfbd) !important;
    height: 48px;
}
.ad_login_box .as_login_detail .as_login_data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ab-muted, #c9b89c);
}
.ad_login_box .as_login_detail .as_login_data a {
    color: var(--gold-light, #f0d38d);
}
.ad_login_box .as_login_detail .as_btn { width: 100%; max-width: 240px; }

@media (max-width: 991.98px) {
    .as_login_wrapper { padding: 36px 0; }
    .ad_login_box { border-radius: 12px; }
    .ad_login_box > .row { display: block; }
    .ad_login_box .col-lg-7,
    .ad_login_box .col-lg-5 { width: 100%; max-width: 100%; flex: 0 0 100%; }
    .ad_login_box .as_login_slider {
        min-height: 180px;
        padding: 24px;
    }
    .ad_login_box .as_login_slider img { max-height: 200px; }
    .ad_login_box .as_login_detail {
        padding: 32px 24px;
    }
}

@media (max-width: 575.98px) {
    .as_login_wrapper { padding: 18px 0; }
    .ad_login_box .as_login_slider {
        min-height: 140px;
        padding: 18px;
    }
    .ad_login_box .as_login_slider img { max-height: 150px; }
    .ad_login_box .as_login_detail { padding: 26px 18px; }
    .ad_login_box .as_login_detail h1 { font-size: 22px; }
    .ad_login_box .as_login_detail .as_login_data { font-size: 12px; }
}

/* ---------- 7h. APPOINTMENT FORM — fields spacing ---------- */
@media (max-width: 575.98px) {
    .as_appointment_form { padding: 20px !important; }
    .as_appointment_form .form-group { margin-bottom: 14px; }
    .as_appointment_form .form-control { height: 46px; font-size: 14px; }
}

/* ============================================================
   8. PREMIUM POLISH PASS — 2026-05-17
   Refines spacing, alignment, status pills, order/cart UI,
   timeline, and mobile menu drawer for an enterprise-grade
   luxury feel — without changing brand colors or layout.
   ============================================================ */

/* ---------- 8a. UNIVERSAL STATUS PILL ----------
   Replaces the ad-hoc inline-styled pastel pills (which were
   unreadable against the cosmic dark surface) with a theme-aware
   variant system that uses gold/green/red glows. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
    background: rgba(214, 173, 98, .12);
    color: var(--gold-light, #f0d38d);
    border-color: rgba(214, 173, 98, .35);
}
.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
}
.status-pill--pending {
    background: rgba(243, 196, 67, .12);
    color: #f3c443;
    border-color: rgba(243, 196, 67, .35);
}
.status-pill--processing {
    background: rgba(96, 173, 255, .12);
    color: #74b9ff;
    border-color: rgba(96, 173, 255, .35);
}
.status-pill--shipped {
    background: rgba(155, 109, 255, .12);
    color: #b48bff;
    border-color: rgba(155, 109, 255, .35);
}
.status-pill--success {
    background: rgba(70, 184, 117, .12);
    color: #6dd28d;
    border-color: rgba(70, 184, 117, .35);
}
.status-pill--danger {
    background: rgba(255, 100, 90, .12);
    color: #ff9a8a;
    border-color: rgba(255, 100, 90, .35);
}
.status-pill--neutral {
    background: rgba(201, 184, 156, .12);
    color: var(--ab-muted, #c9b89c);
    border-color: rgba(201, 184, 156, .28);
}

/* ---------- 8b. MY-ORDERS PAGE ---------- */
.orders-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.orders-filter .op-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(20, 17, 29, .55);
    border: 1px solid rgba(214, 173, 98, .28);
    color: var(--ab-text, #f3dfbd);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.orders-filter .op-pill:hover {
    border-color: var(--gold-light, #f0d38d);
    color: var(--gold-light, #f0d38d);
    transform: translateY(-1px);
}
.orders-filter .op-pill.is-active {
    background: var(--gold-grad, linear-gradient(135deg, #9b6b29 0%, #d6ad62 45%, #fff0ae 58%, #b57b2b 100%));
    color: #14111d !important;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(214, 173, 98, .28);
}

.orders-empty {
    background: linear-gradient(145deg, rgba(44, 32, 49, .96), rgba(30, 23, 36, .98));
    border: 1px solid rgba(214, 173, 98, .25);
    padding: 56px 24px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.orders-empty i {
    font-size: 46px;
    color: var(--gold-light, #f0d38d);
    margin-bottom: 14px;
}
.orders-empty h3 {
    color: var(--ab-ink, #fff2d2);
    margin: 0 0 8px;
    font-size: 20px;
}
.orders-empty p {
    color: var(--ab-muted, #c9b89c);
    margin: 0 0 22px;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.order-row {
    background: linear-gradient(145deg, rgba(44, 32, 49, .96), rgba(30, 23, 36, .98));
    border: 1px solid rgba(214, 173, 98, .22);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.order-row:hover {
    border-color: rgba(214, 173, 98, .5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}
.order-row__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.order-row__product {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.order-row__thumb {
    width: 64px; height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(214, 173, 98, .3);
    background: rgba(214, 173, 98, .06);
    flex-shrink: 0;
}
.order-row__product-text {
    flex: 1;
    min-width: 0;
}
.order-row__product-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ab-ink, #fff2d2);
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-row__product-more {
    color: var(--gold-light, #f0d38d);
    font-weight: 500;
    font-size: 12px;
    margin-left: 4px;
}
.order-row__product .order-row__num {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ab-muted, #c9b89c);
    font-family: monospace;
    letter-spacing: .4px;
    margin-right: 8px;
}
.order-row__product .order-row__date {
    display: inline;
    font-size: 11.5px;
    margin-top: 0;
}
@media (max-width: 575.98px) {
    .order-row__thumb { width: 52px; height: 52px; }
    .order-row__product-name { font-size: 14px; }
    .order-row__product .order-row__num,
    .order-row__product .order-row__date { display: block; margin-right: 0; }
}
.order-row__num {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ab-ink, #fff2d2);
    letter-spacing: .4px;
}
.order-row__date {
    display: block;
    font-size: 12px;
    color: var(--ab-muted, #c9b89c);
    margin-top: 4px;
}
.order-row__total {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-light, #f0d38d);
}
.order-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(214, 173, 98, .18);
    margin-bottom: 14px;
}
.order-row__pay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(20, 17, 29, .55);
    border: 1px solid rgba(214, 173, 98, .25);
    color: var(--ab-muted, #c9b89c);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}
.order-row__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.order-row__view,
.order-row__pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.order-row__view {
    background: rgba(20, 17, 29, .55);
    border: 1px solid rgba(214, 173, 98, .35);
    color: var(--gold-light, #f0d38d);
}
.order-row__view:hover {
    background: rgba(214, 173, 98, .14);
    color: var(--gold-light, #f0d38d);
    transform: translateY(-1px);
}
.order-row__pay-btn {
    background: var(--gold-grad, linear-gradient(135deg, #9b6b29 0%, #d6ad62 45%, #fff0ae 58%, #b57b2b 100%));
    color: #14111d;
    border: 0;
    box-shadow: 0 6px 16px rgba(214, 173, 98, .28);
}
.order-row__pay-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    color: #14111d;
}

@media (max-width: 575.98px) {
    .order-row { padding: 16px 16px; border-radius: 12px; }
    .order-row__total { font-size: 16px; }
}

/* ---------- 8c. ORDER DETAIL PAGE ---------- */
.order-card {
    background: linear-gradient(145deg, rgba(44, 32, 49, .96), rgba(30, 23, 36, .98));
    border: 1px solid rgba(214, 173, 98, .22);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.order-card__title {
    color: var(--gold-light, #f0d38d);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(214, 173, 98, .18);
    font-size: 15px;
    letter-spacing: .3px;
}

.order-status-card__head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.order-status-card__lead h4 {
    margin: 0 0 10px;
    color: var(--gold-light, #f0d38d);
    font-size: 16px;
    letter-spacing: .3px;
}
.order-status-card__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.order-status-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.order-tracking-box {
    text-align: right;
}
.order-tracking-box small {
    display: block;
    color: var(--ab-muted, #c9b89c);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.order-tracking-box strong {
    display: block;
    color: var(--ab-ink, #fff2d2);
    font-size: 13px;
    margin-top: 2px;
    letter-spacing: .3px;
}
.order-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-decoration: none;
    border: 0;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.order-btn--gold {
    background: var(--gold-grad, linear-gradient(135deg, #9b6b29 0%, #d6ad62 45%, #fff0ae 58%, #b57b2b 100%));
    color: #14111d !important;
    box-shadow: 0 6px 16px rgba(214, 173, 98, .28);
}
.order-btn--danger {
    background: rgba(255, 100, 90, .14);
    color: #ff9a8a !important;
    border: 1px solid rgba(255, 100, 90, .35);
}
.order-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.order-btn--danger:hover { background: rgba(255, 100, 90, .22); }

/* Progress steps */
.order-steps {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 26px 0 4px;
    padding: 0;
    gap: 4px;
}
.order-step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.order-step__dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(20, 17, 29, .65);
    border: 1.5px solid rgba(214, 173, 98, .28);
    color: var(--ab-muted, #c9b89c);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    position: relative;
    z-index: 2;
}
.order-step__label {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ab-muted, #c9b89c);
    line-height: 1.3;
    letter-spacing: .3px;
}
.order-step__bar {
    position: absolute;
    top: 19px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: rgba(214, 173, 98, .15);
    z-index: 1;
}
.order-step__bar.is-done {
    background: var(--gold-grad, linear-gradient(90deg, #d6ad62, #fff0ae));
}
.order-step.is-done .order-step__dot {
    background: var(--gold-grad, linear-gradient(135deg, #9b6b29 0%, #d6ad62 45%, #fff0ae 58%, #b57b2b 100%));
    border-color: transparent;
    color: #14111d;
    box-shadow: 0 6px 14px rgba(214, 173, 98, .35);
}
.order-step.is-done .order-step__label {
    color: var(--ab-text, #f3dfbd);
}
.order-step.is-current .order-step__dot {
    box-shadow: 0 0 0 5px rgba(214, 173, 98, .18), 0 6px 14px rgba(214, 173, 98, .35);
}

@media (max-width: 575.98px) {
    .order-steps { gap: 0; flex-wrap: wrap; }
    .order-step__dot { width: 32px; height: 32px; font-size: 12px; }
    .order-step__bar { top: 15px; }
    .order-step__label { font-size: 10.5px; margin-top: 6px; }
}

/* Items */
.order-items {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(20, 17, 29, .45);
    border: 1px solid rgba(214, 173, 98, .15);
    border-radius: 10px;
}
.order-item__thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #1f1926;
    border: 1px solid rgba(214, 173, 98, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.order-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.order-item__thumb--placeholder {
    color: var(--ab-muted, #c9b89c);
    font-size: 20px;
}
.order-item__body { flex: 1; min-width: 0; }
.order-item__name {
    display: block;
    color: var(--ab-ink, #fff2d2) !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-item__name:hover { color: var(--gold-light, #f0d38d) !important; }
.order-item__meta {
    display: block;
    color: var(--ab-muted, #c9b89c);
    font-size: 12px;
    margin-top: 2px;
}
.order-item__total {
    color: var(--gold-light, #f0d38d);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.order-totals {
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px dashed rgba(214, 173, 98, .22);
}
.order-totals > div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--ab-text, #f3dfbd);
    font-size: 13.5px;
}
.order-totals dt { margin: 0; font-weight: 500; }
.order-totals dd { margin: 0; font-weight: 600; }
.order-totals .order-totals__grand {
    border-top: 1px solid rgba(214, 173, 98, .22);
    margin-top: 6px;
    padding-top: 12px;
    font-size: 16px;
}
.order-totals .order-totals__grand dt { color: var(--ab-ink, #fff2d2); font-weight: 700; }
.order-totals .order-totals__grand dd { color: var(--gold-light, #f0d38d); font-weight: 700; font-size: 18px; }

/* Address */
.order-address strong {
    display: block;
    color: var(--ab-ink, #fff2d2);
    margin-bottom: 6px;
    font-size: 15px;
}
.order-address p {
    color: var(--ab-text, #f3dfbd);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.order-address p i {
    color: var(--gold-light, #f0d38d);
    width: 16px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Timeline */
.order-timeline {
    list-style: none;
    padding: 4px 0 4px 22px;
    margin: 0;
    position: relative;
}
.order-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(214, 173, 98, .35), rgba(214, 173, 98, .1));
}
.order-timeline__node {
    position: relative;
    padding: 8px 0 14px 6px;
}
.order-timeline__dot {
    position: absolute;
    left: -22px;
    top: 12px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold-grad, linear-gradient(135deg, #d6ad62, #fff0ae));
    box-shadow: 0 0 0 4px rgba(214, 173, 98, .15);
}
.order-timeline__status {
    display: block;
    color: var(--ab-ink, #fff2d2);
    font-size: 13.5px;
    text-transform: capitalize;
    letter-spacing: .2px;
}
.order-timeline__note {
    margin: 4px 0;
    color: var(--ab-text, #f3dfbd);
    font-size: 12.5px;
    line-height: 1.5;
}
.order-timeline__time {
    color: var(--ab-muted, #c9b89c);
    font-size: 11.5px;
}

/* ---------- 8d. APPOINTMENT SUCCESS BLOCK ---------- */
.appointment-success {
    background: linear-gradient(145deg, rgba(44, 32, 49, .96), rgba(30, 23, 36, .98));
    border: 1px solid rgba(214, 173, 98, .35);
    border-radius: 16px;
    padding: 36px 30px;
    text-align: center;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(240, 211, 141, .06);
}
.appointment-success__icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2e8b57, #4caf50);
    color: #fff;
    font-size: 26px;
    margin-bottom: 16px;
    box-shadow: 0 10px 24px rgba(46, 139, 87, .35);
}
.appointment-success h3 {
    color: var(--gold-light, #f0d38d);
    margin: 0 0 8px;
    font-size: 24px;
    letter-spacing: .4px;
}
.appointment-success p {
    color: var(--ab-text, #f3dfbd);
    line-height: 1.7;
    margin: 0 auto 22px;
    max-width: 460px;
    font-size: 14px;
}
.appointment-success__actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.appointment-success__actions .as_btn {
    min-width: 160px;
    text-align: center;
}
.as_btn.as_btn--ghost {
    background: rgba(20, 17, 29, .55) !important;
    color: var(--ab-text, #f3dfbd) !important;
    border: 1px solid rgba(214, 173, 98, .45) !important;
}
.as_btn.as_btn--ghost:hover {
    background: rgba(214, 173, 98, .14) !important;
    color: var(--gold-light, #f0d38d) !important;
}

@media (max-width: 575.98px) {
    .appointment-success { padding: 28px 18px; }
    .appointment-success h3 { font-size: 20px; }
    .appointment-success__actions .as_btn { width: 100%; min-width: 0; }
}

/* ---------- 8e. FLASH MESSAGES ON DARK THEME ---------- */
.alert.alert-success,
.alert.alert-danger,
.alert.alert-info,
.alert.alert-warning {
    border-radius: 12px;
    padding: 14px 18px 14px 16px;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.alert.alert-success {
    background: rgba(46, 139, 87, .14) !important;
    border-color: rgba(70, 184, 117, .35) !important;
    color: #b9e6c9 !important;
}
.alert.alert-danger {
    background: rgba(255, 100, 90, .12) !important;
    border-color: rgba(255, 100, 90, .35) !important;
    color: #ffb3a6 !important;
}
.alert.alert-info {
    background: rgba(96, 173, 255, .12) !important;
    border-color: rgba(96, 173, 255, .35) !important;
    color: #b5d7ff !important;
}
.alert.alert-warning {
    background: rgba(243, 196, 67, .12) !important;
    border-color: rgba(243, 196, 67, .4) !important;
    color: #f7da82 !important;
}
.alert .close {
    background: transparent !important;
    border: 0;
    color: inherit !important;
    opacity: .55;
    font-size: 22px;
    line-height: 1;
    margin-left: auto;
    padding: 0 4px;
    cursor: pointer;
    text-shadow: none;
}
.alert .close:hover { opacity: 1; }

/* ---------- 8f. CART MINI-POPUP — FIX MOBILE OVERFLOW ----------
   Screenshot showed the popup floating over the breadcrumb with
   the "remove" pill ballooning. Anchor it within the viewport
   and tighten the row layout. */
@media (max-width: 575.98px) {
    .as_cart_box {
        position: fixed !important;
        top: 70px !important;
        right: 8px !important;
        left: auto !important;
        width: min(94vw, 320px) !important;
        max-width: 94vw !important;
        z-index: 9998;
    }
    .as_cart_list li { gap: 8px !important; padding: 8px 0 !important; }
    .as_cart_info { padding-right: 18px; }
    .as_cart_info a:not(.as_cart_remove) { font-size: 12.5px !important; }
    .as_cart_info p { font-size: 11.5px !important; }
    .as_cart_info .as_cart_remove {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }
    .as_cart_btn .as_btn {
        font-size: 11.5px !important;
        padding: 8px 10px !important;
    }
}

/* ---------- 8g. MOBILE MENU DRAWER — POLISH ----------
   Cleaner item alignment, consistent height, smoother transition. */
@media (max-width: 991.98px) {
    .as_menu {
        scrollbar-width: thin;
        scrollbar-color: rgba(214,173,98,.4) transparent;
    }
    .as_menu::-webkit-scrollbar { width: 6px; }
    .as_menu::-webkit-scrollbar-thumb {
        background: rgba(214,173,98,.35);
        border-radius: 4px;
    }
    .as_menu > ul {
        gap: 4px;
    }
    .as_menu > ul > li {
        border-bottom: 0 !important;
        background: rgba(20, 17, 29, .45);
        border: 1px solid rgba(214, 173, 98, .14);
        border-radius: 10px;
        overflow: hidden;
        transition: background .2s ease, border-color .2s ease;
    }
    .as_menu > ul > li:hover,
    .as_menu > ul > li.is-active,
    .as_menu > ul > li:has(> a.active) {
        background: rgba(214, 173, 98, .12);
        border-color: rgba(214, 173, 98, .4);
    }
    .as_menu > ul > li > a {
        padding: 14px 18px !important;
        font-size: 15px !important;
        letter-spacing: .35px;
        display: flex !important;
        align-items: center;
        gap: 10px;
    }
    .as_menu > ul > li > a.active {
        color: var(--gold-light, #f0d38d) !important;
    }
    .as_menu .as_submenu {
        padding: 4px 0 8px !important;
        background: rgba(14, 11, 21, .35) !important;
        border-top: 1px dashed rgba(214, 173, 98, .15) !important;
    }
    .as_menu .as_submenu li a {
        padding: 10px 28px !important;
        font-size: 13.5px !important;
    }
}

/* ---------- 8h. BREADCRUMB SECTION POLISH ----------
   The torn-paper breadcrumb in screenshots leaves harsh white edges.
   Soften it. */
.as_breadcrum_wrapper {
    padding: 60px 0 110px !important;
}
.as_breadcrum_wrapper .breadcrumb {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(20, 17, 29, .45);
    border: 1px solid rgba(214, 173, 98, .25);
    border-radius: 999px;
    margin-top: 14px;
    font-size: 12.5px;
}
.as_breadcrum_wrapper .breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ab-muted, #c9b89c);
    font-weight: 500;
    background: none !important;
    padding: 0 !important;
}
.as_breadcrum_wrapper .breadcrumb li img,
.as_breadcrum_wrapper .breadcrumb li::before {
    display: none !important;
}
.as_breadcrum_wrapper .breadcrumb li + li::after { display: none; }
.as_breadcrum_wrapper .breadcrumb li:not(:last-child)::after {
    content: '\f105'; /* fa-angle-right */
    font-family: FontAwesome;
    color: rgba(214, 173, 98, .4);
    margin-left: 2px;
}
.as_breadcrum_wrapper .breadcrumb li a {
    color: var(--gold-light, #f0d38d);
}
.as_breadcrum_wrapper .breadcrumb li:last-child {
    color: var(--ab-ink, #fff2d2);
}

@media (max-width: 575.98px) {
    .as_breadcrum_wrapper { padding: 40px 0 80px !important; }
    .as_breadcrum_wrapper h1 { font-size: 22px; }
    .as_breadcrum_wrapper .breadcrumb {display: none;padding: 6px 14px;font-size: 11.5px;}
}

/* ---------- 8i. SECTION HEADING POLISH ---------- */
.as_heading.as_heading_center {
    margin-bottom: 6px;
}

/* ---------- 8j. TOAST NOTIFICATIONS (AJAX layer) ---------- */
.astro-toast-host {
    position: fixed;
    z-index: 99999;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 24px));
}
.astro-toast {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(28, 21, 35, .98), rgba(18, 39, 39, .98));
    border: 1px solid rgba(214, 173, 98, .35);
    color: var(--ab-text, #f3dfbd);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
    font-size: 13.5px;
    line-height: 1.45;
    min-width: 220px;
}
.astro-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.astro-toast__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}
.astro-toast--success { border-color: rgba(70, 184, 117, .45); }
.astro-toast--success .astro-toast__icon { background: linear-gradient(135deg, #2e8b57, #4caf50); }
.astro-toast--error   { border-color: rgba(255, 100, 90, .45); }
.astro-toast--error   .astro-toast__icon { background: linear-gradient(135deg, #c0392b, #ff6b5a); }
.astro-toast--info    { border-color: rgba(96, 173, 255, .45); }
.astro-toast--info    .astro-toast__icon { background: linear-gradient(135deg, #2c6fbb, #5ea7f0); }
.astro-toast__msg { flex: 1; padding-top: 3px; }

@media (max-width: 575.98px) {
    .astro-toast-host {
        top: auto;
        bottom: 14px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
    .astro-toast { width: 100%; min-width: 0; }
}

/* ---------- 8k. BUTTON LOADING STATE (AJAX layer) ---------- */
[aria-busy="true"],
.is-loading {
    position: relative;
    pointer-events: none;
}
.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: astroSpin .7s linear infinite;
}
.is-loading > * { opacity: .35; }
@keyframes astroSpin {
    to { transform: rotate(360deg); }
}

/* Tiny pulse on the cart badge when the count updates */
.as_cartnumber.is-pulse {
    animation: astroPulse .55s ease;
}
@keyframes astroPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ---------- 6. ADMIN PAGES (basic mobile sanity) ---------- */
@media (max-width: 991.98px) {
    .admin-wrapper .admin-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100vh;
        z-index: 1300;
        transition: left .28s ease;
    }
    .admin-wrapper.sidebar-open .admin-sidebar { left: 0; }
    .admin-content,
    .admin-main { margin-left: 0 !important; padding: 16px !important; }
    .admin-topbar { padding: 10px 14px !important; }
    .admin-page-title { font-size: 20px !important; }
    .admin-table-wrap { overflow-x: auto; }
    .admin-table-wrap table { min-width: 600px; }
}

/* ============================================================
   9. MOBILE HEADER REDESIGN — 2026-05-17
   Three-zone mobile header: hamburger (left), logo (center),
   profile avatar dropdown (right). Replaces the cart/wishlist
   icons on mobile — cart access moves into the profile dropdown
   and the nav drawer.
   ============================================================ */

/* Default: hide the mobile profile dropdown on desktop. */
.as_mobile_user { display: none; }
.as_drawer_userhead { display: none; }

@media (max-width: 991.98px) {
    /* ---- 9a. HEADER BAR LAYOUT ----
       Convert the two-column row into a relative container with
       three absolutely-anchored zones so the logo can sit dead
       center regardless of icon width. */
    .as_header_wrapper > .container > .row {
        position: relative;
        min-height: 64px;
        align-items: center;
    }

    /* Hide legacy icons on mobile — replaced by mobile profile dropdown. */
    .as_header_wrapper .as_right_info .as_wishlist,
    .as_header_wrapper .as_right_info .as_cart {
        display: none !important;
    }

    /* The right-info col becomes a transparent overlay that hosts
       the anchored hamburger and profile button. */
    .as_header_wrapper .col-xs-6:last-child,
    .as_header_wrapper .col-sm-8 {
        position: static;
    }

    /* Logo column → full-width, logo centered. */
    .as_header_wrapper .col-xs-6:first-child,
    .as_header_wrapper .col-sm-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center;
    }
    .as_header_wrapper .as_logo {
        display: inline-block !important;
        margin: 0 auto !important;
        text-align: center;
    }
    .as_header_wrapper .as_logo img {
        margin: 0 auto !important;
        max-height: 58px !important;
        width: auto !important;
        /* align-self: flex-start; */
        margin-top: 8px !important;
    }

    /* Hamburger — anchored top-left of the row. */
    .as_header_wrapper .as_menu_wrapper {
        position: static;
    }
    .as_header_wrapper .as_menu_wrapper > .as_toggle {
        position: absolute !important;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10001;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: rgba(20, 17, 29, .55) !important;
        border: 1px solid rgba(214, 173, 98, .42) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Show the mobile profile dropdown — anchored top-right. */
    .as_mobile_user {
        display: block;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10001;
    }
    .as_mobile_user_toggle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(20, 17, 29, .55);
        border: 1px solid rgba(214, 173, 98, .42);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        overflow: hidden;
        transition: border-color .2s ease, background .2s ease;
    }
    .as_mobile_user_toggle:hover,
    .as_mobile_user.is-open .as_mobile_user_toggle {
        background: rgba(214, 173, 98, .18);
        border-color: var(--gold-light, #f0d38d);
    }
    .as_mobile_user_toggle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    .as_mobile_user_toggle i {
        color: var(--gold-light, #f0d38d);
        font-size: 22px;
    }

    /* ---- 9b. PROFILE DROPDOWN PANEL ---- */
    .as_mobile_user_menu {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        min-width: 260px;
        max-width: 86vw;
        background: linear-gradient(165deg, #1a1428 0%, #14202b 100%);
        border: 1px solid rgba(214, 173, 98, .25);
        border-radius: 12px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
        padding: 8px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
        z-index: 10002;
    }
    .as_mobile_user.is-open .as_mobile_user_menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .as_mobile_user_head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 10px;
        border-bottom: 1px solid rgba(214, 173, 98, .18);
        margin-bottom: 6px;
    }
    .as_mobile_user_head img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid rgba(214, 173, 98, .42);
    }
    .as_mobile_user_head i {
        font-size: 38px;
        color: var(--gold-light, #f0d38d);
        line-height: 1;
    }
    .as_mobile_user_head strong {
        display: block;
        color: var(--ab-text, #f3dfbd);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
    }
    .as_mobile_user_head small {
        display: block;
        color: var(--ab-muted, #b9a78a);
        font-size: 11px;
        margin-top: 3px;
        word-break: break-all;
    }

    .as_mobile_user_list {
        display: flex;
        flex-direction: column;
        padding: 4px 0;
    }
    .as_mobile_user_list a,
    .as_mobile_user_logout {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 12px;
        color: var(--ab-text, #f3dfbd) !important;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
        border-radius: 8px;
        transition: background .15s ease, color .15s ease;
        position: relative;
    }
    .as_mobile_user_list a i,
    .as_mobile_user_logout i {
        width: 18px;
        font-size: 15px;
        color: var(--gold, #c8a96e);
        text-align: center;
    }
    .as_mobile_user_list a:hover,
    .as_mobile_user_list a:focus {
        background: rgba(214, 173, 98, .12);
        color: var(--gold-light, #f0d38d) !important;
    }
    .as_mobile_user_list a.is-admin i { color: #ffb84d; }

    .as_mobile_user_badge {
        margin-left: auto;
        background: var(--gold, #c8a96e);
        color: #1a1428;
        font-size: 11px;
        font-weight: 700;
        min-width: 22px;
        height: 22px;
        line-height: 22px;
        border-radius: 11px;
        text-align: center;
        padding: 0 7px;
    }

    .as_mobile_user_logout {
        margin-top: 4px;
        border-top: 1px solid rgba(214, 173, 98, .18);
        border-radius: 0 0 8px 8px;
        color: #ff9a8b !important;
    }
    .as_mobile_user_logout i { color: #ff9a8b; }
    .as_mobile_user_logout:hover {
        background: rgba(255, 100, 80, .12);
        color: #ffb0a3 !important;
    }

    /* ---- 9c. NAV DRAWER — card-style items (matches .as_drawer_quick)
       Each nav item becomes a gold-tinted pill so the entire drawer
       reads as one unified, premium list. Override premium.css's
       defaults from ~line 2629. */
    .as_menu > ul {
        gap: 6px !important;
    }
    .as_menu > ul > li {
        border: 0 !important;
        border-radius: 0 !important;
    }
    .as_menu > ul > li > a {
        padding: 12px 14px !important;
        min-height: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: .2px !important;
        color: var(--ab-text, #f3dfbd) !important;
        background: rgba(214, 173, 98, .08) !important;
        border: 1px solid rgba(214, 173, 98, .18) !important;
        border-radius: 10px !important;
        transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    }
    .as_menu > ul > li > a:hover {
        background: rgba(214, 173, 98, .18) !important;
        border-color: rgba(214, 173, 98, .42) !important;
        color: var(--gold-light, #f0d38d) !important;
        transform: translateX(2px);
    }
    .as_menu > ul > li > a.active {
        background: linear-gradient(120deg, rgba(214, 173, 98, .26), rgba(214, 173, 98, .14)) !important;
        border-color: rgba(214, 173, 98, .55) !important;
        color: var(--gold-light, #f0d38d) !important;
        box-shadow: 0 4px 14px rgba(214, 173, 98, .12);
    }

    .as_menu .as_submenu {
        background: rgba(0, 0, 0, .22) !important;
        border: 1px solid rgba(214, 173, 98, .12) !important;
        border-radius: 10px !important;
        padding: 4px 8px !important;
        margin: 4px 0 0 28px !important;
    }
    .as_menu .as_submenu li a {
        padding: 9px 8px !important;
        font-size: 13px !important;
        color: rgba(201, 184, 156, .88) !important;
        font-weight: 500 !important;
        border-bottom: 0 !important;
        border-radius: 6px !important;
        display: block !important;
    }
    .as_menu .as_submenu li a:hover {
        color: var(--gold-light, #f0d38d) !important;
        background: rgba(214, 173, 98, .12) !important;
    }

    /* Kill the body-level page fade that premium.css adds when the
       drawer opens. The user wants the page behind the drawer to
       show normally — like the profile dropdown does. */
    body.as_menu_is_open::after { display: none !important; }
    body.as_menu_is_open { overflow: hidden; }

    /* ---- 9d. DRAWER USER HEADER ----
       Avatar + name section that the user asked to mirror the
       profile dropdown. Lives at the top of the drawer. */
    .as_drawer_userhead {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 6px 18px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(214, 173, 98, .22);
    }
    .as_drawer_userhead img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid rgba(214, 173, 98, .42);
        flex-shrink: 0;
    }
    .as_drawer_userhead i {
        font-size: 42px;
        color: var(--gold-light, #f0d38d);
        line-height: 1;
        flex-shrink: 0;
    }
    .as_drawer_userhead_info {
        min-width: 0;
        flex: 1;
    }
    .as_drawer_userhead_info .as_drawer_greet {
        display: block;
        color: var(--gold-light, #f0d38d);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .8px;
        text-transform: uppercase;
        margin-bottom: 2px;
        opacity: .92;
    }
    .as_drawer_userhead_info strong {
        display: block;
        color: var(--ab-text, #f3dfbd);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
        word-break: break-word;
    }
    .as_drawer_userhead_info small {
        display: block;
        color: var(--ab-muted, #b9a78a);
        font-size: 11px;
        margin-top: 3px;
        word-break: break-all;
    }

    /* Drawer: fills the full mobile screen, beautified surface.
       100dvh accounts for the mobile address bar so the drawer
       reaches the actual bottom of the viewport. */
    .as_menu {
        width: 78vw !important;
        max-width: 340px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 20px 16px 22px !important;
        background:
            radial-gradient(120% 60% at 0% 0%, rgba(214,173,98,.10), transparent 60%),
            linear-gradient(168deg, #1a1428 0%, #14202b 55%, #0e1a24 100%) !important;
        display: flex !important;
        flex-direction: column;
        box-shadow: 8px 0 30px rgba(0, 0, 0, .55);
    }

    /* Defensive: hide any legacy close button. The drawer closes by
       tapping the visible page area or pressing Escape. */
    .as_drawer_close { display: none !important; }

    /* Drawer userhead — clean card with gold-glow avatar. */
    .as_drawer_userhead {
        padding: 4px 6px 16px !important;
        border-bottom: 1px solid rgba(214, 173, 98, .22) !important;
    }
    .as_drawer_userhead img {
        box-shadow: 0 4px 12px rgba(0, 0, 0, .4),
                    0 0 0 2px rgba(214, 173, 98, .25);
    }

    /* ---- 9f. NAV LINK ICONS (mobile only) ----
       Desktop menu has no icons. We add them in markup but only show
       them inside the mobile drawer. */
    .as_menu ul li > a > i.fa {
        display: inline-block;
        width: 22px;
        font-size: 14px;
        margin-right: 14px;
        color: var(--gold, #c8a96e);
        text-align: center;
        transition: color .15s ease;
        vertical-align: middle;
    }
    .as_menu > ul > li > a {
        display: flex !important;
        align-items: center;
        padding: 12px 8px !important;
    }
    .as_menu > ul > li > a > span {
        flex: 1;
    }
    .as_menu > ul > li.as_has_submenu > a::after {
        content: '\f107'; /* fa-angle-down */
        font-family: FontAwesome;
        margin-left: auto;
        color: rgba(214, 173, 98, .6);
        font-size: 14px;
        transition: transform .2s ease;
    }
    .as_menu > ul > li.as_has_submenu:has(.as_submenu.active) > a::after {
        transform: rotate(180deg);
    }
    .as_menu > ul > li > a:hover > i.fa,
    .as_menu > ul > li > a.active > i.fa {
        color: var(--gold-light, #f0d38d);
    }

    /* Scrollable list area between userhead and bottom section. */
    .as_menu > ul {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- 9g. DRAWER BOTTOM (Settings, Cart, Greeting, Version) ---- */
    .as_drawer_bottom {
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid rgba(214, 173, 98, .22);
        flex-shrink: 0;
    }

    /* Quick links — full-width list rows. Avoids the cramped 3-col
       grid that was clipping "Logout" on narrow screens. */
    .as_drawer_quicklinks {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 14px;
    }
    .as_drawer_quick {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 10px;
        background: rgba(214, 173, 98, .08);
        border: 1px solid rgba(214, 173, 98, .18);
        color: var(--ab-text, #f3dfbd) !important;
        font-size: 13px !important;
        font-weight: 600;
        text-decoration: none !important;
        transition: background .15s ease, border-color .15s ease, transform .15s ease;
    }
    .as_drawer_quick > span:not(.as_drawer_quick_badge) {
        flex: 1;
    }
    .as_drawer_quick i {
        font-size: 15px;
        width: 18px;
        text-align: center;
        color: var(--gold-light, #f0d38d);
    }
    .as_drawer_quick:hover {
        background: rgba(214, 173, 98, .18);
        border-color: rgba(214, 173, 98, .42);
        transform: translateY(-1px);
    }
    .as_drawer_quick--danger {
        background: rgba(255, 100, 80, .08);
        border-color: rgba(255, 100, 80, .22);
        color: #ff9a8b !important;
    }
    .as_drawer_quick--danger i { color: #ff9a8b; }
    .as_drawer_quick--danger:hover {
        background: rgba(255, 100, 80, .18);
        border-color: rgba(255, 100, 80, .42);
        color: #ffb0a3 !important;
    }
    .as_drawer_quick_badge {
        background: var(--gold, #c8a96e);
        color: #1a1428;
        font-size: 11px;
        font-weight: 800;
        min-width: 22px;
        height: 22px;
        line-height: 22px;
        border-radius: 11px;
        padding: 0 7px;
        text-align: center;
    }

    .as_drawer_version {
        text-align: center;
        font-size: 10px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: rgba(214, 173, 98, .55);
        padding: 2px 0;
    }
}

/* Desktop: never show drawer-specific extras (defensive). */
@media (min-width: 992px) {
    .as_drawer_close,
    .as_drawer_bottom,
    .as_menu ul li > a > i.fa { display: none !important; }
}