/* ============================================================
   ABAYA DISTRICT — LUXURY DESIGN LAYER
   Transforms the base template into a high-end experience.
   Load AFTER styles.css.
   ============================================================ */

/* ── Design Token Overrides ── */
:root {
  /* True jewel-tone gold — luminous, not sandy */
  --gold:         #C8A951;
  --gold-dark:    #9E7E33;
  --gold-light:   #E8D28C;
  --gold-pale:    #F7EEC8;
  --gold-shimmer: rgba(200,169,81,.18);

  /* Obsidian palette — architectural darkness */
  --obsidian:     #080705;
  --onyx:         #111009;
  --noir:         #1A1812;
  --charcoal:     #1D1C1A;
  --charcoal-lt:  #3A3835;

  /* Luxury neutrals */
  --ivory:        #FBFAF7;
  --parchment:    #F4EFE6;
  --cream:        #F4EFE6;
  --cream-dark:   #EAE3D5;
  --white:        #FEFEFE;
  --muted:        #8E8880;
  --border:       #E2D9CB;

  /* Plum — deeper, more saturated */
  --plum:         #2E1525;
  --plum-lt:      #4A2240;
  --plum-dk:      #1A0B16;

  /* Shadows — warm and layered */
  --shadow-xs:    0 1px 4px rgba(8,7,5,.07);
  --shadow-sm:    0 4px 20px rgba(8,7,5,.1);
  --shadow-md:    0 10px 40px rgba(8,7,5,.14);
  --shadow-lg:    0 20px 64px rgba(8,7,5,.18);
  --shadow-gold:  0 8px 40px rgba(200,169,81,.15), 0 2px 10px rgba(200,169,81,.1);

  /* Luxury transitions */
  --transition:          all .35s cubic-bezier(.25,.46,.45,.94);
  --transition-fast:     all .18s cubic-bezier(.25,.46,.45,.94);
  --transition-slow:     all .6s cubic-bezier(.25,.46,.45,.94);

  /* Radii — more architectural */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-pill:  40px;
  --radius-sharp: 2px;   /* near-square for ultra-luxury */
}

/* ── Global Base Refinements ── */
html { font-size: 16px; }

body {
  background-color: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); font-weight: 600; font-style: italic; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 600; font-style: italic; }

/* ── Luxury Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--parchment); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

@keyframes shimmerSweep {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

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

@keyframes luxuryFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,169,81,0); }
  60%       { box-shadow: 0 0 0 10px rgba(200,169,81,.1); }
}

@keyframes scaleReveal {
  from { opacity: 0; transform: scale(.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   ANNOUNCEMENT BAR
   ================================================================ */

.announcement-bar {
  background: var(--obsidian);
  border-bottom: 1px solid rgba(200,169,81,.14);
  letter-spacing: .07em;
  font-size: .72rem;
}
.announcement-bar::before { opacity: .5; }
.announcement-inner strong { color: var(--gold-light); letter-spacing: .1em; }
.announcement-close:hover { color: var(--gold); }

/* ================================================================
   NAVBAR — DARK OBSIDIAN LUXURY
   ================================================================ */

.navbar-main {
  background: var(--obsidian);
  border-bottom: 1px solid rgba(200,169,81,.12);
}
.navbar-main.scrolled {
  background: rgba(8,7,5,.97);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 4px 40px rgba(0,0,0,.5), 0 1px 0 rgba(200,169,81,.1);
  border-bottom-color: rgba(200,169,81,.18);
}

/* Brand mark */
.navbar-brand-wrap .brand-mark {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%);
  box-shadow: 0 2px 16px rgba(200,169,81,.28);
  border-radius: 50%;
}
.brand-name {
  color: var(--white);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.brand-sub {
  color: var(--gold);
  letter-spacing: .16em;
  font-size: .58rem;
}

/* Nav links */
.nav-links .nav-item > a {
  color: rgba(255,255,255,.62);
  font-size: .82rem;
  letter-spacing: .05em;
  border-radius: var(--radius-sharp);
}
.nav-links .nav-item > a:hover,
.nav-links .nav-item > a.active {
  color: var(--gold);
  background: rgba(200,169,81,.08);
}

/* Nav icon buttons */
.nav-icon-btn {
  color: rgba(255,255,255,.62);
  border-radius: var(--radius-sharp);
}
.nav-icon-btn:hover {
  background: rgba(200,169,81,.1);
  color: var(--gold);
}

/* Hamburger on dark bg */
.hamburger span { background: rgba(255,255,255,.75); }

/* Cart badge */
.cart-badge { background: var(--gold); color: var(--obsidian); font-weight: 800; }

/* ================================================================
   MEGA MENU — DARK LUXURY
   ================================================================ */

.mega-menu {
  background: var(--onyx);
  border: 1px solid rgba(200,169,81,.14);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.mega-col h6 {
  color: var(--gold);
  letter-spacing: .16em;
  border-bottom-color: rgba(200,169,81,.18);
}
.mega-col ul li a {
  color: rgba(255,255,255,.5);
  font-size: .82rem;
  letter-spacing: .02em;
}
.mega-col ul li a:hover { color: var(--gold); padding-left: .4rem; }

/* User dropdown */
.user-dropdown {
  background: var(--onyx);
  border: 1px solid rgba(200,169,81,.14);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  border-radius: var(--radius-md);
}
.user-dropdown a { color: rgba(255,255,255,.55); font-size: .82rem; }
.user-dropdown a:hover { background: rgba(200,169,81,.07); color: var(--gold); }
.user-dropdown .dropdown-divider { background: rgba(255,255,255,.06); }

/* Mobile Nav */
.mobile-nav {
  background: var(--onyx);
  border-right: 1px solid rgba(200,169,81,.12);
}
.mobile-nav a { color: rgba(255,255,255,.55); }
.mobile-nav a:hover { background: rgba(200,169,81,.08); color: var(--gold); }
.mobile-nav .nav-section-title { color: var(--gold); letter-spacing: .18em; }
.mobile-nav-close {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
}
.mobile-nav-close:hover { background: var(--gold); color: var(--obsidian); }

/* ================================================================
   TRUST BAR
   ================================================================ */

.trust-bar {
  background: var(--noir);
  border-bottom: 1px solid rgba(200,169,81,.1);
  padding: 1rem 0;
}
.trust-item {
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.55);
}
.trust-item svg { color: var(--gold); }

/* ================================================================
   ABAYA CATEGORY PILLS
   ================================================================ */

.abaya-cats-section {
  background: var(--ivory);
  border-bottom: 1px solid var(--border);
  padding: .85rem 0;
}
.abaya-cat-pill {
  border-radius: var(--radius-sharp);
  letter-spacing: .08em;
  font-size: .76rem;
  padding: .45rem 1.1rem;
  border: 1px solid var(--border);
  background: var(--ivory);
  color: var(--charcoal-lt);
  transition: var(--transition-fast);
}
.abaya-cat-pill:hover,
.abaya-cat-pill.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--obsidian);
  font-weight: 600;
}

