/* =========================================================================
   ثيم المتجر - نسخة موحّدة نظيفة (خشب + خيزران + ذهبي هادئ)
   متوافق مع ثيم سلة "رائد"

   ✅ ملاحظة تحديث: كل القواعد الأصلية محفوظة كما هي بنفس الـselectors
   ونفس الترتيب. الإضافات الجديدة فقط في قسم 11 و12 في نهاية الملف:
   حالات focus-visible للوصول (accessibility)، حالة disabled للأزرار،
   تحسينات تابلت إضافية، وتفاصيل بصرية دقيقة (scrollbar، انسيابية
   الحركة) لا تُغيّر أي سلوك أو تخطيط قائم.
   ========================================================================= */

/* ===================================================
   1. المتغيرات والألوان العامة للمتجر
   =================================================== */
:root {
    --bamboo-gold: #C49A6C;
    --bamboo-gold-dark: #B08655;
    --brand-blue: #5B8FA6;
    --brand-green: #A8C5A1;
    --wood-dark: #4A4A4A;
    --wood-deep: #333333;
    --sand-bg: #F4EFE6;
    --card-bg: #FBF8F3;
    --badge-red: #A93226;

    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 12px 28px rgba(92, 64, 51, 0.14);
    --shadow-header: 0 2px 20px rgba(61, 43, 31, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================================
   2. الخلفية العامة
   =================================================== */
body {
    background-color: var(--sand-bg) !important;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(210, 176, 76, 0.035) 0px,
            rgba(210, 176, 76, 0.035) 1px,
            transparent 1px,
            transparent 34px) !important;
    background-attachment: fixed !important;
    overflow-x: hidden !important;
}

/* ===================================================
   3. الهيدر - روابط القائمة الأفقية
   =================================================== */
.main-menu li a, .header-nav a, .navigation-menu a, .salla-menu a {
    color: var(--wood-deep) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.3px !important;
    padding: 8px 18px !important;
    transition: color var(--transition-fast), background-color var(--transition-fast) !important;
    position: relative !important;
}
.main-menu li a::after, .header-nav a::after,
.navigation-menu a::after, .salla-menu a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 18px !important;
    left: 18px !important;
    height: 1px !important;
    background-color: var(--bamboo-gold-dark) !important;
    transform: scaleX(0) !important;
    transition: transform var(--transition-base) !important;
}
.main-menu li a:hover, .header-nav a:hover,
.navigation-menu a:hover, .salla-menu a:hover {
    color: var(--bamboo-gold-dark) !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}
.main-menu li a:hover::after, .header-nav a:hover::after,
.navigation-menu a:hover::after, .salla-menu a:hover::after {
    transform: scaleX(1) !important;
}

/* ===================================================
   4. هيكل الهيدر: صفّان (لوقو+أيقونات ثم الأقسام)
   ✅ #mainnav = الحاوية الكاملة المؤكدة (fixed لتفادي كسر sticky
   بسبب overflow-x-hidden على body)
   =================================================== */
#mainnav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    z-index: 500 !important;
    overflow: visible !important;
    background-color: var(--sand-bg) !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base), opacity 0.15s ease !important;
    opacity: 0;
    animation: ghk-force-reveal 0s linear 1.2s forwards;
}
#mainnav.ghk-ready { opacity: 1 !important; }
@keyframes ghk-force-reveal { to { opacity: 1; } }

/* عند التمرير: شفافية + Blur على الصف الأول (الأقسام تختفي بالكامل عبر كلاس منفصل) */
#mainnav.is-scrolled {
    background-color: rgba(244, 239, 230, 0.78) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: var(--shadow-header) !important;
}

