body {
      font-family: 'Alexandria', sans-serif;
      background-color: #050505;
      color: #FFFFFF;
      overflow-x: hidden;
      letter-spacing: -0.01em;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #050505;
    }
    ::-webkit-scrollbar-thumb {
      background: #1f1f1f;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #C6A15B;
    }

    /* Subtle hover gold underline */
    .nav-link {
      position: relative;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1.5px;
      bottom: -6px;
      right: 0;
      background-color: #C6A15B;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .16s ease-out;
    }
    .nav-link:hover::after {
      transform: scaleX(1);
    }

    /* Pulse animation for shop the look hotspots */
    @keyframes pulseRing {
      0% {
        transform: scale(1);
        opacity: .7;
      }
      70% {
        transform: scale(1.7);
        opacity: 0;
      }
      100% {
        transform: scale(1.7);
        opacity: 0;
      }
    }
    .hotspot-pulse {
      position: relative;
    }
    .hotspot-pulse::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid #C6A15B;
      border-radius: inherit;
      pointer-events: none;
      animation: pulseRing 2.2s infinite cubic-bezier(0.45, 0, 0.2, 1);
      animation-play-state: paused;
    }
    #shop-look.is-in-view .hotspot-pulse::before { animation-play-state: running; }
    body.layer-open #shop-look .hotspot-pulse::before { animation-play-state: paused; }

    /* Image zoom container */
    .img-zoom-container img {
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .img-zoom-container:hover img {
      transform: scale(1.04);
    }

    /* Quick Add Drawer & Modals */
    .backdrop-blur-luxury {
      background-color: rgba(5, 5, 5, .97);
    }


    /* 2026 refinement pass */
    :root { --announcement-height: 41px; }

    .nav-link.active-nav { color: #fff !important; }
    .nav-link.active-nav::after { transform: scaleX(1); }

    .premium-drawer-backdrop {
      position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.72);
      opacity: 0; pointer-events: none; visibility: hidden;
      transition: opacity .16s ease-out, visibility 0s .16s;
    }
    .premium-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }

    .premium-drawer-right {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
      width: min(380px, 92vw); background: #0B0B0B; border-left: 1px solid rgba(255,255,255,.08);
      transform: translateX(100%); visibility: hidden;
      transition: transform .18s cubic-bezier(.2,.8,.2,1), visibility 0s .18s;
      box-shadow: -8px 0 24px rgba(0,0,0,.4); display: flex; flex-direction: column;
    }
    .premium-drawer-right.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }

    .mobile-menu-link {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.07);
      color: #E8E4DB; font-size: 14px; transition: color .2s ease, padding .2s ease;
    }
    .mobile-menu-link:hover { color: #D9BE7A; padding-right: 4px; }

    .search-result-card {
      display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center;
      padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
      background: rgba(24,24,24,.52); transition: border-color .2s ease, background .2s ease;
    }
    .search-result-card:hover { border-color: rgba(198,161,91,.35); background: rgba(24,24,24,.8); }

    .wishlist-drawer-item {
      display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    [data-quick-add] { transition: opacity .2s ease, transform .2s ease; }

    @media (max-width: 1023px) {
      .header-main-inner { position: relative; }
      .header-brand-main {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        align-items: center !important; z-index: 2;
      }
    }

    @media (max-width: 639px) {
      .product-grid-2026 { gap: 12px !important; }
      .product-grid-2026 > .group > .p-4 { padding: 12px !important; }
      .product-grid-2026 h3 { font-size: 12px !important; line-height: 1.6; }
      .product-grid-2026 .text-base { font-size: 13px !important; }
      .product-grid-2026 .text-xs { font-size: 10px !important; }
      .product-grid-2026 [data-quick-add] { opacity: 1 !important; transform: none !important; }
      .product-grid-2026 [data-quick-add] button { padding-top: 8px !important; padding-bottom: 8px !important; }
    }

    .header-main-inner { height: 100px; }
    .site-logo { display: block; width: 132px; height: 86px; object-fit: contain; }
    #hero .hero-copy { max-width: 1000px; margin-inline: auto; text-align: center; }
    #hero { align-items: flex-end; height: calc(100svh - var(--announcement-height) - 100px); min-height: 560px; }
    #hero video { filter: brightness(.94); }
    #hero .hero-content { padding-bottom: clamp(48px, 8vh, 80px); }
    #hero .hero-title {
      display: flex; justify-content: center; align-items: baseline; gap: .23em;
      font-family: 'IBM Plex Sans Arabic', sans-serif;
      font-size: clamp(40px, 4.4vw, 76px); font-weight: 400;
      line-height: 1.35; letter-spacing: 0; color: #e3bd70;
      margin: 0 0 16px; white-space: nowrap;
      text-shadow: 0 2px 14px rgba(0,0,0,.35);
    }
    #hero .hero-title-accent { color: inherit; font-weight: 400; }
    #hero .hero-ornament { display: flex; align-items: center; justify-content: center; width: min(560px, 80%); margin: 0 auto 12px; color: #dcb669; }
    #hero .hero-ornament span { height: 1px; flex: 1; background: linear-gradient(to right, transparent, #b48b3b); }
    #hero .hero-ornament span:last-child { background: linear-gradient(to left, transparent, #b48b3b); }
    #hero .hero-ornament svg { flex-shrink: 0; }
    #hero .hero-description { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(17px, 1.55vw, 24px); line-height: 1.7; color: #f2eee6; margin: 0 auto 30px; text-wrap: balance; }
    #hero .hero-actions { justify-content: center; gap: 24px; }
    #hero .hero-actions a {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 54px; min-width: 202px; padding: 12px 25px; gap: 12px; font-size: 15px; font-weight: 600;
      transition: color .16s ease-out, background-color .16s ease-out, filter .16s ease-out, transform .12s ease-out;
      -webkit-tap-highlight-color: transparent;
    }
    #hero .hero-primary { background: linear-gradient(110deg, #caa047, #e2bc65 48%, #caa047); color: #090909; border: 1px solid #ddb35c; border-radius: 12px; box-shadow: 0 0 24px rgba(219,171,62,.34), 0 5px 14px rgba(0,0,0,.25); }
    #hero .hero-secondary { color: #e5c581; background: rgba(5,5,5,.4); border: 1px solid #ddb35c; border-radius: 12px; text-decoration: none; }
    /* Keep the gradient intact: replacing it with a solid background causes
       a visible flash because background-image cannot interpolate. */
    @media (hover: hover) and (pointer: fine) {
      #hero .hero-primary:hover { filter: brightness(1.07); }
      #hero .hero-secondary:hover { color: #f1d79e; background-color: rgba(198,161,91,.12); }
    }
    #hero .hero-actions a:active { transform: translateY(1px); }
    #hero .hero-primary:active { filter: brightness(.96); }
    #hero .hero-secondary:active { background-color: rgba(198,161,91,.2); }
    #hero .hero-actions a:focus-visible { outline: 2px solid #f1d79e; outline-offset: 4px; }
    #hero .hero-shade {
      background: linear-gradient(180deg, rgba(5,5,5,.04) 25%, rgba(5,5,5,.12) 48%, rgba(5,5,5,.68) 85%, #050505);
    }
    @media (min-width: 1024px) {
      #hero .hero-content { padding-bottom: clamp(32px, 5vh, 48px); }
      #hero .hero-copy { max-width: 760px; }
      #hero .hero-title { font-size: clamp(34px, 3vw, 50px); line-height: 1.25; margin-bottom: 8px; }
      #hero .hero-ornament { width: min(440px, 76%); margin-bottom: 7px; }
      #hero .hero-ornament svg { width: 48px; height: 14px; }
      #hero .hero-description { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; margin-bottom: 20px; }
      #hero .hero-actions { gap: 20px; }
      #hero .hero-actions a { min-width: 168px; min-height: 44px; padding: 9px 18px; gap: 9px; font-size: 12px; border-radius: 9px; }
    }
    /* Animate only composited properties on large, fixed surfaces. Closed
       layers leave the paint/hit-test tree after their exit transition. */
    html { scrollbar-gutter: stable; }
    #main-header { transition: background-color .16s ease-out; }
    #announcement-bar { transition: none; }
    #cart-drawer-backdrop, #search-modal, #story-modal {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: opacity .16s ease-out, visibility 0s;
    }
    #cart-drawer-backdrop.opacity-0, #search-modal.opacity-0, #story-modal.opacity-0 {
      visibility: hidden;
      transition-delay: 0s, .16s;
    }
    #cart-drawer {
      transition: transform .18s cubic-bezier(.2,.8,.2,1), visibility 0s;
      box-shadow: 8px 0 24px rgba(0,0,0,.4);
    }
    #cart-drawer[class~="-translate-x-full"] {
      visibility: hidden;
      transition-delay: 0s, .18s;
    }
    #search-modal { overflow-y: auto; }
    #toast { transition: opacity .16s ease-out, transform .18s ease-out; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
/* Isolate search visually while keeping its text and controls sharp. */
#search-modal{background:rgba(5,8,8,.82);z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overscroll-behavior:contain}
#search-modal.opacity-0{-webkit-backdrop-filter:none;backdrop-filter:none}
#search-modal #search-input::placeholder{color:#a5aaa4}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#search-modal{background:rgba(5,8,8,.97)}}