/* ================================================================
   LUXURY BUTTONS
   ================================================================ */

.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--obsidian);
  border: none;
  border-radius: var(--radius-sharp);
  letter-spacing: .12em;
  font-weight: 700;
  padding: .9rem 2.4rem;
  font-size: .8rem;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(200,169,81,.2);
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--obsidian);
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover::after {
  animation: shimmerSweep .55s ease forwards;
}
.btn-gold:active { transform: translateY(-1px); }

.btn-outline-gold {
  background: transparent;
  border: 1px solid rgba(200,169,81,.55);
  border-radius: var(--radius-sharp);
  letter-spacing: .12em;
  font-weight: 600;
  padding: .9rem 2.4rem;
  font-size: .8rem;
  color: var(--gold);
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.btn-outline-gold:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-color: var(--gold);
  color: var(--obsidian);
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

/* Dark-context outline variant */
.btn-outline-dark {
  border-radius: var(--radius-sharp);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.8);
  letter-spacing: .1em;
}
.btn-outline-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,169,81,.06);
}

/* ================================================================
   SECTION HEADERS
   ================================================================ */

.section-label {
  letter-spacing: .18em;
  font-size: 1.05rem;
  color: var(--gold);
}
.section-header h2 {
  font-style: italic;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.divider-gold {
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  width: 100px;
}
.divider-gold::after {
  background: var(--gold);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 2px var(--parchment);
}
.bg-white .divider-gold::after { box-shadow: 0 0 0 2px var(--ivory); }
.ornament-divider::before,
.ornament-divider::after {
  width: 56px;
  background: linear-gradient(90deg, transparent, rgba(200,169,81,.5));
}
.ornament-divider::after {
  background: linear-gradient(270deg, transparent, rgba(200,169,81,.5));
}

/* ================================================================
   HERO SLIDER
   ================================================================ */

.hero-slider { background: var(--obsidian); }
.hero-slide-overlay {
  background: linear-gradient(100deg, rgba(8,7,5,.9) 0%, rgba(8,7,5,.42) 52%, rgba(8,7,5,.12) 100%);
}
.hero-content h1 {
  font-style: italic;
  letter-spacing: -.02em;
  text-shadow: 0 4px 32px rgba(0,0,0,.4);
  line-height: 1.1;
}
.hero-content p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.72);
  letter-spacing: .01em;
  max-width: 440px;
}
.hero-tag {
  background: rgba(200,169,81,.12);
  border: 1px solid rgba(200,169,81,.38);
  color: var(--gold-light);
  letter-spacing: .2em;
  font-size: .68rem;
  border-radius: var(--radius-sharp);
  padding: .35rem 1.1rem;
}
.hero-dot.active {
  width: 28px;
  background: var(--gold);
}
.hero-dot {
  background: rgba(255,255,255,.3);
  border-radius: 2px;
}
.hero-nav-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(200,169,81,.3);
  border-radius: var(--radius-sharp);
  backdrop-filter: blur(8px);
  width: 48px;
  height: 48px;
}
.hero-nav-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--obsidian);
}

/* ================================================================
   CATEGORY CARDS
   ================================================================ */

.category-card { border-radius: var(--radius-md); }
.category-card-img { transition: transform .8s cubic-bezier(.25,.46,.45,.94); }
.category-card:hover .category-card-img { transform: scale(1.08); }
.category-card-overlay {
  background: linear-gradient(180deg,
    transparent 20%,
    rgba(8,7,5,.35) 60%,
    rgba(8,7,5,.9) 100%
  );
}
.category-card-title {
  font-size: 1.65rem;
  letter-spacing: .01em;
  font-style: italic;
}
.category-card-count {
  color: var(--gold-light);
  letter-spacing: .1em;
  font-size: .75rem;
}
.category-card-btn {
  border-radius: var(--radius-sharp);
  background: rgba(200,169,81,.15);
  border: 1px solid rgba(200,169,81,.35);
  backdrop-filter: blur(8px);
}
.category-card:hover .category-card-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--obsidian);
}

/* ================================================================
   PRODUCT CARDS — REFINED LUXURY
   ================================================================ */

.product-card {
  background: var(--ivory);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 60px rgba(8,7,5,.16),
    0 4px 16px rgba(8,7,5,.08),
    0 0 0 1px rgba(200,169,81,.18);
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color .4s ease;
  pointer-events: none;
  z-index: 1;
}
.product-card:hover::before { border-color: rgba(200,169,81,.22); }

.product-card-img-wrap { background: var(--parchment); }
.product-card-body { padding: 1.25rem; }

/* Vendor label */
.product-vendor {
  letter-spacing: .14em;
  font-size: .68rem;
}

/* Product name */
.product-name {
  font-size: 1rem;
  letter-spacing: .01em;
  line-height: 1.35;
}
.product-name a:hover { color: var(--gold); }

/* Price */
.price-current {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: .01em;
}

/* Badges */
.product-badge {
  border-radius: var(--radius-sharp);
  letter-spacing: .12em;
  font-size: .65rem;
}
.badge-new  { background: var(--obsidian); color: var(--gold-light); }
.badge-hot  { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--obsidian); }
.badge-sale { background: #7A2E2E; color: var(--white); }

/* Action buttons */
.product-actions { bottom: .85rem; }
.product-action-btn {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-sharp);
  font-size: .72rem;
  letter-spacing: .07em;
  padding: .45rem .95rem;
  box-shadow: 0 4px 16px rgba(8,7,5,.1);
}
.product-action-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--obsidian);
}

/* Wishlist button */
.product-wishlist-btn {
  background: rgba(251,250,247,.92);
  border: none;
  border-radius: var(--radius-sharp);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(8,7,5,.12);
}
.product-wishlist-btn:hover {
  background: var(--gold);
  color: var(--obsidian);
}

/* Stars */
.stars { color: var(--gold); letter-spacing: .04em; }
.rating-count { color: var(--muted); font-size: .72rem; }

/* ================================================================
   VENDOR CARDS
   ================================================================ */

