/* --- Local Host Almarai Font (GDPR Compliant) --- */
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-800.woff2') format('woff2');
}

:root {
    /* --- Luxury Color Palette --- */
    --arc-primary: #000000;
    --arc-secondary: #c5a059; /* Muted Gold */
    --arc-bg-light: #f9f9f9;
    --arc-text-main: #1a1a1a;
    --arc-text-muted: #666666;
    
    /* --- Professional Typography --- */
    --arc-font-heading: 'Almarai', sans-serif;
    --arc-font-body: 'Almarai', sans-serif;
    
    /* --- Spacing & Radii --- */
    --arc-gap: 30px;
    --arc-radius: 0px; /* Sharp luxury edges */
}

/* ==========================================================================
   🏛️ LUXURY MOBILE DRAWER MENU ARCHITECTURE (RTL & PREMIUM DESIGN)
   ========================================================================== */

/* 1️⃣ Base Dropdown Container */
.elementor-nav-menu--dropdown {
    background-color: #0d0d0d !important; /* Rich Luxury Black */
    padding: 15px 10px !important;
}

/* 2️⃣ Elegant Rows & Spacing */
.elementor-nav-menu--dropdown ul.elementor-nav-menu {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-nav-menu--dropdown li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.elementor-nav-menu--dropdown li:last-child {
    border-bottom: none !important;
}

/* 3️⃣ Row Links Styling */
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-sub-item {
    font-family: 'Almarai', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 14px 15px !important;
    display: block !important;
    transition: all 0.3s ease !important;
    text-align: right !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

/* Active & Hover Row States */
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown .menu-item-has-children.highlighted > a.elementor-item {
    color: #c5a059 !important; /* Signature Gold */
    background: rgba(197, 160, 89, 0.03) !important;
}

/* 4️⃣ Radical Arrow chevron Modernization & Perfect Alignment */
.elementor-nav-menu--dropdown .menu-item-has-children > a {
    padding-left: 50px !important; /* Make room for the arrow on the left */
}

/* Base Sub-arrow Toggle Container */
.elementor-nav-menu--dropdown .menu-item-has-children > .sub-arrow {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10 !important;
}

/* Sub-arrow Hover/Active State */
.elementor-nav-menu--dropdown .menu-item-has-children.elementor-active > .sub-arrow,
.elementor-nav-menu--dropdown .menu-item-has-children:hover > .sub-arrow {
    background: rgba(197, 160, 89, 0.1) !important;
    border-color: rgba(197, 160, 89, 0.3) !important;
}

/* Custom CSS Chevron Arrow Icon replacement (Hides the ugly native icon & injects an elegant luxury chevron) */
.elementor-nav-menu--dropdown .menu-item-has-children > .sub-arrow i,
.elementor-nav-menu--dropdown .menu-item-has-children > .sub-arrow svg {
    display: none !important; /* Hide original icon completely */
}

.elementor-nav-menu--dropdown .menu-item-has-children > .sub-arrow::after {
    content: '' !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-bottom: 1.5px solid #c5a059 !important; /* Gold Border Arrow */
    border-left: 1.5px solid #c5a059 !important;
    transform: rotate(45deg) !important; /* Points to the left in RTL naturally! */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Rotates chevron downwards elegantly when submenu expands! */
.elementor-nav-menu--dropdown .menu-item-has-children.elementor-active > .sub-arrow::after,
.elementor-nav-menu--dropdown .menu-item-has-children.highlighted > .sub-arrow::after {
    transform: rotate(-45deg) !important; /* Points downwards! */
}

/* 5️⃣ Luxurious Sub-menu Indentation & Tree Structure */
.elementor-nav-menu--dropdown .sub-menu {
    background: rgba(0, 0, 0, 0.25) !important; /* Darker nested depth */
    margin: 0 !important;
    padding: 5px 0 !important;
    border-right: 1.5px solid rgba(197, 160, 89, 0.15) !important; /* Gold vertical tree line on the right side in RTL */
    margin-right: 15px !important; /* Indent sub-menu in RTL */
    list-style: none !important;
}

.elementor-nav-menu--dropdown .sub-menu li {
    border-bottom: none !important; /* No nested borders */
}

.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    padding: 10px 15px !important;
}

.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item.elementor-item-active {
    color: #c5a059 !important;
    padding-right: 20px !important; /* Smooth slide-in micro-animation on hover! */
}

/* ==========================================================================
   🏛️ GLOBAL WOOCOMMERCE DESIGN SYSTEM & TYPOGRAPHY UNIFICATION
   ========================================================================== */

/* Enforce Almarai font globally on all WooCommerce components */
.woocommerce, 
.woocommerce-page, 
.woocommerce-checkout, 
.woocommerce-cart, 
.woocommerce-account,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.wc-block-grid,
.wc-block-components {
    font-family: 'Almarai', sans-serif !important;
}

/* Base Body Light Canvas Color Palette */
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.single-product {
    background-color: #ffffff !important;
    color: #111111 !important;
    font-family: 'Almarai', sans-serif !important;
}

/* Uniform WooCommerce container margins and widths */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    max-width: 1400px !important;
    margin: 60px auto !important;
    padding: 0 40px !important;
    direction: rtl !important;
    text-align: right !important;
}

@media (max-width: 768px) {
    .woocommerce-cart .woocommerce,
    .woocommerce-checkout .woocommerce,
    .woocommerce-account .woocommerce {
        padding: 0 20px !important;
        margin: 30px auto !important;
    }
}

/* ==========================================================================
   🛋️ ARC LUXURY GRID & UNIFIED CARD STYLE SYSTEM
   ========================================================================== */

/* 1️⃣ Stable CSS Grid System Layouts */
.arc-luxury-grid {
    display: grid !important;
    gap: 24px 18px !important;
    width: 100% !important;
    align-items: stretch !important; /* Align cards to match heights */
    transition: opacity 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Layout Columns configurations */
.arc-luxury-grid[data-columns="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.arc-luxury-grid[data-columns="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.arc-luxury-grid[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.arc-luxury-grid[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Responsive Grid Breakpoints (Synced with Elementor layout sizes) */
@media (max-width: 1024px) {
    .arc-luxury-grid[data-columns="5"],
    .arc-luxury-grid[data-columns="4"],
    .arc-luxury-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px 14px !important;
    }
}

@media (max-width: 768px) {
    .arc-luxury-grid[data-columns="5"],
    .arc-luxury-grid[data-columns="4"],
    .arc-luxury-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 10px !important;
    }
}

@media (max-width: 480px) {
    .arc-luxury-grid[data-columns="5"],
    .arc-luxury-grid[data-columns="4"],
    .arc-luxury-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 8px !important;
    }
}

/* 2️⃣ Luxury Product Card Component */
.arc-catalog-card,
.arc-product-card {
    position: relative;
    background: transparent;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: center !important;
    font-family: 'Almarai', sans-serif !important;
    width: 100% !important;
    height: 100% !important; /* Stretch card to equal-height grid rows */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Card Media block with Aspect Ratio Reservation */
.arc-card-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: var(--arc-card-aspect, 1/1) !important; /* Consumes dynamic custom property */
    overflow: hidden !important;
    border-radius: 3px !important;
    background: #fafafa !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

.arc-card-link {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: var(--arc-card-aspect, 1/1) !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

/* Custom 1:1 Aspect ratio reservation placeholder */
.arc-aspect-ratio-placeholder {
    display: none !important; /* Handled by native aspect-ratio directly on containers */
}

/* Slide Transition System */
.arc-gallery-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0;
    z-index: 1;
}

.arc-gallery-slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Blur placeholder underlay */
.arc-img-placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: blur(15px) !important;
    transform: scale(1.08) !important;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Hover Zoom effects */
.arc-catalog-card:hover .arc-gallery-slide.active,
.arc-product-card:hover .arc-gallery-slide.active {
    transform: scale(1.04) !important;
}

/* Absolute Corner Badges */
.arc-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    padding: 3px 10px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 1px !important;
    z-index: 4 !important;
    color: #fff !important;
    pointer-events: none !important;
}
.arc-badge.new {
    background: #c5a059 !important;
}
.arc-badge.sale {
    background: #d9534f !important;
}
.arc-badge.custom {
    background: #c5a059 !important;
}

/* 🛋️ FLOATING ACTION TOOLS BUTTONS (PREMIUM DISCRETE CIRCLES) */
.arc-card-tools {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important; /* Perfect gap to prevent overlapping white backgrounds */
    width: 32px !important;
    height: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateX(-5px) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.arc-card-tools::before,
.arc-card-tools::after {
    display: none !important;
}

.arc-product-card .yith-wcwl-add-to-wishlist,
.arc-product-card .tinv-wraper,
.arc-product-card .woosw-btn,
.arc-catalog-card .yith-wcwl-add-to-wishlist,
.arc-catalog-card .tinv-wraper,
.arc-catalog-card .woosw-btn {
    display: none !important;
}

/* ULTIMATE NUKE: Hide ALL theme-injected tools/wrappers inside the product loop */
li.product > *:not(.arc-catalog-card):not(.arc-product-card),
.arc-card-media > *:not(a.arc-card-link):not(.arc-badge):not(.arc-card-gallery-dots):not(.arc-card-tools),
.arc-catalog-card > *:not(.arc-card-media):not(.arc-card-details),
.arc-product-card > *:not(.arc-card-media):not(.arc-card-details) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -999 !important;
}

.arc-catalog-card:hover .arc-card-tools,
.arc-product-card:hover .arc-card-tools {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* Base style for all action buttons - discrete white circular buttons */
.arc-card-tools > a,
.arc-card-tools > button,
.arc-card-tools > div .arc-share-btn,
.arc-card-tools .arc-catalog-tool-btn,
.arc-card-tools .arc-shop-tool-btn,
.arc-card-tools .arc-share-btn,
.arc-card-tools .add_to_cart_button,
.arc-card-tools .ajax_add_to_cart {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    pointer-events: auto !important;
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    text-decoration: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Force perfect transparent backgrounds on share wrapper too */
.arc-card-tools .arc-share-wrapper {
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force perfect SVG/icon style inside the container - dark charcoal for maximum contrast */
.arc-card-tools svg,
.arc-card-tools i {
    width: 13px !important;
    height: 13px !important;
    font-size: 13px !important;
    stroke: #1a1a1a !important;
    color: #1a1a1a !important;
    fill: none !important;
    transition: all 0.3s ease !important;
    display: block !important;
    margin: auto !important;
}

/* Hover premium golden color swap and scale */
.arc-card-tools a:hover,
.arc-card-tools button:hover,
.arc-card-tools .arc-catalog-tool-btn:hover,
.arc-card-tools .arc-shop-tool-btn:hover,
.arc-card-tools .arc-share-btn:hover {
    background: #c5a059 !important;
    background-color: #c5a059 !important;
    border-color: #c5a059 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 14px rgba(197, 160, 89, 0.25) !important;
}

.arc-card-tools a:hover svg,
.arc-card-tools button:hover svg,
.arc-card-tools a:hover i,
.arc-card-tools button:hover i {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* Wishlist Active State - Golden Circle with White Heart */
.arc-card-tools .arc-shop-tool-btn.in-wishlist {
    background: #c5a059 !important;
    border-color: #c5a059 !important;
}
.arc-card-tools .arc-shop-tool-btn.in-wishlist svg {
    stroke: #ffffff !important;
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Gallery Dots Overlay */
.arc-card-gallery-dots {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 5px !important;
    z-index: 6 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.arc-catalog-card:hover .arc-card-gallery-dots,
.arc-product-card:hover .arc-card-gallery-dots {
    opacity: 1 !important;
}

.arc-gallery-dot {
    width: 14px !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
}

.arc-gallery-dot.active,
.arc-gallery-dot:hover {
    background: #c5a059 !important;
    width: 20px !important;
}

/* Details and Typography block styling */
.arc-card-details {
    padding: 15px 0 !important;
    text-align: center !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.arc-card-details-top {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center !important;
    align-items: center !}

.arc-card-sku {
    font-size: 8px !important;
    color: #bbb !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
}

.arc-card-title {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin: 0 auto 8px auto !important;
    line-height: 1.4 !important;
    max-width: 95% !important;
    word-wrap: break-word !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 39.2px !important; /* Lock height at exactly 2 lines */
}

.arc-card-title a {
    text-decoration: none !important;
    color: inherit !important;
    transition: color 0.3s ease !important;
}

.arc-card-title a:hover {
    color: #c5a059 !important;
}

/* Color/Material Swatches Reservation */
.arc-card-swatches {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    min-height: 10px !important; /* Reserve spacing so heights align */
}

.arc-swatch-color {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease !important;
}
.arc-swatch-color:hover {
    transform: scale(1.3) !important;
}

/* Bottom elements alignment */
.arc-card-details-bottom {
    width: 100% !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Push buttons perfectly to bottom boundary */
    align-items: center !important;
    gap: 6px !important;
    padding-top: 8px !important;
    min-height: 84px !important; /* Perfect uniform row alignment across all price configurations */
}

.arc-card-lead-time {
    font-size: 9px !important;
    color: #777 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 13px !important; /* Reserve vertical alignment space */
}

.arc-card-price-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.arc-card-price {
    color: #c5a059 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Almarai', sans-serif !important;
    min-height: 18px !important;
}

/* Shop CTA buttons */
.arc-shop-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 20px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 2px !important;
    font-family: 'Almarai', sans-serif !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    outline: none !important;
    width: 100% !important;
    min-height: 32px !important;
}

.arc-discover-btn {
    border: 1px solid #e5e5e5 !important;
    color: #444 !important;
    background: transparent !important;
}
.arc-discover-btn:hover {
    background: #c5a059 !important;
    color: #fff !important;
    border-color: #c5a059 !important;
}

.arc-whatsapp-btn {
    border: 1px solid #c5a059 !important;
    color: #c5a059 !important;
    background: transparent !important;
}
.arc-whatsapp-btn:hover {
    background: #c5a059 !important;
    color: #fff !important;
}

.arc-cad-btn {
    background: #222 !important;
    border: 1px solid #c5a059 !important;
    color: #c5a059 !important;
    font-size: 9px !important;
    padding: 6px 10px !important;
}
.arc-cad-btn:hover {
    background: #c5a059 !important;
    color: #fff !important;
}

/* Share Dropdown menu */
.arc-share-wrapper {
    position: relative;
}

.arc-share-menu {
    display: none;
    position: absolute !important;
    bottom: 35px !important;
    left: 0 !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
    z-index: 100 !important;
    min-width: 120px !important;
    direction: rtl !important;
    text-align: right !important;
}
.arc-share-menu a,
.arc-share-menu button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: 0.2s !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    text-align: right !important;
    box-sizing: border-box !important;
}
.arc-share-menu a:hover,
.arc-share-menu button:hover {
    background: #fdfaf4 !important;
    color: #c5a059 !important;
}

/* 3️⃣ Gold Shimmer Skeleton Loading system */
@keyframes arc-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.arc-skeleton-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

.arc-skeleton-media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%) !important;
    background-size: 200% 100% !important;
    animation: arc-shimmer 1.5s infinite linear !important;
    border-radius: 3px !important;
}

.arc-skeleton-text {
    height: 10px !important;
    background: #f2f2f2 !important;
    border-radius: 2px !important;
}

.arc-skeleton-text.title {
    width: 85% !important;
    height: 14px !important;
    background: #e6e6e6 !important;
    margin-top: 5px !important;
}

.arc-skeleton-text.sku {
    width: 40% !important;
    height: 9px !important;
}

.arc-skeleton-text.price {
    width: 60% !important;
    height: 12px !important;
    margin-top: 5px !important;
}

/* 4️⃣ Mobile Card and Alignment adjustments */
@media (max-width: 768px) {
    .arc-card-tools {
        opacity: 1 !important;
        transform: none !important;
        top: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        flex-direction: column !important;
        gap: 6px !important;
        pointer-events: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
    .arc-catalog-tool-btn,
    .arc-shop-tool-btn {
        width: 26px !important;
        height: 26px !important;
        pointer-events: auto !important;
    }
    .arc-share-wrapper {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .arc-badge {
        top: 8px !important;
        right: 8px !important;
    }
    .arc-card-title {
        font-size: 13px !important;
        margin: 0 auto 6px auto !important;
        min-height: 36.4px !important; /* Lock height at exactly 2 lines */
    }
    .arc-shop-btn {
        padding: 6px 15px !important;
        font-size: 10px !important;
    }
    .arc-card-details-bottom {
        min-height: 70px !important; /* Responsive mobile button alignment height */
    }
}

/* ==========================================================================
   🚫 WOOCOMMERCE & ELEMENTOR GRID CONFLICT RESOLUTION
   ========================================================================== */
ul.products, 
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr)) !important;
    gap: var(--grid-gap, 24px) !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important; /* Nullify floats clearers */
}

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

.woocommerce-LoopProduct-link {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   💎 ULTRA-LUXURY UPGRADES: EDITORIAL SPLIT, GOLD ACCENTS & GLASSMORPHISM
   ========================================================================== */

/* 1. Editorial Split Layout styles */
.arc-editorial-split {
    display: grid !important;
    grid-template-columns: 1.15fr 3fr !important;
    gap: 30px !important;
    width: 100% !important;
    margin-bottom: 50px !important;
}

.arc-editorial-split.banner-left {
    direction: ltr !important;
}

.arc-editorial-split.banner-left > * {
    direction: rtl !important; /* Keep internal contents RTL */
}

.arc-editorial-split.banner-right {
    direction: rtl !important;
}

.arc-editorial-banner {
    position: relative !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    min-height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 40px 30px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.arc-banner-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 0 !important;
}

.arc-editorial-banner:hover .arc-banner-bg {
    transform: scale(1.05) !important;
}

.arc-banner-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    transition: opacity 0.5s ease !important;
}

.arc-banner-content {
    position: relative !important;
    z-index: 2 !important;
    text-align: right !important;
    color: #ffffff !important;
}

.arc-banner-subtitle {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 12px !important;
}

.arc-banner-title {
    font-size: 26px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.arc-banner-desc {
    font-size: 13px !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6 !important;
    margin: 0 0 30px 0 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
}

.arc-banner-btn {
    display: inline-block !important;
    padding: 12px 30px !important;
    border: 1px solid #c5a059 !important;
    background: #c5a059 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-align: center !important;
}

.arc-banner-btn:hover {
    background: transparent !important;
    color: #c5a059 !important;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.15) !important;
}

/* 2. Bespoke Gold Hover accent outline and scale */
.arc-product-card {
    border: 1px solid rgba(0, 0, 0, 0.01) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.arc-product-card:hover {
    border-color: rgba(197, 160, 89, 0.25) !important;
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.05) !important;
}

.arc-gallery-slide {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease !important;
}

.arc-product-card:hover .arc-gallery-slide.active {
    transform: scale(1.04) !important;
}

/* 3. Sliding tab line spacing */
.arc-category-tabs {
    padding-bottom: 20px !important;
}

/* Responsive adjustments for editorial grid */
@media (max-width: 1024px) {
    .arc-editorial-split {
        grid-template-columns: 1fr !important;
    }
    .arc-editorial-banner {
        min-height: 380px !important;
        padding: 30px 20px !important;
    }
}

/* ==========================================================================
   ⚜️ ARC EDITORIAL MASTERPIECES BESPOKE STYLE SYSTEM (GLOBAL ELITE SPEC)
   ========================================================================== */

/* A. Bespoke Editorial Showcase Cards */
.arc-editorial-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015) !important;
    border-radius: 8px !important;
    padding: 0 !important; /* Full bleed border flush */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
}

.arc-editorial-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(197, 160, 89, 0.12) !important;
    border-color: rgba(197, 160, 89, 0.35) !important;
}

/* B. Editorial Media Aspect and Smooth Fades */
.arc-editorial-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: var(--arc-card-aspect, 1/1) !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important; /* Match top corners of card */
    background: #faf6f0 !important; /* Premium Warm Luxury White */
    border: 1px solid rgba(0, 0, 0, 0.01) !important;
    box-sizing: border-box !important;
}

.arc-editorial-link {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.arc-editorial-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0;
    z-index: 1;
}

.arc-editorial-slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Hardware accelerated Ken Burns Zoom on card hover */
.arc-editorial-card:hover .arc-editorial-slide.active {
    transform: scale(1.08) !important;
}

/* Elite secondary image hover flip pure CSS transition */
.arc-editorial-card:hover .arc-editorial-slide.arc-img-secondary {
    opacity: 1 !important;
    z-index: 3 !important;
    transform: scale(1.08) !important;
}

/* C. Glassmorphic Premium Badges */
.arc-editorial-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    padding: 5px 12px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    background: rgba(15, 15, 15, 0.6) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    color: #c5a059 !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

.arc-editorial-badge.sale {
    background: rgba(197, 160, 89, 0.8) !important;
    color: #ffffff !important;
    border-color: #c5a059 !important;
}

/* D. Premium Full-Width Glassmorphic Image Tray at the bottom edge of the image container */
.arc-editorial-dock {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.01) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important; /* Even spacing across full-width */
    z-index: 15 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: background 0.3s ease !important;
}

