/*
Theme Name: Amman Store Theme
Theme URI: https://amman-store.store/
Author: Your Name
Author URI: https://amman-store.store/
Description: A custom WooCommerce theme for Amman Store.
Version: 1.0.0
Text Domain: mystoretheme
*/

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    color: #1e2530;
    background-color: #ffffff;
}

#page {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure content doesn't stick to header */
.site-main {
    padding-top: 20px;
}

@media (max-width: 768px) {
    .site-main {
        padding-top: 16px;
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

:root {
    --site-container-max: 1440px;
    --site-container-width: 80%;
}

.container {
    width: min(var(--site-container-width), var(--site-container-max));
    max-width: var(--site-container-max);
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

/* ============================================================
   HEADER TOP LAYOUT
   ============================================================ */
.site-header-bg {
    background-color: #1e2530;
    width: 100%;
    position: relative;
    z-index: 1000;
}

/* ضبط محاذاة الأيقونات والنص لليمين */
/* ضبط محاذاة وتنسيق روابط قائمة المنتجات المنسدلة */
#categories-panel>.categories-mega-wrapper>.categories-sidebar>ul>li>a,
#categories-panel>.categories-mega-wrapper>.categories-sidebar>.categories-list>li>a,
.category-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    direction: rtl !important;
    text-align: right !important;
    gap: 12px !important;
    padding: 7px 12px !important;
    min-height: 40px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    margin: 2px 6px !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* تأثير التأشير الموحد باللون الأخضر الملكي لكل القوائم */
#categories-panel ul li a:hover,
.category-link:hover,
.category-item:hover > .category-link,
.category-item.is-active-sub > .category-link {
    color: #00b08a !important;
    background-color: #f0fdf4 !important;
    font-weight: 700 !important;
}

/* حاوية أيقونة التصنيف مع التنوع اللوني المتناسق */
.cat-icon-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cat-bg, #ecfdf5) !important;
    color: var(--cat-accent, #00b08a) !important;
    border: 1px solid var(--cat-border, #a7f3d0) !important;
    flex-shrink: 0 !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.cat-icon-badge svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    transition: transform 0.2s ease !important;
}

.category-item:hover .cat-icon-badge,
.category-item.is-active-sub .cat-icon-badge {
    transform: scale(1.08) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

.cat-name {
    flex: 1 !important;
    font-size: 13.5px !important;
}

/* شارة عدد الفروع وسهم التوجيه */
.cat-sub-count-pill {
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    background: var(--cat-bg, #ecfdf5) !important;
    color: var(--cat-accent, #00b08a) !important;
    border: 1px solid var(--cat-border, #a7f3d0) !important;
    margin-right: auto !important;
    transition: all 0.2s ease !important;
}

.category-item:hover .cat-sub-count-pill {
    background: var(--cat-accent, #00b08a) !important;
    color: #ffffff !important;
    border-color: var(--cat-accent, #00b08a) !important;
}

.cat-link-chevron {
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}

.category-item:hover .cat-link-chevron {
    color: #00b08a !important;
    transform: translateX(-3px) !important;
}

.categories-list .menu-item-has-children>a::after {
    display: none !important;
}

.cat-menu-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.cat-menu-label .cat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-icon-dynamic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

.cat-icon-dynamic svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.header-top {
    background-color: transparent;
    /* Inherit from site-header-bg */
    height: 80px;
    /* Taller height as per image */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    /* Space between logo, search, and icons */
}

/* ============================================================
   LOGO
   ============================================================ */
.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background-color: #00b08a;
    /* Teal brand color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.logo-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.site-title {
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-decoration: none;
}

.site-title-link {
    text-decoration: none;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.header-search {
    flex: 1;
    max-width: none;
    /* Let it grow naturally based on flex */
}

.search-form {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    /* Dark transparent bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 0 20px;
    height: 46px;
    gap: 12px;
}

.search-form:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.08);
}

.search-field {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 14px;
    outline: none;
}

.search-field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-submit {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search-submit svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ============================================================
   ICONS AREA
   ============================================================ */
.header-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Responsive adjustments for header icon spacing */
@media (max-width: 992px) {
    .header-top {
        gap: 15px;
    }

    .header-icons {
        gap: 12px;
    }

    .site-title {
        font-size: 24px;
        /* Make title larger */
    }
}

@media (max-width: 768px) {
    .header-top {
        gap: 15px;
        /* إضافة مسافة تنفس بين البرغر والعنوان */
        flex-wrap: nowrap;
    }

    .site-branding {
        flex: 1;
        justify-content: flex-start;
        /* محاذاة العنوان بجانب البرغر بترتيب ممتاز */
        margin: 0;
        /* إزالة الهوامش العشوائية */
    }

    .header-icons {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .site-title {
        font-size: 22px;
    }

    .icon-btn {
        width: 38px;
        height: 38px;
    }

    .icon-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 576px) {
    .header-top {
        gap: 12px;
        /* مسافة مريحة لشاشات الجوال */
        flex-wrap: nowrap;
        padding: 0 15px;
        /* إبعاد العناصر عن حواف الشاشة */
    }

    .site-branding {
        flex: 1;
        justify-content: flex-start;
        margin: 0;
    }

    .header-icons {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .site-title {
        font-size: 20px;
        white-space: nowrap;
        margin-right: 0.5rem;
    }

    .icon-btn {
        width: 34px;
        height: 34px;
    }

    .icon-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 390px) {
    .header-top {
        gap: 2px;
        padding: 0 4px;
    }

    .site-branding {
        min-width: 0;
    }

    .site-title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin-right: 0;
    }

    .header-icons {
        gap: 0;
    }

    .icon-btn {
        width: 28px;
        height: 28px;
    }

    .icon-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .hamburger-btn {
        width: 32px;
        height: 32px;
        padding: 6px;
    }
}

/* Hide logo icon on tablet and smaller screens */
@media (max-width: 992px) {
    .logo-icon {
        display: none;
    }
}

/* Hamburger Button */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 100;
}

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s;
}

@media (max-width: 1200px) {
    .hamburger-btn {
        display: flex;
    }
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0);
    /* No bg by default */
    color: rgba(255, 255, 255, 0.7);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* Default state for cart specifically */
.icon-btn.btn-cart {
    background-color: rgba(255, 255, 255, 0.05);
}

.icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #00b08a;
    /* Green badge */
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid #1e2530;
    /* Matches header background */
}

/* ============================================================
   TEXT COLORS & RTL LAYOUT
   ============================================================ */
.rtl-layout {
    direction: rtl;
    text-align: right;
}

.rtl-layout .header-icons {
    /* إزالة الـ auto لترك الـ Flexbox يوزع المسافات بشكل طبيعي */
    margin-right: 0;
    margin-left: 0;
}

.text-neon {
    color: #10bc66;
    /* Phosphoric green */
}

/* ============================================================
   HEADER BOTTOM LAYOUT
   ============================================================ */
.header-bottom {
    background-color: transparent;
    /* Inherit from site-header-bg */
    height: 70px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 
  في RTL المستعرض يعكس flex-direction افتراضياً.
  .header-bottom-nav سيكون فعلياً على اليمين.
  .header-bottom-settings سيكون فعلياً على اليسار.
*/
.header-bottom-nav,
.header-bottom-settings {
    display: flex;
    align-items: center;
}

.header-bottom-nav {
    gap: 30px;
}

/* ============================================================
   MAIN HORIZONTAL MENU
   ============================================================ */
.main-menu {
    display: flex;
    align-items: center;
}

.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}

.main-menu li {
    position: relative;
}

.main-menu a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    transition: color 0.2s;
}

.main-menu a:hover {
    color: #fff;
}

/* Dropdown Arrow for items with children */
.main-menu li.menu-item-has-children>a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 2px;
    opacity: 0.7;
    margin-right: 4px;
    /* RTL spacing */
}

/* Submenu layout */
.main-menu ul.sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    /* RTL alignment */
    background: #fff;
    min-width: 220px;
    flex-direction: column;
    gap: 0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 10px 0;
}

/* Show submenu on hover */
.main-menu li:hover>ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-menu ul.sub-menu li {
    width: 100%;
}

.main-menu ul.sub-menu a {
    color: #333;
    padding: 10px 20px;
    font-size: 14px;
    display: block;
    /* Override flex */
    transition: background 0.15s, color 0.15s, padding-right 0.2s;
}

.main-menu ul.sub-menu a:hover {
    background-color: #f5f7fa;
    color: #00b08a;
    padding-right: 26px;
    /* Shift text slightly on hover for RTL effect */
}

.main-menu ul.sub-menu a::after {
    display: none;
    /* Hide chevron on submenu links if any */
}

/* Nested submenus logic if needed */
.main-menu ul.sub-menu ul.sub-menu {
    top: 0;
    right: 100%;
}

/* ============================================================
   PRODUCTS BUTTON & CATEGORIES PANEL
   ============================================================ */
.products-dropdown {
    position: relative;
}

.products-dropdown .btn-products {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    border-radius: 6px 6px 0 0;
    /* Flat bottom */
    height: 54px;
    /* Fill the whole header-bottom height */
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.products-dropdown .btn-products:hover,
.products-dropdown .btn-products.active {
    background-color: rgba(255, 255, 255, 0.15);
}

.products-dropdown .btn-products svg {
    width: 18px;
    height: 18px;
}

.products-dropdown .btn-products .icon-chevron {
    width: 16px;
    height: 16px;
    margin-right: auto;
    opacity: 0.7;
    transition: transform 0.3s;
}

.products-dropdown .btn-products.active .icon-chevron {
    transform: rotate(180deg);
}

.categories-panel {
    position: absolute;
    top: 100%;
    /* flush with the bottom of the button */
    right: 0;
    /* RTL: starts from right */
    width: 235px !important;
    background: #fff;
    border-radius: 10px 0 10px 10px;
    /* Adjust border radius so it looks connected to the button */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: visible;
    /* CRITICAL FIX: hidden was clipping the dropdowns! */
    z-index: 10000;
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    margin-top: 10px;
    /* Instead of translateY */
    transition: margin-top 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.categories-panel.open {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.categories-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.category-item,
.categories-list li {
    display: block;
    position: relative;
}

.category-link,
.categories-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7.5px 14px;
    text-decoration: none;
    color: #3f4a56;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.category-link:hover,
.categories-list a:hover {
    color: #00b08a;
    background-color: #ecfdf5;
}

.cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cat-name {
    flex: 1;
    font-weight: 600;
}

.no-cats-msg {
    padding: 20px;
    color: #888;
    font-size: 13px;
    text-align: center;
}

/* ---- Categories Submenu (Side Panel) ---- */
.categories-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 235px !important;
    background: #fff;
    border-radius: 12px 0 12px 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: visible;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    margin-top: 8px;
    transform: none !important;
    transition: opacity 0.22s ease, visibility 0.22s ease, margin-top 0.22s ease;
}

.products-dropdown:hover .categories-panel,
.categories-panel.open {
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0 !important;
    transform: none !important;
}

.products-dropdown:hover .btn-products .icon-chevron,
.products-dropdown .btn-products.active .icon-chevron {
    transform: rotate(180deg) !important;
}

/* جسر وهمي علوي يمنع إغلاق القائمة أثناء تحريك الماوس من الزر إليها */
.categories-panel::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    height: 14px;
    background: transparent;
    z-index: 10001;
}

.categories-mega-wrapper {
    position: relative;
    width: 100%;
}

.categories-sidebar {
    width: 100%;
    max-height: calc(100vh - 145px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 6px 0 10px 0;
    scrollbar-width: thin;
    scrollbar-color: #00b08a #f1f5f9;
}

.categories-sidebar::-webkit-scrollbar {
    width: 6px;
}

.categories-sidebar::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.categories-sidebar::-webkit-scrollbar-thumb {
    background-color: #00b08a;
    border-radius: 4px;
}

.categories-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #008f6f;
}

/* ==========================================================
   PERFECT MEGA-MENU SUBMENU & SUB-SUBMENU STYLING (RTL)
   ========================================================== */

/* 1. Level 1 Submenu (المستوى الأول المنبثق من القائمة الجانبية) */
.categories-list > li > ul.sub-menu,
.categories-list ul.sub-menu:not(.sub-sub-menu) {
    position: fixed !important;
    width: 260px !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 14px 35px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
    z-index: 10002 !important;
    scrollbar-width: thin;
    scrollbar-color: #00b08a #f1f5f9;
}

.categories-list > li > ul.sub-menu::-webkit-scrollbar,
.categories-list ul.sub-menu:not(.sub-sub-menu)::-webkit-scrollbar {
    display: block !important;
    width: 6px !important;
}

.categories-list > li > ul.sub-menu::-webkit-scrollbar-track,
.categories-list ul.sub-menu:not(.sub-sub-menu)::-webkit-scrollbar-track {
    background: #f8fafc !important;
    margin: 8px 0 !important;
    border-radius: 10px !important;
}

.categories-list > li > ul.sub-menu::-webkit-scrollbar-thumb,
.categories-list ul.sub-menu:not(.sub-sub-menu)::-webkit-scrollbar-thumb {
    background-color: #00b08a !important;
    border-radius: 10px !important;
}

.categories-list > li > ul.sub-menu::-webkit-scrollbar-thumb:hover,
.categories-list ul.sub-menu:not(.sub-sub-menu)::-webkit-scrollbar-thumb:hover {
    background-color: #008f6f !important;
}

/* جسر وهمي عريض لمنع إغلاق القائمة عند تحريك الماوس بين العنصر والقائمة الفرعية */
.categories-list > li > ul.sub-menu::before,
.categories-list ul.sub-menu:not(.sub-sub-menu)::before {
    content: "";
    position: absolute;
    right: -25px;
    top: 0;
    bottom: 0;
    width: 35px;
    background: transparent;
}

.categories-list > li.is-active-sub > ul.sub-menu,
.categories-list > li > ul.sub-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

.categories-list li.is-active-sub > a.category-link {
    background: #ecfdf5 !important;
    color: #00b08a !important;
}

/* 2. رأس القائمة الفرعية (Sub-menu Header) */
.sub-menu-header-item {
    list-style: none !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

.sub-menu-header-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    background: #f8fafc !important;
    border-radius: 11px !important;
    border: 1px solid #f1f5f9 !important;
}

.sub-menu-header-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04) !important;
}

.sub-menu-header-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 !important;
}

.sub-menu-header-badge {
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    display: inline-block !important;
}

/* 3. عناصر القائمة الفرعية وتنوع أيقوناتها الملونة */
.categories-list ul.sub-menu li.sub-cat-item {
    position: relative !important;
    display: block !important;
    margin: 3px 0 !important;
    list-style: none !important;
}

.categories-list ul.sub-menu a.sub-cat-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    direction: rtl !important;
    text-align: right !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    background: transparent !important;
}

.categories-list ul.sub-menu li.sub-cat-item:hover > a.sub-cat-link,
.categories-list ul.sub-menu li.sub-cat-item.is-active-sub > a.sub-cat-link {
    color: #00b08a !important;
    background: #f0fdf4 !important;
    font-weight: 700 !important;
    transform: translateX(-2px) !important;
}

/* حاوية الأيقونة الخاصة بكل فرع بتنوع ألوان متناسق */
.sub-cat-icon-badge {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--subcat-bg, #ecfdf5) !important;
    color: var(--subcat-accent, #00b08a) !important;
    border: 1px solid var(--subcat-border, #a7f3d0) !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.sub-cat-icon-badge svg {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

.categories-list ul.sub-menu li.sub-cat-item:hover .sub-cat-icon-badge,
.categories-list ul.sub-menu li.sub-cat-item.is-active-sub .sub-cat-icon-badge {
    transform: scale(1.1) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

.sub-cat-name {
    flex: 1 !important;
    font-size: 13.5px !important;
}

.sub-cat-chevron {
    color: #94a3b8 !important;
    margin-right: auto !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0 !important;
}

.categories-list ul.sub-menu li.sub-cat-item:hover .sub-cat-chevron,
.categories-list ul.sub-menu li.sub-cat-item.is-active-sub .sub-cat-chevron {
    color: #00b08a !important;
    transform: translateX(-3px) !important;
}

/* 4. تذييل القائمة الفرعية (Sub-menu Footer) */
.sub-menu-footer-item {
    list-style: none !important;
    margin: 7px 0 2px 0 !important;
    padding-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.sub-menu-all-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}

.sub-menu-all-link:hover {
    background: #f1f5f9 !important;
    transform: translateY(-1px) !important;
}

/* 3. Level 2 Sub-Submenu (المستوى الثاني - القوائم الفرعية من الفرعية: ابن الابن) */
.categories-list ul.sub-menu ul.sub-sub-menu,
.categories-list ul.sub-sub-menu {
    position: fixed !important;
    width: 250px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 14px 35px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
    padding: 8px !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 10020 !important;

    scrollbar-width: thin;
    scrollbar-color: #00b08a #f1f5f9;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

.categories-list ul.sub-menu ul.sub-sub-menu::-webkit-scrollbar,
.categories-list ul.sub-sub-menu::-webkit-scrollbar {
    display: block !important;
    width: 6px !important;
}

.categories-list ul.sub-menu ul.sub-sub-menu::-webkit-scrollbar-track,
.categories-list ul.sub-sub-menu::-webkit-scrollbar-track {
    background: #f8fafc !important;
    margin: 8px 0 !important;
    border-radius: 10px !important;
}

.categories-list ul.sub-menu ul.sub-sub-menu::-webkit-scrollbar-thumb,
.categories-list ul.sub-sub-menu::-webkit-scrollbar-thumb {
    background-color: #00b08a !important;
    border-radius: 10px !important;
}

.categories-list ul.sub-menu ul.sub-sub-menu::-webkit-scrollbar-thumb:hover,
.categories-list ul.sub-sub-menu::-webkit-scrollbar-thumb:hover {
    background-color: #008f6f !important;
}

/* جسر وهمي للمستوى الثاني باتجاه اليمين نحو قائمة الابن */
.categories-list ul.sub-menu ul.sub-sub-menu::before,
.categories-list ul.sub-sub-menu::before {
    content: "";
    position: absolute;
    right: -25px;
    top: 0;
    bottom: 0;
    width: 35px;
    background: transparent;
}

.categories-list ul.sub-menu li.is-active-sub > ul.sub-sub-menu,
.categories-list li.sub-cat-item.is-active-sub > ul.sub-sub-menu,
.categories-list ul.sub-menu ul.sub-sub-menu:hover,
.categories-list ul.sub-sub-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

.categories-list ul.sub-menu ul.sub-sub-menu li.sub-cat-item,
.categories-list ul.sub-sub-menu li.sub-cat-item {
    margin: 3px 0 !important;
}

.categories-list ul.sub-menu ul.sub-sub-menu a.sub-cat-link,
.categories-list ul.sub-sub-menu a.sub-cat-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    direction: rtl !important;
    text-align: right !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    background: transparent !important;
}

.categories-list ul.sub-menu ul.sub-sub-menu li.sub-cat-item:hover > a.sub-cat-link {
    color: #00b08a !important;
    background: #f0fdf4 !important;
    font-weight: 700 !important;
    transform: translateX(-2px) !important;
}

.categories-list ul.sub-menu .cat-menu-label,
.categories-list ul.sub-menu ul.sub-menu .cat-menu-label {
    gap: 10px;
}

.categories-list ul.sub-menu .cat-icon-dynamic svg {
    width: 17px;
    height: 17px;
}

.categories-list ul.sub-menu ul.sub-menu .cat-icon-dynamic svg {
    width: 16px;
    height: 16px;
}

.submenu-title a:hover {
    color: #00b08a;
}

.submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}

.submenu-list li a {
    display: block;
    padding: 6px 0;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s;
}

.submenu-list li a:hover {
    color: #00b08a;
}

/* Category item active state */
.category-item.active .category-link {
    color: #00b08a;
    background-color: #f0faf7;
}

.category-item.active .cat-icon {
    color: #00b08a;
}

.category-item.active .cat-arrow {
    color: #00b08a;
}


/* ============================================================
   MAIN MENU
   ============================================================ */
.main-menu ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.main-menu a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.main-menu a:hover {
    color: #00ff80;
    /* Hover neon */
}

.main-menu a .icon-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* --- Main Menu Has-Dropdown --- */
.main-menu .has-dropdown {
    position: relative;
}

.main-menu .has-dropdown>a .icon-chevron {
    transition: transform 0.3s;
}

.main-menu .has-dropdown:hover>a .icon-chevron {
    transform: rotate(180deg);
}

.main-menu .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    min-width: 200px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 9999;
    display: block;
    /* Override flex from parent ul */
    border-top: 3px solid #00b08a;
    /* Teal top border like in screenshot */
}

.main-menu .has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-menu .dropdown-menu li {
    display: block;
}

.main-menu .dropdown-menu li:first-child a {
    color: #00b08a;
    /* First item = teal/active */
    font-weight: 600;
}

.main-menu .dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 9px 20px;
    color: #444;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    gap: 0;
}

.main-menu .dropdown-menu li a:hover {
    color: #00b08a;
    background: #f5faf8;
}


/* ============================================================
   LANGUAGE & CURRENCY SWITCHERS
   ============================================================ */
.header-bottom-settings {
    gap: 20px;
}

.switcher {
    position: relative;
    /* Required for dropdown positioning */
}

.switcher-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 0;
}

.switcher-btn:hover {
    color: white;
}

.switcher-btn .flag {
    font-size: 16px;
    /* Emojis size */
    line-height: 1;
}

.switcher-btn .currency-symbol {
    font-weight: bold;
    color: #fff;
    opacity: 0.8;
}

.switcher-btn .icon-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

/* Dropdown styling (hidden by default) */
.switcher-dropdown {
    position: absolute;
    top: 100%;
    /* In RTL, we align it to the left edge of container */
    left: 0;
    background-color: #242c38;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    min-width: 120px;
    list-style: none;
    margin: 8px 0 0 0;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    z-index: 99;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.switcher:hover .switcher-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.switcher-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}

.switcher-dropdown a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

/* ============================================================
   OFFCANVAS MINI CART — Premium Redesign (Strict Overrides)
   ============================================================ */
.offcanvas-cart-wrapper {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}

.offcanvas-cart-wrapper.open {
    pointer-events: auto !important;
}

/* --- Overlay with blur --- */
.offcanvas-cart-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

.offcanvas-cart-wrapper.open .offcanvas-cart-overlay {
    opacity: 1 !important;
}

/* --- Slide-in Container --- */
.offcanvas-cart-container {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 420px !important;
    max-width: 100% !important;
    height: 100vh !important;
    background: #f8fafc !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    direction: rtl !important;
    text-align: right !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.offcanvas-cart-wrapper.open .offcanvas-cart-container {
    transform: translateX(0) !important;
}

/* --- Header --- */
.offcanvas-cart-header {
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.offcanvas-cart-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cart-items-count {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 400 !important;
}

.cart-items-count strong {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
}

.close-cart-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.close-cart-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* --- Widget Container --- */
.header-cart-widget-container,
.header-cart-widget-container .widget_shopping_cart,
.widget_shopping_cart_content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* --- Items List --- */
.woocommerce-mini-cart.cart_list {
    list-style: none !important;
    margin: 0 !important;
    padding: 16px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #f8fafc !important;
}

/* Custom Scrollbar */
.woocommerce-mini-cart.cart_list::-webkit-scrollbar {
    width: 5px !important;
}
.woocommerce-mini-cart.cart_list::-webkit-scrollbar-track {
    background: transparent !important;
}
.woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}
.woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* --- Cart Item Card --- */
.mc-item {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
    background: transparent !important;
}

.mc-card {
    display: flex !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.mc-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07) !important;
}

/* --- Product Image --- */
.mc-card-img {
    width: 68px !important;
    height: 68px !important;
    flex-shrink: 0 !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #f1f5f9 !important;
}

.mc-card-img a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.mc-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
    transition: transform 0.25s ease !important;
}

.mc-card:hover .mc-card-img img {
    transform: scale(1.06) !important;
}

/* --- Product Body --- */
.mc-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

/* Product Title */
.mc-card-title {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.mc-card-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.mc-card-title a:hover {
    color: #00b08a !important;
}

/* Variation Meta */
.mc-card-meta {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

.mc-card-meta dl.variation {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 2px 0 0 0 !important;
    padding: 3px 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
}

.mc-card-meta dl.variation dt {
    font-weight: 600 !important;
    color: #475569 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.mc-card-meta dl.variation dd {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

.mc-card-meta dl.variation dd p {
    margin: 0 !important;
    display: inline !important;
}

/* Price Row */
.mc-card-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-top: 2px !important;
}

.mc-price-current {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.mc-price-old {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

.mc-price-multiplier {
    font-size: 11.5px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    margin-right: auto !important;
}

.mc-price-multiplier strong {
    color: #00b08a !important;
    font-weight: 700 !important;
}

/* Footer Row: Qty + Delete */
.mc-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* Qty Selector */
.mc-qty {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    height: 28px !important;
}

.mc-qty-btn {
    background: transparent !important;
    border: none !important;
    width: 26px !important;
    height: 28px !important;
    font-size: 14px !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.mc-qty-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.mc-qty-input {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 0 !important;
    background: #ffffff !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.mc-qty-input::-webkit-outer-spin-button,
.mc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Delete Button */
.mc-remove {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #ef4444 !important;
    background: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.mc-remove svg {
    stroke: #ef4444 !important;
    pointer-events: none !important;
}

.mc-remove:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

/* --- Subtotal Area --- */
.mc-subtotal-area {
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.mc-subtotal-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}

.mc-subtotal-label {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.mc-subtotal-value {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #00b08a !important;
}

.mc-subtotal-note {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* --- Buttons Area --- */
.mc-buttons {
    padding: 12px 20px 20px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.mc-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100 !important;
    width: 100% !important;
    padding: 13px 16px !important;
    text-align: center !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.mc-btn svg {
    flex-shrink: 0 !important;
}

.mc-btn-primary {
    background: linear-gradient(135deg, #00b08a 0%, #00c99a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.25) !important;
}

.mc-btn-primary:hover {
    background: linear-gradient(135deg, #009675 0%, #00b08a 100%) !important;
    box-shadow: 0 6px 18px rgba(0, 176, 138, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.mc-btn-secondary {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
}

.mc-btn-secondary:hover {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* --- Empty Cart State --- */
.mc-empty {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 40px 24px !important;
    text-align: center !important;
}

.mc-empty-icon {
    width: 84px !important;
    height: 84px !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
}

.mc-empty-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
}

.mc-empty-sub {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 0 20px 0 !important;
}

.mc-btn-shop {
    width: auto !important;
    padding: 12px 30px !important;
}

/* Hide old duplicate styles */
.cart-subtotal-area,
.cart-buttons-area,
.custom-empty-cart,
.empty-cart-text,
.btn-start-shopping,
.btn-view-cart,
.btn-checkout,
.empty-cart-msg,
.cart-item-end {
    display: none !important;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .offcanvas-cart-container {
        width: 100%;
    }
    
    .mc-card {
        padding: 12px;
        gap: 10px;
    }
    
    .mc-card-img {
        width: 60px;
        height: 60px;
    }
    
    .mc-card-title {
        font-size: 12px;
    }
}

/* ============================================================
   RESPONSIVE - HEADER (< 1200px)
   ============================================================ */

/* Hide hamburger on desktop */
.hamburger-btn {
    display: none;
}

@media (max-width: 1200px) {

    /* --- Hamburger Button --- */
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 22px;
        /* Scaled down to match other icons naturally */
        height: 16px;
        /* Adjusted to keep proportion */
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
    }

    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 2px;
        transition: transform 0.3s, opacity 0.3s;
    }

    .hamburger-btn.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger-btn.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* --- Hide desktop-only elements --- */
    .header-search,
    .header-bottom {
        display: none !important;
    }

    /* --- Shrink some icons in header-top --- */
    .header-top {
        padding: 0 16px;
        justify-content: space-between;
    }

    /* --- Mobile Menu Overlay --- */
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
    }

    .mobile-menu-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    /* --- Mobile Drawer --- */
    .mobile-menu-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        width: 300px;
        max-width: 90vw;
        height: 100%;
        /* Use 100% not 100vh so mobile browsers handle the bar correctly */
        max-height: 100vh;
        background: #1e2530;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        transform: translateX(-110%);
        /* Start fully off-screen to the left */
        transition: transform 0.35s ease;
        overflow: hidden;
        /* The DRAWER itself clips; inner nav scrolls */
    }

    .mobile-menu-drawer.open {
        transform: translateX(0);
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
        /* Never shrink the header row */
    }

    .mobile-menu-header .site-title {
        font-size: 20px;
        color: #fff;
        margin: 0;
    }

    .mobile-menu-close {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        padding: 5px;
    }

    .mobile-menu-close:hover {
        color: #fff;
    }

    /* --- Mobile Nav Links --- */
    .mobile-nav {
        flex: 1;
        padding: 16px 0;
        overflow-y: auto;
        /* The NAV scrolls inside the fixed-height drawer */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
    }
    
    .mobile-nav::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome, Safari and Opera */
    }

    .mobile-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav ul li a {
        display: block;
        padding: 14px 24px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 15px;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transition: color 0.2s, background 0.2s;
    }

    .mobile-nav ul li a:hover {
        color: #00b08a;
        background: rgba(0, 176, 138, 0.08);
        padding-right: 30px;
        /* Shift right on hover (RTL effect) */
    }

    /* --- Mobile Submenus (Accordion) --- */
    .mobile-nav ul li {
        position: relative;
    }

    .mobile-submenu-toggle {
        position: absolute;
        top: 0;
        left: 0;
        /* RTL left side */
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        z-index: 2;
        transition: transform 0.3s, color 0.2s;
    }

    .mobile-submenu-toggle svg {
        width: 18px;
        height: 18px;
    }

    .mobile-submenu-toggle:hover {
        color: #fff;
    }

    .mobile-submenu-toggle.active {
        transform: rotate(180deg);
        color: #00b08a;
    }

    /* Submenu list hidden by default */
    .mobile-nav .sub-menu {
        display: none;
        background: rgba(0, 0, 0, 0.15);
        /* Slightly darker bg for inner items */
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .mobile-nav .sub-menu li a {
        padding: 12px 40px 12px 24px;
        /* Indent for RTL: 40px right padding */
        font-size: 14px;
        color: rgba(255, 255, 255, 0.65);
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .mobile-nav .sub-menu li:last-child a {
        border-bottom: none;
    }

    .mobile-nav .sub-menu li a:hover {
        padding-right: 46px;
        /* Shift on hover */
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }

    /* --- Mobile Footer (Switchers) --- */
    .mobile-menu-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-switcher {
        display: flex;
        flex-direction: column;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
    }

    .mobile-switcher-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 5px 0;
    }

    .mobile-switcher-toggle .flag,
    .mobile-switcher-toggle .currency-symbol {
        font-size: 18px;
    }

    .mobile-switcher-toggle .icon-chevron {
        width: 14px;
        height: 14px;
        margin-right: auto;
        transition: transform 0.3s;
    }

    .mobile-switcher.open .mobile-switcher-toggle .icon-chevron {
        transform: rotate(180deg);
    }

    .mobile-switcher-dropdown {
        list-style: none;
        margin: 10px 0 0 0;
        padding: 0;
        display: none;
        /* hidden by default */
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
    }

    .mobile-switcher.open .mobile-switcher-dropdown {
        display: block;
        /* show when parent is open */
    }

    .mobile-switcher-dropdown li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: background 0.2s, color 0.2s;
    }

    .mobile-switcher-dropdown li:last-child a {
        border-bottom: none;
    }

    .mobile-switcher-dropdown li a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }
}

/* Hide mobile drawer on desktop */
@media (min-width: 1201px) {

    .mobile-menu-drawer,
    .mobile-menu-overlay,
    .mobile-search-btn {
        display: none !important;
    }
}

/* ---- Mobile Search Overlay ---- */
.mobile-search-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.mobile-search-overlay.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Search header with close button */
.mobile-search-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 20px;
}

.mobile-search-close {
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    color: #333;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.mobile-search-close:hover {
    background: #e0e0e0;
    color: #111;
}

.mobile-search-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 0 24px;
    gap: 30px;
}

.mobile-search-title {
    font-size: clamp(22px, 6vw, 36px);
    font-weight: 700;
    color: #1e2530;
    text-align: center;
    margin: 0;
}

.mobile-search-form {
    width: 100%;
    max-width: 500px;
}

.mobile-search-input-wrap {
    display: flex;
    align-items: center;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    padding: 0 6px 0 16px;
    background: #f8f9fa;
    transition: border-color 0.2s;
}

.mobile-search-input-wrap:focus-within {
    border-color: #00b08a;
    background: #fff;
}

.mobile-search-field {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 12px;
    font-size: 16px;
    color: #333;
    outline: none;
    direction: rtl;
}

.mobile-search-field::placeholder {
    color: #aaa;
}

.mobile-search-submit {
    background: #00b08a;
    border: none;
    cursor: pointer;
    color: #fff;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, transform 0.15s;
}

.mobile-search-submit:hover {
    background: #009a78;
    transform: scale(1.05);
}

.mobile-search-submit svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   HERO SLIDER SECTION
   ============================================================ */
.hero-section {
    margin-top: 30px;
    margin-bottom: 50px;
    border-radius: 20px;
    overflow: hidden;
    background: #f4f6f8;
    /* Base color in case image is loading */
}

@media (max-width: 768px) {
    .hero-section {
        margin-top: 12px;
        margin-bottom: 20px;
        border-radius: 12px;
        background: transparent;
    }
}

.hero-swiper {
    width: 100%;
    height: 500px;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .hero-swiper {
        height: auto;
        border-radius: 0;
    }
}

.hero-slide {
    display: flex;
    align-items: center;
    position: relative;
    padding: 60px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .hero-slide {
        padding: 30px;
        justify-content: center;
        text-align: center;
    }
}

/* Background Image Layer */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

@media (max-width: 768px) {
    .hero-swiper {
        height: auto !important;
        aspect-ratio: auto;
        min-height: unset;
    }
    .hero-slide {
        padding: 0;
        display: block;
    }
    .hero-slide-bg {
        position: relative;
    }
    .hero-slide-bg img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .hero-slide-content {
        position: absolute;
        inset: 0;
    }
}

.hero-slide-bg-placeholder {
    background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    min-height: 250px;
}

/* Content Layer */
.hero-slide-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    /* Pushes content slightly left in LTR, or right in RTL based on the screenshot, it's on the left side of the gray box */
}

.hero-subtitle {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #667085;
    margin-bottom: 15px;
}

.hero-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: #1e2530;
    line-height: 1.1;
    margin: 0 0 40px 0;
    letter-spacing: -1px;
}

.btn-hero-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #00b08a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
}

.btn-hero-shop:hover {
    background-color: #008c6e;
    transform: translateY(-2px);
    color: #fff;
}

.btn-hero-shop svg {
    width: 16px;
    height: 16px;
}

/* Custom Swiper Pagination */
.swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    opacity: 0.5;
    transition: width 0.3s, background 0.3s, opacity 0.3s;
}

.swiper-pagination-bullet-active {
    width: 60px;
    background: #00b08a;
    opacity: 1;
}

/* Fix container padding override for pagination */
.hero-swiper .swiper-pagination-bullets {
    bottom: 25px;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features-section {
    margin-bottom: 60px;
    padding: 0 15px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 1200px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background-color: #f4f6f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1e2530;
    transition: background-color 0.3s, transform 0.3s;
}

.feature-item:hover .feature-icon {
    background-color: #e0f6f0;
    color: #00b08a;
    transform: translateY(-3px);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-text {
    flex: 1;
}

.feature-text h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 5px 0;
}

.feature-text p {
    font-size: 13px;
    color: #667085;
    margin: 0;
    line-height: 1.4;
}

/* ============================================================
   SHOP BY CATEGORY SECTION
   ============================================================ */
.shop-by-category-section {
    padding: 0 15px 60px 15px;
}

.category-box-container {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 40px;
}

.category-box-container .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 30px 0;
    text-align: right;
    padding-bottom: 20px;
    border-bottom: 2px solid #f4f6f8;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* ═══ PURCHASE MODULE ═══ */
.sp-purchase-module {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    max-width: fit-content;
}

/* ═══ VARIATION CARD (Variable Products) ═══ */
.sp-variation-card {
    background: #fdfdfd;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0;
    margin: 0;
    /* Reset margin, it will be controlled by spacing */
    width: 100%;
    max-width: 100%;
    /* Track parent width perfectly */
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.sp-variation-card-header {
    display: none;
    /* Hide header completely for cleaner look */
}

@media (max-width: 992px) {
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .category-box-container {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .sp-related-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SINGLE PRODUCT — ADD TO CART + QUANTITY COUNTER
   ============================================================ */

/* ═══ PURCHASE MODULE (Container for perfect width matching) ═══ */
.sp-purchase-module {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    /* Exact uniform width */
}

/* ═══ VARIATION CARD (Variable Products) ═══ */
.sp-variation-card {
    background: linear-gradient(135deg, #f8fffe 0%, #f0fdf9 100%);
    border: 1.5px solid #d1fae5;
    border-radius: 12px;
    padding: 0;
    margin: 0 0 20px 0;
    width: 100%;
    overflow: visible;
    /* Must be visible so custom dropdown list can show outside card */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.sp-variation-card-header {
    display: none;
    /* Hide header completely for cleaner look */
}

.sp-variation-fields {
    padding: 16px 20px 8px;
    /* Breathing room */
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-variation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sp-variation-label {
    display: flex;
    align-items: center;
    font-size: 13px;
    /* Legible size */
    font-weight: 700;
    color: #059669;
    /* Greenish label to match */
    margin-bottom: 0;
    min-width: 60px;
}

.sp-variation-label svg {
    display: none;
    /* Clean UI without icons */
}

/* === HIDE NATIVE SELECT (JS-driven custom dropdown takes over) === */
.sp-variation-select-hidden {
    display: none !important;
}

/* === CUSTOM DROPDOWN (LUXURY EMERALD THEME) === */
.sp-variation-select-wrap {
    position: relative;
    width: 100%;
}

.sp-custom-dropdown {
    position: relative !important;
    width: 100% !important;
    user-select: none;
}

/* ── Trigger Button ── */
.sp-cd-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 1.5px solid #00b08a !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #00b08a !important;
    transition: all 0.25s ease !important;
    font-family: inherit !important;
    gap: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 176, 138, 0.08) !important;
    box-sizing: border-box !important;
}

.sp-cd-trigger:hover,
.sp-custom-dropdown.open .sp-cd-trigger {
    border-color: #059669 !important;
    color: #059669 !important;
    background: #f0fdf9 !important;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.18) !important;
}

.sp-cd-trigger.has-value {
    color: #047857 !important;
}

.sp-cd-arrow {
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
    color: #00b08a !important;
}

.sp-custom-dropdown.open .sp-cd-arrow {
    transform: rotate(180deg) !important;
    color: #059669 !important;
}

/* ── Custom Floating Dropdown List ── */
.sp-cd-list {
    display: none;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid #00b08a !important;
    border-radius: 14px !important;
    padding: 6px !important;
    margin: 0 !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 28px rgba(0, 176, 138, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #00b08a #f1f5f9;
    animation: spCdFadeDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

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

.sp-custom-dropdown.open .sp-cd-list {
    display: block !important;
}

/* Custom Scrollbar */
.sp-cd-list::-webkit-scrollbar {
    width: 6px;
}
.sp-cd-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.sp-cd-list::-webkit-scrollbar-thumb {
    background: #00b08a;
    border-radius: 10px;
}

/* ── Option Items ── */
.sp-cd-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-bottom: 2px !important;
}

.sp-cd-option:hover {
    background: #f0fdf9 !important;
    color: #00b08a !important;
    padding-right: 18px !important;
}

.sp-cd-option.selected {
    background: linear-gradient(135deg, #00b08a 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(0, 176, 138, 0.25) !important;
}

.sp-cd-option.selected::after {
    content: '✓' !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.sp-cd-placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.sp-cd-placeholder:hover {
    background: #f8fafc !important;
    color: #64748b !important;
}

/* Stock badge */
.sp-variation-stock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    margin: 8px 14px 14px;
    padding: 6px 12px;
    border-radius: 6px;
}

.sp-variation-stock.sp-var-instock {
    color: #059669;
    background: #ecfdf5;
}

.sp-variation-stock.sp-var-outofstock {
    color: #dc2626;
    background: #fef2f2;
}

.sp-variation-msg {
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    margin: 0 14px 14px;
    text-align: center;
}

/* Wrapper: qty + button side by side */
.sp-atc-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    /* Reset margins */
    width: 100%;
}

/* ── Quantity Selector ── */
.sp-qty-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}

.sp-qty-btn {
    width: 40px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    transition: background 0.2s, color 0.2s;
}

.sp-qty-btn:hover {
    background: #f0faf7;
    color: #00b08a;
}

.sp-qty-btn:active {
    background: #e6f7f2;
}

.sp-qty-input {
    width: 52px;
    height: 48px;
    border: none;
    border-right: 1.5px solid #e2e8f0;
    border-left: 1.5px solid #e2e8f0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1e2530;
    outline: none;
    background: transparent;
    -moz-appearance: textfield;
}

.sp-qty-input::-webkit-outer-spin-button,
.sp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Add to Cart Button ── */
.sp-atc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    height: 48px;
    background: #00b08a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
    white-space: nowrap;
    flex: 1;
    /* Stretch perfectly to fill remaining 400px width */
    justify-content: center;
    min-width: 160px;
    /* removed max-width: 280px; so it aligns flawlessly with variation box */
    box-shadow: 0 2px 10px rgba(0, 176, 138, 0.25);
}

.sp-atc-btn:hover {
    background: #009e7c;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 176, 138, 0.4);
}

.sp-atc-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.sp-atc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading state */
.sp-atc-btn.sp-atc-loading {
    background: #00b08a;
    opacity: 0.8;
    animation: sp-atc-pulse 1s ease-in-out infinite;
}

/* Success state */
.sp-atc-btn.sp-atc-done {
    background: #059669;
}

@keyframes sp-atc-pulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.5;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sp-atc-wrap {
        gap: 10px;
    }

    .sp-atc-btn {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .sp-atc-wrap {
        flex-direction: row !important;
        /* إجبارهم يكونوا على نفس السطر */
        flex-wrap: nowrap !important;
        /* منع النزول لسطر جديد */
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
    }

    .sp-qty-wrap {
        align-self: auto !important;
        flex-shrink: 0 !important;
        /* منع العداد إنه يصغر ويخرب شكله */
    }

    .sp-atc-btn {
        flex: 1 !important;
        /* إجبار الزر يوخذ كل المساحة المتبقية من الشاشة */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        /* تقليل الحواف شوي عشان شاشات الموبايل الصغيرة */
    }
}


.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 15px;
    border-radius: 12px;
    background: #fff;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

.category-card-img {
    width: 100%;
    height: 140px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.category-card-img img {
    width: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

/* --- OVERRIDES FOR ALL CATEGORIES PAGE --- */
.all-categories-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

.all-categories-grid .category-card {
    padding: 25px;
}

.all-categories-grid .category-card-img {
    height: 220px;
    /* Taller background/height for image */
    margin-bottom: 20px;
}

.all-categories-grid .category-card-img img {
    max-height: 100%;
    width: auto;
}

/* Make SVG icons larger too if used */
.all-categories-grid .category-card-img .cat-svg-icon {
    width: 120px;
    height: 120px;
}

.all-categories-grid .category-card-img .cat-svg-icon svg {
    width: 65px;
    height: 65px;
}

@media (max-width: 992px) {
    .all-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .all-categories-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ----------------------------------------- */

/* Overlay that appears on hover */
.category-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.06);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.category-card:hover .category-card-img::after {
    opacity: 1;
}

.category-card:hover .category-card-img img {
    transform: scale(1.08);
}

.category-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    transition: color 0.25s ease;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.category-card:hover .category-card-title {
    color: #00b08a;
}

.category-card-count {
    font-size: 13px;
    color: #888;
}

/* Price color inside offer cards */
.offer-price {
    color: #1e2530 !important;
    font-weight: 800;
    font-size: 15px;
    display: inline-block;
    margin-top: 12px;
}

.offer-price del {
    color: #9ca3af;
    font-weight: 500;
    font-size: 13px;
    margin-inline-end: 10px;
}

.offer-price ins {
    text-decoration: none;
    font-weight: 800;
}

/* Offer badge */
.offer-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    z-index: 2;
}


.category-view-more {
    text-align: center;
    margin-top: 20px;
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: #00b08a;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 24px;
    border: 2px solid #00b08a;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.btn-view-more:hover {
    background-color: #00b08a;
    color: #fff;
}

.btn-view-more svg {
    width: 16px;
    height: 16px;
}

html[dir="rtl"] body.home .btn-view-more .icon-arrow,
html[dir="rtl"] body.home .btn-hero-shop svg,
html[dir="rtl"] body.home .btn-promo-shop svg {
    transform: none;
}

/* ============================================================
   NEW ARRIVALS SECTION
   ============================================================ */
.new-arrivals-section {
    padding: 0 15px 60px 15px;
}

.new-arrivals-container {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 40px;
}

.new-arrivals-container .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 30px 0;
    text-align: right;
    padding-bottom: 20px;
    border-bottom: 2px solid #f4f6f8;
}

.new-arrivals-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
}

@media (max-width: 1024px) {
    .new-arrivals-layout {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 992px) {
    .new-arrivals-layout {
        grid-template-columns: 1fr;
    }

    .new-arrivals-container {
        padding: 20px 15px;
    }
}

/* Left Promo Banner */
.promo-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 30px;
    background: linear-gradient(135deg, #1e2530 0%, #2a3441 100%);
    box-shadow: 0 10px 30px rgba(30, 37, 48, 0.15);
    border: none;
}

.promo-img-wrapper {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background: #ffffff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.promo-bg {
    max-width: 90%;
    max-height: 220px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.promo-banner:hover .promo-bg {
    transform: scale(1.05);
}

.promo-banner::before {
    display: none;
}

.promo-content {
    position: relative;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.promo-content h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.promo-content p {
    color: #00b08a;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-promo-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #00b08a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
}

.btn-promo-shop:hover {
    background-color: #008c6e;
    transform: translateY(-2px);
    color: #fff;
}

.btn-promo-shop svg {
    width: 16px;
    height: 16px;
}

/* Right Products Grid */
.new-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 576px) {
    .new-products-grid {
        grid-template-columns: 1fr;
    }
}

.product-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 12px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.product-item:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    transform: translateY(-6px);
}

.product-item-img {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

/* Overlay on hover */
.product-item-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.product-item:hover .product-item-img::after {
    opacity: 1;
}

.product-item-img img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.product-item:hover .product-item-img img {
    transform: scale(1.08);
}


.product-item .onsale {
    position: absolute;
    top: 5px;
    left: 5px;
    /* Keep left even in RTL for English badges usually, but can adapt */
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}

html[dir="rtl"] .product-item .onsale {
    left: auto;
    right: 5px;
}

.product-item-details {
    flex: 1;
}

.product-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
}

.product-stars svg {
    width: 14px;
    height: 14px;
}

.product-item-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-item-title a {
    color: #1e2530;
    text-decoration: none;
    transition: color 0.2s;
}

.product-item-title a:hover {
    color: #00b08a;
}

.product-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #1e2530;
}

.product-item-price del {
    color: #9ca3af;
    font-weight: 400;
    font-size: 13px;
    margin-inline-end: 8px;
}

.product-item-price ins {
    text-decoration: none;
    color: #1e2530;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
/* When JS adds .is-sticky to the header */
.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease-in-out forwards;
}

/* Ensure inner background stays full width */
.site-header.is-sticky .site-header-bg {
    width: 100%;
}

/* Make the container inside honour its original width constraint */
.site-header.is-sticky .container {
    width: min(var(--site-container-width), var(--site-container-max));
    max-width: var(--site-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

/* Add some padding to body to prevent jump when header becomes fixed */
body.has-sticky-header {
    padding-top: 150px;
    /* Adjust based on actual header height */
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* No extra padding tweaks — keep the sticky header dimensions identical to normal */
/* ============================================================
   SCROLL TO TOP BUTTON
   ============================================================ */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #00b08a;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.3);
}

/* RTL adjustment if needed, but right is usually fine for LTR and RTL for this button */
html[dir="rtl"] .scroll-to-top {
    right: auto;
    left: 30px;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background-color: #008c6e;
    transform: translateY(-5px);
}

.scroll-to-top svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   SPECIAL OFFERS SECTION
   ============================================================ */
.special-offers-section {
    padding: 0 15px 60px 15px;
}

.special-offers-container {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.special-offers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}

.special-offers-header .section-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e2530;
    margin: 0;
}

.special-offers-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.special-offers-view-all:hover {
    color: #00b08a;
}

.special-offers-view-all svg {
    width: 16px;
    height: 16px;
}

html[dir="rtl"] .special-offers-view-all svg {
    transform: rotate(180deg);
}

/* Special Offers Swiper Navigation */
.special-offers-swiper {
    position: relative;
    padding-bottom: 20px;
    /* Space for shadow/overflow if any */
}

.special-offers-swiper .swiper-button-next,
.special-offers-swiper .swiper-button-prev {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    color: #1e2530;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.special-offers-swiper .swiper-button-next::after,
.special-offers-swiper .swiper-button-prev::after {
    font-size: 14px;
    font-weight: bold;
}

.special-offers-swiper .swiper-button-next:hover,
.special-offers-swiper .swiper-button-prev:hover {
    background: #00b08a;
    color: #fff;
    border-color: #00b08a;
}

/* Card Styling */
.special-offer-card {
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #f8fafc;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.special-offer-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: #fff;
}

.offer-card-img {
    position: relative;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfdfd;
    min-height: 250px;
    margin-bottom: 15px;
    border-radius: 8px 8px 0 0;
}

.offer-card-img img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.special-offer-card:hover .offer-card-img img {
    transform: scale(1.05);
}

.offer-card-img .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 2;
}

html[dir="rtl"] .offer-card-img .onsale {
    left: auto;
    right: 10px;
}

.offer-card-content {
    padding: 0 15px 15px 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.offer-card-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 15px 0;
    flex: 1;
    /* Pushes bottom area down */
}

.offer-card-title a {
    color: #1e2530;
    text-decoration: none;
    transition: color 0.2s;
}

.offer-card-title a:hover {
    color: #00b08a;
}

.offer-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

/* Reusing price styles from before, just ensuring hierarchy */
.offer-card-bottom .product-item-price {
    font-size: 18px;
}

/* Add to Cart Icon Button */
.btn-add-to-cart-icon {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background-color: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    /* Hide WooCommerce default text */
    font-size: 0;
}

.btn-add-to-cart-icon svg {
    width: 20px;
    height: 20px;
}

.special-offer-card:hover .btn-add-to-cart-icon,
.btn-add-to-cart-icon:hover {
    background-color: #00b08a;
    color: #fff;
}

/* WooCommerce adding to cart loading state on the button */
.btn-add-to-cart-icon.loading::after {
    font-size: 14px;
    color: #00b08a;
}

.btn-add-to-cart-icon.added::after {
    font-size: 14px;
    color: #00b08a;
}

/* ============================================================
   NEWSLETTER & LATEST POSTS SECTION
   ============================================================ */
.newsletter-posts-section {
    background-color: #242c38;
    /* Dark navy background matching the design */
    padding: 80px 0;
    margin-bottom: 0;
    /* Remove bottom margin if it's the last section before footer */
}



.nl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

@media (max-width: 992px) {
    .nl-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* Left Column: Newsletter */
.nl-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nl-title {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.nl-subtitle {
    color: #9cb3c9;
    font-size: 16px;
    margin: 0 0 30px 0;
}

.nl-form {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    max-width: 500px;
}

.nl-form input[type="email"] {
    flex: 2;
    padding: 14px 20px;
    border: none;
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    color: #1e2530;
    outline: none;
}

.nl-form button {
    flex: 1;
    padding: 14px 20px;
    background-color: #00b08a;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
}

.nl-form button:hover {
    background-color: #008c6e;
}

/* Shop By Category SVG Icon Styling */
.category-card-img .cat-svg-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    color: #00b08a;
    /* Theme teal color */
    background: #f0faf7;
    /* Light teal background */
    border-radius: 50%;
}

.category-card-img .cat-svg-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 1.5;
}

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

/* Social Icons */
.nl-socials {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon:hover {
    transform: translateY(-4px);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.social-icon.instagram:hover {
    background-color: #E1306C;
}

.social-icon.facebook:hover {
    background-color: #1877F2;
}

.social-icon.youtube:hover {
    background-color: #FF0000;
}

.social-icon.whatsapp:hover {
    background-color: #25D366;
}

.social-icon.tiktok:hover {
    background-color: #000000;
}

.social-icon.telegram:hover {
    background-color: #0088CC;
}

/* Right Column: Latest Posts */
.nl-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nl-post-item {
    display: flex;
    align-items: center;
    gap: 18px;
    transition: opacity 0.3s;
}

.nl-post-item:hover {
    opacity: 0.85;
}

.nl-post-thumb {
    width: 110px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.nl-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nl-post-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nl-post-date {
    color: #9cb3c9;
    font-size: 13px;
}

.nl-post-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.nl-post-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.nl-post-title a:hover {
    color: #00b08a;
}

/* View All Link */
.nl-view-all {
    color: #9cb3c9;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s;
    margin-top: 5px;
}

.nl-view-all:hover {
    color: #fff;
}

.nl-view-all svg {
    width: 14px;
    height: 14px;
}

.nl-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nl-post-item:hover .nl-post-thumb img {
    transform: scale(1.1);
}

.nl-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
}

.nl-post-date {
    display: block;
    color: #9cb3c9;
    /* Light blue-gray matching design */
    font-size: 13px;
    margin-bottom: 8px;
}

.nl-post-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.nl-post-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.nl-post-title a:hover {
    color: #00b08a;
}

.nl-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff !important;
    background-color: #00b08a;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
    align-self: flex-start;
    margin-top: 15px;
}

.nl-view-all:hover {
    background-color: #008c6e;
    transform: translateY(-2px);
    color: #fff !important;
}

.nl-view-all svg {
    width: 16px;
    height: 16px;
}

html[dir="rtl"] .nl-view-all svg {
    transform: none;
}

/* ============================================================
   FOOTER SECTION
   ============================================================ */
.site-footer {
    background-color: #f8fafc;
    /* Very light blue-gray matching design */
    padding: 60px 15px 0 15px;
    /* Top padding, bottom handled by bottom row */
    font-size: 14px;
    color: #4b5563;
    border-top: 1px solid #e2e8f0;
}

.footer-widgets-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 36px);
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
    align-items: start;
}

.footer-col {
    min-width: 0;
}

.brand-col {
    min-width: 0;
}

.widget-col {
    min-width: 0;
}

.footer-brand {
    font-size: 24px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 15px 0;
}

.footer-desc {
    color: #64748b;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

/* Help Box */
.footer-contact-box {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    padding: 12px 20px;
    border-radius: 8px;
    min-width: 220px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.footer-contact-box:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.contact-title {
    font-weight: 500;
    color: #1e2530;
}

.contact-icon {
    width: 16px;
    height: 16px;
    color: #64748b;
}

/* Widget Columns */
.widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e2530;
    margin: 0 0 20px 0;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #4b5563;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: #00b08a;
    /* Theme hover color */
}

/* Footer Bottom Row */
.footer-bottom-row {
    max-width: 1320px;
    margin: 0 auto;
    padding: 25px 0;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    color: #64748b;
    font-size: 13px;
}

/* Payment Icons */
.payment-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pay-icon {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #1e2530;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pay-icon.visa {
    color: #1a1f71;
    /* Visa blue */
    font-family: Arial, sans-serif;
    font-style: italic;
    letter-spacing: -0.5px;
}

.pay-icon.mc svg {
    width: 24px;
    height: 15px;
}

.pay-icon.paypal {
    color: #003087;
    /* PayPal blue */
    font-style: italic;
    font-family: Arial, sans-serif;
}

.pay-icon.gpay {
    color: #3c4043;
}

.pay-icon.gpay::before {
    content: "G";
    color: #4285f4;
    font-size: 14px;
    margin-right: 2px;
}

.pay-icon.applepay {
    color: #000;
}

/* Responsive Footer */
@media (max-width: 1100px) {
    .footer-widgets-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-contact-box {
        width: min(100%, 320px);
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .footer-bottom-row {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .payment-icons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* OFF-CANVAS CART styles moved to "OFFCANVAS MINI CART — Premium Redesign" section above */

/* ============================================================
   ALL CATEGORIES PAGE - CATEGORY CARDS
   ============================================================ */

/* صفحة كل التصنيفات */
.all-categories-section {
    padding: 20px 0 60px;
}

/* الشبكة - 3 أعمدة */
.all-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* الكرت نفسه */
a.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background: #ffffff;
    border-radius: 16px;

    /* إطار سكني رفيع وأنيق */
    border: 1px solid #e2e8f0;

    /* ظل خفيف جداً */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;

    padding-bottom: 18px;
    position: relative;
}

/* خط علوي ملوّن داخل الكرت اختياري، يمكن إزالته لتبسيط التصميم */
a.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00b08a 0%, #00d2a4 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}

/* hover effect */
a.category-card:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

a.category-card:hover::before {
    opacity: 1;
}

a.category-card:hover::before {
    opacity: 1;
}

/* حاوية الصورة */
.category-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.category-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.40s ease;
}

a.category-card:hover .category-card-img img {
    transform: scale(1.08);
}

/* أيقونة SVG إن وجدت */
.cat-svg-icon {
    width: 64px;
    height: 64px;
    color: #1a3a5c;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* اسم الفئة */
.category-card-title {
    margin: 14px 16px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e2530;
    /* Theme dark grey */
    text-align: center;
    line-height: 1.4;
    transition: color 0.2s ease;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

a.category-card:hover .category-card-title {
    color: #00b08a;
    /* Theme main green */
}

/* Responsive - موبايل */
@media (max-width: 900px) {
    .all-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 500px) {
    .all-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .category-card-title {
        font-size: 14px;
    }
}

/* ============================================================
   CUSTOM WOOCOMMERCE PRODUCT GRID & LOOP
   ============================================================ */

/* The main Products UL */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
}

/* Clear WooCommerce floats and widths */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* --------------------------------------
   PRODUCT CARD STYLING
   -------------------------------------- */
.woocommerce ul.products li.product {
    background: #ffffff;
    border: 1px solid #00b08a;
    border-radius: 12px;
    padding: 16px;
    padding-bottom: 64px;
    /* Space for absolute price & cart icon bottom row */
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: right;
    direction: rtl;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    /* Needed to contain the absolutely positioned ::before element */
}

/* Green gradient line at the top, like the category cards */
.woocommerce ul.products li.product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00b08a 0%, #00d2a4 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: 10;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 176, 138, 0.08);
    /* slight green shadow */
    border-color: #00b08a;
    /* Theme Green */
}

.woocommerce ul.products li.product:hover::before {
    opacity: 1;
}

/* Product Link Wrapper */
.woocommerce ul.products li.product>a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Hide any lingering WC pseudo-element we may have added before */
.woocommerce ul.products li.product>a.woocommerce-LoopProduct-link::after {
    display: none !important;
}

/* Product Image Container */
.woocommerce ul.products li.product img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background-color: transparent;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 10px;
}

.woocommerce ul.products li.product .custom-sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 62px;
    padding: 8px 10px;
    border-radius: 18px 18px 6px 18px;
    background: linear-gradient(135deg, #fb7185 0%, #ef4444 55%, #ea580c 100%);
    color: #fff;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.22);
    z-index: 4;
    pointer-events: none;
}

.woocommerce ul.products li.product .custom-sale-badge::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px 14px 3px 14px;
}

.woocommerce ul.products li.product .custom-sale-badge small,
.woocommerce ul.products li.product .custom-sale-badge strong {
    position: relative;
    z-index: 1;
}

.woocommerce ul.products li.product .custom-sale-badge small {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 3px;
}

.woocommerce ul.products li.product .custom-sale-badge strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e2530 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    /* Allow truncation */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* ====================================================
   TITLE + STARS ON THE SAME LINE
   ==================================================== */
.woocommerce ul.products li.product .custom-title-stars-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.woocommerce ul.products li.product .custom-loop-star-rating {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.woocommerce ul.products li.product .custom-loop-star-rating svg {
    width: 20px;
    height: 20px;
}

/* WooCommerce Rating Stars (Default) */
.woocommerce ul.products li.product .star-rating {
    display: none !important;
    /* Hide default rating so we only show ours */
}

/* Row for Price & Button — not needed anymore, kept as fallback */
.woocommerce ul.products li.product .price-cart-wrapper {
    display: none;
}

/* Product Price */
.woocommerce ul.products li.product .price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    bottom: 24px;
    right: 16px;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 700;
}

.woocommerce ul.products li.product .price del {
    font-size: 12px;
    color: #94a3b8;
    margin-left: 6px;
    font-weight: 400;
}

/* ====================================================
   CUSTOM LOOP ACTIONS ROW  (text label + cart icon)
   Replace old add-to-cart absolute button entirely
   ==================================================== */
.woocommerce ul.products li.product .custom-loop-actions {
    display: flex;
    align-items: center;
    direction: rtl;
    position: absolute;
    bottom: 16px;
    left: 16px;
    gap: 0;
}

/* Text label: acts as Add to Cart */
.woocommerce ul.products li.product .custom-add-to-cart-text {
    color: #00b08a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    text-align: right;

    /* Hidden by default */
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    margin-left: 0;
    transition: all 0.3s ease;
}

/* Show text on hover */
.woocommerce ul.products li.product .custom-loop-actions:hover .custom-add-to-cart-text {
    max-width: 150px;
    /* Enough to show the text */
    opacity: 1;
    margin-left: 8px;
    /* Give some space between text and icon */
}

.woocommerce ul.products li.product .custom-add-to-cart-text:hover {
    color: #008a6e;
    text-decoration: underline;
}

/* Hide default WooCommerce "View Cart" link added after AJAX add to cart */
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}

/* Cart icon button: links to product page */
.woocommerce ul.products li.product .custom-cart-icon-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background-color: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.woocommerce ul.products li.product .custom-loop-actions:hover .custom-cart-icon-btn,
.woocommerce ul.products li.product .custom-cart-icon-btn:hover {
    background-color: #00b08a;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 176, 138, 0.3);
}

.woocommerce ul.products li.product .custom-cart-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Hide the old WooCommerce default loop button (replaced by .custom-loop-actions) */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .button.product_type_variable {
    display: none !important;
}

/* --------------------------------------
   PAGINATION (Handled by Unified Modern Luxury Pagination)
   -------------------------------------- */

/* ==========================================================================
   SHOP FILTERS SIDEBAR
   ========================================================================== */

/* Two-column layout: sidebar right + products left */
.shop-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 60px;
}

/* ── Sidebar ── */
.shop-filters-sidebar {
    width: 290px;
    flex-shrink: 0;
    position: sticky;
    top: 95px;
    margin-top: 38px;
    max-height: none;
    height: auto;
    overflow: visible;
    background: #ffffff;
    border: 2.5px solid #00b08a;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 30px -5px rgba(0, 176, 138, 0.12), 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.shop-filters-sidebar:hover {
    border-color: #008a6e;
    box-shadow: 0 12px 35px -5px rgba(0, 176, 138, 0.18), 0 6px 16px rgba(0, 0, 0, 0.04);
}

/* ── Filters Header ── */
.filters-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #00b08a 0%, #008a6e 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.25);
}

.filters-header span {
    font-size: 18px;
}

.filters-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

/* ── Filter Group ── */
.filter-group {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.filter-group:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.filter-group:last-of-type {
    margin-bottom: 14px;
}

.filter-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s, color 0.2s;
}

.filter-group-header:hover {
    background: #f0fdf9;
}

.filter-group-header:hover .filter-title {
    color: #00b08a;
}

.filter-emoji {
    font-size: 15px;
}

.filter-title {
    flex: 1;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    transition: color 0.2s;
}

.filter-arrow {
    font-size: 12px;
    color: #94a3b8;
    transition: transform 0.25s ease, color 0.25s ease;
}

.filter-group-header:hover .filter-arrow {
    color: #00b08a;
}

.filter-group.collapsed .filter-arrow {
    transform: rotate(90deg);
}

.filter-group-body {
    padding: 14px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.filter-group.collapsed .filter-group-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Price Range Slider ── */
.price-range-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    direction: rtl;
}

.price-badge {
    background: linear-gradient(135deg, #00b08a 0%, #008a6e 100%);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 176, 138, 0.2);
}

.range-track-wrap {
    position: relative;
    height: 7px;
    background: #e2e8f0;
    border-radius: 10px;
    margin: 8px 4px 18px;
    direction: rtl;
}

.range-fill {
    position: absolute;
    height: 7px;
    background: linear-gradient(90deg, #00b08a 0%, #10b981 100%) !important;
    border-radius: 10px;
    pointer-events: none;
    top: 0;
    z-index: 2;
}

.range-input {
    position: absolute;
    width: 100%;
    height: 7px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    top: 0;
    right: 0;
    margin: 0;
    pointer-events: none;
    z-index: 3;
    direction: rtl;
}

#range-min {
    z-index: 4;
}

#range-max {
    z-index: 5;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border: 2.5px solid #00b08a;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 6px rgba(0, 176, 138, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.range-input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(0, 176, 138, 0.2);
}

/* ── Apply Button (Enhanced Shape, Font & Size) ── */
.filter-apply-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 12px 20px;
    min-height: 44px;
    background: linear-gradient(135deg, #00b08a 0%, #008a6e 100%);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 176, 138, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    user-select: none;
}

.filter-apply-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.6s ease;
}

.filter-apply-btn:hover::before {
    left: 140%;
}

.filter-apply-btn:hover {
    background: linear-gradient(135deg, #00c896 0%, #009678 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 176, 138, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.filter-apply-btn:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 3px 10px rgba(0, 176, 138, 0.25);
}

/* ── Standalone Tilted Checkmark Icon ── */
.apply-check-icon {
    flex-shrink: 0;
    transform: rotate(-10deg);
    transition: transform 0.25s ease;
    stroke-width: 3.5px;
}

.filter-apply-btn:hover .apply-check-icon {
    transform: rotate(-2deg) scale(1.18);
}

/* ── Radio Options ── */
.stock-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    color: #334155;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.18s ease;
}

.filter-radio:hover {
    background: #f0fdf9;
    color: #00b08a;
    border-color: #ccfbf1;
}

.filter-radio.active {
    background: #e6faf5;
    border-color: #00b08a;
    color: #008a6e;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 176, 138, 0.08);
}

.filter-radio-content {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    width: 100%;
}

.filter-opt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.filter-opt-icon.icon-all {
    background: #e0f2fe;
    color: #0284c7;
}

.filter-opt-icon.icon-instock {
    background: #dcfce7;
    color: #16a34a;
}

.filter-opt-icon.icon-outofstock {
    background: #ffe4e6;
    color: #e11d48;
}

.filter-opt-icon.icon-onbackorder {
    background: #fef3c7;
    color: #d97706;
}

.filter-radio:hover .filter-opt-icon {
    transform: scale(1.12);
}

.filter-opt-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    flex: 1;
}

.filter-radio.active .filter-opt-text {
    color: #008a6e;
    font-weight: 700;
}

.stars-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transition: all 0.18s ease;
}