div.flex.items-stretch.justify-between.relative.ghk-header-wrapped {
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* توسيط اللوقو بشكل مضمون (absolute) - أضمن من margin:auto لأنه لا
   يعتمد على ترتيب flex بين 3 عناصر، ويعمل بغض النظر عن أي تغيير مستقبلي */
div.flex.items-stretch.justify-between.relative.ghk-header-wrapped {
    position: relative !important;
}
.ghk-logo-centered {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
}
.ghk-logo-centered img[alt*="جولدن"] {
    max-height: 92px !important;
    width: auto !important;
    height: auto !important;
    transition: transform var(--transition-fast) !important;
}

/* ✅ ترتيب نهائي واحد (بدون تعريف مكرر متعارض):
   صف السلة/الحساب -> يسار | صف البحث/القائمة -> يمين */
/* ✅ الحل الحاسم: تثبيت كل مجموعة بموضع مطلق صريح (يمين/يسار) بدل
   الاعتماد على توزيع Flex (كان يسبب تجمع المجموعتين بنفس الجهة بعد
   إخراج اللوقو من التدفق عبر position:absolute) */
div.flex.items-stretch.justify-between.relative.ghk-header-wrapped {
    position: relative !important;
    min-height: 116px !important;
}
.ghk-order-1 {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}
.ghk-order-3 {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.ghk-right-icons {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* ✅ توحيد ارتفاع/محاذاة أيقونات الهيدر المربعة (قائمة، سلة، حساب) -
   حقل البحث لم يعد أيقونة مربعة (أصبح شريط بحث بيضاوي)، لذا استُثني هنا */
.ghk-menu-toggle,
i.sicon-shopping-bag,
.s-user-menu-login-btn,
button.s-user-menu-login-btn {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    font-size: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: auto !important;
    position: relative !important;
}
.ghk-order-1 {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* الصف الثاني (الأقسام) - له كلاس إخفاء منفصل يُفعَّل عند التمرير */
.ghk-nav-full-row {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    order: 99 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding-top: 8px !important;
    max-height: 200px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transition: max-height var(--transition-base) ease, opacity var(--transition-fast) ease, padding var(--transition-base) ease !important;
}
.ghk-nav-full-row.ghk-nav-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===================================================
   5. أيقونات الهيدر: حساب / سلة / بحث / قائمة جانبية
   =================================================== */
.s-user-menu-login-btn, button.s-user-menu-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: transparent !important;
    transition: opacity var(--transition-fast), transform var(--transition-fast) !important;
}
.s-user-menu-login-btn svg, .s-user-menu-login-btn path { display: none !important; }
.s-user-menu-login-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 19px 19px !important;
}
.s-user-menu-login-btn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08655' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

i[class*="sicon"], i[class*="icon-"], .header-btn__icon { color: var(--wood-dark) !important; }
a:hover i[class*="sicon"], button:hover i[class*="sicon"] { color: var(--bamboo-gold-dark) !important; }

i.sicon-shopping-bag {
    color: transparent !important;
}
i.sicon-shopping-bag::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234A4A4A' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M75 65c0-30 10-45 25-45s25 15 25 45' /%3E%3Crect x='40' y='80' width='120' height='95' rx='18' /%3E%3Cpath d='M148 68l30-15M150 70l25 8M152 74l20 20' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
a:hover i.sicon-shopping-bag::before, button:hover i.sicon-shopping-bag::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23B08655' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M75 65c0-30 10-45 25-45s25 15 25 45' /%3E%3Crect x='40' y='80' width='120' height='95' rx='18' /%3E%3Cpath d='M148 68l30-15M150 70l25 8M152 74l20 20' /%3E%3C/svg%3E") !important;
}

.cart-count, .wishlist-count, .salla-badge-count {
    background-color: var(--brand-blue) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
}

a.s-menu-topnav-item.topnav-link-item.right-side { display: none !important; }

.ghk-search-icon {
    width: 190px !important;
    height: 42px !important;
    min-width: 140px !important;
    padding: 0 40px 0 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
    color: var(--wood-dark) !important;
    caret-color: var(--wood-dark) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-align: right !important;
    cursor: text !important;
    transition: opacity var(--transition-fast) !important;
}
.ghk-search-icon::placeholder { color: var(--wood-dark) !important; opacity: 0.45 !important; }
.ghk-search-icon:hover { opacity: 0.8 !important; }

.ghk-search-icon:focus {
    outline: none !important;
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08655' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
}

/* ===================================================
   6. القائمة الجانبية (☰)
   =================================================== */
.ghk-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    transition: opacity var(--transition-fast), transform var(--transition-fast) !important;
}
.ghk-menu-toggle:hover { opacity: 1 !important; transform: translateY(-1px) !important; }
.ghk-menu-toggle span {
    display: block !important;
    width: 18px !important;
    height: 1.5px !important;
    background-color: var(--wood-dark) !important;
    position: relative !important;
    transition: background-color var(--transition-fast) !important;
}
.ghk-menu-toggle span::before, .ghk-menu-toggle span::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    width: 18px !important;
    height: 1.5px !important;
    background-color: var(--wood-dark) !important;
    transition: background-color var(--transition-fast) !important;
}
.ghk-menu-toggle span::before { top: -6px !important; }
.ghk-menu-toggle span::after  { top: 6px !important; }
.ghk-menu-toggle:hover span,
.ghk-menu-toggle:hover span::before,
.ghk-menu-toggle:hover span::after { background-color: var(--bamboo-gold-dark) !important; }

.ghk-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(61, 43, 31, 0.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity var(--transition-base), visibility var(--transition-base) !important;
    z-index: 9998 !important;
}
.ghk-menu-overlay.is-open { opacity: 1 !important; visibility: visible !important; }

.ghk-side-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 320px !important;
    max-width: 85vw !important;
    background-color: var(--sand-bg) !important;
    box-shadow: -8px 0 30px rgba(61, 43, 31, 0.18) !important;
    transform: translateX(100%) !important;
    transition: transform var(--transition-slow) !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    padding: 24px 20px !important;
}
.ghk-side-panel.is-open { transform: translateX(0) !important; }

.ghk-side-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(210, 176, 76, 0.25) !important;
}
.ghk-side-panel-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: rgba(92, 64, 51, 0.06) !important;
    color: var(--wood-dark) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast), transform var(--transition-fast) !important;
}
.ghk-side-panel-close:hover { background-color: rgba(210, 176, 76, 0.2) !important; }
.ghk-side-panel-close:active { transform: scale(0.92) !important; }

.ghk-side-panel-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ghk-side-panel-list li { border-bottom: 1px solid rgba(210, 176, 76, 0.12) !important; }
.ghk-side-panel-list a {
    display: block !important;
    padding: 14px 4px !important;
    color: var(--wood-deep) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    transition: color var(--transition-fast), padding-right var(--transition-fast) !important;
}
.ghk-side-panel-list a:hover { color: var(--bamboo-gold-dark) !important; padding-right: 10px !important; }

body.ghk-panel-open { overflow: hidden !important; }

/* ✅ شريط تمرير أنحف وأكثر انسجامًا مع هوية المتجر داخل اللوحة الجانبية
   (Webkit فقط - تحسين بصري بحت، لا يغيّر أي سلوك تمرير) */
.ghk-side-panel::-webkit-scrollbar { width: 6px; }
.ghk-side-panel::-webkit-scrollbar-track { background: transparent; }
.ghk-side-panel::-webkit-scrollbar-thumb {
    background-color: rgba(196, 154, 108, 0.35);
    border-radius: var(--radius-pill);
}
.ghk-side-panel::-webkit-scrollbar-thumb:hover { background-color: rgba(196, 154, 108, 0.55); }