.vendor-card {
  background: var(--ivory);
  border: 1px solid rgba(200,169,81,.12);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.vendor-card:hover {
  box-shadow: 0 16px 48px rgba(8,7,5,.14), 0 0 0 1px rgba(200,169,81,.25);
  border-color: rgba(200,169,81,.3);
  transform: translateY(-5px);
}
.vendor-card:hover .vendor-avatar { border-color: var(--gold); }
.vendor-avatar {
  border: 2px solid var(--cream-dark);
  border-radius: 50%;
}
.vendor-name { letter-spacing: .01em; }
.vendor-stat span:first-child {
  font-size: 1.3rem;
  letter-spacing: -.01em;
}
.vendor-stat span:last-child { letter-spacing: .1em; }
.vendor-tag {
  border-radius: var(--radius-sharp);
  background: var(--parchment);
  font-size: .68rem;
  letter-spacing: .06em;
}
.vendor-tag:hover {
  background: rgba(200,169,81,.12);
  color: var(--gold-dark);
}
.badge-verified {
  border-radius: var(--radius-sharp);
  background: rgba(200,169,81,.1);
  color: var(--gold-dark);
  letter-spacing: .08em;
}

/* ================================================================
   EDITORIAL / LOOKBOOK SECTION
   ================================================================ */

.editorial-section {
  background: var(--obsidian);
  position: relative;
  overflow: hidden;
}
.editorial-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(200,169,81,.05) 0%, transparent 70%),
    var(--pattern-star-dim);
  pointer-events: none;
}
.editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
}
.editorial-image { position: relative; overflow: hidden; }
.editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.editorial-section:hover .editorial-image img { transform: scale(1.04); }
.editorial-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(8,7,5,.6) 100%);
  pointer-events: none;
}
.editorial-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4.5rem;
  position: relative;
  z-index: 1;
  background: transparent;  /* override styles.css cream bg */
}
.editorial-content::before { display: none; } /* remove star pattern overlay */
.editorial-content h2 {
  color: var(--white);
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.editorial-content p {
  color: rgba(255,255,255,.58);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 2.5rem;
}
.editorial-arabic {
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: 1.8rem;
  color: var(--gold);
  opacity: .65;
  letter-spacing: .06em;
  display: block;
  margin-bottom: .75rem;
  line-height: 1.4;
}
.editorial-section .section-label { color: rgba(200,169,81,.8); letter-spacing: .2em; }
.editorial-section .divider-gold {
  background: linear-gradient(90deg, transparent, rgba(200,169,81,.5) 25%, rgba(200,169,81,.5) 75%, transparent);
}
.editorial-section .divider-gold::after {
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--obsidian);
}
.editorial-section .ornament-divider::before { background: linear-gradient(90deg, transparent, rgba(200,169,81,.4)); }
.editorial-section .ornament-divider::after { background: linear-gradient(270deg, transparent, rgba(200,169,81,.4)); }

/* ================================================================
   NEWSLETTER SECTION
   ================================================================ */

.newsletter-section {
  background: var(--noir);
  padding: var(--spacing-xl) 0;
  border-top: 1px solid rgba(200,169,81,.12);
  border-bottom: 1px solid rgba(200,169,81,.12);
}
.newsletter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(200,169,81,.05) 0%, transparent 70%),
    var(--pattern-star-dim);
  pointer-events: none;
  opacity: .6;
}
.newsletter-inner h2 {
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--white);
}
.newsletter-inner p { color: rgba(255,255,255,.55); line-height: 1.8; }
.newsletter-inner .section-label { color: rgba(200,169,81,.85); letter-spacing: .2em; }
.newsletter-form {
  max-width: 460px;
}
.newsletter-form input {
  border-radius: var(--radius-sharp);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(200,169,81,.22);
}
.newsletter-form input:focus { border-color: var(--gold); }
.newsletter-form .btn-gold { border-radius: var(--radius-sharp); flex-shrink: 0; }

/* ================================================================
   QUICK VIEW MODAL
   ================================================================ */

.modal-backdrop-custom { background: rgba(8,7,5,.75); }
.modal-box {
  border-radius: var(--radius-md);
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
  border: 1px solid rgba(200,169,81,.1);
}
.modal-gallery { background: var(--parchment); }
.modal-close {
  background: rgba(8,7,5,.6);
  color: rgba(255,255,255,.8);
  border-radius: var(--radius-sharp);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.modal-close:hover { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }
.size-btn { border-radius: var(--radius-sharp); letter-spacing: .05em; }
.size-btn:hover, .size-btn.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--obsidian);
}
.qty-btn { background: var(--parchment); border-radius: var(--radius-sharp); }
.qty-btn:hover { background: var(--gold); color: var(--obsidian); }
.qty-control { border-radius: var(--radius-sharp); border-color: var(--border); }

/* ================================================================
   DRAWERS — CART & WISHLIST
   ================================================================ */