.filter-radio:hover .filter-count {
    background: #d1fae5;
    color: #047857;
}

.filter-radio.active .filter-count {
    background: #00b08a;
    color: #ffffff;
}

.filter-radio input[type="radio"],
.filter-radio input[type="checkbox"] {
    accent-color: #00b08a;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Clear Filters ── */
.filter-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    background: #fff1f2;
    color: #e11d48;
    border: 1.5px solid #fecdd3;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    margin: 6px 0 12px;
    transition: all 0.2s ease;
}

.filter-clear-btn:hover {
    background: #ffe4e6;
    border-color: #fda4af;
    color: #be123c;
    transform: translateY(-1px);
}

.filter-radio-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ── Skeleton Loading Grid & Shimmer Effects ── */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.product-skeleton-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    list-style: none;
    min-height: 320px;
}

.skeleton-shimmer-box {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite ease-in-out;
    border-radius: 8px;
}

.skeleton-img {
    width: 100%;
    height: 180px;
    border-radius: 12px;
}

.skeleton-title-1 {
    width: 85%;
    height: 16px;
}

.skeleton-title-2 {
    width: 60%;
    height: 14px;
}

.skeleton-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}

.skeleton-price {
    width: 70px;
    height: 22px;
    border-radius: 6px;
}

.skeleton-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4f8;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.filter-radio.active .filter-count {
    background: rgba(0, 176, 138, 0.12);
    color: #008a6e;
}