.arc-editorial-card:hover .arc-editorial-dock {
    background: rgba(255, 255, 255, 0.85) !important;
}

.arc-wishlist-heart-trigger,
.arc-editorial-share-wrapper,
.arc-cart-btn-wrapper {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.arc-dock-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #333333 !important; /* Crisp dark charcoal for good visibility on image floor background */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    padding: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.arc-dock-btn:hover {
    background: transparent !important;
    color: #c5a059 !important; /* Warm luxury gold */
    box-shadow: none !important;
}

.arc-dock-btn svg {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
    fill: none !important;
    transition: transform 0.3s ease !important;
}

.arc-dock-btn:hover svg {
    transform: scale(1.15) !important;
}

/* E. Details & Typography - Masterpieces Redesign */
.arc-editorial-details {
    padding: 10px 0 10px 0 !important;
    background: #ffffff !important;
    direction: rtl !important;
    box-sizing: border-box !important;
}

.arc-details-row-1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    direction: rtl !important;
    margin: 0 12px 6px 12px !important;
    box-sizing: border-box !important;
}

.arc-details-row-2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    direction: rtl !important;
    margin: 0 12px 6px 12px !important;
    box-sizing: border-box !important;
}

.arc-details-row-3 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: rtl !important;
    margin: 0 12px 0 12px !important;
    box-sizing: border-box !important;
}