/* ===================================================
   7. كروت المنتجات والشارات
   =================================================== */
.product-box, .product-card, .s-product-card {
    background-color: var(--card-bg) !important;
    border: 1px solid rgba(210, 176, 76, 0.25) !important;
    border-radius: var(--radius-lg) !important;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
    box-shadow: var(--shadow-soft) !important;
    overflow: hidden !important;
}
.product-box:hover, .product-card:hover, .s-product-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--bamboo-gold) !important;
    box-shadow: var(--shadow-hover) !important;
}
.product-box .product-image img, .product-card .product-image img, .s-product-card img {
    transition: transform var(--transition-slow) !important;
}
.product-box:hover .product-image img, .product-card:hover .product-image img, .s-product-card:hover img {
    transform: scale(1.06) !important;
}
.promotion-title, .product-badge, .tag-badge, .badge {
    background: var(--badge-red) !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-pill) !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(169, 50, 38, 0.25) !important;
}
.product-price, .price-current, .s-product-card-price { color: var(--wood-deep) !important; font-weight: 800 !important; }
.price-old, .old-price, .s-product-card-price del {
    color: #9a8f83 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
}

/* ===================================================
   8. الأزرار الموحدة
   =================================================== */
.btn-add-cart, .add-to-cart-btn, .s-add-product-to-cart-btn,
.btn-buy-now, .s-button-primary, button.btn-primary, .btn-more, .category-btn {
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    border: 1px solid transparent !important;
}
.btn-add-cart, .add-to-cart-btn, .s-add-product-to-cart-btn,
.btn-buy-now, .s-button-primary, button.btn-primary {
    background: linear-gradient(135deg, var(--bamboo-gold) 0%, var(--bamboo-gold-dark) 100%) !important;
    color: var(--wood-deep) !important;
}
.btn-add-cart:hover, .add-to-cart-btn:hover, .s-add-product-to-cart-btn:hover,
.btn-buy-now:hover, .s-button-primary:hover, button.btn-primary:hover {
    box-shadow: 0 8px 18px rgba(210, 176, 76, 0.35) !important;
    transform: translateY(-2px) !important;
}
.btn-more, .category-btn {
    background-color: transparent !important;
    color: var(--wood-dark) !important;
    border-color: var(--wood-dark) !important;
}
.btn-more:hover, .category-btn:hover { background-color: var(--wood-dark) !important; color: #fff !important; }
.btn-add-cart:active, .add-to-cart-btn:active, .s-add-product-to-cart-btn:active,
.btn-buy-now:active, .s-button-primary:active, button.btn-primary:active,
.btn-more:active, .category-btn:active { transform: scale(0.97) !important; box-shadow: none !important; }

/* ===================================================
   9. الفوتر (لون موحّد + خط ذهبي واحد فقط)
   =================================================== */
footer, .store-footer, .footer-main, .store-footer__inner {
    background-color: #F7F1E4 !important;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(210, 176, 76, 0.08) 0px,
            rgba(210, 176, 76, 0.08) 2px,
            transparent 2px,
            transparent 28px),
        linear-gradient(180deg, #F9F5EC 0%, #EFE8D8 100%) !important;
    padding-top: 18px !important;
    padding-bottom: 12px !important;
    position: relative !important;
}
footer, .store-footer, .footer-main { border-top: 3px solid var(--bamboo-gold) !important; }
.store-footer__inner { border-top: none !important; padding-top: 0 !important; }
footer .footer-col, .store-footer .footer-block { margin-bottom: 10px !important; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.store-footer .title, .footer-title, .footer-sub-title {
    color: var(--wood-deep) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
    position: relative !important;
    padding-bottom: 6px !important;
    letter-spacing: 0.3px !important;
}
footer h1::after, footer h2::after, footer h3::after, footer h4::after, footer h5::after, footer h6::after,
.store-footer .title::after, .footer-title::after, .footer-sub-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 32px !important;
    height: 2px !important;
    background-color: var(--bamboo-gold) !important;
}
footer p, footer span, footer div, .store-footer p {
    color: var(--wood-dark) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}
footer a, .store-footer a, .footer-links a {
    color: var(--bamboo-gold) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    display: inline-block !important;
    transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast) !important;
    position: relative !important;
}
footer a:hover, .store-footer a:hover, .footer-links a:hover {
    color: var(--wood-deep) !important;
    background-color: rgba(92, 64, 51, 0.08) !important;
    border-radius: 6px !important;
    transform: translateX(-4px) !important;
}
footer svg, footer i[class*="icon"] { color: var(--wood-dark) !important; }
footer a:hover svg, footer a:hover i[class*="icon"] { color: var(--bamboo-gold-dark) !important; }

.social-icons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background-color: rgba(196, 154, 108, 0.22) !important;
    border: 1px solid rgba(196, 154, 108, 0.45) !important;
    margin-inline-end: 10px !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast) !important;
}
/* ✅ أيقونات الشبكات الاجتماعية (إنستقرام وغيرها) غالبًا خط أيقونات
   (icon font) وليست SVG - حجمها الفعلي يُضبط عبر font-size، وهذا لم
   يكن محددًا صراحة سابقًا فظهرت صغيرة جدًا داخل الدائرة. هنا نضبطه
   بوضوح لكل الاحتمالات (i, svg, img) دفعة واحدة */