.filter-radio input[type="radio"],
.filter-radio input[type="checkbox"] {
    accent-color: #00b08a;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Clear Filters ── */
.filter-clear-btn {
    display: block;
    width: 100%;
    padding: 8px;
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    margin: 4px 0 12px;
    transition: all 0.2s;
}

.filter-clear-btn:hover {
    background: #ffe4e6;
}

/* ── Products Area ── */
.shop-products-area {
    flex: 1;
    min-width: 0;
}

.shop-products-area .woocommerce-notices-wrapper {
    margin: 0 !important;
}

.shop-products-header-mobile-wrap {
    display: none;
}

/* ── Search Results Grid ── */
ul.search-results-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 30px 0 !important;
    padding: 0 !important;
}

ul.search-results-grid li.product {
    margin: 0 !important;
}

@media (max-width: 900px) {
    ul.search-results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    ul.search-results-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.shop-products-area ul.products,
.shop-products-area .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── Mobile Filter Drawer ── */
.mobile-filter-toggle-wrap {
    display: none;
    margin-bottom: 20px;
}

.mobile-filter-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #00b08a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
    justify-content: center;
}

.mobile-filter-btn:hover {
    background: #008f70;
}

/* Hide sorting dropdown on screens < 1200px where the filter button takes its place */
@media (max-width: 1200px) {
    .woocommerce-ordering {
        display: none !important;
    }
}