.cart-drawer,
.wishlist-drawer {
  background: var(--ivory);
  box-shadow: -8px 0 64px rgba(8,7,5,.4);
}
.drawer-header {
  background: var(--obsidian);
  border-bottom: 1px solid rgba(200,169,81,.14);
  padding: 1.4rem 1.75rem;
}
.drawer-header h5 {
  color: var(--white);
  letter-spacing: .02em;
  font-style: italic;
}
.cart-count-label { color: var(--gold); }
.drawer-close {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  border-radius: var(--radius-sharp);
  border: 1px solid rgba(255,255,255,.06);
}
.drawer-close:hover { background: var(--gold); color: var(--obsidian); }
.drawer-cart-item { padding: 1.1rem 1.75rem; }
.drawer-cart-item:hover { background: rgba(200,169,81,.04); }
.drawer-item-img { border-radius: var(--radius-sharp); background: var(--parchment); }
.drawer-item-vendor { letter-spacing: .12em; }
.drawer-item-name { font-style: italic; }
.drawer-item-price {
  font-family: var(--font-serif);
  color: var(--charcoal);
  font-weight: 700;
}
.drawer-item-remove { font-size: .72rem; letter-spacing: .04em; transition: var(--transition-fast); }
.drawer-footer {
  background: var(--parchment);
  border-top: 1px solid var(--border);
  padding: 1.5rem 1.75rem;
}
.drawer-subtotal {
  font-size: .92rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.drawer-shipping-note { font-size: .75rem; color: var(--muted); letter-spacing: .02em; }
.drawer-cta { gap: .6rem; }
.drawer-cta .btn-gold,
.drawer-cta .btn-outline-gold { border-radius: var(--radius-sharp); font-size: .75rem; }

/* ================================================================
   SEARCH OVERLAY
   ================================================================ */

.search-overlay { background: rgba(8,7,5,.97); backdrop-filter: blur(20px); }
.search-input-wrap {
  border-radius: var(--radius-sharp);
  border: 1px solid rgba(200,169,81,.2);
  box-shadow: 0 20px 60px rgba(8,7,5,.5);
}
.search-submit-btn {
  background: var(--gold);
  color: var(--obsidian);
  border-radius: var(--radius-sharp);
  letter-spacing: .1em;
  font-weight: 700;
}
.search-submit-btn:hover { background: var(--gold-light); }
.search-chip {
  border-radius: var(--radius-sharp);
  border-color: rgba(200,169,81,.2);
  color: rgba(255,255,255,.7);
  letter-spacing: .05em;
  font-size: .78rem;
}
.search-chip:hover { background: var(--gold); border-color: var(--gold); color: var(--obsidian); }
.search-close-btn {
  border-radius: var(--radius-sharp);
  background: rgba(200,169,81,.1);
  border: 1px solid rgba(200,169,81,.2);
  color: rgba(255,255,255,.7);
}
.search-close-btn:hover { background: var(--gold); color: var(--obsidian); }

/* ================================================================
   SHOP SIDEBAR
   ================================================================ */

.shop-sidebar { background: var(--ivory); border-color: var(--border); border-radius: var(--radius-md); }
.sidebar-section { background: var(--ivory); }
.sidebar-title { letter-spacing: .1em; font-size: .72rem; }
.filter-item input[type="checkbox"] { accent-color: var(--gold); }
.color-dot-label { font-size: .63rem; letter-spacing: .04em; }
.sort-select { border-radius: var(--radius-sharp); background: var(--ivory); font-size: .82rem; }
.view-btn { border-radius: var(--radius-sharp); }
.view-btn.active, .view-btn:hover { background: var(--parchment); color: var(--gold); }

/* ================================================================
   CART PAGE
   ================================================================ */

.cart-item { background: var(--ivory); border-color: var(--border); border-radius: var(--radius-md); }
.cart-item:hover { box-shadow: var(--shadow-sm); }
.cart-item-img { border-radius: var(--radius-sharp); background: var(--parchment); }
.cart-attr { background: var(--parchment); border-radius: var(--radius-sharp); letter-spacing: .04em; font-size: .7rem; }
.order-summary { background: var(--ivory); border-color: var(--border); border-radius: var(--radius-md); }
.summary-row.total .price-current { color: var(--gold-dark); }
.promo-input-wrap input {
  border-radius: var(--radius-sharp);
  background: var(--ivory);
  font-size: .85rem;
}
.promo-input-wrap input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,81,.1); }
.shipping-option { border-radius: var(--radius-sharp); }
.shipping-option:has(input:checked) { border-color: var(--gold); background: rgba(200,169,81,.04); }
.shipping-option-price { color: var(--gold-dark); }
.checkout-step { border-radius: 0; }
.checkout-step.active .step-num {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--obsidian);
}

/* ================================================================
   FORMS & INPUTS
   ================================================================ */

.form-control-custom {
  border-radius: var(--radius-sharp);
  border-color: var(--border);
  background: var(--ivory);
  font-size: .875rem;
  transition: var(--transition-fast);
}
.form-control-custom:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,169,81,.1);
}
.form-label { letter-spacing: .06em; font-size: .78rem; }
.upload-zone { border-radius: var(--radius-md); }
.upload-zone:hover { border-color: var(--gold); background: rgba(200,169,81,.03); }

/* ================================================================
   ACCORDION
   ================================================================ */

.accordion-item { border-radius: var(--radius-sharp); border-color: var(--border); }
.accordion-trigger { font-size: .875rem; letter-spacing: .02em; }
.accordion-trigger:hover { background: var(--parchment); }

/* ================================================================
   DASHBOARD
   ================================================================ */

.dash-sidebar {
  background:
    var(--pattern-star-dim),
    linear-gradient(180deg, var(--obsidian) 0%, var(--onyx) 100%);
}
.dash-main { background: var(--parchment); }
.stat-card { background: var(--ivory); border-color: var(--border); border-radius: var(--radius-md); }
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-value { letter-spacing: -.02em; }
.chart-card { background: var(--ivory); border-color: var(--border); border-radius: var(--radius-md); }
.bar { border-radius: 2px 2px 0 0; }
.dash-nav-item:hover, .dash-nav-item.active {
  background: rgba(200,169,81,.12);
  color: var(--gold);
}

/* ================================================================
   PROFILE PAGE
   ================================================================ */

.profile-card, .order-card { border-radius: var(--radius-md); }

/* ================================================================
   PAGE HERO (INNER PAGES)
   ================================================================ */

.page-hero {
  background: linear-gradient(135deg, var(--obsidian) 0%, var(--noir) 100%);
  padding: 5rem 0;
  border-bottom: 1px solid rgba(200,169,81,.12);
}
.page-hero::before {
  background: radial-gradient(circle, rgba(200,169,81,.08) 0%, transparent 70%);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pattern-star-dim);
  opacity: .3;
  pointer-events: none;
}
.page-hero h1 {
  font-style: italic;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.page-hero p { color: rgba(255,255,255,.55); }

/* ================================================================
   BREADCRUMB
   ================================================================ */

.breadcrumb-bar {
  background: var(--parchment);
  border-bottom: 1px solid rgba(200,169,81,.08);
}
.breadcrumb-nav { letter-spacing: .02em; }
.breadcrumb-nav a:hover { color: var(--gold); }
.breadcrumb-nav span.current { color: var(--charcoal); font-style: italic; }

/* ================================================================
   BACK TO TOP
   ================================================================ */

.back-to-top {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  border: none;
  border-radius: var(--radius-sharp);
  color: var(--obsidian);
  box-shadow: var(--shadow-gold);
}
.back-to-top:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,169,81,.3);
}

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */

.toast {
  background: var(--obsidian);
  border-radius: var(--radius-sharp);
  border-left: 3px solid var(--gold);
  box-shadow: 0 8px 40px rgba(8,7,5,.4);
  font-size: .82rem;
  letter-spacing: .02em;
}
.toast-icon { color: var(--gold); }

/* ================================================================
   FOOTER REFINEMENTS
   ================================================================ */

.site-footer {
  background: var(--pattern-star-dim), #060504;
}
.footer-logo {
  font-style: italic;
  letter-spacing: .02em;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-heading { letter-spacing: .18em; }
.footer-links a {
  font-size: .82rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.42);
}
.footer-links a:hover { color: var(--gold); padding-left: .25rem; }
.social-btn {
  border-radius: var(--radius-sharp);
  border-color: rgba(200,169,81,.15);
}
.social-btn:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-color: var(--gold);
  color: var(--obsidian);
}
.footer-nl-form { border-color: rgba(200,169,81,.15); border-radius: var(--radius-sharp); overflow: hidden; }
.footer-nl-form button { background: var(--gold); color: var(--obsidian); }
.footer-nl-form button:hover { background: var(--gold-light); }
.footer-trust-item svg { color: var(--gold); }
.footer-trust { border-color: rgba(200,169,81,.08); }
.footer-bottom a:hover { color: var(--gold); }

