/** Shopify CDN: Minification failed

Line 522:1 Expected "}" to go with "{"

**/
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cairo:wght@300;400;500;600;700;900&family=El+Messiri:wght@400;500;600;700&display=swap');

@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-card-border: hsl(var(--card-border));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-popover-border: hsl(var(--popover-border));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-border: var(--primary-border);

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-secondary-border: var(--secondary-border);

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-muted-border: var(--muted-border);

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-accent-border: var(--accent-border);

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-destructive-border: var(--destructive-border);

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  --color-sidebar: hsl(var(--sidebar));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-primary-border: var(--sidebar-primary-border);
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-accent-border: var(--sidebar-accent-border);
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  --font-sans: var(--app-font-sans);
  --font-serif: var(--app-font-serif);
  --font-mono: var(--app-font-mono);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* LIGHT LUXURY THEME */
:root {
  --button-outline: rgba(200,133,74, .25);
  --badge-outline: rgba(200,133,74, .15);
  --opaque-button-border-intensity: 8;
  --elevate-1: rgba(160,82,45, .04);
  --elevate-2: rgba(160,82,45, .08);

  /* Warm ivory background */
  --background: 40 50% 95%;
  --foreground: 28 28% 13%;
  --border: 35 32% 84%;
  --input: 38 40% 90%;
  --ring: 28 54% 54%;

  /* Clean warm surface card */
  --card: 40 60% 99%;
  --card-foreground: 28 28% 13%;
  --card-border: 35 32% 86%;

  --sidebar: 40 50% 97%;
  --sidebar-foreground: 28 28% 13%;
  --sidebar-border: 35 32% 84%;
  --sidebar-primary: 28 54% 54%;
  --sidebar-primary-foreground: 40 60% 99%;
  --sidebar-accent: 36 40% 90%;
  --sidebar-accent-foreground: 28 28% 13%;
  --sidebar-ring: 28 54% 54%;

  --popover: 40 60% 99%;
  --popover-foreground: 28 28% 13%;
  --popover-border: 35 32% 86%;

  /* Desert gold as primary */
  --primary: 28 54% 50%;
  --primary-foreground: 40 60% 99%;

  --secondary: 36 38% 90%;
  --secondary-foreground: 28 28% 16%;

  --muted: 38 36% 91%;
  --muted-foreground: 30 14% 38%;

  --accent: 28 54% 54%;
  --accent-foreground: 40 60% 99%;

  --destructive: 14 74% 45%;
  --destructive-foreground: 40 60% 99%;

  --chart-1: 28 54% 54%;
  --chart-2: 16 54% 37%;
  --chart-3: 35 54% 62%;
  --chart-4: 20 50% 50%;
  --chart-5: 39 55% 73%;

  --app-font-sans: 'Cairo', sans-serif;
  --app-font-serif: 'Amiri', serif;
  --app-font-mono: Menlo, monospace;
  --radius: 0.375rem;

  --shadow-2xs: 0px 1px 2px 0px rgba(90,60,30,0.06);
  --shadow-xs: 0px 2px 4px 0px rgba(90,60,30,0.07);
  --shadow-sm: 0px 2px 8px 0px rgba(90,60,30,0.08);
  --shadow: 0px 4px 12px 0px rgba(90,60,30,0.10);
  --shadow-md: 0px 6px 20px 0px rgba(90,60,30,0.12);
  --shadow-lg: 0px 10px 30px 0px rgba(90,60,30,0.14);
  --shadow-xl: 0px 20px 50px 0px rgba(90,60,30,0.16);
  --shadow-2xl: 0px 30px 60px 0px rgba(90,60,30,0.20);
  --tracking-normal: 0.01em;
  --spacing: 0.25rem;

  --primary-border: hsl(28, 54%, 46%);
  --secondary-border: hsl(36, 30%, 80%);
  --muted-border: hsl(38, 30%, 84%);
  --accent-border: hsl(28, 54%, 46%);
  --destructive-border: hsl(14, 74%, 40%);
  --sidebar-primary-border: hsl(28, 54%, 46%);
  --sidebar-accent-border: hsl(36, 28%, 80%);
}

/* CSS custom properties for brand colors (non-HSL) */
:root {
  --gold: #C8854A;
  --gold-light: #D4A76A;
  --gold-dark: #A0522D;
  /* Readable deep gold for SMALL gold text on light surfaces (AA: >=4.5:1 on
     ivory/white/footer/sand). Bright --gold (#C8854A) only reaches ~2.5-3.0 on
     these surfaces, so any gold text smaller than 18px on a light background
     must use --gold-text instead. Bright --gold stays for large headings,
     icons, borders, and text over photos. */
  --gold-text: #8A5A1F;
  --black: #0A0907;
  --cream: #F5F0E8;
  --ivory: #FAF5EC;
  --sand: #F1E7D6;
  --charcoal: #2A2018;
  --dark-beige: #6B3420;
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    direction: rtl;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    overflow-x: hidden;
  }

  h1, h2, h3 {
    font-family: 'El Messiri', sans-serif;
    font-weight: 700;
  }

  .font-decorative {
    font-family: 'Amiri', serif;
  }

  .font-heading {
    font-family: 'El Messiri', sans-serif;
  }

  .font-body {
    font-family: 'Cairo', sans-serif;
  }
}

/* Gold shimmer animation */
@keyframes gold-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(200,133,74,0.2); }
  50% { box-shadow: 0 0 25px rgba(200,133,74,0.5); }
}