/* Hide result count and sorting controls on product category archives */
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering {
    display: none !important;
}

.shop-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.shop-sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    left: 20px;
    /* Changed from right to left since the drawer comes from left */
    right: auto;
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    color: #1e2530;
    cursor: pointer;
    z-index: 10;
}

/* ── Responsive ── */
@media (max-width: 1200px) {

    /* Header layout for products area */
    .shop-products-area .woo-mobile-notices {
        width: auto !important;
        flex: 1;
        justify-content: flex-end !important;
    }

    .mobile-filter-toggle-wrap {
        display: inline-flex !important;
        margin-bottom: 0px;
        margin-right: 0px !important;
        margin-left: 15px;
        /* Space between filter and results count */
    }

    .mobile-filter-btn {
        width: auto;
        padding: 8px 20px;
        font-size: 14px;
        border-radius: 6px;
    }

    .shop-products-header-mobile-wrap {
        display: flex;
        gap: 15px;
        margin-bottom: 16px;
        justify-content: flex-end;
    }

    /* Keep result count alignment in the same row as filter button */
    .woo-mobile-notices {
        flex: 1 !important;
        text-align: right !important;
    }

    .shop-filters-sidebar {
        position: fixed !important;
        top: 0;
        left: 0 !important;
        right: auto !important;
        width: 340px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 2001 !important;
        margin: 0 !important;
        padding: 70px 25px 30px !important;
        overflow-y: auto !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
    }

    .shop-filters-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15) !important;
        min-height: 100%;
    }

    .mobile-sidebar-close {
        display: flex;
    }

    body.mobile-filter-open {
        overflow: hidden;
    }

    .shop-products-area ul.products,
    .shop-products-area .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {

    .shop-products-area ul.products,
    .shop-products-area .woocommerce ul.products {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* ==========================================================
   SINGLE PRODUCT PAGE
   ========================================================== */

/* ── Wrapper ── */
.sp-page-wrapper {
    padding: 30px 0 60px;
}

/* ── Breadcrumb ── */
.sp-breadcrumb {
    margin-bottom: 18px;
    font-size: 13px;
    color: #888;
}

.sp-breadcrumb .woocommerce-breadcrumb {
    font-size: 13px;
    color: #888;
}

.sp-breadcrumb a {
    color: #888;
    text-decoration: none;
}

.sp-breadcrumb a:hover {
    color: #1e2530;
}

/* ── Hero: 2-column layout ── */
.sp-hero {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 50px;
}

/* ── Gallery ── */
.sp-gallery {
    position: sticky;
    top: 20px;
}

.sp-gallery-main {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    cursor: crosshair; /* Cursor indicates zoom capability */
}

.sp-main-image {
    max-height: 380px;
    width: 100%;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.2s ease-out, opacity 0.2s;
    transform-origin: center center;
}

.sp-zoom-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
    z-index: 2;
}

.sp-zoom-btn:hover {
    background: #fff;
    color: #1e2530;
}

.sp-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.sp-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: #fff;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-thumb.active,
.sp-thumb:hover {
    border-color: #00b08a;
}

/* ── Product Info ── */
.sp-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e2530;
    margin: 0;
    line-height: 1.3;
}

/* Rating */
.sp-rating-row {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.sp-rating-count {
    font-size: 12px;
    color: #888;
    margin-right: 6px;
}

/* Short description */
.sp-short-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.sp-short-desc a {
    color: #00b08a;
}

/* Price */
.sp-price-wrap .price {
    font-size: 26px;
    font-weight: 700;
    color: #1e2530;
}

.sp-price-wrap del {
    color: #aaa;
    font-size: 16px;
}

.sp-price-wrap ins {
    text-decoration: none;
}

/* Loyalty Points Reward Pill in Single Product */
.sp-loyalty-reward-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1.5px solid #a7f3d0;
    border-radius: 12px;
    padding: 8px 14px;
    margin: 10px 0 16px 0;
    box-shadow: 0 2px 8px rgba(0, 176, 138, 0.08);
    transition: all 0.25s ease;
}

.sp-loyalty-reward-box:hover {
    border-color: #6ee7b7;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.14);
    transform: translateY(-1px);
}

