/* =====================================================================
   GHAWIA COLLECTION — VISUAL BRAND LAYER
   This file changes visual presentation only; application logic is untouched.
   Updated: 2026-08-10 - Fixed category scroll gap issue
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
    --primary: #c98a32 !important;
    --primary-dark: #8f5e1d !important;
    --primary-soft: rgba(201, 138, 50, .12) !important;
    --primary-glow: rgba(201, 138, 50, .26) !important;
    --dark: #19120d !important;
    --navy: #2b1c10 !important;
    --text: #21170e !important;
    --text-muted: #796b5d !important;
    --border: rgba(167, 111, 40, .24) !important;
    --surface: #fbf7f0 !important;
    --white: #ffffff !important;
    --radius-sm: 4px !important;
    --radius: 8px !important;
    --radius-lg: 12px !important;
    --radius-xl: 16px !important;
    --shadow-primary: 0 12px 30px rgba(122, 75, 20, .18) !important;
}

html { background: #fbf7f0; }
body {
    background:
        radial-gradient(circle at 8% 7%, rgba(222, 163, 78, .13) 0, transparent 24rem),
        radial-gradient(circle at 92% 28%, rgba(171, 105, 26, .08) 0, transparent 23rem),
        #fbf7f0 !important;
    color: var(--text) !important;
    font-family: 'Tajawal', sans-serif !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .38;
    background-image: radial-gradient(rgba(95, 58, 17, .09) .55px, transparent .55px);
    background-size: 8px 8px;
}

h1, h2, h3, .xt-section-title, .hero-title, .promo-title {
    font-family: 'Amiri', 'Tajawal', serif !important;
    letter-spacing: .01em;
}

/* Announcement bar and main navigation */
.xt-topbar {
    background: linear-gradient(90deg, #20150c 0%, #a66f25 38%, #d4a34d 50%, #a66f25 62%, #20150c 100%) !important;
    background-size: 180% 100% !important;
    box-shadow: 0 2px 16px rgba(50, 29, 10, .28) !important;
}
.xt-topbar-track span { color: #fff9ef !important; letter-spacing: .55px; }
.xt-topbar-track span::before { color: #f7d28c !important; }
.xt-lang-btn { background: rgba(255, 248, 235, .15) !important; border-color: rgba(255, 237, 197, .35) !important; }

.xt-header { height: 82px !important; }
.glass-header {
    background: rgba(255, 252, 246, .94) !important;
    border-bottom: 1px solid rgba(181, 126, 52, .28) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 8px 32px rgba(73, 45, 17, .08) !important;
}
.xt-header.scrolled .glass-header {
    background: rgba(255, 252, 246, .98) !important;
    box-shadow: 0 10px 34px rgba(73, 45, 17, .12) !important;
}
.xt-nav-wrap { gap: 18px !important; }
.xt-brand-logo {
    width: 174px !important;
    height: 64px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 2px 2px rgba(47, 27, 7, .14));
}
.xt-brand:hover .xt-brand-logo { transform: translateY(-1px) scale(1.02) !important; }
.xt-desktop-nav {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
}
.xt-nav-link {
    border-radius: 0 !important;
    color: #685745 !important;
    padding: 12px 15px !important;
    font-size: .88rem !important;
}
.xt-nav-link::before {
    top: auto !important;
    bottom: 4px !important;
    height: 2px !important;
    width: calc(100% - 30px) !important;
    left: 15px !important;
    right: auto !important;
    border-radius: 0 !important;
    transform: scaleX(0) !important;
    background: linear-gradient(90deg, #9b651f, #e0b664) !important;
}
[dir='rtl'] .xt-nav-link::before { right: 15px !important; left: auto !important; }
.xt-nav-link:hover::before, .xt-nav-link.active::before { transform: scaleX(1) !important; opacity: 1 !important; }
.xt-nav-link:hover, .xt-nav-link.active { color: #9b651f !important; }
.xt-search-form {
    background: #f7f0e7 !important;
    border: 1px solid rgba(176, 117, 42, .2) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.xt-search-form:focus-within { border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(201, 138, 50, .12) !important; }
.xt-search-btn, .xt-search-btn:hover { color: var(--primary) !important; }
.xt-action-btn, .xt-theme-toggle {
    background: #fffdf9 !important;
    border-color: rgba(176, 117, 42, .26) !important;
    border-radius: 4px !important;
    color: #4d3826 !important;
}
.xt-action-btn:hover { color: var(--primary) !important; background: #fff6e5 !important; border-color: var(--primary) !important; box-shadow: none !important; }
.xt-cart-btn, .btn-primary, .btn-submit {
    background: linear-gradient(135deg, #b47829 0%, #d3a253 55%, #9b641f 100%) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 18px rgba(151, 96, 25, .25) !important;
}
.xt-badge, .xt-bottom-badge { background: #b47829 !important; }

/* Navigation drawer and global components */
.xt-mobile-panel, .xt-dropdown { background: #fffdf9 !important; border-color: rgba(176, 117, 42, .22) !important; }
.xt-mobile-link:hover, .xt-mobile-link.active, .xt-bottom-link.active { color: var(--primary) !important; background: #fff3dd !important; }
.xt-mobile-link.active .link-icon { background: var(--primary) !important; }
.xt-bottom-nav { background: rgba(255, 252, 246, .97) !important; border-color: rgba(176, 117, 42, .2) !important; border-radius: 12px 12px 0 0 !important; }
.xt-section { position: relative; }
.xt-section-title { color: #21170e !important; font-size: clamp(1.85rem, 3vw, 2.5rem) !important; line-height: 1.1 !important; }
.xt-section-sub { color: #796b5d !important; }
.xt-eyebrow {
    background: transparent !important;
    color: #a46c22 !important;
    border: 1px solid rgba(191, 135, 54, .38) !important;
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.xt-see-all {
    border: 1px solid rgba(172, 112, 35, .45) !important;
    background: #fffdf9 !important;
    color: #755123 !important;
    border-radius: 3px !important;
}
.xt-see-all:hover { border-color: #b47829 !important; background: #fff3dd !important; color: #9b651f !important; }

/* Homepage hero */
.hero-section { background: #1f160d !important; }
.hero-overlay {
    background: transparent !important;
}
.hero-badge {
    background: rgba(216, 169, 87, .17) !important;
    border-color: rgba(247, 210, 140, .58) !important;
    color: #ffe6b7 !important;
    border-radius: 2px !important;
}
.hero-title { font-size: clamp(2.7rem, 5.3vw, 4.25rem) !important; font-weight: 700 !important; }
.hero-title span { color: #f1c46e !important; }
.hero-btn-primary { background: linear-gradient(135deg, #c98a32, #8f5e1d) !important; border-radius: 3px !important; box-shadow: 0 10px 28px rgba(11, 6, 1, .35) !important; }
.hero-btn-ghost { border-radius: 3px !important; border-color: rgba(255, 230, 183, .48) !important; }
.hero-stat-item { border-radius: 2px !important; border-color: rgba(238, 202, 137, .26) !important; }
.hero-swiper .swiper-button-next, .hero-swiper .swiper-button-prev { border-radius: 2px !important; }
.hero-swiper .swiper-button-next:hover, .hero-swiper .swiper-button-prev:hover { background: #b47829 !important; border-color: #d9a955 !important; }

/* Collections / category cards */
.category-grid-wrapper {
    overflow-x: auto !important;
    width: 100% !important;
    position: relative !important;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.category-grid-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.category-grid-wrapper::before,
.category-grid-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    z-index: 10 !important;
    pointer-events: none !important;
}
.category-grid-wrapper::before {
    right: 0 !important;
    background: linear-gradient(to left, #fbf7f0, transparent) !important;
}
.category-grid-wrapper::after {
    left: 0 !important;
    background: linear-gradient(to right, #fbf7f0, transparent) !important;
}
.category-grid {
    display: flex !important;
    gap: 0 !important;
    padding: 16px 0 !important;
    width: max-content !important;
    transition: none !important;
}
.cat-card {
    flex: 0 0 196px !important;
    width: 180px !important;
    margin: 0 8px !important;
    height: 180px !important;
    border-radius: 50% !important;
    border-color: rgba(169, 111, 37, .34) !important;
    box-shadow: 0 6px 18px rgba(57, 36, 14, .06) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}
.cat-card:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 16px 34px rgba(85, 48, 13, .16) !important;
}
.cat-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
.cat-overlay {
    display: none !important;
}
.cat-arrow {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(205, 148, 65, .88) !important;
    z-index: 2 !important;
}
.cat-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    padding: 12px 8px !important;
    background: transparent !important;
    border-radius: 0 0 50% 50% !important;
}
.cat-name {
    text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
}
.cat-name {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}
.cat-count {
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Product cards and all product-first storefront views */
.prod-card, .xt-card, .product-card, .offer-card, .list-prod-card {
    background: #fffdf9 !important;
    border-color: rgba(169, 111, 37, .25) !important;
    border-radius: 3px !important;
    box-shadow: 0 6px 18px rgba(60, 37, 14, .055) !important;
}
.prod-card:hover, .xt-card:hover, .product-card:hover, .offer-card:hover, .list-prod-card:hover {
    transform: translateY(-4px) !important;
    border-color: #c98a32 !important;
    box-shadow: 0 18px 34px rgba(92, 54, 16, .16) !important;
}
.prod-media, .product-image, .offer-img, .list-prod-media { background: #fff !important; }
.prod-media img, .product-image img, .offer-img img { mix-blend-mode: normal !important; }
.prod-badge, .offer-badge-pill, .discount-badge { background: #21170e !important; color: #f3ce83 !important; border-radius: 2px !important; box-shadow: none !important; }
.prod-badge.new { background: #c98a32 !important; color: #fffdf9 !important; }
.prod-cat, .product-category { color: #a46c22 !important; letter-spacing: .06em; }
.prod-name, .product-name, .offer-name { color: #302115 !important; }
.prod-price, .offer-price, .price-current, .product-price { color: #9b651f !important; }
.prod-price-old, .offer-price-old, .price-old { color: #9e8d7a !important; }
.prod-action-cart, .list-add-btn, .add-to-cart, .add-cart-btn, .product-add-btn {
    background: #b47829 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.prod-action-cart:hover, .list-add-btn:hover, .add-to-cart:hover, .add-cart-btn:hover, .product-add-btn:hover { background: #8f5e1d !important; }
.prod-action-wish, .wishlist-btn { border-radius: 2px !important; color: #8c6330 !important; }
.prod-action-wish:hover, .wishlist-btn:hover { background: #fff3dd !important; color: #b47829 !important; }

/* Search, product detail, cart, checkout, account and form surfaces */
.search-header, .search-hero, .product-container, .product-detail, .cart-container, .checkout-container, .profile-container, .auth-container, .page-header {
    color: var(--text) !important;
}
.search-box, .filter-bar, .product-info-panel, .cart-item, .cart-summary, .checkout-summary, .form-section, .profile-card, .auth-card, .variant-option, .product-tabs, .review-card {
    background: #fffdf9 !important;
    border-color: rgba(169, 111, 37, .24) !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(60, 37, 14, .05) !important;
}
input, select, textarea, .form-control {
    background: #fffcf7 !important;
    border-color: rgba(169, 111, 37, .3) !important;
    border-radius: 3px !important;
    color: var(--text) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: #c98a32 !important;
    box-shadow: 0 0 0 3px rgba(201, 138, 50, .13) !important;
}
.variant-option.selected, .size-option.selected, .color-option.selected, .tab-btn.active {
    border-color: #b47829 !important;
    background: #fff3dd !important;
    color: #8f5e1d !important;
}
.quantity-btn:hover, .remove-btn:hover, .tab-btn:hover { color: #b47829 !important; }

/* Promotion and offer elements */
.promo-banner {
    background: linear-gradient(125deg, #23170e 0%, #4b3216 53%, #af762b 100%) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(230, 183, 104, .38) !important;
    box-shadow: 0 18px 42px rgba(60, 37, 14, .2) !important;
}
.promo-eyebrow { background: rgba(255, 229, 176, .13) !important; color: #f7d28c !important; border-radius: 2px !important; }
.promo-title, .promo-desc { color: #fffaf2 !important; }
.promo-discount { border-radius: 2px !important; border-color: rgba(255, 228, 176, .45) !important; }
.promo-discount-num { color: #f6ce82 !important; }

/* Footer and utility panels */
footer { background: linear-gradient(135deg, #160e08 0%, #2b1c10 55%, #4a3015 100%) !important; }
footer div[style*='rgba(239,35,60'] { background: radial-gradient(circle, rgba(211, 162, 83, .15) 0%, transparent 62%) !important; }
footer [style*='#ff8a9a'] { color: #f3ce83 !important; }
#backToTop { background: #b47829 !important; border-radius: 3px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important; }
.xt-float-btn { border-radius: 3px !important; color: #a46c22 !important; background: #fffdf9 !important; }

/* Responsiveness */
@media (max-width: 1024px) {
    .xt-header { height: 72px !important; }
    .xt-brand-logo { width: 144px !important; height: 54px !important; }
}
@media (max-width: 1024px) {
    .cat-card {
        flex: 0 0 166px !important;
        width: 150px !important;
        height: 150px !important;
        margin: 0 8px !important;
    }
}
@media (max-width: 640px) {
    :root { --header-h: 68px !important; }
    .xt-header { height: 68px !important; }
    .xt-nav-wrap { padding: 0 14px !important; gap: 8px !important; }
    .xt-brand-logo { width: 124px !important; height: 48px !important; }
    .hero-title { font-size: clamp(2.4rem, 11vw, 3.3rem) !important; }
    .xt-section-title { font-size: 2rem !important; }
    .cat-card {
        flex: 0 0 136px !important;
        width: 120px !important;
        height: 120px !important;
        margin: 0 8px !important;
    }
    .category-grid {
        gap: 0 !important;
        animation-duration: 35s !important;
    }
}