.arc-editorial-sku {
    font-size: 9px !important;
    color: #999999 !important;
    letter-spacing: 1px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.arc-editorial-title {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-align: right !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    padding: 0 4px !important;
}

.arc-inline-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #888888 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    width: 24px !important;
    height: 24px !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}

.arc-inline-btn:hover {
    color: #c5a059 !important;
    transform: scale(1.15) !important;
}

.arc-inline-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
    transition: transform 0.3s ease !important;
}

.arc-inline-btn:hover svg {
    stroke: #c5a059 !important;
}

.arc-editorial-title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.arc-editorial-title a:hover {
    color: #c5a059 !important;
}

/* F. Dynamic Interactive Color Swatches */
.arc-editorial-swatches {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-bottom: 6px !important; /* Reduced swatch spacer */
}

.arc-swatch-color {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
}

.arc-swatch-color:hover,
.arc-swatch-color.active {
    transform: scale(1.3) !important;
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.4) !important;
}

/* G. Bespoke Pricing & Discover buttons */
.arc-editorial-price-action {
    margin-top: 5px !important;
}

.arc-editorial-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #c5a059 !important;
}

.arc-editorial-price del {
    color: #999999 !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    margin-left: 6px !important;
    display: inline-block !important;
}

.arc-editorial-price ins {
    text-decoration: none !important;
    display: inline-block !important;
}