.sp-loyalty-reward-icon {
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-loyalty-reward-text {
    font-size: 13px;
    font-weight: 700;
    color: #065f46;
    line-height: 1.4;
}

.sp-loyalty-reward-text strong {
    color: #008f6f;
    background: #d1fae5;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 13.5px;
    margin: 0 2px;
}

/* Stock */
.sp-stock {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sp-stock.in-stock {
    color: #00b08a;
}

.sp-stock.out-of-stock {
    color: #e53e3e;
}

/* Action buttons (wishlist / compare) */
.sp-action-btns {
    display: flex;
    gap: 10px;
}

.sp-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.sp-btn-icon:hover {
    border-color: #00b08a;
    color: #00b08a;
    background: #f0fdf9;
}

/* Badges */
.sp-badges-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

.sp-badge svg {
    color: #00b08a;
    flex-shrink: 0;
}

.sp-badge-bonus {
    color: #0f172a;
    font-weight: 800;
}

.sp-badge-bonus svg {
    color: #00b08a;
}

.sp-badge-shipping,
.sp-badge-payment {
    color: #334155;
}

/* ── Accordion ── */
.sp-accordion {
    border-bottom: 1px solid #e8ecf0;
}

.sp-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e2530;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: right;
}

.sp-accordion-icon {
    flex-shrink: 0;
    color: #888;
    transition: transform 0.3s;
}

.sp-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.sp-accordion-content.open {
    max-height: 400px;
}

.sp-accordion-content p {
    margin: 0 0 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

/* Shipping Table */
.sp-shipping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
}

.sp-shipping-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #f1f3f5;
    color: #555;
}

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

.sp-shipping-table td.ship-method {
    color: #1e2530;
    width: 50%;
}

.sp-shipping-table td.ship-time {
    color: #888;
    width: 20%;
}

.sp-shipping-table td.ship-price {
    font-weight: 700;
    color: #1e2530;
    text-align: left;
    width: 30%;
}

.sp-shipping-table td.ship-price.free {
    color: #00b08a;
}

/* ── Tabs nav ── */
.sp-tabs-section {
    margin-bottom: 50px;
}

.sp-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e8ecf0;
    margin-bottom: 30px;
}

.sp-tab-btn {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -2px;
}

.sp-tab-btn:hover {
    color: #1e2530;
}

.sp-tab-btn.active {
    color: #1e2530;
    font-weight: 700;
    border-bottom-color: #1e2530;
}

/* Tab panels */
.sp-tab-panel {
    display: none;
}

.sp-tab-panel.active {
    display: block;
}

.sp-tab-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 24px;
}

.sp-no-content {
    color: #888;
    font-size: 14px;
    padding: 20px 0;
}

/* Description content */
.sp-description-content {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Specs groups */
.sp-specs-group {
    margin-bottom: 28px;
}

.sp-specs-group-title {
    font-size: 15px;
    font-weight: 700;
    color: #00b08a;
    margin: 0 0 10px;
}

.sp-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.sp-specs-table tr {
    border-bottom: 1px solid #f1f3f5;
}

.sp-specs-table td {
    padding: 10px 8px;
    vertical-align: top;
    color: #555;
}

.sp-specs-table td.spec-label {
    width: 45%;
    color: #888;
}

.sp-specs-table td.spec-value {
    color: #1e2530;
    font-weight: 500;
    text-align: left;
}

/* Additional information table */
.sp-additional-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.sp-additional-table tr {
    border-bottom: 1px solid #f1f3f5;
}

.sp-additional-table th {
    width: 30%;
    text-align: right;
    padding: 12px 8px;
    color: #888;
    font-weight: 500;
}

.sp-additional-table td {
    padding: 12px 8px;
    color: #00b08a;
    text-align: left;
}

/* ── Reviews ── */
.sp-review-card {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #f1f3f5;
}

.sp-review-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.sp-review-avatar {
    flex-shrink: 0;
}

.sp-review-body {
    flex: 1;
}

.sp-review-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.sp-review-stars {
    display: flex;
    gap: 2px;
}

.sp-review-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.sp-review-author {
    font-weight: 700;
    color: #1e2530;
}

.sp-review-sep {
    color: #aaa;
}

.sp-review-date {
    color: #aaa;
    font-size: 12px;
    margin-right: auto;
}

.sp-review-text {
    font-size: 13.5px;
    color: #555;
    line-height: 1.65;
}

.sp-review-text a {
    color: #00b08a;
}

/* ── Review Form ── */
.sp-review-form-wrap {
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid #e8ecf0;
}

.sp-review-form-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}

.sp-review-required {
    font-size: 13px;
    color: #888;
    margin: 0 0 20px;
}

.sp-review-required .required {
    color: #e53e3e;
}

/* Rating chooser */
.sp-rating-field {
    margin-bottom: 20px;
}

.sp-rating-field>label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e2530;
    margin-bottom: 10px;
}

.sp-rating-field>label .required {
    color: #e53e3e;
}

.sp-star-chooser {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-star-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    padding: 6px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.sp-star-label:hover {
    border-color: #f59e0b;
    background: #fffbeb;
}

.sp-star-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Form fields */
.sp-form-field {
    margin-bottom: 18px;
}

.sp-form-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e2530;
    margin-bottom: 8px;
}

.sp-form-field label .required {
    color: #e53e3e;
}

.sp-form-field input[type="text"],
.sp-form-field input[type="email"],
.sp-form-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #dde2e8;
    border-radius: 8px;
    font-size: 14px;
    color: #1e2530;
    background: #fff;
    transition: border-color 0.2s;
    resize: vertical;
    font-family: inherit;
}

.sp-form-field input:focus,
.sp-form-field textarea:focus {
    outline: none;
    border-color: #00b08a;
}

/* Checkbox */
.sp-form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #555;
}

.sp-form-check input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    accent-color: #00b08a;
}

.sp-form-check label {
    cursor: pointer;
}

.sp-form-check .highlight {
    color: #00b08a;
}

/* Submit */
.sp-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    background: #00b08a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.sp-submit-btn:hover {
    background: #009a76;
    transform: translateY(-1px);
}

/* ── Related Products ── */
.sp-related-section {
    padding-top: 20px;
}

.sp-related-grid ul.products {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat(4, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Make sure inner cards fill height */
.sp-related-grid ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    display: flex;
}

.sp-related-grid ul.products li.product .category-card {
    width: 100%;
    margin-bottom: 0;
}

.sp-related-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 24px;
}

.sp-related-grid {
    width: 100%;
    display: block;
}

.sp-related-card {
    border: 1px solid #edf0f4;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s;
}

.sp-related-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
}

.sp-related-img-link {
    display: block;
    position: relative;
    background: #f8f9fa;
    padding: 16px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-related-img-link img {
    max-height: 130px;
    width: 100%;
    object-fit: contain;
    transition: transform 0.3s;
}

.sp-related-card:hover .sp-related-img-link img {
    transform: scale(1.04);
}

.sp-related-badge-sale {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 1;
}

.sp-related-info {
    padding: 12px 14px 14px;
}

.sp-related-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e2530;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sp-related-name:hover {
    color: #00b08a;
}

.sp-related-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sp-related-price .price {
    font-size: 14px;
    font-weight: 700;
    color: #1e2530;
}

.sp-related-price del {
    color: #aaa;
    font-size: 12px;
}

.sp-related-price ins {
    text-decoration: none;
}

.sp-related-cart-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #f0fdf9;
    border: 1px solid #00b08a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00b08a;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.sp-related-cart-btn:hover {
    background: #00b08a;
    color: #fff;
}

/* ── تجاوب المنتجات ذات الصلة مع الشاشات (Responsive) ── */

/* شاشات التابلت */
@media (max-width: 1024px) {
    .sp-related-grid ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* شاشات الموبايل الكبيرة */
@media (max-width: 768px) {
    .sp-related-grid ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        /* تصغير المسافة بين الكروت عالموبايل */
    }
}

/* شاشات الموبايل الصغيرة */
@media (max-width: 480px) {
    .sp-related-grid ul.products {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 10px !important;
    }
}

/* ── Variable Products Styling ── */
.sp-variable-form-wrap {
    margin: 20px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.sp-variable-form-wrap .variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.sp-variable-form-wrap .variations td.label {
    padding: 10px 15px 10px 0;
    color: #1e2530;
    font-weight: 600;
    font-size: 15px;
    width: 30%;
    vertical-align: middle;
}

.sp-variable-form-wrap .variations td.value {
    padding: 10px 0;
    vertical-align: middle;
}

.sp-variable-form-wrap select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    color: #4a5568;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234a5568%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left 15px top 50%;
    background-size: 12px auto;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.sp-variable-form-wrap select:focus {
    border-color: #00b08a;
    box-shadow: 0 0 0 3px rgba(0, 176, 138, 0.15);
}

.sp-variable-form-wrap .reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #e53e3e;
    text-decoration: none;
    font-weight: 500;
}

.sp-variable-form-wrap .reset_variations:hover {
    text-decoration: underline;
}

.sp-variable-form-wrap .woocommerce-variation-price {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #1e2530;
}

.sp-variable-form-wrap .woocommerce-variation-availability {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* Variable Add to Cart Container */
.sp-variable-form-wrap .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-variable-form-wrap .woocommerce-variation-add-to-cart .quantity {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    height: 48px;
}

.sp-variable-form-wrap .woocommerce-variation-add-to-cart .quantity input.qty {
    width: 60px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1e2530;
    outline: none;
    background: transparent;
    -moz-appearance: textfield;
}

.sp-variable-form-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    height: 48px;
    background: #00b08a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
    flex: 1;
    min-width: 160px;
    box-shadow: 0 2px 10px rgba(0, 176, 138, 0.25);
}

.sp-variable-form-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
    background: #009e7c;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 176, 138, 0.4);
}

.sp-variable-form-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button:active {
    transform: translateY(0);
    box-shadow: none;
}

.sp-variable-form-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .sp-hero {
        grid-template-columns: 1fr;
    }

    .sp-gallery {
        position: static;
    }
}

@media (max-width: 600px) {
    .sp-tab-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ==========================================================
   PAGINATION — Search Results & Shop
   ========================================================== */
.sp-pagination-wrap {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED LUXURY PAGINATION DESIGN (EXACT MATCH TO ADMIN HUB)
   ═══════════════════════════════════════════════════════════════ */
.as-pagination-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 36px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.as-pagination,
.sp-pagination-wrap ul.page-numbers,
.woocommerce-pagination ul.page-numbers {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 auto !important;
    padding: 6px 8px !important;
    flex-wrap: wrap !important;
    direction: rtl !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.sp-pagination-wrap ul.page-numbers li,
.woocommerce-pagination ul.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: inline-flex !important;
}

.as-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    outline: none !important;
    line-height: 1 !important;
}

/* Page Numbers */
.as-page-num,
.sp-pagination-wrap ul.page-numbers li a:not(.prev):not(.next),
.sp-pagination-wrap ul.page-numbers li span:not(.dots):not(.prev):not(.next),
.woocommerce-pagination ul.page-numbers li a:not(.prev):not(.next),
.woocommerce-pagination ul.page-numbers li span:not(.dots):not(.prev):not(.next) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    border: 1.5px solid #00b08a !important;
    color: #00b08a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-family: 'Cairo', system-ui, sans-serif !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    box-shadow: 0 1.5px 4px rgba(0, 176, 138, 0.08) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.as-page-num:hover:not(.active),
.sp-pagination-wrap ul.page-numbers li a:hover:not(.current),
.woocommerce-pagination ul.page-numbers li a:hover:not(.current) {
    background: #ecfdf5 !important;
    color: #009373 !important;
    border-color: #009373 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 176, 138, 0.18) !important;
}

.as-page-num.active,
.sp-pagination-wrap ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li span.current {
    background: linear-gradient(135deg, #00b08a 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid #00b08a !important;
    font-weight: 900 !important;
    box-shadow: 0 3px 10px rgba(0, 176, 138, 0.3) !important;
    transform: scale(1.03) !important;
}

/* Nav Buttons (Next / Prev) */
.as-page-nav,
.sp-pagination-wrap ul.page-numbers li a.prev,
.sp-pagination-wrap ul.page-numbers li a.next,
.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce-pagination ul.page-numbers li a.next {
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    border: 1.5px solid #00b08a !important;
    color: #00b08a !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    font-family: 'Cairo', system-ui, sans-serif !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1.5px 4px rgba(0, 176, 138, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.as-page-nav:hover:not(:disabled):not(.is-disabled),
.sp-pagination-wrap ul.page-numbers li a.prev:hover,
.sp-pagination-wrap ul.page-numbers li a.next:hover,
.woocommerce-pagination ul.page-numbers li a.prev:hover,
.woocommerce-pagination ul.page-numbers li a.next:hover {
    background: #ecfdf5 !important;
    border-color: #009373 !important;
    color: #009373 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 176, 138, 0.18) !important;
}

.as-page-nav:disabled,
.as-page-nav.is-disabled,
.woocommerce-pagination ul.page-numbers li span.prev.is-disabled,
.woocommerce-pagination ul.page-numbers li span.next.is-disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
    border: 1.5px solid rgba(0, 176, 138, 0.35) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

.as-page-ellipsis,
.sp-pagination-wrap ul.page-numbers li span.dots,
.woocommerce-pagination ul.page-numbers li span.dots {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    color: #00b08a !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    letter-spacing: 2px !important;
    box-shadow: none !important;
    user-select: none !important;
}

/* ==========================================================
   AUTH PAGES — Login & Register
   ========================================================== */

.as-auth-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #f0fdf9 0%, #f8fafc 60%, #eff6ff 100%);
    display: flex;
    align-items: stretch;
}

/* Container: split into decoration + form */
.as-auth-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ── Left Decoration Panel ── */
.as-auth-decoration {
    flex: 0 0 420px;
    background: linear-gradient(160deg, #00b08a 0%, #007a60 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
}

.as-auth-decoration::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    top: -80px;
    left: -80px;
}

.as-auth-decoration::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    bottom: -60px;
    right: -60px;
}

.as-auth-brand {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}

.as-auth-logo {
    margin-bottom: 32px;
}

.as-auth-logo img {
    max-height: 60px;
    filter: brightness(0) invert(1);
}

.as-auth-logo-text {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

.as-auth-brand h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 14px;
    color: #fff;
}

.as-auth-brand p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin-bottom: 36px;
}

.as-auth-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 40px;
    text-align: right;
}

.as-auth-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 18px;
    border-radius: 12px;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.as-auth-feature:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.as-auth-feature span {
    font-size: 22px;
    flex-shrink: 0;
    margin-left: 4px;
}

.as-auth-switch-prompt {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.as-auth-switch-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    margin-right: 4px;
}

/* ── Form Side ── */
.as-auth-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
}

.as-auth-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.05), 0 5px 15px rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    z-index: 2;
}

.as-auth-title {
    font-size: 28px;
    font-weight: 800;
    color: #1e2530;
    margin: 0 0 8px;
}

.as-auth-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 32px;
}