/* ================================================================
   CAROUSEL
   ================================================================ */

.carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sharp);
  background: var(--ivory);
  border: 1px solid var(--border);
  color: var(--charcoal);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.carousel-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--obsidian);
  box-shadow: var(--shadow-gold);
}

/* ================================================================
   SCROLL REVEAL — FADE-IN SYSTEM
   ================================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .75s cubic-bezier(.25,.46,.45,.94),
    transform .75s cubic-bezier(.25,.46,.45,.94);
}
.fade-in.revealed { opacity: 1; transform: translateY(0); }

/* Stagger delays for grids */
.fade-in:nth-child(1) { transition-delay: .05s; }
.fade-in:nth-child(2) { transition-delay: .12s; }
.fade-in:nth-child(3) { transition-delay: .19s; }
.fade-in:nth-child(4) { transition-delay: .26s; }
.fade-in:nth-child(5) { transition-delay: .33s; }
.fade-in:nth-child(6) { transition-delay: .40s; }

/* ================================================================
   LUXURY SECTION ACCENT LINE
   ================================================================ */

.lux-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,169,81,.25) 30%,
    rgba(200,169,81,.25) 70%,
    transparent 100%
  );
  margin: 3rem 0;
}

/* ================================================================
   UTILITY CLASSES — LUXURY EXTRAS
   ================================================================ */

.text-gold-gradient {
  background: linear-gradient(135deg, var(--gold-light) 20%, var(--gold) 60%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-obsidian  { background: var(--obsidian); }
.bg-ivory     { background: var(--ivory); }
.bg-parchment { background: var(--parchment); }

/* Reset bg-white and bg-cream to luxury neutrals */
.bg-cream { background: var(--parchment); }
.bg-white  { background: var(--ivory); }

/* ================================================================
   GALLERY THUMBNAILS
   ================================================================ */

.gallery-thumb {
  border-radius: var(--radius-sharp);
  border: 1.5px solid transparent;
}
.gallery-thumb:hover, .gallery-thumb.active { border-color: var(--gold); }
.gallery-main { border-radius: var(--radius-md); background: var(--parchment); }

/* ================================================================
   PRODUCT DETAIL PAGE ENHANCEMENTS
   ================================================================ */

.product-detail-vendor {
  background: var(--parchment);
  border-color: var(--border);
  border-radius: var(--radius-md);
}

/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */

@media (max-width: 991.98px) {
  .editorial-split { grid-template-columns: 1fr; }
  .editorial-image { min-height: 380px; }
  .editorial-image::after { display: none; }
  .editorial-content { padding: 3.5rem 2.5rem; }
}

@media (max-width: 767.98px) {
  .editorial-content { padding: 2.5rem 1.5rem; }
  .editorial-arabic { font-size: 1.3rem; }
  .btn-gold,
  .btn-outline-gold { padding: .75rem 1.75rem; font-size: .78rem; }
}

@media (max-width: 575.98px) {
  .editorial-image { min-height: 260px; }
}

/* ================================================================
   LUXURY CURSOR — custom golden ring (JS-powered, CSS fallback)
   ================================================================ */

#luxury-cursor {
  position: fixed;
  top: -20px;
  left: -20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(200,169,81,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: transform .15s ease, opacity .3s ease;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
#luxury-cursor.hovering {
  transform: translate(-50%, -50%) scale(2.5);
  border-color: rgba(200,169,81,.3);
  background: rgba(200,169,81,.04);
}
@media (pointer: coarse) { #luxury-cursor { display: none; } }

/* ================================================================
   PRICE RANGE SLIDER
   ================================================================ */

.range-slider { accent-color: var(--gold); }

/* ================================================================
   SHIMMER PLACEHOLDER (for loading states)
   ================================================================ */

@keyframes loadingShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--parchment) 25%, var(--cream-dark) 50%, var(--parchment) 75%);
  background-size: 800px 100%;
  animation: loadingShimmer 1.4s infinite;
  border-radius: var(--radius-sharp);
}

/* ================================================================
   PAGE-SPECIFIC LUXURY LAYER
   Covers inline <style> components unique to each page.
   ================================================================ */

/* ── SHARED: body background across inner pages ── */
body { background-color: var(--parchment); }

/* ── SHARED: orders table (profile.html + dashboard.html) ── */
.orders-table { border-collapse: collapse; }
.orders-table th {
  background: var(--parchment);
  letter-spacing: .1em;
  border-bottom: 2px solid rgba(200,169,81,.18);
  color: var(--muted);
  font-weight: 700;
}
.orders-table td { color: var(--charcoal-lt); border-bottom: 1px solid var(--border); }
.orders-table tr:hover td { background: rgba(200,169,81,.04); }

/* ── SHARED: status pills ── */
.status-pill { border-radius: var(--radius-sharp); letter-spacing: .06em; }
.status-delivered  { background: rgba(107,143,113,.1); color: #4a7a52; }
.status-processing { background: rgba(200,169,81,.12); color: var(--gold-dark); }
.status-shipped    { background: rgba(70,100,140,.1);  color: #4a6488; }
.status-cancelled  { background: rgba(150,60,60,.1);   color: #8a3838; }
.status-returned   { background: rgba(100,100,100,.08); color: var(--muted); }

/* ── SHARED: table action buttons ── */
.table-action-btn {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gold);
  border-radius: var(--radius-sharp);
  letter-spacing: .04em;
}
.table-action-btn:hover { background: rgba(200,169,81,.08); }

/* ── SHARED: profile/order image thumbnails ── */
.order-img,
.product-thumb-sm { border-radius: var(--radius-sharp); background: var(--parchment); }
.order-vendor { color: var(--gold); }

/* ================================================================
   SHOP.HTML — Filter & Pagination Components
   ================================================================ */

.filter-overlay { background: rgba(8,7,5,.5); backdrop-filter: blur(4px); }

/* Active filter chips */
.filter-chip {
  background: var(--ivory);
  border: 1px solid rgba(200,169,81,.45);
  border-radius: var(--radius-sharp);
  color: var(--gold-dark);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  transition: var(--transition-fast);
}
.filter-chip:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-color: var(--gold);
  color: var(--obsidian);
}

/* Pagination */
.page-btn {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-sharp);
  font-size: .82rem;
  font-weight: 500;
  color: var(--charcoal-lt);
  transition: var(--transition-fast);
}
.page-btn:hover,
.page-btn.active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-color: var(--gold);
  color: var(--obsidian);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(200,169,81,.2);
}