.social-icons a i,
.social-icons a [class*="sicon-"],
.social-icons a [class*="icon-"] {
    font-size: 19px !important;
    line-height: 1 !important;
}
.social-icons a svg {
    width: 19px !important;
    height: 19px !important;
}
.social-icons a img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
}
.social-icons a svg, .social-icons a i, .social-icons a [class*="sicon-"], .social-icons a [class*="icon-"] {
    color: var(--bamboo-gold-dark) !important;
}
.social-icons a:hover {
    background-color: var(--bamboo-gold-dark) !important;
    border-color: var(--bamboo-gold-dark) !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
}
.social-icons a:hover svg, .social-icons a:hover i,
.social-icons a:hover [class*="sicon-"], .social-icons a:hover [class*="icon-"] { color: #fff !important; }

/* ✅ حجم أكبر بوضوح لشعار المركز السعودي للتنافسية/وثيقة العمل داخل
   الفوتر (كان 40px، أصبح أبرز بكثير مع الحفاظ على أبعاده الأصلية عبر
   width:auto) */
footer img[alt*="وثيقة"], footer img[alt*="عمل"] { max-height: 64px !important; width: auto !important; }

/* ✅ الشريط السفلي: نفس لون الفوتر - قاعدة واحدة فقط، بدون أي نسخة قديمة متعارضة */
.footer-sub, .sub-footer, .copyright-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background-color: #F4EFE6 !important;
    background-image: none !important;
    border-top: none !important;
    padding: 8px 0 !important;
}
.footer-sub p, .footer-sub span, .copyright-bar p { color: var(--wood-dark) !important; font-size: 13px !important; }
.payment-icons { display: flex !important; align-items: center !important; gap: 8px !important; }
.payment-icons img {
    height: 22px !important;
    width: auto !important;
    border-radius: 4px !important;
    filter: grayscale(15%) opacity(0.9) !important;
    transition: filter var(--transition-fast) !important;
}
.payment-icons img:hover { filter: none !important; }

/* ===================================================
   10. الجوال
   =================================================== */
/* ✅ إخفاء صف التصنيفات بالكامل على الجوال/التابلت - المطلوب أن تظهر
   التصنيفات فقط داخل اللوحة الجانبية (☰) على الجوال، بدون صف منفصل */
@media (max-width: 1024px) {
    .ghk-nav-full-row {
        display: none !important;
    }
    /* ✅ إخفاء قائمة سلة الأصلية بالجوال (كانت تظهر مكررة مع زرنا) -
       العنصر المؤكد من فحص شجرة DOM: <div class="lg:hidden"> هو أول
       طفل داخل <header>، ويحتوي زر/قائمة سلة الأصلية للجوال */
    header[data-testid="store-header"] > div.lg\:hidden {
        display: none !important;
    }
    /* ✅ شريط البحث الموسّع (مقاس سطح المكتب) يزدحم مع اللوقو المتوسّط
       على الشاشات الأضيق - نعيده لأيقونة مدمجة هنا فقط، ويبقى شريطًا
       ظاهرًا على سطح المكتب فقط */
    .ghk-search-icon {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-position: center !important;
        color: transparent !important;
        caret-color: transparent !important;
    }
    .ghk-search-icon::placeholder { color: transparent !important; }
}

/* 🔴 لوحة/نافذة البحث المنبثقة (تظهر عند الضغط على أيقونة البحث) كانت
   تختفي جزئيًا خلف الهيدر الثابت (position:fixed, z-index:500). نرفع
   أولويتها فوق الهيدر ونضيف مسافة علوية تساوي ارتفاع الهيدر حتى تبدأ
   الظهور تحته مباشرة بدل التداخل معه */
.s-search-idle-panel,
.s-search-modal,
[class*="search-panel"],
[class*="search-modal"] {
    z-index: 600 !important;
}


@media (max-width: 768px) {
    footer .footer-col, .store-footer .footer-block { text-align: center !important; }
    footer h1::after, footer h2::after, footer h3::after,
    footer h4::after, footer h5::after, footer h6::after,
    .store-footer .title::after, .footer-title::after, .footer-sub-title::after {
        right: 50% !important;
        transform: translateX(50%) !important;
    }
    .footer-sub, .sub-footer, .copyright-bar { justify-content: center !important; text-align: center !important; }
    .product-box:hover, .product-card:hover, .s-product-card:hover { transform: translateY(-2px) !important; }
    .ghk-logo-centered img[alt*="جولدن"] { max-height: 46px !important; }

    /* ✅ فوتر أكثر إحكامًا على الجوال تحديدًا - تقليل إضافي للمسافات
       فوق ما هو مطبّق على الديسكتوب أعلاه */
    footer, .store-footer, .footer-main, .store-footer__inner {
        padding-top: 14px !important;
        padding-bottom: 8px !important;
    }
    footer .footer-col, .store-footer .footer-block { margin-bottom: 8px !important; }
    .social-icons { justify-content: center !important; display: flex !important; flex-wrap: wrap !important; }
    .social-icons a { margin-inline-end: 8px !important; margin-bottom: 8px !important; }

    /* الشعار يبقى واضحًا وبارزًا على الجوال دون أن يطغى على المساحة
       المضغوطة، مع الحفاظ على أبعاده الأصلية */
    footer img[alt*="وثيقة"], footer img[alt*="عمل"] { max-height: 52px !important; }
}

/* ===================================================
   11. تحسينات الوصول (Accessibility) - focus / disabled
   ✅ إضافات جديدة فقط، لا تُعدّل أي قاعدة سابقة ولا تغيّر أي سلوك
   =================================================== */

/* حالة تركيز واضحة عبر لوحة المفاتيح (Tab) على كل عناصر الهيدر
   والقائمة الجانبية التفاعلية - لا تظهر عند الضغط بالماوس، فقط عند
   التنقل بلوحة المفاتيح، بفضل :focus-visible */