/* Error box */
.as-auth-error {
    background: #fff5f5;
    border: 1.5px solid #fed7d7;
    color: #c53030;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Form groups */
.as-form-group {
    margin-bottom: 22px;
}

.as-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.as-required {
    color: #e53e3e;
}

/* Two-column row */
.as-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Input wrap */
.as-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.as-input-icon {
    position: absolute;
    right: 14px;
    font-size: 18px;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

.as-input {
    width: 100%;
    padding: 13px 60px 13px 44px !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    color: #1e2530;
    background: #f8fafc;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
    font-family: inherit;
    direction: rtl;
    /* Set base direction to RTL for proper Arabic placeholders */
}

input[type="email"].as-input,
input[type="password"].as-input,
input[type="tel"].as-input,
.as-input[name="username"] {
    direction: ltr;
    text-align: right;
    /* Keeps typing visually anchored to the right but cursor behaves LTR */
}

.as-input:focus {
    outline: none;
    border-color: #00b08a;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 176, 138, 0.1);
}

/* Show/hide password toggle */
.as-toggle-pw {
    position: absolute;
    left: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.as-toggle-pw:hover {
    color: #00b08a;
}

/* ── Phone Field ── */
.as-phone-wrap {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.as-country-select-wrap {
    flex-shrink: 0;
}

.as-country-select {
    height: 100%;
    padding: 13px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e2530;
    background: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    min-width: 180px;
    transition: border-color 0.25s;
}

.as-country-select:focus {
    outline: none;
    border-color: #00b08a;
}

.as-phone-input {
    flex: 1;
    padding-right: 14px !important;
}

/* ── Remember & Forgot Row ── */
.as-form-row-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.as-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4a5568;
    cursor: pointer;
}

.as-checkbox-label input[type="checkbox"] {
    accent-color: #00b08a;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.as-forgot-link {
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.as-forgot-link:hover {
    color: #00b08a;
}

/* ── Password Strength ── */
.as-pw-strength {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.as-pw-bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
}

.as-pw-label {
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

/* ── Primary Button ── */
.as-btn-primary {
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(135deg, #00b08a 0%, #009a76 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(0, 176, 138, 0.3);
    font-family: inherit;
    margin-bottom: 20px;
}

.as-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 176, 138, 0.4);
}

/* Privacy note */
.as-privacy-note {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.6;
}

.as-privacy-note a {
    color: #00b08a;
    text-decoration: none;
}

/* Mobile switch link */
.as-auth-mobile-switch {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    display: none;
}

.as-auth-mobile-switch a {
    color: #00b08a;
    font-weight: 700;
    text-decoration: none;
    margin-right: 4px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .as-auth-decoration {
        flex: 0 0 340px;
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .as-auth-container {
        flex-direction: column;
    }

    .as-auth-decoration {
        flex: none;
        padding: 40px 24px 32px;
    }

    .as-auth-features {
        display: none;
    }

    .as-auth-switch-prompt {
        display: none;
    }

    .as-auth-mobile-switch {
        display: block;
    }

    .as-auth-brand h2 {
        font-size: 22px;
    }

    .as-auth-form-side {
        padding: 30px 20px 50px;
    }

    .as-auth-card {
        padding: 30px 20px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    }

    .as-form-row-2col {
        grid-template-columns: 1fr;
    }

    .as-phone-wrap {
        flex-direction: column;
    }

    .as-country-select {
        width: 100%;
    }
}


/* =========================================================
   صفحة حسابي (تسجيل الدخول وإنشاء حساب)
   ========================================================= */

/* توسيط وتحديد عرض المنطقة */
.woocommerce-account .woocommerce {
    margin: 60px auto;
    padding: 0 20px;

}

/* ترتيب الفورمين جنب بعض (أو تحت بعض للموبايل) */
.woocommerce-account .u-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 0;
}

/* شكل كرت الفورم (الدخول والتسجيل) */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    flex: 1;
    min-width: 320px;
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #edf0f4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    width: 100%;
}

/* العناوين (Login / Register) */
.woocommerce-account h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1e2530;
    margin-bottom: 30px;
    text-align: center;
}

/* إزالة حدود ووكوميرس الافتراضية البشعة */
.woocommerce-account form.login,
.woocommerce-account form.register {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.woocommerce-account .form-row {
    margin-bottom: 20px;
}

/* شكل النصوص فوق المربعات */
.woocommerce-account label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4a5568;
    font-size: 14px;
}

/* مربعات الإدخال (Inputs) */
.woocommerce-account input.input-text {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    color: #1e2530;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.woocommerce-account input.input-text:focus {
    border-color: #00b08a;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 176, 138, 0.1);
}

/* الزر الأخضر الفخم */
.woocommerce-account button.button {
    width: 100%;
    padding: 16px;
    background: #00b08a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 10px;
}

.woocommerce-account button.button:hover {
    background: #009e7c;
    transform: translateY(-2px);
}

/* رابط نسيت كلمة المرور */
.woocommerce-account .lost_password {
    text-align: center;
    margin-top: 20px;
}

.woocommerce-account .lost_password a {
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
}

.woocommerce-account .lost_password a:hover {
    color: #00b08a;
}

/* ترتيب الموبايل */
@media (max-width: 768px) {
    .woocommerce-account .u-columns {
        gap: 20px;
    }

    .woocommerce-account .u-column1,
    .woocommerce-account .u-column2 {
        padding: 25px;
    }
}

/* ============================================================
   CUSTOM CART PAGE
   ============================================================ */

/* Reset WooCommerce wrapper styles that break the custom layout */
.woocommerce-cart .woocommerce {
    max-width: 100%;
    width: 100%;
}

.woocommerce-cart .container {
    max-width: 100%;
    padding: 0;
}

.woocommerce-cart .site-main {
    padding: 0;
}

/* Hide WooCommerce's default cart totals (we built our own in the template) */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals {
    display: none !important;
}

.as-cart-wrapper {
    display: flex !important;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    align-items: flex-start;
}

.as-cart-items-col {
    flex: 1;
    min-width: 0;
}

.as-cart-totals-col {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

/* ── Title ── */
.as-cart-title {
    font-size: 26px;
    font-weight: 700;
    color: #1e2530;
    margin-bottom: 24px;
}

/* ── Empty Cart ── */
.as-cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.as-cart-empty svg {
    margin-bottom: 20px;
}

.as-cart-empty p {
    font-size: 18px;
    margin-bottom: 24px;
    color: #555;
}

.as-btn-primary {
    display: inline-block;
    background: #00b08a;
    color: #fff;
    padding: 12px 36px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.as-btn-primary:hover {
    background: #009e7c;
    transform: translateY(-1px);
}

/* ── Cart Header Row ── */
.as-cart-header-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #f6f8fa;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.as-col-product {
    width: 100px;
    flex-shrink: 0;
}

.as-col-details {
    flex: 1;
    padding-right: 16px;
}

.as-col-total {
    width: 120px;
    flex-shrink: 0;
    text-align: left;
}

/* ── Cart Item ── */
.as-cart-item {
    display: flex;
    align-items: flex-start;
    padding: 20px 16px;
    border-bottom: 1px solid #eee;
    transition: background 0.15s;
}

.as-cart-item:hover {
    background: #fafbfc;
}

.as-cart-item-image {
    width: 100px;
    flex-shrink: 0;
}

.as-cart-item-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
}

.as-cart-item-details {
    flex: 1;
    padding-right: 16px;
    min-width: 0;
}

.as-item-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #1e2530;
    line-height: 1.4;
}

.as-item-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.as-item-name a:hover {
    color: #00b08a;
}

.as-item-price {
    font-size: 14px;
    font-weight: 600;
    color: #00b08a;
    display: block;
    margin-bottom: 6px;
}

.as-item-desc {
    font-size: 13px;
    color: #777;
    margin: 0 0 12px;
    line-height: 1.5;
}

/* ── Qty + Remove actions ── */
.as-item-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.as-qty-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.as-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f6f8fa;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.as-qty-btn:hover {
    background: #e9ecef;
}

.as-qty-input {
    width: 40px;
    height: 32px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    -moz-appearance: textfield;
    background: #fff;
}

.as-qty-input::-webkit-outer-spin-button,
.as-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.as-remove-btn {
    color: #aaa;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.as-remove-btn:hover {
    color: #e53e3e;
}

/* ── Item Total ── */
.as-cart-item-total {
    width: 120px;
    flex-shrink: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #1e2530;
    padding-top: 4px;
}

/* ── Update Cart Row ── */
.as-cart-update-row {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
}

.as-btn-update {
    background: #1e2530;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.as-btn-update:hover {
    background: #2a3441;
}

.as-btn-update:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   CART TOTALS BOX
   ============================================================ */
.as-cart-totals-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.as-totals-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 20px;
}

/* ── Coupon Section ── */
.as-coupon-section {
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.as-coupon-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    padding: 0;
    transition: color 0.2s;
}

.as-coupon-toggle:hover {
    color: #00b08a;
}

.as-coupon-chevron {
    transition: transform 0.3s;
}

.as-coupon-toggle.open .as-coupon-chevron {
    transform: rotate(180deg);
}

.as-coupon-form {
    display: none;
    margin-top: 12px;
}

.as-coupon-inner {
    display: flex;
    gap: 8px;
}

.as-coupon-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.as-coupon-input:focus {
    border-color: #00b08a;
}

.as-coupon-apply {
    background: #1e2530;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.as-coupon-apply:hover {
    background: #2a3441;
}

/* ── Totals Rows ── */
.as-totals-rows {
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

.as-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
}

.as-coupon-row {
    color: #00b08a;
}

/* ── Grand Total ── */
.as-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 20px;
    font-size: 15px;
    font-weight: 600;
    color: #1e2530;
}

.as-grand-total-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e2530;
}

/* ── Checkout Button ── */
.as-checkout-btn-wrap {
    text-align: center;
}

.as-btn-checkout {
    display: block;
    width: 100%;
    background: #00b08a;
    color: #fff;
    text-align: center;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.3);
}

.as-btn-checkout:hover {
    background: #009e7c;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 176, 138, 0.4);
}

/* ============================================================
   CART PAGE – RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .as-cart-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .as-cart-totals-col {
        width: 100%;
        position: static;
    }
}

@media (max-width: 600px) {
    .as-cart-wrapper {
        padding: 0 12px;
        margin: 20px auto;
    }

    .as-cart-title {
        font-size: 22px;
    }

    .as-cart-header-row {
        display: none;
    }

    .as-cart-item {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 0;
    }

    .as-cart-item-image {
        width: 70px;
    }

    .as-cart-item-image img {
        width: 70px;
        height: 70px;
    }

    .as-cart-item-details {
        flex: 1;
        min-width: calc(100% - 86px);
    }

    .as-cart-item-total {
        width: 100%;
        text-align: right;
        padding-top: 0;
        font-size: 15px;
        border-top: 1px dashed #eee;
        padding-top: 10px;
    }

    .as-col-total {
        display: none;
    }

    .as-cart-totals-box {
        padding: 20px 16px;
    }
}

/* ============================================================
   NEWEST OFFERS PAGE — أخر العروض
   ============================================================ */

/* ── Hero Banner ── */
.newest-offers-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f3460 100%);
    padding: 60px 0 0;
    position: relative;
    overflow: hidden;
}

/* ── Hero Background Image support ── */
.newest-offers-hero[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

.newest-offers-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 176, 138, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

/* ── SVG Blob Decorations ── */
.offers-hero-blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.offers-hero-blob--1 {
    width: 420px;
    height: 420px;
    top: -100px;
    left: -80px;
    opacity: 0.7;
    animation: float-blob 8s ease-in-out infinite;
}

.offers-hero-blob--2 {
    width: 320px;
    height: 320px;
    bottom: -60px;
    right: -60px;
    opacity: 0.5;
    animation: float-blob 10s ease-in-out infinite reverse;
}

@keyframes float-blob {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

/* ── Breadcrumb ── */
.offers-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.offers-breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.offers-breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.offers-breadcrumb svg {
    color: rgba(255, 255, 255, 0.3);
}

.offers-breadcrumb span {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* ── Inner Layout ── */
.newest-offers-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding-bottom: 50px;
}

/* ── Text Side ── */
.newest-offers-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    gap: 12px;
    max-width: 580px;
    width: 100%;
}


/* ── Badge ── */
.offers-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 176, 138, 0.15);
    color: var(--badge-color, #00d4a6);
    border: 1px solid rgba(0, 176, 138, 0.3);
    border-radius: 50px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    width: fit-content;
    letter-spacing: 0.03em;
    animation: pulse-badge 2.5s ease-in-out infinite;
}

@keyframes pulse-badge {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 176, 138, 0.3);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(0, 176, 138, 0);
    }
}

/* ── Page Title ── */
.offers-hero-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #fff 30%, #a5f3e8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Description ── */
.offers-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    margin: 0;
    line-height: 1.75;
    max-width: 500px;
}

/* ── CTA Row ── */
.offers-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.offers-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.offers-cta-btn--primary {
    background: var(--btn-color, #00b08a);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 176, 138, 0.35);
}

.offers-cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0, 176, 138, 0.5);
    filter: brightness(1.1);
    color: #fff;
}

.offers-cta-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.offers-cta-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    transform: translateY(-2px);
}

/* ── Stats Wrap (right side) ── */
/* ── Offers Features Grid ── */
.offers-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    flex-shrink: 0;
    max-width: 480px;
    width: 100%;
}

.feature-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 8px;
    text-align: center;
    backdrop-filter: blur(12px);
    transition: background 0.3s ease, border-color 0.3s ease;
    border-bottom: 2px solid var(--box-color, #00b08a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: default;
    position: relative;
    z-index: 1;
}

.feature-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.feature-box:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    animation: box-float 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.feature-box:hover::after {
    animation: wave-around 1.2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

@keyframes box-float {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes wave-around {
    0% {
        box-shadow: 0 0 0 0 var(--box-color);
        opacity: 0.8;
    }

    100% {
        box-shadow: 0 0 0 20px var(--box-color);
        opacity: 0;
    }
}

.feature-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: var(--box-color, #00b08a);
    transition: transform 0.3s ease;
}

.feature-box:hover .feature-icon-wrap {
    transform: scale(1.1);
}

.feature-text {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

/* ── Wave Divider ── */
.offers-hero-wave {
    position: relative;
    height: 40px;
    margin-top: 0;
    line-height: 0;
}

.offers-hero-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── No Offers State ── */
.no-offers-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 80px 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #edf0f4;
    text-align: center;
    margin: 30px 0;
}

.no-offers-wrap svg {
    color: #cbd5e0;
}

.no-offers-wrap h2 {
    font-size: 22px;
    color: #1e2530;
    margin: 0;
}

.no-offers-wrap p {
    color: #718096;
    font-size: 15px;
    margin: 0;
    max-width: 420px;
    line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .newest-offers-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding-bottom: 40px;
    }

    .offers-features-grid {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .newest-offers-hero {
        padding: 40px 0 0;
    }

    .offers-hero-title {
        font-size: 30px;
    }

    .offers-features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .feature-box {
        padding: 12px 6px;
        border-radius: 10px;
    }

    .feature-icon-wrap {
        width: 36px;
        height: 36px;
    }

    .feature-icon-wrap svg {
        width: 20px;
        height: 20px;
    }

    .feature-text {
        font-size: 11px;
    }

    .offers-hero-blob--1 {
        width: 250px;
        height: 250px;
        top: -40px;
        left: -40px;
    }

    .offers-hero-blob--2 {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .offers-hero-title {
        font-size: 24px;
    }

    .offers-desc {
        font-size: 13px;
    }

    .offers-cta-row {
        flex-direction: column;
    }

    .offers-cta-btn {
        justify-content: center;
    }

    .offers-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ==========================================================================
   Blog / Posts Page Styles
   ========================================================================== */

.blog-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 60px 0 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero-title {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.blog-hero-desc {
    color: #cbd5e1;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.blog-posts-section {
    padding: 60px 0;
    background: #f8fafc;
}

.blog-posts-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blog-list-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #00b08a;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-list-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.blog-list-main-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 24px;
    gap: 24px;
}

.blog-list-img {
    flex: 0 0 240px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 180px;
}

.blog-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-list-img:hover img {
    transform: scale(1.05);
}

.blog-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-list-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.blog-list-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-list-title a:hover {
    color: #00b08a;
}

.blog-list-excerpt {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.blog-list-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.post-date {
    font-size: 13px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-date svg {
    width: 14px;
    height: 14px;
    color: #00b08a;
}

.blog-list-metrics {
    flex: 0 0 240px;
    background: #f8fafc;
    border-right: 1px solid #edf2f7;
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.metric-item svg {
    width: 20px;
    height: 20px;
    color: #94a3b8;
}

.bookmark-btn-wrap {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed #cbd5e1;
}

.bookmark-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s;
}

.bookmark-btn:hover {
    background: #00b08a;
    color: #fff;
    border-color: #00b08a;
}

.bookmark-btn:hover svg {
    color: #fff;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00b08a;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.read-more-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.read-more-btn:hover {
    color: #00876a;
}

.read-more-btn:hover svg {
    transform: translateX(-4px);
    /* RTL Left direction */
}

@media (max-width: 991px) {
    .blog-list-card {
        flex-direction: column;
    }

    .blog-list-metrics {
        border-right: none;
        border-top: 1px solid #edf2f7;
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 20px 24px;
        gap: 20px;
        justify-content: space-between;
    }

    .bookmark-btn-wrap {
        margin: 0;
        padding: 0;
        border: none;
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .blog-list-main-info {
        flex-direction: column;
        padding: 20px;
    }

    .blog-list-img {
        flex: none;
        height: 200px;
        width: 100%;
    }
}

/* Pagination Adjustments for Blog */
.blog-pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

/* ==========================================================
 * Custom Dynamic Account Dashboard (Customers Only)
 * ========================================================== */

.as-dashboard-container {
    max-width: 1240px;
    margin: 80px auto;
    padding: 0 20px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Sidebar Styling */
.as-dashboard-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04);
    padding: 24px;
    position: sticky;
    top: 120px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.as-dashboard-sidebar:hover {
    border-color: rgba(0, 176, 138, 0.3);
    box-shadow: 0 16px 50px rgba(0, 176, 138, 0.08);
}

.as-dashboard-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #1e2530 0%, #00b08a 100%);
    border-radius: 20px 20px 0 0;
}

.woocommerce-MyAccount-navigation {
    width: 100% !important;
}

nav.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

nav.woocommerce-MyAccount-navigation li {
    margin-bottom: 6px;
}

nav.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: #475569;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

nav.woocommerce-MyAccount-navigation li a svg {
    color: #94a3b8;
    transition: color 0.3s ease;
    width: 22px;
    height: 22px;
}

nav.woocommerce-MyAccount-navigation li.is-active a,
nav.woocommerce-MyAccount-navigation li a:hover {
    background: #f8fafc;
    color: #00b08a;
    border-color: rgba(0, 176, 138, 0.15);
    transform: translateX(-4px);
    /* RTL subtle move */
}

nav.woocommerce-MyAccount-navigation li.is-active a svg,
nav.woocommerce-MyAccount-navigation li a:hover svg {
    color: #00b08a;
}

nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 24px;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #ef4444;
}

nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a svg {
    color: #ef4444;
}

/* Content Area Styling */
.as-dashboard-content-area {
    flex-grow: 1;
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04);
    padding: 44px 50px;
    min-width: 0;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.as-dashboard-content-area:hover {
    border-color: rgba(0, 176, 138, 0.3);
    box-shadow: 0 16px 50px rgba(0, 176, 138, 0.08);
}

.as-dashboard-content-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #00b08a 0%, #1e2530 100%);
    border-radius: 20px 20px 0 0;
}

.as-dashboard-header {
    margin-bottom: 34px;
    padding-bottom: 24px;
    border-bottom: 1.5px solid #f1f5f9;
    position: relative;
    z-index: 2;
}

.as-dashboard-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.as-dashboard-inner-content {
    color: #334155;
    line-height: 1.6;
}

.as-dashboard-inner-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #0f172a;
}

/* Dashboard Forms */
.woocommerce-EditAccountForm.as-auth-form {
    max-width: 100%;
}

.as-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.as-form-row .as-form-group {
    flex: 1;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .as-dashboard-container {
        flex-direction: column;
        margin: 30px auto;
    }

    .as-dashboard-sidebar {
        width: 100%;
        position: static;
    }

    .as-dashboard-content-area {
        width: 100%;
        padding: 24px;
    }

    .as-form-row {
        flex-direction: column;
        gap: 0;
    }

    .as-form-row .as-form-group {
        margin-bottom: 20px;
    }
}

/* ==========================================================
 * Orders Tracking (List & Single)
 * ========================================================== */

/* Level 1: Orders List */
.as-orders-header {
    margin-bottom: 24px;
}

.as-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e2530;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.as-card-title svg {
    color: #00b08a;
}

.as-card-subtitle {
    color: #64748b;
    font-size: 14.5px;
    margin: 0;
}

.as-orders-table-wrapper {
    overflow-x: auto;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
}

table.as-orders-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

table.as-orders-table th {
    background: #f8fafc;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

table.as-orders-table td {
    padding: 16px;
    color: #1e2530;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

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

table.as-orders-table tr:hover td {
    background: #fafbfc;
}

.as-order-id a {
    color: #00b08a;
    font-weight: 700;
    text-decoration: none;
}

.as-order-date time {
    color: #64748b;
}

/* Status Badges */
.as-status-badge {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
}

.as-status-badge.status-completed {
    background: #ecfdf5;
    color: #059669;
}

.as-status-badge.status-processing {
    background: #eff6ff;
    color: #2563eb;
}

.as-status-badge.status-on-hold,
.as-status-badge.status-pending {
    background: #fffbeb;
    color: #d97706;
}

.as-status-badge.status-cancelled,
.as-status-badge.status-failed {
    background: #fef2f2;
    color: #dc2626;
}

.as-btn-track {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #00b08a;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.as-btn-track:hover {
    background: #009373;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.2);
}

.as-orders-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.as-orders-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    background: #ffffff;
    border: 1.5px solid #00b08a;
    color: #00b08a;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 1.5px 4px rgba(0, 176, 138, 0.08);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.as-orders-pagination .page-numbers:hover:not(.current) {
    background: #ecfdf5;
    border-color: #009373;
    color: #009373;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 176, 138, 0.18);
}

.as-orders-pagination .page-numbers.current {
    background: linear-gradient(135deg, #00b08a 0%, #0d9488 100%);
    border-color: #00b08a;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 3px 10px rgba(0, 176, 138, 0.3);
    transform: scale(1.03);
}

/* Level 2: Single Order */
.as-single-order-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.as-order-header-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.as-order-number {
    font-size: 22px;
    font-weight: 800;
    color: #1e2530;
    margin: 0 0 12px;
}

.as-order-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.as-date-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: #64748b;
}

.as-date-item svg {
    color: #00b08a;
}

.as-date-item strong {
    color: #1e2530;
}

.as-date-item.as-arrival strong {
    color: #00b08a;
}

/* Timeline */
.as-tracking-card,
.as-order-items-card,
.as-order-sidebar-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
}

.as-tracking-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 32px;
    margin-bottom: 20px;
}

/* Base Line */
.as-tracking-timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    /* center of icon */
    left: 40px;
    right: 40px;
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    z-index: 1;
}

/* Progress Line */
.as-timeline-progress {
    position: absolute;
    top: 24px;
    right: 40px;
    /* RTL */
    height: 4px;
    background: #00b08a;
    border-radius: 2px;
    z-index: 2;
    transition: width 0.5s ease;
}

.step-1 .as-timeline-progress {
    width: 0%;
}

.step-2 .as-timeline-progress {
    width: 33%;
}

.step-3 .as-timeline-progress {
    width: 66%;
}

.step-4 .as-timeline-progress {
    width: calc(100% - 80px);
}

.as-tracking-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100px;
}