/* Shop sidebar header row */
.shop-sidebar .sidebar-section:first-child {
  background: var(--parchment) !important;
  border-bottom: 1px solid var(--border);
}

/* ================================================================
   PRODUCT.HTML — Detail Page Components
   ================================================================ */

/* Review cards */
.review-card {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  margin-bottom: 1rem;
  transition: var(--transition-fast);
}
.review-card:hover { box-shadow: var(--shadow-sm); border-color: rgba(200,169,81,.18); }
.reviewer-avatar {
  background: var(--parchment);
  border: 1px solid rgba(200,169,81,.2);
  border-radius: 50%;
  color: var(--gold);
  font-style: italic;
}
.reviewer-name { font-weight: 600; letter-spacing: .01em; color: var(--charcoal); }
.review-date { color: var(--muted); font-size: .72rem; letter-spacing: .03em; }
.review-body { font-size: .875rem; line-height: 1.8; color: var(--charcoal-lt); }

/* Rating breakdown bars */
.rating-bar-wrap { background: var(--parchment); border-radius: 2px; }
.rating-bar {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  border-radius: 2px;
}

/* Size guide note */
.size-guide-note {
  background: rgba(200,169,81,.06);
  border: 1px solid rgba(200,169,81,.2);
  border-radius: var(--radius-sharp);
  border-left: 3px solid var(--gold);
  padding: .85rem 1rem;
  font-size: .82rem;
  color: var(--charcoal-lt);
  line-height: 1.7;
}

/* Colour swatches */
.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: var(--transition-fast);
}
.color-swatch.active,
.color-swatch:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--ivory), 0 0 0 4px var(--gold);
}

/* Sticky add to cart bar */
.sticky-addcart {
  background: var(--ivory);
  border-top: 1px solid rgba(200,169,81,.15);
  box-shadow: 0 -8px 32px rgba(8,7,5,.08);
}

/* Product trust badge strip */
.product-detail-vendor { border-radius: var(--radius-md); }

/* Buy Now dark pill button */
.btn-dark-pill {
  background: var(--obsidian);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-sharp);
  letter-spacing: .12em;
  color: var(--white);
  transition: var(--transition);
}
.btn-dark-pill:hover {
  background: var(--onyx);
  box-shadow: 0 8px 32px rgba(8,7,5,.3);
  transform: translateY(-2px);
  color: var(--white);
}

/* ================================================================
   CART.HTML — Checkout Components
   ================================================================ */

/* Section title dividers */
.checkout-section-title {
  color: var(--gold);
  letter-spacing: .18em;
  font-size: .68rem;
}
.checkout-section-title::before,
.checkout-section-title::after { background: rgba(200,169,81,.2); }

/* Payment method options */
.payment-method {
  border: 1px solid var(--border);
  border-radius: var(--radius-sharp);
  transition: var(--transition-fast);
  background: var(--ivory);
}
.payment-method:has(input:checked) {
  border-color: var(--gold);
  background: rgba(200,169,81,.04);
  box-shadow: 0 0 0 1px rgba(200,169,81,.12);
}
.payment-method-label { letter-spacing: .02em; }

/* Card input fields container */
.card-fields {
  background: var(--parchment);
  border-radius: var(--radius-sharp);
  border: 1px solid var(--border);
}

/* Empty cart state */
.empty-cart {
  background: var(--ivory);
  border: 1px dashed rgba(200,169,81,.25);
  border-radius: var(--radius-md);
}
.empty-cart svg { color: rgba(200,169,81,.3); }

/* Secure checkout badges */
.secure-badges { gap: 1rem; }
.secure-badge {
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .03em;
}
.secure-badge svg { color: #4a7a52; }

/* ================================================================
   PROFILE.HTML — Account Sidebar & Panels
   ================================================================ */

/* Profile sidebar — dark obsidian to match dashboard */
.profile-sidebar {
  background: linear-gradient(180deg, var(--obsidian) 0%, var(--onyx) 100%) !important;
  border-right: 1px solid rgba(200,169,81,.1) !important;
}

/* Avatar wrap */
.profile-avatar-wrap {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.profile-avatar { border-color: rgba(200,169,81,.6) !important; }
.avatar-edit-overlay { background: rgba(8,7,5,.55) !important; }

/* Profile name & email on dark bg */
.profile-name { color: var(--white) !important; font-style: italic; letter-spacing: .01em; }
.profile-email { color: rgba(255,255,255,.45) !important; }

/* Gold member badge */
.profile-member-badge {
  background: rgba(200,169,81,.12) !important;
  color: var(--gold-light) !important;
  letter-spacing: .1em;
  border-radius: var(--radius-sharp) !important;
}

/* Nav section labels */
.profile-nav-section {
  color: rgba(255,255,255,.28) !important;
  letter-spacing: .18em;
}

/* Nav items on dark */
.profile-nav-item {
  color: rgba(255,255,255,.52) !important;
  border-radius: var(--radius-sharp) !important;
  letter-spacing: .02em;
}
.profile-nav-item:hover {
  background: rgba(200,169,81,.08) !important;
  color: var(--gold) !important;
}
.profile-nav-item.active {
  background: rgba(200,169,81,.12) !important;
  color: var(--gold) !important;
  font-weight: 600;
}

/* Nav badge */
.nav-badge {
  background: var(--gold) !important;
  color: var(--obsidian) !important;
  border-radius: var(--radius-sharp) !important;
  font-weight: 700;
}

/* Profile main content area */
.profile-main { background: var(--parchment); }

/* Overview stat cards */
.ov-stat {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ov-stat:hover { box-shadow: var(--shadow-md); }
.ov-stat-val { letter-spacing: -.02em; }
.ov-stat-icon { border-radius: var(--radius-sharp); }

/* Welcome banner */
.welcome-banner {
  background: linear-gradient(135deg, var(--obsidian) 0%, var(--noir) 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(200,169,81,.1);
}
.welcome-banner::before { background: rgba(200,169,81,.06); }
.welcome-banner::after  { background: rgba(200,169,81,.04); }
.welcome-avatar { border-color: rgba(200,169,81,.45) !important; }
.welcome-text h3 { font-style: italic; letter-spacing: -.01em; }
.points-val { color: var(--gold-light); }
.points-label { letter-spacing: .1em; }

/* Wishlist empty state */
.wishlist-empty {
  background: var(--ivory);
  border: 1px dashed rgba(200,169,81,.2);
  border-radius: var(--radius-md);
}
.wishlist-empty svg { color: rgba(200,169,81,.25); }

/* Address cards */
.address-card {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.address-card:hover { border-color: rgba(200,169,81,.4); box-shadow: var(--shadow-sm); }
.address-card.default { border-color: rgba(200,169,81,.5); }
.address-default-badge {
  background: rgba(200,169,81,.1);
  border-radius: var(--radius-sharp);
  color: var(--gold-dark);
  letter-spacing: .08em;
}
.address-type { letter-spacing: .14em; color: var(--muted); }
.address-name { color: var(--charcoal); font-weight: 700; letter-spacing: .01em; }

/* Panel header */
.panel-header h2 { font-style: italic; letter-spacing: -.01em; }

/* ================================================================
   DASHBOARD.HTML — Vendor Portal Components
   ================================================================ */

/* Dashboard content area */
.dash-main { background: var(--parchment); }

/* Dash cards */
.dash-card {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: var(--transition-fast);
}
.dash-card:hover { box-shadow: var(--shadow-sm); }

/* Tag input */
.tag-input-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sharp);
  background: var(--ivory);
}
.tag-input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,81,.1); }
.tag-input-wrap input { background: transparent; font-size: .875rem; }

/* Notification dot */
.notification-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,81,.15); }