.ghk-search-icon:focus-visible,
.ghk-menu-toggle:focus-visible,
.ghk-side-panel-close:focus-visible,
.ghk-side-panel-list a:focus-visible,
.s-user-menu-login-btn:focus-visible,
.main-menu li a:focus-visible,
.header-nav a:focus-visible,
.navigation-menu a:focus-visible,
.salla-menu a:focus-visible {
    outline: 2px solid var(--bamboo-gold-dark) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-sm) !important;
}

/* حالة تعطيل موحّدة للأزرار الأساسية - لم تكن معرّفة سابقًا، تمنع
   إيحاء بصري خاطئ بإمكانية الضغط على زر معطّل (نفاد المخزون مثلًا) */
.btn-add-cart:disabled, .add-to-cart-btn:disabled, .s-add-product-to-cart-btn:disabled,
.btn-buy-now:disabled, .s-button-primary:disabled, button.btn-primary:disabled,
.btn-more:disabled, .category-btn:disabled,
.btn-add-cart[disabled], .add-to-cart-btn[disabled], .s-add-product-to-cart-btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    filter: grayscale(20%) !important;
}

/* ===================================================
   12. تحسينات إضافية للتابلت وتنعيم بصري دقيق
   ✅ لا تغيّر أي تخطيط قائم، فقط تضبط مسافات/مقاسات على مقاسات وسيطة
   =================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .ghk-logo-centered img[alt*="جولدن"] { max-height: 58px !important; }
    .ghk-order-1, .ghk-order-3 { gap: 8px !important; }
}

/* تحسين انسيابية الحركة عند التمرير/التفاعل عبر تسريع الأجهزة (GPU)
   على العناصر التي تتحرك فعليًا فقط - لا يُطبَّق بشكل عام حتى لا يُثقل
   الذاكرة على الأجهزة الضعيفة */
.ghk-side-panel,
.ghk-menu-overlay,
.product-box .product-image img,
.product-card .product-image img,
.s-product-card img {
    will-change: transform, opacity;
}

/* دعم إضافي لعرض السوق الأفقي على الشاشات الكبيرة جدًا (يحافظ على
   حجم اللوقو والتباعد متناسقين بدل التمدد الحر) */
@media (min-width: 1600px) {
    .ghk-logo-centered img[alt*="جولدن"] { max-height: 80px !important; }
}

/* ===================================================
   13. شاشة التحميل الأولية (Loading Screen)
   ✅ عنصر جديد بالكامل (ghk-loading-screen) تُنشئه theme.js فور
   تنفيذ الملف - لا يتعارض مع أي قاعدة سابقة لأنه selector جديد كليًا
   =================================================== */
.ghk-loading-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    background-color: var(--sand-bg) !important;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
}
.ghk-loading-screen.ghk-loading-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.ghk-loading-logo-wrap {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ghk-loading-logo-wrap img {
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    animation: ghk-loading-pulse 1.8s ease-in-out infinite !important;
}
@keyframes ghk-loading-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.97); }
    50% { opacity: 1; transform: scale(1); }
}
.ghk-loading-dots {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ghk-loading-dots span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--bamboo-gold) !important;
    animation: ghk-loading-dot 1.1s ease-in-out infinite !important;
}
.ghk-loading-dots span:nth-child(2) { animation-delay: 0.15s !important; }
.ghk-loading-dots span:nth-child(3) { animation-delay: 0.3s !important; }
@keyframes ghk-loading-dot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* ===================================================
   14. هيكل تحميل خفيف (Skeleton) لكروت المنتجات
   ✅ يُفعَّل عبر كلاس ghk-card-loading الذي تضيفه/تزيله theme.js على
   نفس حاويات المنتجات الموجودة أصلاً (.product-box/.product-card/
   .s-product-card) - لا حاجة لأي عنصر HTML إضافي، ويستفيد من
   overflow:hidden المعرّف أصلاً على هذه الكروت (قسم 7) حتى لا يتجاوز
   التماوج حواف الكرت المدوّرة */
.ghk-card-loading {
    background-image: linear-gradient(90deg,
        rgba(196, 154, 108, 0.06) 25%,
        rgba(196, 154, 108, 0.16) 37%,
        rgba(196, 154, 108, 0.06) 63%) !important;
    background-size: 400% 100% !important;
    animation: ghk-shimmer 1.4s ease-in-out infinite !important;
}
@keyframes ghk-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* حالة فشل تحميل صورة منتج: بدل أيقونة المتصفح الافتراضية المكسورة،
   نعرض خلفية بديلة هادئة بهوية المتجر - بدون أي تغيير على src/alt
   الأصليين للصورة */
img.ghk-img-error {
    background-color: rgba(196, 154, 108, 0.06) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C49A6C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 34% 34% !important;
}

/* ===================================================
   15. تحسينات ملموسية إضافية (micro-interactions)
   ✅ حالات :active جديدة لعناصر لم تكن معرّفة سابقًا فقط - لا تُعدّل
   أي حالة :active موجودة أصلاً (البند 8 والأيقونات في البند 5/6)
   =================================================== */
.ghk-menu-toggle:active { transform: scale(0.9) !important; }
.s-user-menu-login-btn:active, button.s-user-menu-login-btn:active {
    opacity: 0.75 !important;
    transform: scale(0.94) !important;
}

/* ===================================================
   16. تحسينات إضافية لنقاط اللمس والشاشات الصغيرة جدًا
   ✅ لا تُعدّل أي تخطيط قائم في البند 4/10، فقط تكبّر مساحة اللمس على
   الشاشات الضيقة جدًا وتُحكم التباعد لمنع أي تراكب
   =================================================== */
