/* ==========================================================================
   TAJ ALAMEERA - GLOBAL BRAND STYLES & GOLD TICKER (Light Luxury)
   ========================================================================== */

   :root {
       --brand-gold: #C5A059;
       --brand-dark: #0B0B0B;
       --text-main: #1d2939;
       --text-light: #ffffff;
       --border-hex: #E6E8EB;
       --soft-cream: #F9F7F2;
       --apple-gray: #E6E8EB;
       --text-muted: #667085;
   }
   
   body {
       font-family: 'Almarai', sans-serif !important;
   }

   /* Pure CSS first-paint cover: no image or font request is needed, so it can
      paint as soon as Salla's custom stylesheet is discovered. */
   html:not(.taj-site-ready)::before {
       content: '';
       position: fixed;
       inset: 0;
       z-index: 2147483646;
       background: #F9F7F2;
       pointer-events: none;
       animation: tajCoverFallback .3s ease 1.6s forwards;
   }
   html:not(.taj-site-ready)::after {
       content: '';
       position: fixed;
       z-index: 2147483647;
       left: 50%;
       top: 50%;
       width: 42px;
       height: 42px;
       margin: -21px 0 0 -21px;
       border: 2px solid rgba(197, 160, 89, .2);
       border-top-color: var(--brand-gold);
       border-radius: 50%;
       pointer-events: none;
       animation: tajCoverSpin .75s linear infinite,
                  tajCoverFallback .3s ease 1.6s forwards;
   }
   html.taj-site-ready::before,
   html.taj-site-ready::after {
       opacity: 0;
       visibility: hidden;
       transition: opacity .22s ease, visibility 0s linear .22s;
   }
   @keyframes tajCoverSpin {
       to { transform: rotate(360deg); }
   }
   @keyframes tajCoverFallback {
       to { opacity: 0; visibility: hidden; }
   }

   /* First-paint backstop for the Salla CSS customization field.
      The replacement footer is created by JS, but the native footer exists in
      the original HTML and can otherwise flash before the JS bundle executes. */
   footer.store-footer,
   footer.s-footer {
       display: none !important;
   }
   
   /* --- GOLD TICKER CORE LAYOUT --- */
   .has-taj-ticker {
       padding-top: 46px !important;
   }
   
   .taj-ticker-wrap {
       position: fixed; top: 0; left: 0; width: 100%; height: 46px;
       background: var(--soft-cream);
       display: flex; align-items: center; overflow: hidden;
       z-index: 999999;
       border-bottom: 1px solid var(--border-hex);
       direction: ltr;
   }
   
   /* --- TICKER ANIMATION --- */
   .taj-track {
       display: flex; width: max-content;
       animation: tajScroll 45s linear infinite;
   }
   .taj-ticker-wrap:hover .taj-track { animation-play-state: paused; }
   @keyframes tajScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
   
   .taj-group { display: flex; align-items: center; }
   .taj-item {
       display: flex; align-items: center; flex-direction: row-reverse;
       gap: 12px; padding: 0 35px;
       font-family: 'Almarai', sans-serif; font-size: 14px; color: var(--text-main); white-space: nowrap;
   }
   .taj-item strong { font-weight: 800; font-size: 16px; direction: ltr; display: flex; align-items: center; }
   
   .taj-sar-icon {
       display: inline-block; width: 16px; height: 16px; margin-right: 8px;
       background-color: currentColor; 
       -webkit-mask-size: contain; mask-size: contain;
       -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
       -webkit-mask-position: center; mask-position: center;
   }
   .taj-label { color: var(--brand-gold); font-weight: 700; } 
   .up { color: #2D8A39; } .down { color: #D93025; }
   
   .taj-pulse {
       display: inline-block; width: 8px; height: 8px;
       background-color: var(--brand-gold); border-radius: 50%; position: relative;
   }
   .taj-pulse::after {
       content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
       border-radius: 50%; border: 1px solid var(--brand-gold); animation: pulseRing 2s infinite;
   }
   @keyframes pulseRing {
       0% { transform: scale(0.5); opacity: 0; }
       50% { opacity: 1; }
       100% { transform: scale(1.5); opacity: 0; }
   }
   .taj-time {
       font-size: 12px; opacity: 0.6; color: var(--text-muted);
       border-left: 1px solid var(--border-hex); padding-left: 15px; margin-left: 10px;
   }
   
   /* --- MOBILE RESPONSIVE --- */
   @media (max-width: 768px) {
       .taj-ticker-wrap { height: 40px; }
       .has-taj-ticker { padding-top: 40px !important; }
       .taj-item { padding: 0 15px; font-size: 12px; }
   }

/* ==========================================================================
   TAJ ALAMEERA - LUXURY PRODUCT CARDS (Home + listings)
   Last import in app.scss, so these rules win over base theme.
   ========================================================================== */

/* Section title: gold underline accent to match hero */
.s-block__title h2 {
    position: relative;
    color: var(--text-main);
    font-family: 'Almarai', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    padding-bottom: 12px;
}
.s-block__title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45px;
    height: 3px;
    background: var(--brand-gold);
    border-radius: 10px;
}
[dir="ltr"] .s-block__title h2::after { right: auto; left: 0; }