@keyframes smoke-drift {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(-20px) translateX(10px) scale(1.1); opacity: 0.6; }
  100% { transform: translateY(-40px) translateX(-5px) scale(0.9); opacity: 0; }
}

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Utility classes */
.gold-shimmer {
  background: linear-gradient(
    90deg,
    #C8854A 0%,
    #D4A76A 25%,
    #C8854A 50%,
    #A0522D 75%,
    #C8854A 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-shimmer 3s linear infinite;
}

.gold-gradient {
  background: linear-gradient(135deg, #A0522D 0%, #C8854A 40%, #D4A76A 60%, #C8854A 100%);
}

.text-gold {
  color: #C8854A;
}

/* Readable gold for small accent text on light surfaces (meets WCAG AA). */
.text-gold-readable {
  color: var(--gold-text);
}

.btn-gold {
  background: linear-gradient(135deg, #A0522D 0%, #C8854A 50%, #D4A76A 100%);
  color: #0A0907;
  font-weight: 700;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

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

.btn-gold:hover::before {
  left: 100%;
}

.btn-gold:hover {
  box-shadow: 0 0 25px rgba(200,133,74,0.5);
  transform: translateY(-1px);
}

.btn-outline-gold {
  border: 1px solid #C8854A;
  color: #C8854A;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline-gold:hover {
  background: rgba(200,133,74,0.1);
  box-shadow: 0 0 15px rgba(200,133,74,0.3);
}

/* Floating animation */
.float-anim {
  animation: float 3s ease-in-out infinite;
}

/* Card hover effect */
.luxury-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.luxury-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(90,60,30,0.15), 0 0 20px rgba(200,133,74,0.18);
}

/* Image zoom container */
.img-zoom-wrap {
  overflow: hidden;
}

.img-zoom-wrap img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.img-zoom-wrap:hover img {
  transform: scale(1.08);
}

/* Gold divider */
.gold-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8854A, transparent);
  margin: 0 auto;
}

/* Overlay gradient for hero */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,9,7,0.3) 0%,
    rgba(10,9,7,0.5) 40%,
    rgba(10,9,7,0.8) 80%,
    rgba(10,9,7,0.95) 100%
  );
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track { background: #F1E7D6; }
::-webkit-scrollbar-thumb { background: #C8854A; border-radius: 2px; }

/* Section title decoration */
/* Small uppercase gold eyebrow label. Used on light surfaces (AA-readable
   deep gold). Over photos (e.g. Hero), restore bright gold with an inline
   color of #C8854A. */
.section-label {
  font-family: 'Cairo', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold-text);
  text-transform: uppercase;
}

/* Swiper RTL overrides */
.swiper-rtl .swiper-button-next { right: auto; left: 10px; }
.swiper-rtl .swiper-button-prev { left: auto; right: 10px; }

/* Swiper custom arrows */
.swiper-button-next,
.swiper-button-prev {
  color: #C8854A !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255,251,244,0.92);
  border: 1px solid rgba(200,133,74,0.3);
  border-radius: 50%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 14px !important;
}

.swiper-pagination-bullet {
  background: #C8854A !important;
  opacity: 0.4 !important;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

/* Animate on scroll utility */
.anim-ready {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.anim-ready.anim-visible {
  opacity: 1;
  transform: none;
}

/* Selection color */
::selection {
  background: rgba(200,133,74,0.3);
  color: #2A2018;
}

/* Stars */
.star-filled { color: #C8854A; }
.star-empty { color: rgba(200,133,74,0.3); }

/* Swiper overrides for collections */
.collections-swiper .swiper-slide {
  height: auto;
}

@layer utilities {
  input[type="search"]::-webkit-search-cancel-button { @apply hidden; }

  .no-default-hover-elevate {}
  .no-default-active-elevate {}

  .toggle-elevate::before,
  .toggle-elevate-2::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    z-index: -1;
  }

  .toggle-elevate.toggle-elevated::before {
    background-color: var(--elevate-2);
  }

  .border.toggle-elevate::before { inset: -1px; }

  .hover-elevate:not(.no-default-hover-elevate),
  .active-elevate:not(.no-default-active-elevate),
  .hover-elevate-2:not(.no-default-hover-elevate),
  .active-elevate-2:not(.no-default-active-elevate) {
    position: relative;
    z-index: 0;
  }

  .hover-elevate:not(.no-default-hover-elevate)::after,
  .active-elevate:not(.no-default-active-elevate)::after,
  .hover-elevate-2:not(.no-default-hover-elevate)::after,
  .active-elevate-2:not(.no-default-active-elevate)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    z-index: 999;
  }

  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
  .active-elevate:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-1);
  }

  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
  .active-elevate-2:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-2);
  }

  .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
    inset: -1px;
  }

/* استهداف الزر الثاني مباشرة داخل صندوق أزرار البانر */
.banner__buttons a:last-child, 
.banner__buttons a+a,
.banner__buttons *:nth-child(2) {
    background-color: transparent !important;
    background: transparent !important;
    color: #C8854A !important;
    border: 2px solid #C8854A !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease-in-out !important;
}

/* تأثير الماوس للزر الثاني */
.banner__buttons a:last-child:hover, 
.banner__buttons a+a:hover,
.banner__buttons *:nth-child(2):hover {
    background-color: #C8854A !important;
    background: #C8854A !important;
    color: #0A0907 !important;
    box-shadow: 0 0 15px rgba(200, 133, 74, 0.5) !important;
}