.as-step-icon {
    width: 52px;
    height: 52px;
    background: #ffffff;
    border: 4px solid #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.as-step-text {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

.as-tracking-step.completed .as-step-icon {
    border-color: #00b08a;
    background: #00b08a;
    color: #fff;
}

.as-tracking-step.current .as-step-icon {
    border-color: rgba(0, 176, 138, 0.3);
    background: #00b08a;
    color: #fff;
    box-shadow: 0 0 0 6px rgba(0, 176, 138, 0.1);
}

.as-tracking-step.completed .as-step-text,
.as-tracking-step.current .as-step-text {
    color: #1e2530;
}

/* Items Grid */
.as-order-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.as-items-table-wrap {
    overflow-x: auto;
    margin-top: 16px;
}

table.as-items-table {
    width: 100%;
    border-collapse: collapse;
}

table.as-items-table th {
    padding: 12px;
    background: transparent;
    border-bottom: 2px solid #f1f5f9;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

table.as-items-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.as-td-thumb img {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.as-td-name {
    font-weight: 700;
    color: #1e2530;
    font-size: 15px;
}

.as-td-price,
.as-td-qty,
.as-td-total {
    font-weight: 600;
    color: #475569;
}

.as-td-total {
    color: #00b08a;
}

.as-order-summary-totals {
    margin-top: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.as-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 15px;
    color: #475569;
}

.as-total-row:last-child {
    margin-bottom: 0;
}

.as-total-row strong {
    color: #1e2530;
}

.as-order-summary-totals hr {
    border: 0;
    border-top: 1px dashed #cbd5e1;
    margin: 16px 0;
}

.as-grand-total {
    font-size: 18px;
    font-weight: 800;
    color: #00b08a;
}

.as-grand-total strong {
    color: #00b08a;
}

/* Shipping Info */
.as-address-p {
    margin: 0 0 12px;
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
}

.as-address-p strong {
    display: block;
    color: #1e2530;
    margin-bottom: 4px;
}

/* Action Buttons */
.as-order-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}

.as-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.as-btn-action.as-primary {
    background: #1e2530 !important;
    color: #fff !important;
    border: none !important;
    transition: background-color 0.3s ease !important, transform 0.2s !important, box-shadow 0.2s !important;
}

.as-btn-action.as-primary:hover {
    background: #374151 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(30, 37, 48, 0.2) !important;
}

.as-btn-action.as-secondary.as-btn-help {
    background: #00b08a !important;
    color: #fff !important;
    border: none !important;
    transition: background-color 0.3s ease !important, transform 0.2s !important, box-shadow 0.2s !important;
}

.as-btn-action.as-secondary.as-btn-help:hover {
    background: #05c098 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.25) !important;
}

.as-btn-action.as-secondary.as-btn-print {
    background: #1a365d !important;
    color: #fff !important;
    border: none !important;
    transition: background-color 0.3s ease !important, transform 0.2s !important, box-shadow 0.2s !important;
}

.as-btn-action.as-secondary.as-btn-print:hover {
    background: #2b5c8f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.25) !important;
}

.as-btn-action.as-danger {
    background: #fff;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

.as-btn-action.as-danger:hover {
    background: #fef2f2;
}

/* Responsive adjustments */

@media (max-width: 768px) {

    /* Mobile Timeline */
    .as-tracking-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding-right: 20px;
    }

    .as-tracking-timeline::before {
        top: 20px;
        bottom: 20px;
        left: unset;
        right: 44px;
        /* RTL vertical line */
        width: 4px;
        height: auto;
    }

    .as-timeline-progress {
        top: 20px;
        left: unset;
        right: 44px;
        width: 4px;
        transition: height 0.5s ease;
    }

    .step-1 .as-timeline-progress {
        height: 0%;
        width: 4px;
    }

    .step-2 .as-timeline-progress {
        height: 33%;
        width: 4px;
    }

    .step-3 .as-timeline-progress {
        height: 66%;
        width: 4px;
    }

    .step-4 .as-timeline-progress {
        height: 100%;
        width: 4px;
    }

    .as-tracking-step {
        flex-direction: row;
        width: 100%;
        gap: 20px;
    }

    /* Mobile Orders Table */
    table.as-orders-table,
    table.as-orders-table tbody,
    table.as-orders-table tr,
    table.as-orders-table td {
        display: block;
        width: 100%;
    }

    table.as-orders-table thead {
        display: none;
    }

    table.as-orders-table tr {
        margin-bottom: 16px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 16px;
    }

    table.as-orders-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        padding: 8px 0;
    }

    table.as-orders-table td::before {
        content: attr(data-title);
        font-weight: 600;
        color: #64748b;
    }
}

/* Empty Orders State */
.as-empty-orders {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.as-empty-orders svg {
    color: #64748b;
    margin-bottom: 24px;
}

.as-empty-orders h3 {
    font-size: 22px;
    font-weight: 800;
    color: #1e2530;
    margin: 0 0 12px;
}

.as-empty-orders p {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 32px;
    max-width: 400px;
    line-height: 1.6;
}

.as-empty-orders .as-btn-primary {
    background: #00b08a;
    color: #ffffff;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.as-empty-orders .as-btn-primary:hover {
    background: #009373;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.2);
}

/* History Actions in Order Table */
.as-history-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.as-btn-details {
    background: #f1f5f9;
    color: #475569;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.as-btn-details:hover {
    background: #e2e8f0;
    color: #1e2530;
}

.as-btn-invoice {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #1e2530;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.as-btn-invoice:hover {
    border-color: #00b08a;
    color: #00b08a;
    background: #f0fdf9;
}

/* Modal Overlay */
.as-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.as-modal-overlay.as-active {
    opacity: 1;
    visibility: visible;
}

/* Modal Content */
.as-modal-content {
    background: #fff;
    width: 90%;
    max-width: 450px;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.as-modal-overlay.as-active .as-modal-content {
    transform: translateY(0) scale(1);
}

.as-close-modal {
    position: absolute;
    top: 20px;
    left: 20px;
    /* RTL */
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.as-close-modal:hover {
    background: #fee2e2;
    color: #ef4444;
}

.as-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.as-modal-icon {
    width: 64px;
    height: 64px;
    background: #f0fdf9;
    color: #00b08a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.as-modal-header h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #1e2530;
}

.as-modal-header p {
    margin: 0;
    color: #64748b;
    font-size: 14.5px;
}

.as-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-invoice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.as-print-btn {
    background: #00b08a;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.2);
}

.as-print-btn:hover {
    background: #009373;
    transform: translateY(-2px);
}

.as-pdf-btn {
    background: #fff;
    border: 2px solid #e2e8f0;
    color: #1e2530;
}

.as-pdf-btn:hover {
    border-color: #1e2530;
    background: #f8fafc;
}

@media (max-width: 480px) {
    .as-history-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =====================================================
 * Address Book (عناوين الشحن) — Redesigned
 * ===================================================== */

.as-address-book-wrap {
    padding: 0;
}

/* ── Header ─────────────────────────────────────────── */
.as-ab-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding: 22px 26px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
}

.as-ab-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #00b08a, #009373);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.3);
}

.as-ab-text {
    flex: 1;
}

.as-ab-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #1e2530;
}

.as-ab-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 13.5px;
}

/* Add button in header */
.as-ab-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #00b08a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.2);
}

.as-ab-add-btn:hover {
    background: #009373;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 176, 138, 0.3);
}

.as-ab-limit-notice {
    font-size: 12.5px;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 8px 14px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ── Notification ─────────────────────────────────────── */
.as-addr-notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    transition: opacity 0.4s ease;
    border: 1px solid;
}

.as-notif-success {
    background: #ecfdf5;
    color: #065f46;
    border-color: #6ee7b7;
}

.as-notif-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* ── Address List (rows) ──────────────────────────────── */
.as-addr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-addr-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1.5px solid #e8eef5;
    border-radius: 16px;
    padding: 18px 22px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.as-addr-row:hover {
    border-color: #b2e8d8;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.08);
}

.as-addr-row.is-default {
    border-color: #00b08a;
    background: linear-gradient(135deg, #f8fffe 0%, #f0fdf9 100%);
    box-shadow: 0 2px 12px rgba(0, 176, 138, 0.12);
}

/* Row icon */
.as-addr-row-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #f0fdf9;
    color: #00b08a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as-addr-row.is-default .as-addr-row-icon {
    background: rgba(0, 176, 138, 0.15);
}

/* Row main info */
.as-addr-row-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.as-addr-row-info {
    flex: 1;
    min-width: 0;
}

.as-addr-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.as-addr-gov-name {
    font-size: 16px;
    font-weight: 800;
    color: #1e2530;
}

/* Default badge (inline) */
.as-addr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #00b08a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.as-addr-row-detail {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row actions */
.as-addr-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.as-addr-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.as-addr-set-default:hover {
    border-color: #00b08a;
    color: #00b08a;
    background: #f0fdf9;
    box-shadow: 0 2px 8px rgba(0, 176, 138, 0.12);
}

.as-addr-delete-btn {
    border-color: #fecaca;
    background: #fff5f5;
    color: #ef4444;
}

.as-addr-delete-btn:hover {
    border-color: #ef4444;
    background: #fef2f2;
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* ── Empty State ───────────────────────────────────────── */
.as-addr-empty {
    text-align: center;
    padding: 60px 24px;
    background: #f8fafc;
    border-radius: 18px;
    border: 2px dashed #e2e8f0;
}

.as-addr-empty-icon {
    width: 80px;
    height: 80px;
    background: #f0fdf9;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00b08a;
}

.as-addr-empty h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1e2530;
    margin: 0 0 8px;
}

.as-addr-empty p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* ── Address Form in Modal ────────────────────────────── */
.as-addr-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.as-form-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.as-form-row--2col {
    flex-direction: row;
}

.as-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.as-form-group--full {
    width: 100%;
}

.as-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.as-required {
    color: #ef4444;
}

.as-form-group input,
.as-form-group select {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    color: #1e2530;
    background: #f8fafc;
    transition: all 0.2s;
    outline: none;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    appearance: auto;
}

.as-form-group input:focus,
.as-form-group select:focus {
    border-color: #00b08a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 176, 138, 0.12);
}
/* Select2 Theme Overrides for Address Form */
.as-addr-form .select2-container--default .select2-selection--single {
    height: 48px !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none;
    padding: 0 !important;
    display: block !important;
}
.as-addr-form .select2-container--default .select2-selection--single:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}
.as-addr-form .select2-container--default.select2-container--open .select2-selection--single,
.as-addr-form .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #00b08a;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 176, 138, 0.1);
}

/* Text inside the box */
.as-addr-form .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    line-height: 45px !important;
    color: #1e2530;
    padding-right: 16px !important;
    padding-left: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    font-size: 14.5px;
    font-weight: 600;
    display: block !important;
}
.as-addr-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
    font-weight: 500;
}

/* Custom SVG Arrow */
.as-addr-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    top: 0 !important;
    left: 12px !important;
    right: auto !important;
    width: 24px !important;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat center;
    background-size: 18px;
    transition: transform 0.3s ease;
}
.as-addr-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* Flip arrow when dropdown is open */
.as-addr-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
}

/* Ensure Dropdown Appears Above Modal */
.select2-container--open {
    z-index: 2147483647 !important;
}

/* Dropdown Container */
.select2-dropdown {
    border: 1px solid rgba(0, 176, 138, 0.3);
    border-radius: 14px;
    box-shadow: 0 15px 50px rgba(0, 176, 138, 0.08), 0 5px 15px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    background: #ffffff;
    margin-top: 6px;
    animation: asDropdownEntrance 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes asDropdownEntrance {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.select2-search--dropdown {
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-family: inherit;
    font-size: 13px;
    outline: none !important;
    box-shadow: none !important;
    background: #ffffff;
    transition: all 0.3s ease;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #00b08a !important;
    box-shadow: 0 0 0 3px rgba(0, 176, 138, 0.1) !important;
    background: #ffffff;
}

/* Options List Styling */
.select2-results__options {
    padding: 4px 0 !important;
}
.select2-results__options::-webkit-scrollbar {
    width: 6px;
}
.select2-results__options::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}
.select2-results__options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.select2-results__option {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    cursor: pointer;
    margin: 0 8px;
    border-radius: 8px;
}
.select2-results__option:last-child {
    border-bottom: none;
}

/* Hover State */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #f0fdf4 !important;
    color: #00b08a !important;
    font-weight: 700;
    transform: translateX(-4px); /* RTL nudge left */
    border-color: transparent;
}

/* Selected State */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: rgba(0, 176, 138, 0.08) !important;
    color: #00b08a !important;
    font-weight: 800;
    border-color: transparent;
}

/* Form Footer */
.as-addr-form-footer {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.as-addr-submit-btn {
    flex: 1;
    background: #00b08a;
    color: #fff;
    border: none;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    font-family: inherit;
}

.as-addr-submit-btn:hover:not(:disabled) {
    background: #009373;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.25);
}

.as-addr-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.as-addr-cancel-btn {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.as-addr-cancel-btn:hover {
    background: #e2e8f0;
    color: #1e2530;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 680px) {
    .as-ab-header {
        flex-wrap: wrap;
        gap: 14px;
    }

    .as-addr-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
    }

    .as-addr-row-main {
        width: 100%;
    }

    .as-addr-row-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .as-addr-row-detail {
        white-space: normal;
    }

    .as-form-row--2col {
        flex-direction: column;
    }
}


.as-ab-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #00b08a 0%, #009373 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 176, 138, 0.4);
    position: relative;
    z-index: 1;
}

.as-ab-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    position: relative;
    z-index: 1;
}

.as-ab-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    position: relative;
    z-index: 1;
}

/* Notification */
.as-addr-notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 24px;
    transition: opacity 0.4s ease;
    border: 1px solid;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.as-notif-success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    border-color: #6ee7b7;
}

.as-notif-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
    border-color: #fca5a5;
}

/* Address Grid */
.as-addr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Address Card */
.as-addr-card {
    background: #fff;
    border: 1.5px solid #e8eef5;
    border-radius: 20px;
    padding: 24px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.as-addr-card:hover {
    border-color: #00b08a;
    box-shadow: 0 8px 24px rgba(0, 176, 138, 0.12);
    transform: translateY(-4px);
}

.as-addr-card.is-default {
    border-color: #00b08a;
    background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
    box-shadow: 0 4px 16px rgba(0, 176, 138, 0.15);
}

/* Default Badge */
.as-addr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #00b08a, #009373);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 6px rgba(0, 176, 138, 0.25);
    white-space: nowrap;
}

.as-addr-card-icon {
    color: #00b08a;
    background: #f0fdf9;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
}

.as-addr-card.is-default .as-addr-card-icon {
    background: rgba(0, 176, 138, 0.2);
    color: #009373;
}

/* Card Body */
.as-addr-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.as-addr-line {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.7;
}

.as-addr-gov {
    font-weight: 800;
    font-size: 17px;
    color: #1e2530;
    background: linear-gradient(135deg, #1e2530, #374151);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card Actions */
.as-addr-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 14px;
    margin-top: 4px;
}

.as-addr-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.as-addr-set-default:hover {
    border-color: #00b08a;
    color: #00b08a;
    background: #f0fdf9;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 176, 138, 0.15);
}

.as-addr-delete:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15);
}

.as-addr-default-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #00b08a;
    background: rgba(0, 176, 138, 0.1);
    padding: 5px 10px;
    border-radius: 8px;
}

/* Add New Card */
.as-addr-add-card {
    border: 2.5px dashed #cbd5e1;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(0, 176, 138, 0.02) 10px,
            rgba(0, 176, 138, 0.02) 20px), #fafbfc;
    cursor: pointer;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.as-addr-add-card:hover {
    border-color: #00b08a;
    background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 176, 138, 0.15);
}

.as-addr-add-card:hover .as-addr-add-icon {
    background: linear-gradient(135deg, #00b08a, #009373);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 176, 138, 0.35);
    transform: scale(1.1);
}

.as-addr-add-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #94a3b8;
    font-weight: 700;
    font-size: 14px;
    transition: color 0.25s;
}

.as-addr-add-card:hover .as-addr-add-inner {
    color: #00b08a;
}