/* Card shell */
.s-product-card-entry {
    background: #fff;
    border: 1px solid var(--border-hex);
    border-radius: 22px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.2, 1, 0.3, 1),
                border-color 0.5s ease;
}
.s-product-card-entry:hover {
    transform: translateY(-6px);
    border-color: var(--brand-gold);
    box-shadow: 0 24px 50px rgba(197, 160, 89, 0.18);
}

/* Image area: soft cream backdrop + gentle zoom on hover */
.s-product-card-entry .s-product-card-image {
    background: var(--soft-cream);
    overflow: hidden;
    border-radius: 0;
}
.s-product-card-entry .s-product-card-image img {
    transition: transform 1.1s cubic-bezier(0.2, 1, 0.3, 1);
}
.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.07);
}

/* Content padding + typography */
.s-product-card-entry .s-product-card-content {
    padding: 16px 18px 18px;
}
.s-product-card-content-title a {
    color: var(--text-main);
    font-family: 'Almarai', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}
.s-product-card-content-title a:hover {
    color: var(--brand-gold);
}

/* Price: gold, prominent */
.s-product-card-price,
.s-product-card-sale-price h4 {
    color: var(--brand-gold) !important;
    font-family: 'Almarai', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
}
.s-product-card-sale-price span {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Wishlist button: glass circle */
.s-product-card-entry .s-product-card-wishlist-btn {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-hex);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Add-to-cart button: outline gold, fills on hover */
.s-product-card-entry salla-add-product-button .btn,
.s-product-card-entry salla-add-product-button button {
    border-radius: 50px !important;
    border: 1px solid var(--brand-gold) !important;
    color: var(--brand-gold) !important;
    background: transparent !important;
    font-family: 'Almarai', sans-serif !important;
    font-weight: 700 !important;
    transition: 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
}
.s-product-card-entry salla-add-product-button .btn:hover,
.s-product-card-entry salla-add-product-button button:hover {
    background: var(--brand-gold) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(197, 160, 89, 0.3) !important;
}

/* Special (featured) card: subtle gold ring */
.s-product-card-special {
    border-radius: 28px;
}
.s-product-card-special:hover {
    box-shadow: 0 30px 60px rgba(197, 160, 89, 0.22);
}

/* Section spacing so blocks breathe under hero */
.taj-home-dynamic-blocks .s-block {
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .s-product-card-entry { border-radius: 18px; }
    .s-product-card-entry .s-product-card-content { padding: 12px 14px 14px; }
    .s-block__title h2 { font-size: 1.25rem; }
}