/* Notification items */
.notification-item {
  border-bottom: 1px solid var(--border);
  padding: .85rem 0;
  transition: var(--transition-fast);
}
.notification-item:hover { background: rgba(200,169,81,.03); }
.notification-time { color: var(--muted); font-size: .7rem; letter-spacing: .03em; }

/* Top product rows */
.top-product-row {
  border-bottom: 1px solid var(--border);
  padding: .7rem 0;
  transition: var(--transition-fast);
}
.top-product-row:hover { background: rgba(200,169,81,.03); }

/* Vendor nav account button */
.user-dropdown-wrap .nav-icon-btn[style*="border"] {
  border-color: rgba(200,169,81,.2) !important;
  border-radius: var(--radius-sharp) !important;
  font-size: .82rem;
}
.user-dropdown-wrap .nav-icon-btn[style*="border"]:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ================================================================
   VENDOR.HTML — Store Page Components
   ================================================================ */

/* Vendor store banner */
.vendor-store-banner { position: relative; overflow: hidden; }
.vendor-store-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,7,5,.2) 0%, rgba(8,7,5,.55) 100%);
  pointer-events: none;
}
.vendor-store-logo {
  border: 3px solid rgba(200,169,81,.5) !important;
  box-shadow: 0 4px 24px rgba(8,7,5,.3) !important;
}
.vendor-store-name { font-style: italic; letter-spacing: -.01em; }

/* Store tabs */
.store-tabs-bar {
  background: var(--obsidian) !important;
  border-bottom: 1px solid rgba(200,169,81,.12) !important;
  backdrop-filter: blur(16px);
}
.store-tab-btn {
  color: rgba(255,255,255,.5) !important;
  letter-spacing: .08em;
  border-bottom: 2px solid transparent !important;
  transition: var(--transition-fast) !important;
  border-radius: 0 !important;
}
.store-tab-btn:hover { color: var(--gold) !important; }
.store-tab-btn.active {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
  background: transparent !important;
}

/* About/vendor cards on vendor page */
.vendor-about-card {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ================================================================
   ALL PAGES: Announcement bar — Amiri (when present)
   ================================================================ */

.announcement-bar { font-family: var(--font-sans); }

/* ================================================================
   ALL PAGES: Inline trust badge strip on product page
   ================================================================ */

[style*="background:var(--cream)"][style*="border-radius:var(--radius-sm)"],
[style*="background: var(--cream)"][style*="border-radius: var(--radius-sm)"] {
  background: var(--parchment) !important;
  border-radius: var(--radius-sharp) !important;
  border: 1px solid rgba(200,169,81,.1);
}

/* ================================================================
   RESPONSIVE — Page-specific adjustments
   ================================================================ */

@media (max-width: 991.98px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-sidebar {
    position: static !important;
    height: auto !important;
    width: 100%;
    padding: 1.5rem !important;
  }
  .profile-nav { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .profile-nav-section { display: none !important; }
  .profile-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left !important;
    padding-bottom: 1.25rem !important;
  }
  .profile-avatar { margin: 0 !important; }
  .overview-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .overview-stats { grid-template-columns: 1fr 1fr; }
  .welcome-banner { flex-direction: column; gap: 1rem; }
  .welcome-points { margin-left: 0; }
  .form-row.two,
  .form-row.three { grid-template-columns: 1fr; }
}

/* ================================================================
   KOYA-INSPIRED ANIMATION LAYER
   ================================================================ */

/* ── Ken Burns: active hero slide background slowly zooms in ── */
@keyframes kenBurns {
  0%   { transform: scale(1)    translateX(0)      translateY(0); }
  50%  { transform: scale(1.06) translateX(-1%)    translateY(-1%); }
  100% { transform: scale(1.1)  translateX(-1.5%)  translateY(0); }
}

@keyframes kenBurns2 {
  0%   { transform: scale(1)    translateX(0)      translateY(0); }
  50%  { transform: scale(1.07) translateX(1%)     translateY(-1.5%); }
  100% { transform: scale(1.1)  translateX(0.5%)   translateY(-0.5%); }
}

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

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

@keyframes textClipReveal {
  from { clip-path: inset(0 0 100% 0); opacity: 0; }
  to   { clip-path: inset(0 0 0% 0);   opacity: 1; }
}

@keyframes imageShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes infiniteMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes bounceCaret {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .8; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ── Ken Burns on active hero slide ── */
.hero-slide.active .hero-slide-bg {
  animation: kenBurns 14s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-slide:nth-child(2).active .hero-slide-bg { animation-name: kenBurns2; animation-duration: 16s; }
.hero-slide:nth-child(3).active .hero-slide-bg { animation-name: kenBurns;  animation-duration: 18s; }

/* ── Hero tag gentle float ── */
.hero-tag {
  animation: heroTagFloat 3.2s ease-in-out infinite;
}

/* ── Hero scroll-down caret ── */
.hero-scroll-caret {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6);
  animation: bounceCaret 2s ease-in-out infinite;
  cursor: pointer;
  z-index: 10;
}
.hero-scroll-caret svg { width: 20px; height: 20px; }

/* ── Enhanced product image zoom (koya-style: larger, smoother) ── */
.product-card-img-wrap img {
  transition: transform .9s cubic-bezier(.25,.46,.45,.94) !important;
}
.product-card:hover .product-card-img-wrap img {
  transform: scale(1.12) !important;
}

/* ── Category card image zoom enhanced ── */
.category-card-img {
  transition: transform 1s cubic-bezier(.25,.46,.45,.94) !important;
}
.category-card:hover .category-card-img {
  transform: scale(1.1) !important;
}

/* ── Vendor card image zoom ── */
.vendor-card-banner {
  overflow: hidden;
}
.vendor-card-banner img {
  transition: transform .9s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.vendor-card:hover .vendor-card-banner img {
  transform: scale(1.08);
}

/* ── Scroll-revealed elements base state ── */
.sr-fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.25,.46,.45,.94),
              transform .7s cubic-bezier(.25,.46,.45,.94);
}
.sr-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid children */
.sr-fade-up[data-delay="1"] { transition-delay: .08s; }
.sr-fade-up[data-delay="2"] { transition-delay: .16s; }
.sr-fade-up[data-delay="3"] { transition-delay: .24s; }
.sr-fade-up[data-delay="4"] { transition-delay: .32s; }

/* ── Section headline reveal ── */
.sr-headline {
  overflow: hidden;
}
.sr-headline-inner {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .65s cubic-bezier(.25,.46,.45,.94),
              transform .65s cubic-bezier(.25,.46,.45,.94);
}
.sr-headline.visible .sr-headline-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ── Infinite marquee strip (koya collection scrolling text) ── */
.koya-marquee-wrap {
  overflow: hidden;
  white-space: nowrap;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--parchment);
}
.koya-marquee-track {
  display: inline-flex;
  gap: 0;
  animation: infiniteMarquee 28s linear infinite;
  will-change: transform;
}
.koya-marquee-track:hover { animation-play-state: paused; }
.koya-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0 2.5rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: .05em;
  white-space: nowrap;
}
.koya-marquee-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .7;
  flex-shrink: 0;
}