.as-addr-add-icon {
    width: 60px;
    height: 60px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Empty State */
.as-addr-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.as-addr-empty svg {
    margin-bottom: 16px;
    color: #cbd5e1;
}

.as-addr-empty h3 {
    font-size: 20px;
    color: #1e2530;
    margin: 0 0 8px;
}

.as-addr-empty p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Address Form in Modal */
.as-addr-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.as-form-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.as-form-row--2col {
    flex-direction: row;
}

.as-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.as-form-group--full {
    width: 100%;
}

.as-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.as-required {
    color: #ef4444;
}

.as-form-group input,
.as-form-group select {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1e2530;
    background: #f8fafc;
    transition: all 0.2s;
    outline: none;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.as-form-group input:focus,
.as-form-group select:focus {
    border-color: #00b08a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 176, 138, 0.12);
}

/* Form Footer */
.as-addr-form-footer {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.as-addr-submit-btn {
    flex: 1;
    background: #00b08a;
    color: #fff;
    border: none;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    font-family: inherit;
}

.as-addr-submit-btn:hover:not(:disabled) {
    background: #009373;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.25);
}

.as-addr-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.as-addr-cancel-btn {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.as-addr-cancel-btn:hover {
    background: #e2e8f0;
    color: #1e2530;
}

/* Responsive */
@media (max-width: 600px) {
    .as-addr-grid {
        grid-template-columns: 1fr;
    }

    .as-form-row--2col {
        flex-direction: column;
    }

    .as-ab-header {
        gap: 12px;
    }
}

/* ==========================================================================
   Responsive hardening
   ========================================================================== */
.site-main,
.site-footer,
.site-header,
.sp-hero,
.as-dashboard-container,
.as-cart-wrapper {
    min-width: 0;
}

.header-top>*,
.sp-hero>*,
.as-dashboard-container>*,
.as-cart-wrapper>* {
    min-width: 0;
}

@media (max-width: 1400px) {
    :root {
        --site-container-width: calc(100% - 64px);
    }
}

@media (max-width: 1200px) {
    .offcanvas-cart-container {
        width: min(100vw, 420px);
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --site-container-width: calc(100% - 32px);
    }

    .mobile-nav a {
        white-space: normal;
        line-height: 1.45;
    }

    .mobile-menu-footer {
        padding-bottom: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .mobile-search-content {
        width: min(100%, 560px);
        padding-top: 72px;
    }

    .mobile-search-input-wrap {
        width: 100%;
    }

    .hero-section {
        margin-top: 12px;
        margin-bottom: 20px;
        border-radius: 12px;
        background: transparent;
    }

    .hero-swiper {
        height: auto;
        border-radius: 12px;
    }

    .hero-slide-content {
        width: min(100%, 540px);
        padding: 28px 22px;
    }

    .hero-title {
        font-size: clamp(28px, 7vw, 44px);
        line-height: 1.1;
    }

    .section-title {
        font-size: clamp(24px, 5vw, 34px);
    }

    .feature-item {
        align-items: flex-start;
    }

    .category-box-container,
    .new-arrivals-container {
        padding: 24px 18px;
    }

    .promo-banner {
        min-height: 320px;
        padding: 28px 22px;
    }

    .new-products-grid {
        gap: 16px;
    }

    .product-item {
        gap: 14px;
    }

    .footer-col {
        min-width: 0;
    }

    .sp-hero {
        gap: 24px;
    }

    .sp-gallery-main {
        min-height: 320px;
    }

    .sp-main-image {
        max-height: 320px;
        padding: 16px;
    }

    .sp-tab-nav {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
        padding-bottom: 6px;
    }

    .sp-tab-btn {
        flex: 0 0 auto;
    }

    .sp-shipping-table,
    .sp-specs-table,
    .sp-additional-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .sp-review-card {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    :root {
        --site-container-width: calc(100% - 24px);
    }

    .mobile-search-overlay {
        padding: 18px 14px;
    }

    .mobile-search-title {
        font-size: 22px;
        text-align: center;
    }

    .hero-swiper {
        height: auto;
    }

    .hero-slide-content {
        padding: 24px 18px;
    }

    .hero-title {
        font-size: clamp(24px, 9vw, 34px);
    }

    .btn-hero-shop {
        width: 100%;
        justify-content: center;
    }

    .features-grid,
    .category-grid,
    .new-products-grid {
        gap: 16px;
    }

    .category-box-container,
    .new-arrivals-container {
        padding: 18px 14px;
    }

    .product-item {
        flex-direction: column;
        align-items: stretch;
    }

    .product-item-img {
        width: 100%;
        max-width: 180px;
        margin: 0 auto;
    }

    .product-item-details {
        text-align: center;
    }

    .promo-banner {
        min-height: 280px;
        padding: 20px 18px;
    }

    .footer-widgets-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-col {
        min-width: 0;
    }

    .footer-contact-box {
        width: 100%;
        min-width: 0;
    }

    .scroll-to-top {
        left: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

    .sp-page-wrapper {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .sp-gallery-main {
        min-height: 280px;
    }

    .sp-main-image {
        max-height: 280px;
        padding: 14px;
    }

    .sp-tab-btn {
        padding-inline: 16px;
    }

    .sp-additional-table th,
    .sp-additional-table td,
    .sp-specs-table td,
    .sp-shipping-table td {
        padding-inline: 10px;
    }
}

@media (max-width: 390px) {
    :root {
        --site-container-width: calc(100% - 16px);
    }

    .hero-swiper {
        height: auto;
    }

    .hero-slide-content {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   Header + Newest Offers alignment fixes
   ========================================================================== */
.offers-badge-wrap {
    display: flex;
    width: 100%;
}

@media (max-width: 1200px) {
    .newest-offers-hero-inner {
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding-bottom: 40px;
    }

    .newest-offers-hero-text {
        align-items: center;
        text-align: center;
        max-width: min(100%, 720px);
        margin-inline: auto;
    }

    .offers-badge-wrap {
        justify-content: center;
    }

    .offers-desc {
        max-width: 620px;
        margin-inline: auto;
    }

    .offers-cta-row {
        width: 100%;
        justify-content: center;
    }

    .offers-features-grid {
        max-width: min(100%, 680px);
        margin-inline: auto;
    }
}

@media (max-width: 768px) {
    .offers-breadcrumb {
        margin-bottom: 22px;
        flex-wrap: wrap;
    }

    .newest-offers-hero-inner {
        padding-bottom: 32px;
    }

    .offers-hero-title {
        max-width: 12ch;
        margin-inline: auto;
    }

    .offers-desc {
        max-width: 36ch;
    }
}

@media (max-width: 480px) {
    .offers-cta-row {
        align-items: stretch;
    }

    .offers-cta-btn {
        width: 100%;
    }

    .offers-features-grid {
        width: 100%;
    }
}

/* ==========================================================================
   WooCommerce Order Details Card (تفاصيل المشتريات)
   ========================================================================== */
.as-order-details-section {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04);
}

.as-order-details-title {
    font-size: 20px;
    font-weight: 800;
    color: #1e2530;
    margin-top: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1.5px solid #f1f5f9;
    padding-bottom: 14px;
}

table.as-order-details-table {
    width: 100%;
    border-collapse: collapse;
    border: none !important;
    margin: 0;
}

table.as-order-details-table th,
table.as-order-details-table td {
    padding: 16px;
    font-size: 14.5px;
    color: #1e2530;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle;
}

table.as-order-details-table thead th {
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

table.as-order-details-table tbody td {
    font-weight: 500;
}

table.as-order-details-table th.product-total,
table.as-order-details-table td.product-total,
table.as-order-details-table tfoot td {
    text-align: left;
}

table.as-order-details-table tfoot th {
    font-weight: 700;
    color: #475569;
}

table.as-order-details-table tfoot td {
    font-weight: 700;
}

table.as-order-details-table tfoot tr.as-totals-row.order_total {
    background: #f0fdf9;
}

table.as-order-details-table tfoot tr.as-totals-row.order_total th,
table.as-order-details-table tfoot tr.as-totals-row.order_total td {
    color: #00b08a;
    font-size: 16px;
    border-bottom: none !important;
}

@media (max-width: 768px) {
    .as-order-details-section {
        padding: 20px;
    }
    
    table.as-order-details-table th,
    table.as-order-details-table td {
        padding: 12px 10px;
        font-size: 13.5px;
    }
}

/* ── Custom Order CTA & Flex Address ── */
.as-address-p.as-flex-address {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.as-address-p.as-flex-address strong {
    margin-bottom: 0;
    display: inline-block;
}
.as-address-p.as-flex-address span {
    text-align: left;
    direction: ltr;
}

.as-full-width-ctas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

@media (max-width: 768px) {
    .as-full-width-ctas {
        grid-template-columns: 1fr;
    }
}

/* ── Custom Button Container outside/below Cards ── */
.as-order-ctas-card {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 16px;
}

.as-order-ctas-card > .as-btn-action {
    flex: 1;
}

@media (max-width: 768px) {
    .as-order-ctas-card {
        flex-direction: column;
    }
}

/* ── Key-Value Layout inside Customer Card ── */
.as-customer-card {
    text-align: right !important;
    direction: rtl !important;
}

.as-customer-card .as-customer-card-title {
    text-align: right !important;
    direction: rtl !important;
}

.as-customer-card .as-customer-details-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
}

.as-customer-card .as-detail-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    direction: rtl !important;
}

.as-customer-card .as-detail-label {
    text-align: right !important;
    direction: rtl !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    float: right !important;
}

.as-customer-card .as-detail-value {
    text-align: left !important;
    direction: ltr !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    float: left !important;
}

/* ── WooCommerce Auth Notice Styling ── */
.as-auth-card .woocommerce-notices-wrapper {
    margin-bottom: 20px;
    width: 100%;
}

.as-auth-card .woocommerce-message,
.as-auth-card .woocommerce-info {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    color: #166534;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    list-style: none;
}

.as-auth-card .woocommerce-error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #991b1b;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    list-style: none;
}

.as-auth-card .woocommerce-message a,
.as-auth-card .woocommerce-error a,
.as-auth-card .woocommerce-info a {
    color: #00b08a;
    text-decoration: underline;
    font-weight: 700;
}

/* ── Standalone Auth Pages Container Layout Override ── */
body.as-standalone-auth-page #masthead,
body.as-standalone-auth-page .site-header,
body.as-standalone-auth-page .site-footer,
body.as-standalone-auth-page .header-bottom,
body.as-standalone-auth-page .scroll-to-top {
    display: none !important;
}

body.as-standalone-auth-page #content,
body.as-standalone-auth-page #main,
body.as-standalone-auth-page #main .container,
body.as-standalone-auth-page .woocommerce,
body.as-standalone-auth-page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.as-standalone-auth-page {
    padding-top: 0 !important;
}

body.as-standalone-auth-page #page {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── WooCommerce Password Strength & Hints inside Auth Cards ── */
.as-auth-card .woocommerce-password-strength,
.as-auth-card .woocommerce-password-hint,
.as-auth-card .wc-password-strength,
.as-auth-page .woocommerce-password-strength,
.as-auth-page .woocommerce-password-hint,
.as-auth-page .wc-password-strength,
.as-auth-page small.woocommerce-password-hint {
    display: none !important;
}

/* Also hide any WooCommerce-injected password description text */
.as-auth-card .password-input,
.as-auth-page .password-input {
    display: contents !important;
}

.as-auth-card .show-password-input,
.as-auth-page .show-password-input {
    display: none !important;
}

/* ── My Account wrapper reset on auth pages ── */
body.as-standalone-auth-page .as-dashboard-container,
body.as-standalone-auth-page .as-dashboard-sidebar,
body.as-standalone-auth-page .as-dashboard-header {
    display: none !important;
}

body.as-standalone-auth-page .as-dashboard-content-area,
body.as-standalone-auth-page .as-dashboard-inner-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================================
 * ELEGANT NO-PRODUCTS EMPTY STATE COMPONENT
 * ============================================================================ */
.tax-product_cat .woocommerce-info,
.post-type-archive-product .woocommerce-info,
.shop-products-area .woocommerce-info {
    display: none !important;
}

.as-empty-state-container {
    padding: 60px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-empty-state-card {
    max-width: 520px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 45px 35px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.as-empty-state-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.as-empty-state-icon-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.as-empty-state-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(0, 176, 138, 0.18) 0%, rgba(0, 176, 138, 0) 75%);
    border-radius: 50%;
}

.as-empty-state-icon {
    position: relative;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e6f7f3 0%, #dcfce7 100%);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00b08a;
    box-shadow: 0 6px 18px rgba(0, 176, 138, 0.15);
}

.as-empty-state-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px;
    line-height: 1.5;
}

.as-empty-state-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin: 0 0 28px;
}

.as-empty-state-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.as-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
    cursor: pointer;
}

.as-empty-btn-primary {
    background: #00b08a;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.3);
}

.as-empty-btn-primary:hover {
    background: #009675;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 176, 138, 0.4);
}

.as-empty-btn-outline {
    background: #f8fafc;
    color: #334155 !important;
    border: 1px solid #cbd5e1;
}

.as-empty-btn-outline:hover {
    background: #ffffff;
    border-color: #00b08a;
    color: #00b08a !important;
    transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════
   Ultra-High-End Variation Swatch Buttons (Single Product)
   ══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   Ultra-High-End Modern Variation Swatch & Purchase Module
   ══════════════════════════════════════════════════════ */
.sp-purchase-module {
    margin-top: 16px;
    margin-bottom: 24px;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.sp-variation-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
}

.sp-variation-row {
    margin-bottom: 14px;
}
.sp-variation-row:last-child {
    margin-bottom: 0;
}

.sp-variation-header {
    display: none;
}

.sp-variation-label {
    display: none;
}

.sp-selected-val-badge {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #00b08a 0%, #059669 100%);
    padding: 4px 14px;
    border-radius: 20px;
    border: none;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 176, 138, 0.25);
    letter-spacing: 0.3px;
}

.sp-swatches-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.sp-variation-dropdown-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.sp-variation-dropdown {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300b08a%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sp-variation-dropdown:hover {
    border-color: #00b08a;
    box-shadow: 0 4px 12px rgba(0, 176, 138, 0.12);
}

.sp-variation-dropdown:focus {
    border-color: #00b08a;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 176, 138, 0.15), 0 4px 12px rgba(0, 176, 138, 0.1);
}

.sp-atc-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-direction: row-reverse;
}

.sp-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    padding: 2px;
    height: 50px;
    box-sizing: border-box;
}

.sp-qty-btn {
    width: 38px;
    height: 100%;
    border: none;
    background: transparent;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: color 0.2s;
}

.sp-qty-btn:hover {
    color: #00b08a;
}

.sp-qty-input {
    width: 44px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    background: transparent;
    -moz-appearance: textfield;
}

.sp-atc-btn {
    flex: 1;
    height: 50px;
    background: linear-gradient(135deg, #00b08a 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Shimmer / Shine effect on active button hover */
.sp-atc-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 50% !important;
    height: 200% !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: rotate(25deg) !important;
    transition: all 0.6s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sp-atc-btn:hover:not(:disabled)::after {
    left: 130% !important;
    opacity: 1 !important;
}

.sp-atc-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #00b08a 0%, #059669 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 176, 138, 0.35) !important;
}

.sp-atc-btn:disabled {
    background: linear-gradient(135deg, #00b08a 0%, #059669 100%) !important;
    color: #ffffff !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Perfect alignment for Category Dropdown box with ATC Button and Quantity Counter */
.sp-variation-card,
.sp-variation-fields {
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.sp-variation-select-wrap,
.sp-custom-dropdown {
    width: 100% !important;
    box-sizing: border-box !important;
}

.sp-cd-trigger {
    height: 50px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════
   GLOBAL LUXURY EMERALD SELECT STYLING (THEME-WIDE)
   ══════════════════════════════════════════════════════ */
select,
.woocommerce select,
.woocommerce-page select,
.orderby,
.as-select,
.as-custom-select,
.form-control select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 48px !important;
    padding: 0 40px 0 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #00b08a !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300b08a%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 18px !important;
    border: 1.5px solid #00b08a !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 176, 138, 0.08) !important;
    outline: none !important;
    font-family: inherit !important;
}

select:hover,
select:focus,
.woocommerce select:hover,
.woocommerce select:focus {
    border-color: #059669 !important;
    background-color: #f0fdf9 !important;
    color: #059669 !important;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.18) !important;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT DESCRIPTION RICH CONTENT (TABLES & FORMATTING)
   ══════════════════════════════════════════════════════════════ */
.sp-description-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 18px 0 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    font-size: 14px !important;
}
.sp-description-content table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    padding: 12px 16px !important;
    border: 1px solid #e2e8f0 !important;
    text-align: right !important;
}
.sp-description-content table td {
    padding: 10px 16px !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    text-align: right !important;
}
.sp-description-content table tr:nth-child(even) td {
    background: #fdfdfd !important;
}
.sp-description-content blockquote {
    margin: 16px 0 !important;
    padding: 12px 18px !important;
    background: #f0fdf4 !important;
    border-right: 4px solid #00b08a !important;
    border-radius: 8px !important;
    color: #065f46 !important;
    font-weight: 700 !important;
}

/* ── Rich Editor Table Styling inside Admin Hub ── */
#as-pm-desc-visual table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 13.5px !important;
    text-align: right !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
#as-pm-desc-visual table th,
#as-pm-desc-visual table td {
    border: 1px solid #cbd5e1 !important;
    padding: 9px 14px !important;
    text-align: right !important;
    vertical-align: middle !important;
    line-height: 1.6 !important;
}
#as-pm-desc-visual table th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}
#as-pm-desc-visual table tr:nth-child(even) td {
    background: #f8fafc !important;
}
#as-pm-desc-visual blockquote {
    margin: 14px 0 !important;
    padding: 10px 16px !important;
    background: #f0fdf4 !important;
    border-right: 4px solid #00b08a !important;
    border-radius: 6px !important;
    color: #065f46 !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   MODERN LUXURY 404 ERROR PAGE STYLES
   ══════════════════════════════════════════════════════════ */
.as-404-page-main {
    padding: 60px 0 90px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    min-height: 70vh !important;
    display: flex !important;
    align-items: center !important;
}
.as-404-card {
    max-width: 720px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 28px !important;
    padding: 55px 40px !important;
    text-align: center !important;
    box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}
.as-404-badge-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
}
.as-404-glitch-num {
    font-size: 80px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -3px !important;
    background: linear-gradient(135deg, #00b08a 0%, #0f172a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.as-404-icon-circle {
    width: 68px !important;
    height: 68px !important;
    border-radius: 20px !important;
    background: #f0fdf4 !important;
    border: 2px dashed #00b08a !important;
    color: #00b08a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0, 176, 138, 0.15) !important;
}
.as-404-title {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 12px !important;
}
.as-404-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #64748b !important;
    font-weight: 600 !important;
    max-width: 520px !important;
    margin: 0 auto 30px !important;
}
.as-404-search-box {
    max-width: 540px !important;
    margin: 0 auto 32px !important;
}
.as-404-search-form {
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 6px !important;
    transition: all 0.25s ease !important;
}
.as-404-search-form:focus-within {
    border-color: #00b08a !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(0, 176, 138, 0.12) !important;
}
.as-404-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.as-404-search-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #00b08a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 11px 24px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(0, 176, 138, 0.25) !important;
}
.as-404-search-btn:hover {
    background: #008f6f !important;
    transform: translateY(-1px) !important;
}
.as-404-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-bottom: 35px !important;
}
.as-404-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 26px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.as-404-btn-primary {
    background: linear-gradient(135deg, #00b08a 0%, #008f6f 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 176, 138, 0.3) !important;
}
.as-404-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(0, 176, 138, 0.4) !important;
}
.as-404-btn-secondary {
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2) !important;
}
.as-404-btn-secondary:hover {
    background: #1e293b !important;
    transform: translateY(-2px) !important;
}
.as-404-btn-outline {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
}
.as-404-btn-outline:hover {
    border-color: #00b08a !important;
    color: #00b08a !important;
    background: #f0fdf4 !important;
    transform: translateY(-2px) !important;
}
.as-404-popular-links {
    padding-top: 24px !important;
    border-top: 1.5px dashed #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}
.as-404-popular-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
}
.as-404-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
}
.as-404-pills a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 30px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.as-404-pills a:hover {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #00b08a !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
    .as-404-card {
        padding: 35px 20px !important;
    }
    .as-404-glitch-num {
        font-size: 60px !important;
    }
    .as-404-title {
        font-size: 20px !important;
    }
    .as-404-actions {
        flex-direction: column !important;
    }
    .as-404-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}