.arc-editorial-discover {
    display: inline-block !important;
    margin-top: 8px !important;
    font-size: 11px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    border-bottom: 1px solid #1a1a1a !important;
    padding-bottom: 2px !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
}

.arc-editorial-discover:hover {
    color: #c5a059 !important;
    border-color: #c5a059 !important;
}

.arc-editorial-price-link {
    color: #c5a059 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed #c5a059 !important;
    padding-bottom: 2px !important;
    transition: all 0.3s ease !important;
}

.arc-editorial-price-link:hover {
    color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* Share menu fade up styling */
.arc-share-menu {
    animation: arcFadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes arcFadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* H. Elite Gold Sliding Underline on Tabs */
.arc-category-tabs button.arc-tab-btn {
    position: relative !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #888888 !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.3s ease !important;
}

.arc-category-tabs button.arc-tab-btn.active {
    color: #c5a059 !important;
}

.arc-category-tabs button.arc-tab-btn::after {
    content: '' !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #c5a059 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.arc-category-tabs button.arc-tab-btn.active::after {
    transform: translateX(-50%) scaleX(1) !important;
}

/* Mobile responsive action bar overrides (Amazon-style corner overlay enabled) */
.arc-editorial-mobile-actions {
    display: none !important; /* Hidden always */
}

@media (max-width: 768px) {
    .arc-editorial-media .arc-editorial-dock {
        display: block !important; /* Keep dock visible on mobile */
        opacity: 1 !important;
        visibility: visible !important;
    }
    .arc-editorial-mobile-actions {
        display: none !important;
    }
}