/* ── Image loading shimmer placeholder ── */
.img-shimmer {
  background: linear-gradient(
    90deg,
    var(--parchment) 25%,
    var(--cream-dark) 50%,
    var(--parchment) 75%
  );
  background-size: 600px 100%;
  animation: imageShimmer 1.4s infinite linear;
}

/* ── Smooth page-level fade in on load ── */
body {
  animation: luxuryFadeIn .4s ease both;
}

/* ── Editorial section image parallax reveal ── */
.editorial-image {
  overflow: hidden;
}
.editorial-image img {
  transition: transform 1s cubic-bezier(.25,.46,.45,.94) !important;
  will-change: transform;
}
.editorial-section:hover .editorial-image img {
  transform: scale(1.06) !important;
}

/* ── Vendor card reveal on scroll ── */
.vendor-card {
  transition: var(--transition), opacity .5s ease, transform .5s ease;
}

/* ── Hover lift on featured editorial items ── */
.featured-item {
  transition: transform .4s cubic-bezier(.25,.46,.45,.94),
              box-shadow .4s cubic-bezier(.25,.46,.45,.94);
}
.featured-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* ================================================================
   BUTTON RIPPLE
   ================================================================ */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transform: scale(0);
  animation: rippleExpand .55s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
  z-index: 0;
}

@keyframes rippleExpand {
  to { transform: scale(1); opacity: 0; }
}

/* Ensure button label sits above ripple */
.btn-gold > *,
.btn-outline-gold > *,
.product-action-btn > * {
  position: relative;
  z-index: 1;
}

/* ================================================================
   NAVBAR ANIMATED UNDERLINE
   ================================================================ */
.nav-links .nav-item > a {
  position: relative;
}
.nav-underline {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .3s cubic-bezier(.25,.46,.45,.94);
  border-radius: 1px;
}
.nav-links .nav-item > a:hover .nav-underline,
.nav-links .nav-item > a.active .nav-underline {
  width: 80%;
}

/* ================================================================
   SCROLL-PROGRESS BAR
   ================================================================ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  z-index: 99990;
  pointer-events: none;
  transition: width .08s linear;
  box-shadow: 0 0 8px rgba(200,169,81,.4);
}

/* ================================================================
   CART BADGE PULSE
   ================================================================ */
@keyframes badgePulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.55); box-shadow: 0 0 0 4px rgba(200,169,81,.25); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.cart-badge.badge-pulse {
  animation: badgePulse .45s cubic-bezier(.34,1.4,.64,1);
}

/* ================================================================
   REFINED PRODUCT CARD HOVER STATE
   ================================================================ */
.product-card {
  will-change: transform, box-shadow;
}
.product-card:hover {
  transform: translateY(-10px) !important;
  box-shadow:
    0 24px 64px rgba(8,7,5,.18),
    0 6px 20px rgba(8,7,5,.1),
    0 0 0 1px rgba(200,169,81,.22) !important;
}

/* ================================================================
   SMOOTH FOCUS STYLES (accessibility + luxury)
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ================================================================
   SECTION HEADING REVEAL ANIMATION
   ================================================================ */
@keyframes headlineDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

.divider-gold {
  position: relative;
  overflow: hidden;
}
.divider-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ivory);
  animation: headlineDraw .8s 1s cubic-bezier(.4,0,.2,1) forwards;
}

/* ================================================================
   MEGA-MENU STAGGER
   ================================================================ */
.mega-menu { --stagger: 0; }
.mega-col:nth-child(1) { animation-delay: calc(var(--stagger) * 0ms  + 60ms); }
.mega-col:nth-child(2) { animation-delay: calc(var(--stagger) * 0ms  + 100ms); }
.mega-col:nth-child(3) { animation-delay: calc(var(--stagger) * 0ms  + 140ms); }

/* ================================================================
   ANNOUNCEMENT BAR MARQUEE PAUSE ON HOVER
   ================================================================ */
.announcement-inner:hover {
  animation-play-state: paused;
}

/* ================================================================
   VENDOR CARD HOVER LIFT
   ================================================================ */
.vendor-card {
  will-change: transform, box-shadow;
}
.vendor-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(200,169,81,.15);
}

/* ================================================================
   FOOTER LINK HOVER — slide-right indicator
   ================================================================ */
.footer-links a {
  position: relative;
  padding-left: 0;
  transition: padding-left .25s ease, color .25s ease;
}
.footer-links a::before {
  content: '›';
  position: absolute;
  left: -14px;
  opacity: 0;
  color: var(--gold);
  transition: opacity .25s ease, left .25s ease;
}
.footer-links a:hover {
  padding-left: 14px;
  color: var(--gold);
}
.footer-links a:hover::before {
  opacity: 1;
  left: 0;
}