@media (max-width: 480px) {
    .ghk-search-icon,
    .ghk-menu-toggle,
    .s-user-menu-login-btn,
    button.s-user-menu-login-btn {
        width: 38px !important;
        height: 38px !important;
    }
    .ghk-side-panel-list a { padding: 16px 4px !important; }
}
@media (max-width: 360px) {
    .ghk-logo-centered img[alt*="جولدن"] { max-height: 38px !important; }
    .ghk-order-1, .ghk-order-3 { gap: 6px !important; }
    .ghk-order-1 { left: 10px !important; }
    .ghk-order-3 { right: 10px !important; }
}

/* ===================================================
   17. تحسينات الفوتر: إخفاء رقم الهاتف + واتساب فقط + الشهادة
   ✅ كل القواعد هنا محصورة داخل الفوتر (footer/.store-footer) فقط، ولا
   تُعدّل أي شيء خارجه
   =================================================== */

/* رقم الهاتف: أي رابط اتصال مباشر (href="tel:...") يُخفى بصريًا بالكامل
   من الفوتر. الرابط والرقم يبقيان موجودين في HTML كما هما (لا نحذفهما)
   فقط لا يظهران للزائر - يتماشى هذا مع أي استخدام داخلي آخر للرقم */
footer a[href^="tel:"], .store-footer a[href^="tel:"] {
    display: none !important;
}

/* تسمية واتساب: theme.js يستبدل نص الرقم الظاهر داخل رابط واتساب
   (إن وُجد) بكلمة "واتساب" مع الحفاظ على الأيقونة والرابط الأصليين
   تمامًا كما هما - هذا فقط تنسيق بسيط للمسافة بين الأيقونة والكلمة */
footer .ghk-wa-label, .store-footer .ghk-wa-label {
    margin-inline-start: 6px !important;
    font-weight: 700 !important;
}

/* روابط واتساب/التواصل تُصبح أكثر وضوحًا كبطاقة صغيرة بدل نص عادي،
   لتكون خيار التواصل الأساسي المرئي في الفوتر */
footer a[href*="wa.me"], footer a[href*="whatsapp"], footer a[href^="whatsapp:"],
.store-footer a[href*="wa.me"], .store-footer a[href*="whatsapp"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: rgba(196, 154, 108, 0.14) !important;
    border: 1px solid rgba(196, 154, 108, 0.3) !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 16px !important;
}
footer a[href*="wa.me"]:hover, footer a[href*="whatsapp"]:hover,
.store-footer a[href*="wa.me"]:hover, .store-footer a[href*="whatsapp"]:hover {
    background-color: var(--bamboo-gold) !important;
    border-color: var(--bamboo-gold) !important;
}

/* وصول: تركيز واضح بلوحة المفاتيح على روابط وأيقونات الفوتر، متسق مع
   بقية الموقع (البند 11) لكن محصور هنا داخل الفوتر فقط */
footer a:focus-visible, .store-footer a:focus-visible, .social-icons a:focus-visible {
    outline: 2px solid var(--bamboo-gold-dark) !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
}

/* رقم الشهادة/الوثيقة: تكبير وتوضيح إن وُجد أحد هذه الأنماط الشائعة
   بجانب شعار المركز السعودي للتنافسية. ✅ ملاحظة صريحة: هذه محاولة
   بأفضل جهد بدون رؤية HTML الفعلي للفوتر - إن كانت أسماء الكلاسات في
   قالبكم مختلفة فلن يكون لهذه القاعدة أي تأثير (لا ضرر، فقط لا تنفع)،
   وعندها يفضّل مشاركة كود الفوتر الفعلي لتخصيصها بدقة */
footer [class*="cert-number"], footer [class*="certificate"],
.store-footer [class*="cert-number"], .store-footer [class*="certificate"],
footer .sbc-verify-seal [class*="number"] {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--wood-deep) !important;
    letter-spacing: 0.4px !important;
}
footer [class*="business-cert"], footer [class*="cert-wrap"],
.store-footer [class*="business-cert"], .store-footer [class*="cert-wrap"] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}


/* =====================================================================
   18. فوتر جولدن هاندز - نسخة مبسّطة: لون واحد سائد + أبيض للتمييز
   -----------------------------------------------------------------
   الدرس من مرجع "شكة": لون واحد هادئ يغطي الفوتر بالكامل، والأبيض هو
   ما يُبرز العناصر فوقه (بطاقات/دوائر بيضاء) - لا عدة ألوان متجاورة.
   هنا اللون السائد أخضر خيزراني فاتح جدًا بدل الأبيض المجرد، والأبيض
   يُستخدم كبطاقات تحتضن المحتوى. كل شيء مُركّز، مضغوط، وموحّد الحجم.
   ===================================================================== */

footer.ghk-footer-redesigned,
.store-footer.ghk-footer-redesigned {
    background-color: #F7F1E4 !important;
    background-image: none !important;
    overflow: visible !important;
    border-top: none !important;
    padding-top: 30px !important;
    padding-bottom: 20px !important;
}
/* ✅ إصلاح: الحاوية الداخلية (.store-footer__inner) لها خلفية خاصة بها
   من القسم الأصلي (لون + نقش متكرر) منفصلة عن الفوتر الخارجي - كانت
   تُبقي القسم السفلي بلونه القديم بينما الفوتر الخارجي يتغيّر، فيظهر
   خط تماس واضح بين المنطقتين. نُحيّدها هنا لتتبع نفس لون الفوتر الموحّد */
footer.ghk-footer-redesigned .store-footer__inner,
.store-footer.ghk-footer-redesigned .store-footer__inner {
    background-color: transparent !important;
    background-image: none !important;
}

/* الحافة العلوية المنحنية - بنفس لون خلفية الفوتر الجديد بالضبط، حتى
   تتصل بسلاسة تامة بلا أي خط فاصل إضافي */
footer.ghk-footer-redesigned::before,
.store-footer.ghk-footer-redesigned::before {
    content: "" !important;
    position: absolute !important;
    top: -40px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C 400 4, 1040 4, 1440 44 L1440 44 L0 44 Z' fill='%23F7F1E4'/%3E%3Cpath d='M0 44 C 400 4, 1040 4, 1440 44' fill='none' stroke='%23C49A6C' stroke-width='2.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* -----------------------------------------------------------------
   مرساة العلامة: بطاقة بيضاء واحدة، مضغوطة، بعمود واحد في المنتصف
   الشعار → الشعار النصي → صف أيقونات التواصل، كلها متوسِّطة رأسيًا
   ----------------------------------------------------------------- */
.ghk-footer-brand {
    position: relative !important;
    z-index: 2 !important;
    background-color: transparent !important;
    border-radius: var(--radius-lg) !important;
    padding: 26px 24px !important;
    margin-bottom: 18px !important;
    max-width: 460px !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: none !important;
}
.ghk-footer-brand-main { text-align: center !important; }
.ghk-footer-brand-main img {
    display: block !important;
    max-height: 58px !important;
    width: auto !important;
    margin: 0 auto 10px !important;
}
.ghk-footer-tagline {
    color: var(--wood-deep) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 0 0 16px !important;
    max-width: none !important;
}

/* عمود التواصل بعد نقله: يقف تحت الشعار مباشرة، متوسِّط بالكامل */
.ghk-footer-contact-zone {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}
.ghk-footer-contact-zone h3.s-contacts-title,
.ghk-footer-contact-zone > *:first-child {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--wood-dark) !important;
    opacity: 0.55 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.ghk-footer-contact-zone h3.s-contacts-title::after { display: none !important; }

/* صف الأيقونات: حجم واحد موحّد للجميع - واتساب، بريد، إنستقرام معًا،
   بلا أي استثناء أكبر أو أصغر من الآخر */
.ghk-footer-icons-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
a.ghk-footer-icon-btn,
footer a.ghk-footer-icon-btn,
.store-footer a.ghk-footer-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    line-height: 0 !important;
    background-color: var(--sand-bg) !important;
    border: 1px solid rgba(196, 154, 108, 0.35) !important;
    border-radius: 50% !important;
    color: var(--bamboo-gold-dark) !important;
    font-size: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast) !important;
}
a.ghk-footer-icon-btn svg,
a.ghk-footer-icon-btn i,
a.ghk-footer-icon-btn img {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    color: inherit !important;
    margin: 0 !important;
}
/* توحيد لون كل الأيقونات ذهبيًا بغض النظر عن لونها الأصلي (بعضها كان
   يظهر أسود لأن أيقونة سلة الافتراضية لا تستخدم currentColor) */
a.ghk-footer-icon-btn svg,
a.ghk-footer-icon-btn svg *,
a.ghk-footer-icon-btn i {
    color: var(--bamboo-gold-dark) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
a.ghk-footer-icon-btn:hover svg,
a.ghk-footer-icon-btn:hover svg *,
a.ghk-footer-icon-btn:hover i {
    color: #fff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
/* نسخة مكررة من رابط إنستقرام (شوهدت على الجوال) - تُخفى بدل الظهور
   في مكانها الأصلي بشكل مكرر */
.ghk-hidden-duplicate { display: none !important; }
a.ghk-footer-icon-btn:hover {
    background-color: var(--bamboo-gold) !important;
    border-color: var(--bamboo-gold) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}
/* نص العنوان (رقم الجوال المخفي أصلًا/بريد نصي مكرر) داخل الزر، إن
   وُجد كنص شقيق للأيقونة، لا يُعرض هنا (الأيقونة وحدها تكفي) - الحفاظ
   على النص لقارئ الشاشة فقط */
a.ghk-footer-icon-btn .ghk-wa-label,
a.ghk-footer-icon-btn > span:not(:first-child) {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
}

/* إنستقرام تحديدًا: أيقونته الأصلية قد تكون غير مكتملة (path صغير) -
   رسم بديل واضح مضمون، بنفس حجم بقية الأيقونات هنا بالضبط */
a.ghk-footer-icon-btn[href*="instagram"] svg,
a.ghk-footer-icon-btn[href*="instagram"] i,
a.ghk-footer-icon-btn[href*="instagram"] path {
    visibility: hidden !important;
}
a.ghk-footer-icon-btn[href*="instagram"] {
    position: relative !important;
}
a.ghk-footer-icon-btn[href*="instagram"]::before {
    content: "" !important;
    position: absolute !important;
    width: 17px !important;
    height: 17px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08655' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
a.ghk-footer-icon-btn[href*="instagram"]:hover::before {
    filter: brightness(0) invert(1) !important;
}

/* بريد إلكتروني: عنوان صغير هادئ اختياري تحت صف الأيقونات، للنسخ فقط */
.ghk-footer-contact-zone .ghk-footer-icons-row + * {
    font-size: 12.5px !important;
    color: var(--wood-dark) !important;
    font-weight: 600 !important;
    opacity: 0.8 !important;
    margin-top: 8px !important;
}

/* -----------------------------------------------------------------
   الثقة + الروابط: عمود واحد مضغوط، الثقة كبطاقة بيضاء صغيرة، الروابط
   نص هادئ مباشرة على خلفية الفوتر بلا أي صندوق
   ----------------------------------------------------------------- */
.ghk-footer-zones-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 4px !important;
}

.ghk-footer-trust-zone,
salla-trust-badges.ghk-footer-trust-zone {
    background-color: transparent !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: start !important;
    box-shadow: none !important;
    max-width: 320px !important;
    margin-inline: auto !important;
}
.ghk-footer-trust-zone img[alt*="وثيقة"],
.ghk-footer-trust-zone img[alt*="عمل"] {
    max-height: 44px !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.ghk-footer-trust-zone > *:not(img) { font-size: 13px !important; }

.ghk-footer-links-zone {
    text-align: center !important;
}
.ghk-footer-links-zone > *:first-child {
    display: block !important;
    color: var(--wood-dark) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    opacity: 0.5 !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}
.ghk-footer-links-zone > *:first-child::after { display: none !important; }
.ghk-footer-links-zone a {
    color: var(--wood-dark) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    background-color: transparent !important;
    padding: 2px 6px !important;
    display: inline-block !important;
}
.ghk-footer-links-zone a:hover {
    color: var(--bamboo-gold-dark) !important;
    background-color: transparent !important;
    transform: none !important;
}

/* زر العودة لأعلى الصفحة: أصغر وأخف، داخل الحافة المنحنية */
.ghk-scroll-top {
    position: absolute !important;
    top: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    border: 1px solid rgba(196, 154, 108, 0.4) !important;
    color: var(--bamboo-gold-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-soft) !important;
    cursor: pointer !important;
    z-index: 3 !important;
    padding: 0 !important;
    transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast) !important;
}
.ghk-scroll-top svg { width: 18px !important; height: 18px !important; }
.ghk-scroll-top:hover {
    background-color: var(--bamboo-gold) !important;
    color: #fff !important;
    transform: translateX(-50%) translateY(-3px) !important;
}
.ghk-scroll-top:active { transform: translateX(-50%) scale(0.92) !important; }
.ghk-scroll-top:focus-visible {
    outline: 2px solid var(--bamboo-gold-dark) !important;
    outline-offset: 3px !important;
}

/* -----------------------------------------------------------------
   زر واتساب العائم على كامل الموقع - دائرة صغيرة، أسفل يمين الشاشة
   ----------------------------------------------------------------- */
.ghk-floating-whatsapp {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: var(--bamboo-gold) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(196, 154, 108, 0.45) !important;
    z-index: 9997 !important;
    font-size: 0 !important;
    gap: 0 !important;
    transition: transform var(--transition-fast), background-color var(--transition-fast) !important;
}
.ghk-floating-whatsapp svg,
.ghk-floating-whatsapp i,
.ghk-floating-whatsapp img {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    margin: 0 !important;
}
.ghk-floating-whatsapp span { display: none !important; }
.ghk-floating-whatsapp:hover {
    background-color: var(--bamboo-gold-dark) !important;
    transform: translateY(-3px) !important;
}
.ghk-floating-whatsapp:focus-visible {
    outline: 2px solid var(--bamboo-gold-dark) !important;
    outline-offset: 3px !important;
}

/* الجزء الأخير فقط من الفوتر (شريط الحقوق وطرق الدفع) بلون أبيض -
   نقطة الأبيض الوحيدة المتبقية في نهاية الفوتر، بدل عدة بطاقات بيضاء
   متفرقة كما كان سابقًا */
footer.ghk-footer-redesigned .footer-sub,
footer.ghk-footer-redesigned .sub-footer,
footer.ghk-footer-redesigned .copyright-bar,
.store-footer.ghk-footer-redesigned .footer-sub,
.store-footer.ghk-footer-redesigned .sub-footer,
.store-footer.ghk-footer-redesigned .copyright-bar {
    background-color: #FFFFFF !important;
}

/* =====================================================================
   19. الفوتر على التابلت والجوال - نفس التكوين المضغوط والمتوسِّط
   ===================================================================== */
@media (max-width: 640px) {
    footer.ghk-footer-redesigned,
    .store-footer.ghk-footer-redesigned { padding-top: 24px !important; padding-bottom: 16px !important; }
    footer.ghk-footer-redesigned::before,
    .store-footer.ghk-footer-redesigned::before { top: -28px !important; height: 32px !important; }
    .ghk-footer-brand { padding: 20px 18px !important; max-width: 320px !important; }
    .ghk-footer-brand-main img { max-height: 48px !important; }
    .ghk-footer-tagline { font-size: 14.5px !important; }
    .ghk-scroll-top { width: 36px !important; height: 36px !important; top: -18px !important; }
    .ghk-scroll-top svg { width: 16px !important; height: 16px !important; }
    .ghk-floating-whatsapp { width: 46px !important; height: 46px !important; bottom: 16px !important; right: 16px !important; }
    .ghk-floating-whatsapp svg { width: 22px !important; height: 22px !important; }
}

/* =====================================================================
   20. إزالة الأشكال المثلثة الزخرفية القطرية من الهيرو
   -----------------------------------------------------------------
   ✅ الأول (::after) مؤكد عبر فحص DOM فعلي. الثاني (::before) تخمين
   مبني على النمط الشائع لقوالب سلة (شكلان متقابلان)، غير مؤكد بعد -
   إن لم يكن هذا هو العنصر الصحيح للمثلث الثاني، سيحتاج فحصًا مباشرًا
   ===================================================================== */
div.full-banner-entry::after {
    display: none !important;
}
div.full-banner-entry::before {
    display: none !important;
}