/*
 * Danje Urmia — Core Component Stylesheet (Bakala Style)
 * Filename: assets/css/main.css
 */

/* ==========================================================================
   1. BASE SECTION & LAYOUT ELEMENTS
   ========================================================================== */

.danje-section {
  padding-block: var(--section-v, 32px);
  position: relative;
  overflow: hidden;
}

.danje-section__header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2xl);
  border-bottom: 2px solid var(--gold);
  padding-bottom: var(--space-md);
}

.danje-section__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.danje-link-more {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.danje-link-more:hover {
  color: var(--gold);
}

/* ==========================================================================
   2. HEADER (Floating Pill Bakala Style)
   ========================================================================== */
.danje-site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 16px var(--gutter) 10px;
  background-color: transparent;
  transition: all 0.4s var(--ease-luxury);
}

/* Offset sticky header when WP Admin Bar is present */
body.admin-bar .danje-site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .danje-site-header {
    top: 46px;
  }
}

.danje-header-wrapper {
  background-color: var(--bg-surface);
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: visible; /* Changed to visible to allow search dropdown overflow */
  max-width: calc(var(--container) - var(--gutter) * 2);
  margin-inline: auto;
  transition: all 0.4s var(--ease-luxury);
}

[data-theme="light"] .danje-header-wrapper {
  background-color: #ffffff;
  border-color: rgba(201, 168, 76, 0.15);
  box-shadow: 0 10px 30px rgba(120, 110, 90, 0.05);
}

/* Scrolled state */
.danje-site-header.is-scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
}

.danje-site-header.is-scrolled .danje-header-wrapper {
  background-color: var(--bg-nav-scrolled);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-nav);
}

[data-theme="light"] .danje-site-header.is-scrolled .danje-header-wrapper {
  background-color: rgba(255, 255, 255, 0.88);
  border-color: rgba(201, 168, 76, 0.18);
}

/* Unified container layout */
.danje-header-container {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.25fr; /* Visual Left (Actions), Center (Logo), Right (Search/Menu) in RTL */
  align-items: center;
  padding: 16px 24px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   CENTER COLUMN: Brand Logo Center
   -------------------------------------------------------------------------- */
.danje-header__center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.danje-header__center-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 2px;
  transition: transform 0.3s var(--ease-out);
}

.danje-header__center-logo:hover {
  transform: translateY(-1px);
}

.logo-diamond {
  color: var(--gold);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.logo-eyebrow {
  font-size: 10px;
  font-weight: 500;
  color: var(--gold-a11y);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.logo-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

[data-theme="light"] .logo-title {
  color: #1a1000;
}

.logo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 120px;
  margin-top: 4px;
}

.logo-divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--gold-border);
}

.logo-divider-dot {
  font-size: 8px;
  color: var(--gold);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   RIGHT COLUMN: Search Form & Main Menu
   -------------------------------------------------------------------------- */
.danje-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligns to Right in RTL */
  gap: var(--space-md);
}

/* Search bar styling */
.danje-header__search {
  width: 100%;
  max-width: 320px;
  position: relative;
}

.danje-search-form {
  position: relative;
  width: 100%;
}

.danje-search-field {
  width: 100%;
  height: 38px;
  padding: 0 45px 0 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background-color: var(--bg-input);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--text-primary);
  outline: none;
  transition: all 0.3s var(--ease-out);
  box-sizing: border-box;
}

[data-theme="light"] .danje-search-field {
  background-color: #faf9f6;
  border-color: #e2dfd8;
  color: #1a1a1a;
}

.danje-search-field:focus {
  border-color: var(--gold);
  background-color: var(--bg-surface);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}

/* The mobile search input carries both `.danje-search-field` and
   `.danje-search-field--mobile`; style.css's own --mobile rule already asks
   for 16px, but this file loads after style.css and its plain
   `.danje-search-field` rule above (12px, var(--text-xs)) wins the cascade
   at equal specificity — so the field silently renders at 12px, which makes
   iOS Safari auto-zoom the whole page on focus. `input.danje-search-field--mobile`
   is more specific than a single class, so it wins regardless of file order. */
input.danje-search-field--mobile {
  font-size: 16px;
  height: 44px;
}

.danje-search-submit {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--gold);
  border: none;
  color: var(--text-on-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s, transform 0.25s;
}

.danje-search-submit:hover {
  background-color: var(--gold-light);
  transform: scale(1.05);
}

/* Navigation Links */
.danje-nav__menu-list {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.danje-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  padding-block: 6px;
  position: relative;
  transition: color 0.3s;
}

.danje-nav__link:hover {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   LEFT COLUMN: User Actions & Support Helpline
   -------------------------------------------------------------------------- */
.danje-header__left {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Aligns to Left in RTL */
  gap: var(--space-md);
}

.danje-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.action-divider {
  width: 1px;
  height: 14px;
  background-color: var(--border);
}

[data-theme="light"] .action-divider {
  background-color: #e5e0d8;
}

.danje-header__action-link {
  display: flex;
  flex-direction: row-reverse; /* آیکون در چپ، متن در راست در RTL */
  align-items: center;
  gap: 8px; /* افزایش فاصله به 8px برای رفع فشردگی */
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}

[data-theme="light"] .danje-header__action-link {
  color: #6a6458;
}

.danje-header__action-link:hover {
  color: var(--gold);
}

.danje-header__action-link .action-icon {
  display: flex;
  align-items: center;
  color: var(--gold);
  position: relative;
}

.danje-header__account.is-logged-in .action-icon {
  color: var(--gold-dark);
}

.danje-header__account.is-logged-in .action-text {
  color: var(--gold-dark);
  font-weight: 700;
}

.danje-nav__mobile-account-item.is-logged-in a {
  color: var(--gold-dark) !important;
}

/* Gentle "complete your profile" nudge in the header — just a soft,
   slow pulse on the icon + label themselves. No badge/chip here (that
   lives inside the account page itself — see woocommerce.css). */
.danje-header__account.danje-needs-profile .action-icon svg,
.danje-header__account.danje-needs-profile .action-text,
.danje-nav__mobile-account-item.danje-needs-profile svg,
.danje-nav__mobile-account-item.danje-needs-profile a {
  animation: danje-profile-pulse-text 2.6s ease-in-out infinite;
}

@keyframes danje-profile-pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .danje-header__account.danje-needs-profile .action-icon svg,
  .danje-header__account.danje-needs-profile .action-text,
  .danje-nav__mobile-account-item.danje-needs-profile svg,
  .danje-nav__mobile-account-item.danje-needs-profile a {
    animation: none;
  }
}

.cart-badge {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px; /* تراز به سمت چپ آیکون در RTL (دور از متن برای رفع چسبیدگی) */
  background-color: var(--gold);
  color: var(--text-on-gold);
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.4);
  border: 1px solid var(--bg-surface);
  line-height: 1;
}

.danje-theme-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-xs) 0; /* حذف پدینگ افقی برای هم‌ترازی کامل بصری با لبه چپ */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s, color 0.25s;
}

[data-theme="light"] .danje-theme-toggle {
  color: #6a6458;
}

.danje-theme-toggle:hover {
  transform: scale(1.1);
  color: var(--gold);
}

.danje-header__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 4px;
  align-items: center;
  justify-content: center;
}

/* Support Pill badge */
.danje-header__support-pill {
  background-color: var(--primary-muted);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  transition: all 0.3s var(--ease-out);
}

.danje-header__support-pill:hover {
  border-color: var(--gold-border);
  background-color: var(--gold-muted);
  transform: translateY(-1px);
}

.support-pill-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.support-pill-icon {
  color: var(--gold);
  display: flex;
  align-items: center;
}

.support-pill-text {
  font-size: 10px;
  color: var(--text-primary);
  font-weight: 500;
}

.support-pill-num,
.phone-number-val {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 700;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block !important;
}

[data-theme="light"] .support-pill-num {
  color: #1a1000;
}

/* --------------------------------------------------------------------------
   RESPONSIVE LAYOUT
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .danje-header-container {
    grid-template-columns: 1fr auto 1fr;
    padding: 12px 24px;
  }

  .danje-header__right {
    align-items: flex-start;
  }

  .danje-header__right .danje-header__search,
  .danje-header__right #site-navigation {
    display: none !important;
  }

  .danje-header__hamburger {
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
  }

  .danje-header__left {
    align-items: flex-end;
  }

  .danje-header__actions .danje-header__wishlist,
  .danje-header__actions .danje-header__account,
  .danje-header__actions .action-divider,
  .danje-header__support-pill {
    display: none !important;
  }

  /* متنِ «سبد خرید» در عرضِ موبایل جا نمی‌شود و به چند خط می‌شکند
     (باعثِ همپوشانی با لوگوی مرکزی می‌شد) — فقط آیکون نشان داده شود. */
  .danje-header__cart .action-text {
    display: none;
  }

  .logo-title {
    font-size: 20px;
  }

  .logo-eyebrow,
  .logo-divider {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .danje-site-header {
    padding: 10px 12px;
  }

  .danje-header-wrapper {
    border-radius: 20px;
  }

  .danje-header-container {
    padding: 10px 16px;
  }
}

/* ==========================================================================
   3.5 DROPDOWN MENU (Category List)
   ========================================================================== */
.danje-nav__menu-item.has-dropdown {
  position: relative;
}

.danje-nav__dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  list-style: none;
  margin: 0;
  padding: var(--space-sm) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--dur-base) var(--ease-out);
  z-index: 100;
}

.danje-nav__menu-item.has-dropdown:hover .danje-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.danje-nav__dropdown li a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all var(--dur-fast) var(--ease-out);
}

.danje-nav__dropdown li a:hover {
  color: var(--gold);
  background-color: var(--gold-muted);
  padding-inline-start: 26px;
}

/* ==========================================================================
   3.6 SIDE-DRAWER CART (Bakala Style)
   ========================================================================== */
.danje-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}

body.cart-drawer-active .danje-cart-drawer {
  pointer-events: auto;
}

.danje-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

body.cart-drawer-active .danje-cart-drawer__overlay {
  opacity: 1;
}

.danje-cart-drawer__content {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 380px;
  max-width: 90vw;
  height: 100%;
  background-color: var(--bg-surface);
  border-inline-end: 1px solid var(--border);
  box-shadow: 8px 0 30px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-luxury);
}

[dir="rtl"] .danje-cart-drawer__content {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-inline-end: none;
  border-inline-start: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(0,0,0,0.3);
  transform: translateX(-100%);
}

body.cart-drawer-active .danje-cart-drawer__content {
  transform: translateX(0);
}

.danje-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.danje-cart-drawer__header h3 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.danje-cart-drawer__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  transition: color var(--dur-fast);
}

.danje-cart-drawer__close:hover {
  color: var(--gold);
}

.danje-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

.danje-cart-drawer__body .woocommerce-mini-cart__empty-message {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-3xl) 0;
  font-size: var(--text-sm);
}

/* ==========================================================================
   3.7 PRODUCT CARD BADGES
   ========================================================================== */
.danje-card-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  z-index: 5;
  line-height: 1.3;
}

.danje-card-badge.sale-badge {
  background-color: #e50000;
  color: #fff;
}

.danje-card-badge.new-badge {
  background-color: var(--gold);
  color: var(--text-on-gold);
}

.danje-more-info-text {
  color: var(--gold);
  font-size: var(--text-sm);
  font-weight: 700;
}

.danje-btn-more {
  background-color: transparent !important;
  border: 1px solid var(--gold-border) !important;
  color: var(--gold) !important;
}

.danje-btn-more:hover {
  background-color: var(--gold) !important;
  color: var(--text-on-gold) !important;
}

/* ==========================================================================
   4. MOBILE NAV OVERLAY
   ========================================================================== */
.danje-nav__mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--bg-primary);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-luxury);
  display: flex;
  flex-direction: column;
}

body.mobile-menu-active .danje-nav__mobile-overlay {
  transform: translateX(0);
}

.danje-nav__mobile-header {
  padding: var(--space-lg) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.danje-nav__mobile-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
}

.danje-nav__mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: var(--space-xl) var(--gutter);
}

.danje-nav__mobile-menu-list li a {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--divider);
}

.danje-nav__mobile-account-item a {
  display: flex !important;
  align-items: center;
  gap: var(--space-sm);
  color: var(--gold) !important;
}

.danje-nav__mobile-account-item svg {
  flex-shrink: 0;
}

/* ==========================================================================
   4.5 CATEGORIES CIRCLES
   ========================================================================== */
.danje-home-categories {
  position: relative;
  background-color: var(--bg-primary);
  background-image: url('../images/wave-header-min-1.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding-top: 110px; /* Leave space for the wave header overlay */
  padding-bottom: var(--space-xl);
  margin-top: -85px; /* Pull the section up to overlap the hero slider */
  z-index: 2; /* Put it above the hero slider */
}

.danje-wave-arrow-wrap {
  position: absolute;
  top: 15px; /* Position it exactly in the dip of the wave */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.danje-wave-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bg-card); /* cream beige circle */
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary); /* Brand gold accent */
  border: 1px solid var(--border);
  animation: float 2s ease-in-out infinite; /* floating animation */
}

.danje-category-slider__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.danje-category-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100px;
  text-decoration: none;
}

.danje-category-circle__img-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  background-color: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px; /* Give room for glowing border */
}

.danje-category-circle__img-wrap.has-glow {
  box-shadow: 0 0 15px var(--gold-border);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.danje-category-circle:hover .danje-category-circle__img-wrap.has-glow {
  box-shadow: 0 0 25px var(--gold);
}

.danje-category-circle__border {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0.8;
}

.danje-category-circle__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-out);
}

.danje-category-circle:hover .danje-category-circle__img-wrap img {
  transform: scale(1.1);
}

.danje-category-circle__title {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: center;
  transition: color var(--dur-fast) var(--ease-out);
}

.danje-category-circle:hover .danje-category-circle__title {
  color: var(--text-primary);
}

/* Specific Badges */
.badge-new, .badge-video {
  position: absolute;
  bottom: -8px;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 12px;
  color: #fff;
  z-index: 10;
  border: 2px solid var(--bg-primary);
}
.badge-new { background-color: #e50000; }
.badge-video { background-color: #ff9800; }

/* ==========================================================================
   5. HERO SECTION (Swiper Slider)
   ========================================================================== */

.danje-home-hero {
  padding-block: 24px 48px; /* Extra bottom padding so the floating shadow is visible */
}

.danje-hero-swiper {
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
  /* Large floating shadow — warm-tinted, multi-layer for premium depth */
  box-shadow:
    0 10px 30px -5px rgba(60, 40, 10, 0.18),
    0 20px 50px -10px rgba(60, 40, 10, 0.22),
    0 40px 90px -15px rgba(60, 40, 10, 0.16);
}

/* Light theme: warmer, more visible floating shadow against beige bg */
[data-theme="light"] .danje-hero-swiper {
  box-shadow:
    0 10px 30px -8px rgba(80, 50, 15, 0.08),
    0 20px 50px -12px rgba(80, 50, 15, 0.09),
    0 40px 90px -15px rgba(80, 50, 15, 0.06);
}

/* Dark theme: slightly more visible shadow */
[data-theme="dark"] .danje-hero-swiper {
  box-shadow:
    0 15px 40px -10px rgba(0, 0, 0, 0.65),
    0 25px 70px -15px rgba(0, 0, 0, 0.55),
    0 45px 95px -20px rgba(0, 0, 0, 0.45);
}

.danje-hero-slide {
  width: 100%;
  min-height: 480px;
  border-radius: 30px; /* Bakala 30px radius */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* RTL: right side text */
  padding: var(--space-4xl);
  position: relative;
  overflow: hidden;
}

.danje-hero-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Light Background Slide: Soft beige/light gradient, dark title text */
.danje-hero-slide--light-bg .danje-hero-slide__overlay {
  background: linear-gradient(to right, rgba(250, 248, 244, 0.75) 0%, rgba(250, 248, 244, 0.35) 40%, rgba(250, 248, 244, 0) 70%);
}
.danje-hero-slide--light-bg .danje-hero-slide__title .fa-text {
  color: #1a1a1a; /* Dark charcoal for excellent readability */
}

/* Dark Background Slide: Darker gradient, white title text */
.danje-hero-slide--dark-bg .danje-hero-slide__overlay {
  background: linear-gradient(to right, rgba(8, 8, 8, 0.65) 0%, rgba(8, 8, 8, 0.25) 40%, rgba(8, 8, 8, 0) 70%);
}
.danje-hero-slide--dark-bg .danje-hero-slide__title .fa-text {
  color: #ffffff; /* White text on dark wood background */
}

.danje-hero-slide__content {
  position: relative;
  z-index: 2;
  max-width: 550px;
  text-align: right;
}

/* Default state for elements to animate */
.danje-hero-slide__content .en-text,
.danje-hero-slide__content .fa-text,
.danje-hero-slide__content .danje-btn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-luxury), transform 0.8s var(--ease-luxury);
}

/* SEO/UX audit fix (2026-07-26): during the hero's crossFade transition, two
   slides are briefly visible by design — but without an explicit stacking
   order the incoming slide could render BELOW the outgoing one, showing as
   a jumbled double-image on tablet/mobile instead of a clean crossfade.
   Additive rule only, no vendor swiper-bundle.min.css edit. */
.danje-hero-swiper .swiper-slide {
  z-index: 1;
}
.danje-hero-swiper .swiper-slide-active {
  z-index: 2;
}

/* Active transitions with staggered delay */
.swiper-slide-active .danje-hero-slide__content .en-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

.swiper-slide-active .danje-hero-slide__content .fa-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 450ms;
}

.swiper-slide-active .danje-hero-slide__content .danje-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 750ms;
}

.danje-hero-slide__title {
  margin-bottom: var(--space-xl);
}

.danje-hero-slide__title .en-text {
  display: block;
  font-size: var(--text-sm);
  color: var(--gold);
  letter-spacing: 4px;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}

.danje-hero-slide__title .fa-text {
  display: block;
  font-size: var(--text-4xl);
  color: #fff;
  font-weight: 900;
  line-height: 1.4;
}

/* Custom Tir Month Slide Styles */
.danje-hero-slide--light-bg .main-title {
  color: #111111 !important; /* Dark charcoal */
  font-size: 38px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
}

.danje-hero-slide--light-bg .sub-title {
  color: #3f3f3f !important; /* Elegant slate grey */
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
}

.slide-pill-btn {
  border-radius: 99px !important;
  padding: 14px 36px !important;
  background-color: var(--gold) !important;
  color: var(--text-on-gold) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(201,168,76,0.2) !important;
  border: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.slide-pill-btn:hover {
  background-color: var(--gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(201,168,76,0.35) !important;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  background: var(--primary);
  opacity: 1;
}

.swiper-button-next, .swiper-button-prev {
  color: #fff;
  background: rgba(0,0,0,0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background 0.3s;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--primary);
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 18px;
}

.danje-btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  font-family: 'Vazirmatn', sans-serif !important;
}

.danje-btn--primary {
  background-color: var(--primary-dark);
  color: #fff;
  border: 1px solid var(--primary-dark);
}

.danje-btn--primary:hover {
  background-color: var(--primary);
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-gold);
}

@media (max-width: 640px) {
  .danje-home-hero {
    padding-block: 16px 22px;
  }

  .danje-hero-swiper,
  .danje-hero-slide {
    border-radius: 22px;
  }

  .danje-hero-slide {
    min-height: 560px;
    padding: 56px 20px;
    align-items: center;
    justify-content: center;
  }

  .danje-hero-slide__content {
    max-width: 285px;
    width: 100%;
    text-align: center;
  }

  .danje-hero-slide__title .en-text {
    font-size: 11px;
    letter-spacing: 3px;
  }

  .danje-hero-slide__title .fa-text {
    font-size: 30px;
    line-height: 1.45;
  }

  .danje-hero-slide__overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 70%);
  }
}

.danje-section__header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.danje-product-swiper {
  padding: 10px; /* Room for card shadow */
  margin: -10px;
}

/* ==========================================================================
   7. HOMEPAGE: FEATURES ROW
   ========================================================================== */

.danje-home-features {
  padding-bottom: 0;
}

.danje-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-xl);
}

@media (max-width: 768px) {
  .danje-features-grid { 
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) 0;
  }
}

.danje-feature-card {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-sm);
  text-align: center;
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease-out);
  position: relative;
}

.danje-feature-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  width: 1px;
  background-color: var(--border);
}

.danje-feature-card:hover {
  transform: translateY(-2px);
}

.danje-feature-card .icon {
  margin-bottom: var(--space-sm);
}

.danje-feature-card h3 {
  font-size: var(--text-base);
  font-weight: 800;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.danje-feature-card p {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   7. HOMEPAGE: BANNERS ROW
   ========================================================================== */
.danje-home-banners {
  padding-bottom: var(--space-4xl);
}

.danje-banners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .danje-banners-grid { grid-template-columns: 1fr; }
}

.danje-banner-card {
  position: relative;
  border-radius: 30px; /* Bakala style */
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
}

.danje-banner-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.danje-banner-card:hover img {
  transform: scale(1.05);
}

.danje-banner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
  z-index: 2;
}

.danje-banner-card__content {
  position: relative;
  z-index: 3;
}

.danje-banner-card__content h3 {
  color: #fff;
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 0 0 10px 0;
}

.danje-banner-card__content a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold-light);
  font-size: var(--text-sm);
  font-weight: 700;
}

.danje-banner-card__content a:hover {
  color: var(--gold);
}

/* 15. ACCESSIBILITY UTILITIES */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  clip: auto;
  clip-path: none;
  color: var(--gold-a11y);
  display: block;
  font-weight: 700;
  height: auto;
  left: 8px;
  padding: 12px 20px;
  position: fixed;
  top: 8px;
  width: auto;
  z-index: 100000;
}

/* ==========================================================================
   16. GENERIC PAGE STYLES
   ========================================================================== */
.danje-page {
  padding-block: var(--section-v);
}

.danje-page__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.danje-page__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.danje-page__content {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.9;
}

/* ==========================================================================
   17. ABOUT US PAGE STYLES
   ========================================================================== */
.danje-about-page {
  padding-block: var(--section-v);
}

.danje-about-page__hero {
  text-align: center;
  margin-bottom: var(--space-4xl);
  border-bottom: 1px solid var(--divider);
  padding-bottom: var(--space-2xl);
}

.danje-about-page__eyebrow {
  font-size: var(--text-xs);
  color: var(--gold-dark);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xs);
}

.danje-about-page__title {
  font-size: var(--text-5xl);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-md) 0;
}

.danje-about-page__lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.danje-about-page__story,
.danje-about-page__process {
  padding-block: var(--space-3xl);
}

.danje-about-page__story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.danje-about-page__story-grid--reverse {
  direction: ltr; /* reverse layout logic cleanly */
}

.danje-about-page__story-grid--reverse .danje-about-page__story-content {
  direction: rtl; /* restore content text direction */
}

.danje-about-page__story-grid--reverse .danje-about-page__story-visual {
  direction: rtl;
}

@media (max-width: 1024px) {
  .danje-about-page__story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .danje-about-page__story-grid--reverse {
    direction: rtl;
  }
}

.danje-about-page__story-content h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

.danje-about-page__story-content p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: var(--space-md);
}

.danje-about-page__story-visual {
  position: relative;
}

.danje-about-page__story-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}

.danje-about-page__story-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-luxury);
}

.danje-about-page__story-img-wrap:hover img {
  transform: scale(1.04);
}

.danje-about-page__story-gold-overlay {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out);
  pointer-events: none;
  z-index: 5;
}

.danje-about-page__story-img-wrap:hover .danje-about-page__story-gold-overlay {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-gold);
}

/* Pillars section */
.danje-about-page__pillars {
  background-color: var(--bg-section-alt);
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.danje-about-page__section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.danje-about-page__sub-eyebrow {
  font-size: var(--text-xs);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xs);
}

.danje-about-page__section-header h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.danje-about-page__pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .danje-about-page__pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.danje-about-page__pillar-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: all var(--dur-base) var(--ease-luxury);
  box-shadow: var(--shadow-card);
}

.danje-about-page__pillar-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-card-hover);
}

.danje-about-page__pillar-card .icon-wrap {
  color: var(--gold);
  background-color: var(--gold-muted);
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  transition: transform var(--dur-base) var(--ease-spring);
}

.danje-about-page__pillar-card:hover .icon-wrap {
  transform: scale(1.1) rotate(5deg);
}

.danje-about-page__pillar-card h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

.danje-about-page__pillar-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
}

/* CTA Banner */
.danje-about-page__cta {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  margin-top: var(--space-4xl);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.danje-about-page__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--gold-glow) 0%, transparent 70%);
  pointer-events: none;
}

.danje-about-page__cta-inner {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: 0 auto;
}

.danje-about-page__cta-inner h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

.danje-about-page__cta-inner p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.danje-about-page__cta-inner .danje-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-3xl);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}

.danje-btn--gold {
  background-color: var(--gold-dark);
  color: var(--text-on-gold);
  transition: all var(--dur-fast) var(--ease-out);
}

.danje-btn--gold:hover {
  background-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* ==========================================================================
   18. CONTACT US PAGE STYLES
   ========================================================================== */
.danje-contact-page {
  padding-block: var(--section-v);
}

.danje-contact-page__hero {
  text-align: center;
  margin-bottom: var(--space-4xl);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2xl);
}

.danje-contact-page__eyebrow {
  font-size: var(--text-xs);
  color: var(--gold-dark);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xs);
}

.danje-contact-page__title {
  font-size: var(--text-5xl);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-md) 0;
}

.danje-contact-page__lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.danje-contact-page__grid {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .danje-contact-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

.danje-contact-page__info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.danje-contact-page__info-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  transition: all var(--dur-base) var(--ease-luxury);
  box-shadow: var(--shadow-card);
}

.danje-contact-page__info-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-card-hover);
}

.danje-contact-page__info-card .icon-wrap {
  color: var(--gold);
  background-color: var(--gold-muted);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-details h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.card-details p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-xs) 0;
}

.card-details p:last-child {
  margin-bottom: 0;
}

.card-details a {
  color: var(--text-primary);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out);
}

.card-details a:hover {
  color: var(--gold);
}

/* Social links styling */
.danje-contact-page__socials {
  display: flex;
  gap: var(--space-md, 16px);
  margin-top: var(--space-md);
}

.danje-contact-page__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all var(--dur-fast) var(--ease-out);
  padding: 0;
}

.danje-contact-page__socials a svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.danje-contact-page__socials a:hover svg {
  transform: scale(1.1);
}

/* Telegram Color Styling */
.danje-contact-page__socials a.social-icon--telegram {
  color: #0088cc !important;
  border: 1px solid rgba(0, 136, 204, 0.2) !important;
  background-color: rgba(0, 136, 204, 0.04) !important;
}
.danje-contact-page__socials a.social-icon--telegram:hover {
  background-color: #0088cc !important;
  border-color: #0088cc !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.25) !important;
  transform: translateY(-2px);
}

/* Instagram Color Styling */
.danje-contact-page__socials a.social-icon--instagram {
  color: #e1306c !important;
  border: 1px solid rgba(225, 48, 108, 0.2) !important;
  background-color: rgba(225, 48, 108, 0.04) !important;
}
.danje-contact-page__socials a.social-icon--instagram:hover {
  background-color: #e1306c !important;
  border-color: #e1306c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.25) !important;
  transform: translateY(-2px);
}

/* WhatsApp Color Styling */
.danje-contact-page__socials a.social-icon--whatsapp {
  color: #25d366 !important;
  border: 1px solid rgba(37, 211, 102, 0.2) !important;
  background-color: rgba(37, 211, 102, 0.04) !important;
}
.danje-contact-page__socials a.social-icon--whatsapp:hover {
  background-color: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
  transform: translateY(-2px);
}

/* Maps wrap */
.danje-contact-page__map-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.danje-contact-page__map iframe {
  display: block;
}

/* Form Styling */
.danje-contact-page__form-col {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-card);
}

.danje-contact-page__form-container h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

.danje-contact-page__form-container p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  line-height: 1.7;
}

.danje-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.form-group .required {
  color: #C62828;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: all var(--dur-fast) var(--ease-out);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-border);
}

.danje-contact-form .danje-btn {
  align-self: flex-start;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-3xl);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
}

/* ==========================================================================
   18. INTERACTIVE WHATSAPP SUPPORT LINK STYLES
   ========================================================================== */
.danje-header-nav__support-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.danje-header-nav__support-link:hover {
  transform: translateY(-1px);
}

.danje-header-nav__support-link:hover strong {
  color: var(--gold-light) !important;
}

/* ==========================================================================
   19. ADVANCED AJAX LIVE SEARCH DROPDOWN STYLES (Modern 2026 Overhaul)
   ========================================================================== */
.danje-header__search {
  position: relative;
}

/* Overhauled 580px mega-menu-style search dropdown */
.danje-search-results-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-start: 0;
  width: 580px !important;
  max-width: 90vw;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(197, 168, 128, 0.2);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
  z-index: 9999 !important;
  max-height: 480px;
  overflow-y: auto;
  transition: all var(--dur-base) var(--ease-luxury);
  animation: danje-fade-slide-up 0.4s var(--ease-luxury) forwards;
}

[data-theme="dark"] .danje-search-results-dropdown {
  background: rgba(22, 22, 22, 0.9);
  border: 1px solid rgba(201, 168, 76, 0.25);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

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

/* Custom scrollbar */
.danje-search-results-dropdown::-webkit-scrollbar {
  width: 6px;
}
.danje-search-results-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.danje-search-results-dropdown::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 3px;
}
.danje-search-results-dropdown::-webkit-scrollbar-thumb:hover {
  background-color: var(--gold-border);
}

.danje-search-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.danje-search-dropdown__item {
  border-bottom: 1px solid var(--divider);
}

.danje-search-dropdown__item:last-child {
  border-bottom: none;
}

.danje-search-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  text-decoration: none;
  color: var(--text-primary);
  border-inline-start: 3px solid transparent;
  transition: all var(--dur-base) var(--ease-luxury);
}

.danje-search-dropdown__link:hover {
  background-color: #FAF6F0; /* soft warm beige */
  border-inline-start-color: var(--gold);
}

[data-theme="dark"] .danje-search-dropdown__link:hover {
  background-color: #1A120B; /* dark warm gold-tinted surface */
}

/* Thumbnail wrapper & Zoom micro-interaction */
.danje-search-dropdown__thumb-wrapper {
  width: 130px;
  height: 130px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background-color: var(--bg-card);
}

.danje-search-dropdown__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-luxury);
}

.danje-search-dropdown__link:hover .danje-search-dropdown__thumb {
  transform: scale(1.06);
}

/* Center Info area */
.danje-search-dropdown__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.danje-search-dropdown__category {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: start;
}

.danje-search-dropdown__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  transition: color var(--dur-fast) var(--ease-out);
  text-align: start;
  line-height: 1.4;
}

.danje-search-dropdown__link:hover .danje-search-dropdown__title {
  color: var(--gold);
}

/* Left Pricing & Badges */
.danje-search-dropdown__price-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  text-align: end;
}

.danje-search-dropdown__price {
  font-size: 16px;
  color: #c5a880 !important; /* Premium luxury gold price color token */
  font-weight: 700;
}

.danje-search-dropdown__price del {
  color: var(--text-muted);
  margin-inline-end: 6px;
  font-weight: 400;
  text-decoration: line-through;
  font-size: 12px;
}

.danje-search-dropdown__price ins {
  text-decoration: none;
  font-weight: 700;
  color: #c5a880 !important;
}

.danje-search-dropdown__sale-badge {
  background-color: var(--gold-muted);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--gold-border);
}

[data-theme="dark"] .danje-search-dropdown__sale-badge {
  color: var(--gold-light);
}

/* Footer all link */
.danje-search-dropdown__footer {
  padding: var(--space-lg);
  text-align: center;
  background-color: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.danje-search-dropdown__all-link {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.danje-search-dropdown__all-link:hover {
  color: var(--gold-light);
}

/* Empty, Error, and Loading blocks */
.danje-search-dropdown__loading,
.danje-search-dropdown__error,
.danje-search-dropdown__no-results {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-secondary);
  background-color: var(--bg-surface);
  border-radius: 12px;
}

.danje-search-dropdown__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.danje-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: danje-spin 0.8s linear infinite;
}

@keyframes danje-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   20. PREMIUM SPLIT-PANE MEGA MENU STYLES (Modern RaimaStudio Design)
   ========================================================================== */
.danje-nav__menu-item.has-mega-menu {
  position: static; /* Force absolute mega menu to align to the full width of .danje-header-nav wrapper */
}

.danje-nav__mega-menu {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-block-start: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-luxury),
              visibility var(--dur-slow) var(--ease-luxury),
              transform var(--dur-slow) var(--ease-luxury);
  z-index: 1000;
  overflow: hidden;
  direction: rtl !important;
}

[data-theme="dark"] .danje-nav__mega-menu {
  background: rgba(17, 17, 17, 0.96);
  border-block-start: 1px solid rgba(255, 255, 255, 0.05);
  border-block-end: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* Hover triggers visibility */
.danje-nav__menu-item.has-mega-menu:hover .danje-nav__mega-menu,
.danje-nav__mega-menu.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.danje-mega-menu__container {
  display: flex !important;
  flex-direction: row-reverse !important; /* Sidebar RIGHT, Content LEFT */
  max-width: var(--container);
  margin-inline: auto;
  min-height: 250px; /* Slimmed height for compactness */
  direction: ltr !important; /* Force LTR layout flow on the outer container so row-reverse places first child (sidebar) on the right */
}

/* 1. RIGHT SIDEBAR PANE (Compact) */
.danje-mega-menu__sidebar {
  width: 210px; /* Reduced from 240px */
  flex-shrink: 0;
  border-inline-start: 1px solid var(--border); /* Divider line on the left side of the right sidebar */
  padding: 10px 12px; /* Reduced padding */
  background: rgba(0, 0, 0, 0.012);
  direction: rtl !important;
}

[data-theme="dark"] .danje-mega-menu__sidebar {
  background: rgba(255, 255, 255, 0.01);
  border-inline-start-color: rgba(255, 255, 255, 0.05);
}

.danje-mega-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.danje-mega-sidebar-item {
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.danje-mega-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 10px; /* Shrunk padding */
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px; /* Shrunk font size */
  transition: color var(--dur-fast) var(--ease-out);
}

.danje-mega-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; /* Shrunk from 32px */
  height: 28px; /* Shrunk from 32px */
  border-radius: 50%;
  background: var(--border);
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}

[data-theme="dark"] .danje-mega-sidebar-icon {
  background: rgba(255, 255, 255, 0.03);
}

/* Active sidebar item styling */
.danje-mega-sidebar-item.is-active {
  background-color: var(--gold-muted);
}

.danje-mega-sidebar-item.is-active .danje-mega-sidebar-link {
  color: var(--gold-dark);
}

[data-theme="dark"] .danje-mega-sidebar-item.is-active .danje-mega-sidebar-link {
  color: var(--gold-light);
}

.danje-mega-sidebar-item.is-active .danje-mega-sidebar-icon {
  background-color: var(--gold);
  color: var(--text-on-gold);
}

/* Hover effects for non-active items */
.danje-mega-sidebar-item:not(.is-active):hover {
  background-color: rgba(201, 168, 76, 0.04);
}

.danje-mega-sidebar-item:not(.is-active):hover .danje-mega-sidebar-link {
  color: var(--text-primary);
}

.danje-mega-sidebar-item:not(.is-active):hover .danje-mega-sidebar-icon {
  background-color: var(--border-hover);
  color: var(--gold);
}


/* 2. LEFT CONTENT PANE (Compact) */
.danje-mega-menu__content {
  flex-grow: 1;
  padding: 10px 16px; /* Reduced padding */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  direction: rtl !important; /* Restores Persian text alignments to RTL */
}

.danje-mega-panel {
  display: none;
  grid-template-columns: 210px 1fr; /* Reduced text column width from 240px to 210px */
  gap: var(--space-lg);
  height: 100%;
  animation: danje-panel-fade-in 0.4s var(--ease-luxury) forwards;
}

@keyframes danje-panel-fade-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.danje-mega-panel.is-active {
  display: grid;
}

/* Panel Header info (Compact) */
.danje-mega-panel__header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-xs); /* Shrunk gap */
  text-align: start;
  border-inline-end: 1px solid var(--border);
  padding-inline-end: var(--space-lg);
}

[data-theme="dark"] .danje-mega-panel__header {
  border-inline-end-color: rgba(255, 255, 255, 0.05);
}

.danje-mega-panel__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.danje-mega-panel__count {
  font-size: 22px; /* Shrunk from 32px */
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

.danje-mega-panel__title {
  font-size: 15px; /* Shrunk from 18px */
  font-weight: 800;
  color: var(--text-primary);
}

.danje-mega-panel__description {
  font-size: 10px; /* Shrunk from 11px */
  color: var(--text-secondary);
  line-height: 1.5; /* Shrunk from 1.7 */
  margin: 0;
}

.danje-mega-panel__all-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px; /* Shrunk */
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-pill);
  font-size: 10px; /* Shrunk */
  font-weight: 700;
  color: var(--gold-dark);
  text-decoration: none;
  margin-top: 6px; /* Shrunk */
  transition: all var(--dur-base) var(--ease-luxury);
}

[data-theme="dark"] .danje-mega-panel__all-btn {
  color: var(--gold-light);
}

.danje-mega-panel__all-btn:hover {
  background-color: var(--gold);
  color: var(--text-on-gold);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(201, 168, 76, 0.15);
}

.danje-mega-panel__all-btn svg {
  transition: transform var(--dur-fast) var(--ease-out);
}

.danje-mega-panel__all-btn:hover svg {
  transform: translateX(-3px);
}

/* Subcategory chips (zیردسته‌ها) inside each mega-menu panel */
.danje-mega-panel__subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

[data-theme="dark"] .danje-mega-panel__subcats {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.danje-mega-panel__subcat-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-luxury);
}

[data-theme="dark"] .danje-mega-panel__subcat-link {
  border-color: rgba(255, 255, 255, 0.08);
}

.danje-mega-panel__subcat-link:hover {
  background-color: var(--gold);
  color: var(--text-on-gold);
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* Panel Asymmetric Product Grid (Compact) */
.danje-mega-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 95px); /* Shrunk row heights from 120px to 95px */
  gap: 8px; /* Shrunk gap */
}

/* Position cards symmetrically mirrored for RTL */
.danje-mega-card--large {
  grid-column: 3; /* Far left in RTL */
  grid-row: 1 / span 2;
  display: flex !important;
  flex-direction: column !important;
}

.danje-mega-card--large .danje-mega-card__image-wrapper {
  height: 140px; /* Fixed height for featured product image */
  flex-shrink: 0;
  width: 100%;
}

.danje-mega-card--large .danje-mega-card__details {
  flex-grow: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--divider);
}

.danje-mega-panel__grid .danje-mega-card:nth-child(2) {
  grid-column: 2; /* Middle column, top */
  grid-row: 1;
}

.danje-mega-panel__grid .danje-mega-card:nth-child(3) {
  grid-column: 1; /* Far right column, top (next to header) */
  grid-row: 1;
}

.danje-mega-panel__grid .danje-mega-card:nth-child(4) {
  grid-column: 2; /* Middle column, bottom */
  grid-row: 2;
}

.danje-mega-panel__grid .danje-mega-card:nth-child(5) {
  grid-column: 1; /* Far right column, bottom (next to header) */
  grid-row: 2;
}

/* Showcase Cards (Compact) */
.danje-mega-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  transition: all var(--dur-base) var(--ease-luxury);
}

[data-theme="dark"] .danje-mega-card {
  background-color: rgba(255, 255, 255, 0.01);
}

.danje-mega-card:hover {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

/* Medium (2x2) cards are rendered horizontally to keep square images */
.danje-mega-card--medium {
  display: flex !important;
  flex-direction: row !important; /* Horizontal layout: image on right, details on left in RTL */
  align-items: center;
  height: 100%;
}

.danje-mega-card__image-wrapper {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-primary);
}

.danje-mega-card--medium .danje-mega-card__image-wrapper {
  width: 93px; /* Square width (equal to grid row height 95px minus card borders) */
  height: 93px; /* Square height */
  flex-shrink: 0;
}

.danje-mega-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-luxury);
}

.danje-mega-card:hover .danje-mega-card__img {
  transform: scale(1.05);
}

.danje-mega-card__sale-badge {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  background-color: var(--gold-muted);
  color: var(--gold-dark);
  border: 1px solid var(--gold-border);
  font-size: 8px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  z-index: 2;
}

[data-theme="dark"] .danje-mega-card__sale-badge {
  color: var(--gold-light);
}

/* Card details info (Compact) */
.danje-mega-card__details {
  padding: 3px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: start;
}

.danje-mega-card--medium .danje-mega-card__details {
  flex-grow: 1;
  padding: 8px 10px;
  justify-content: center;
  gap: 2px;
  border-inline-start: 1px solid var(--divider); /* Divider between right image and left details */
}

.danje-mega-card__title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.danje-mega-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.danje-mega-card__price {
  font-size: 10px;
  color: var(--gold-a11y) !important;
  font-weight: 700;
}

.danje-mega-card__price del {
  color: var(--text-muted);
  margin-inline-end: 4px;
  text-decoration: line-through;
  font-size: 8px;
}

.danje-mega-card__price ins {
  text-decoration: none;
  color: var(--gold-a11y) !important;
}

/* Placeholders when product catalog is empty */
.danje-mega-card--empty {
  border-style: dashed;
  border-color: var(--border);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.danje-mega-card--empty .danje-mega-card__bg-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
}

.danje-mega-card--empty .danje-mega-card__title-placeholder {
  position: absolute;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Responsive constraints */
@media (max-width: 1024px) {
  .danje-nav__mega-menu {
    display: none; /* Desktop menu hidden on mobile viewports; handled by the sliding drawer mobile list */
  }
}

/* ==========================================================================
   CUSTOM LOGO SVG TRANSITIONS
   ========================================================================== */
.danje-logo-svg {
  transition: transform var(--dur-base) var(--ease-luxury), filter var(--dur-base) var(--ease-out);
}

.danje-header__center-logo:hover .danje-logo-svg,
.danje-footer-brand-card__logo:hover .danje-logo-svg {
  transform: scale(1.06);
  filter: drop-shadow(0 2px 10px var(--gold-border));
}

/* ==========================================================================
   HOMEPAGE CINEMATIC BRAND VIDEO SECTION
   ========================================================================== */
.danje-brand-video-section {
  background-color: var(--bg-section-alt);
  padding-block: var(--section-v, 100px);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.danje-brand-video__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.danje-brand-video__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.danje-brand-video__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-a11y);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-md);
  position: relative;
  display: inline-block;
}

.danje-brand-video__eyebrow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  inset-inline-start: 0;
  width: 30px;
  height: 2px;
  background-color: var(--gold);
}

.danje-brand-video__title {
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-xl);
}

.danje-brand-video__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 2.1;
  margin-bottom: var(--space-2xl);
}

.danje-brand-video__text p {
  margin-bottom: var(--space-md);
}

.danje-brand-video__text p:last-child {
  margin-bottom: 0;
}

.danje-brand-video__actions {
  display: flex;
  gap: var(--space-md);
}

.danje-brand-video__actions .btn-arrow-icon {
  margin-inline-start: var(--space-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.danje-brand-video__actions a:hover .btn-arrow-icon {
  transform: translateX(-4px); /* RTL direction points left */
}

/* Video Card visual */
.danje-brand-video__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.danje-video-card-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  background-color: var(--bg-primary);
}

.danje-video-card__glow-border {
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-border);
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  transition: all var(--dur-base) var(--ease-out);
}

.danje-video-card-container:hover .danje-video-card__glow-border {
  border-color: var(--gold);
  box-shadow: inset 0 0 20px rgba(201, 168, 76, 0.2);
}

.danje-cinematic-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-luxury);
  filter: brightness(0.85);
}

.danje-video-card-container:hover .danje-cinematic-video {
  transform: scale(1.03);
}

/* Luxury Trigger Play Button */
.danje-video-play-trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(8, 8, 8, 0.75);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-spring);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.play-pulse-circle {
  position: absolute;
  inset: -8px;
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  opacity: 0.5;
  animation: pulse-gold 3s infinite;
  pointer-events: none;
}

.play-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast);
}

.danje-video-play-trigger:hover {
  background-color: var(--gold);
  color: var(--text-on-gold);
  border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--shadow-gold);
}

.danje-video-play-trigger:hover .play-pulse-circle {
  border-color: var(--gold);
}

.danje-video-play-trigger:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* Hide play button in the center when video is playing, but show on hover */
.danje-video-card-container.is-playing .danje-video-play-trigger {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
}

.danje-video-card-container.is-playing:hover .danje-video-play-trigger {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Custom Mute button */
.danje-video-mute-trigger {
  position: absolute;
  bottom: var(--space-md);
  inset-inline-end: var(--space-md);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(8, 8, 8, 0.6);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.danje-video-mute-trigger:hover {
  color: var(--gold);
  border-color: var(--gold-border);
  background-color: rgba(8, 8, 8, 0.85);
  transform: scale(1.05);
}

@media (max-width: 1024px) {
  .danje-brand-video__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  
  .danje-brand-video-section {
    padding-block: var(--space-3xl);
  }
}

/* ==========================================================================
   13. DANJE VIDEO STORIES (REELS) STYLING
   ========================================================================== */
.danje-video-stories-section {
  background-color: var(--bg-section-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.danje-stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  direction: rtl;
}

.danje-story-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-luxury),
              border-color var(--dur-slow) var(--ease-luxury),
              box-shadow var(--dur-slow) var(--ease-luxury);
  will-change: transform, box-shadow;
}

.danje-story-card__image-wrapper {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--dur-slow) var(--ease-luxury);
  z-index: 1;
}

.danje-story-card__fallback-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1b1a17 0%, #111 100%);
}

.danje-story-card__fallback-icon {
  width: 80px;
  height: 80px;
  opacity: 0.25;
  transition: transform var(--dur-slow) var(--ease-luxury), opacity var(--dur-slow) var(--ease-luxury);
}

.danje-story-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 8, 8, 0.95) 0%,
    rgba(8, 8, 8, 0.5) 35%,
    rgba(8, 8, 8, 0.1) 70%,
    transparent 100%
  );
  z-index: 2;
  transition: opacity var(--dur-base) var(--ease-out);
}

.danje-story-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--gold-muted) 0%, transparent 70%);
  opacity: 0;
  z-index: 3;
  transition: opacity var(--dur-slow) var(--ease-luxury);
  pointer-events: none;
}

.danje-story-card__play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 4;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(8, 8, 8, 0.85);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  opacity: 0.8;
  transition: all var(--dur-base) var(--ease-spring);
}

.play-badge__pulse {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  transform: scale(1);
}

.danje-story-card:hover .play-badge__pulse {
  animation: play-pulse 2s infinite var(--ease-out);
}

.play-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -2px; /* Center alignment offset for play icon shape */
  transition: transform var(--dur-base) var(--ease-out);
}

.danje-story-card__content {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: var(--space-lg);
  z-index: 4;
  text-align: start;
}

.danje-story-card__title {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-xs) 0;
  transition: color var(--dur-base) var(--ease-out);
  line-height: 1.4;
}

.danje-story-card__meta {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  opacity: 0.85;
}

/* Hover States for Cards */
.danje-story-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-card-hover);
}

.danje-story-card:hover .danje-story-card__image-wrapper {
  transform: scale(1.06);
}

.danje-story-card:hover .danje-story-card__video-preview {
  transform: scale(1.06);
}

.danje-story-card:hover .danje-story-card__fallback-icon {
  opacity: 0.45;
  transform: scale(1.1);
}

.danje-story-card:hover .danje-story-card__glow {
  opacity: 1;
}

.danje-story-card:hover .danje-story-card__play-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
  background-color: var(--gold);
  color: var(--text-on-gold);
  border-color: var(--gold);
  box-shadow: 0 0 20px var(--gold-border);
}

.danje-story-card:hover .danje-story-card__title {
  color: var(--gold-light);
}

@keyframes play-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ==========================================================================
   14. STORY LIGHTBOX MODAL (REELS FORMAT)
   ========================================================================== */
.danje-story-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.danje-story-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(6, 6, 6, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.danje-story-lightbox__wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  padding: var(--space-md);
  box-sizing: border-box;
}

.danje-story-lightbox__player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gold-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(201, 168, 76, 0.15);
}

.danje-story-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Progress bar indicators at the top */
.danje-story-lightbox__progress-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.15);
  z-index: 10;
}

.danje-story-lightbox__progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--gold);
  transition: width 0.1s linear;
}

/* Lightbox Controls overlay */
.danje-story-lightbox__close {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 11;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(8, 8, 8, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.danje-story-lightbox__close:hover {
  background-color: rgba(201, 168, 76, 0.9);
  color: var(--text-on-gold);
  border-color: var(--gold);
  transform: scale(1.05);
}

.danje-story-lightbox__controls {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 11;
  display: flex;
  gap: var(--space-sm);
}

.danje-story-lightbox__play-btn,
.danje-story-lightbox__mute-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(8, 8, 8, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.danje-story-lightbox__play-btn:hover,
.danje-story-lightbox__mute-btn:hover {
  background-color: rgba(201, 168, 76, 0.2);
  color: var(--gold-light);
  border-color: var(--gold-border);
}

/* Story Info at the bottom */
.danje-story-lightbox__info-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl) var(--space-lg) var(--space-lg) var(--space-lg);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  z-index: 10;
  text-align: start;
  pointer-events: none;
}

.danje-story-lightbox__title {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 4px 0;
}

.danje-story-lightbox__desc {
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 500;
  margin: 0;
}

/* Responsive Grid Breakpoints */
@media (max-width: 1024px) {
  .danje-stories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .danje-stories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  .danje-story-card__title {
    font-size: var(--text-base);
  }
  
  .danje-story-lightbox__wrapper {
    padding: 0;
  }
  
  .danje-story-lightbox__player-box {
    border-radius: 0;
    border: none;
    height: 100vh;
    aspect-ratio: auto;
  }
}








/* ==========================================================================
   ABOUT PAGE v2 — Video Hero, Editorial Pillars, Location Section
   ========================================================================== */

/* --- Hero video --- */
.danje-about-hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0 auto var(--space-3xl);
	max-width: calc(var(--container) - var(--gutter) * 2);
	background: var(--bg-primary, #080808);
	border-radius: var(--radius-lg);
}
@media (max-width: 900px) {
	.danje-about-hero {
		border-radius: 0;
		max-width: 100%;
	}
}
.danje-about-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.danje-about-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.danje-about-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8,8,8,.6) 0%, rgba(8,8,8,.55) 40%, rgba(8,8,8,.9) 100%),
	            radial-gradient(ellipse at center, rgba(8,8,8,.35) 0%, rgba(8,8,8,.15) 60%);
}
@media (max-width: 600px) {
	.danje-about-hero__scrim {
		background: linear-gradient(180deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.68) 45%, rgba(8,8,8,.92) 100%);
	}
}
.danje-about-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 760px;
	padding-block: var(--space-3xl);
}
.danje-about-hero__inner .danje-about-page__eyebrow {
	color: var(--gold-light, #E8D08A);
}
.danje-about-hero__title {
	font-size: clamp(2rem, 4.5vw, var(--text-5xl));
	font-weight: 800;
	color: #F5F0E6;
	line-height: 1.35;
	margin: var(--space-md) 0;
	text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.danje-about-hero__lead {
	color: rgba(245,240,230,.9);
	font-size: var(--text-lg);
	line-height: 1.9;
	max-width: 560px;
	margin-inline: auto;
	text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.danje-about-hero__inner .danje-about-page__eyebrow {
	text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
@media (max-width: 600px) {
	.danje-about-hero {
		min-height: 72vh;
	}
	.danje-about-hero__inner {
		padding-inline: var(--space-md);
	}
}
.danje-about-hero__scroll-cue {
	position: absolute;
	bottom: var(--space-xl);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.danje-about-hero__scroll-cue span {
	display: block;
	width: 1px;
	height: 40px;
	background: linear-gradient(180deg, var(--gold, #C9A84C), transparent);
	animation: danje-about-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes danje-about-scroll-cue {
	0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
	40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
	60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
	100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Reuse .danje-video-card-container (already styled for home cinematic video);
   this modifier only removes the extra height/aspect the home version uses. */
.danje-about-video-card {
	aspect-ratio: 4 / 5;
}

/* --- Editorial pillars list (asymmetric, replaces generic 3-col cards) --- */
.danje-about-pillars {
	padding-block: var(--space-3xl) var(--space-2xl);
}
.danje-about-pillars-list {
	max-width: 880px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}
.danje-about-pillar-row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: start;
	gap: var(--space-lg);
	padding-block: var(--space-xl);
	border-bottom: 1px solid var(--divider, rgba(0,0,0,.06));
	transition: padding-inline-start var(--dur-base) var(--ease-out);
}
.danje-about-pillar-row:first-child {
	border-top: 1px solid var(--divider, rgba(0,0,0,.06));
}
.danje-about-pillar-row:hover {
	padding-inline-start: var(--space-sm);
}
.danje-about-pillar-row__number {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--gold-muted, rgba(201,168,76,.35));
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: color var(--dur-base) var(--ease-out);
}
.danje-about-pillar-row:hover .danje-about-pillar-row__number {
	color: var(--gold, #C9A84C);
}
.danje-about-pillar-row__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold, #C9A84C);
	background: var(--gold-muted, rgba(201,168,76,.12));
	flex-shrink: 0;
	margin-top: 2px;
}
.danje-about-pillar-row__text h3 {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs);
}
.danje-about-pillar-row__text p {
	color: var(--text-secondary);
	line-height: 1.9;
	margin: 0;
	max-width: 560px;
}
@media (max-width: 640px) {
	.danje-about-pillar-row {
		grid-template-columns: auto 1fr;
		grid-template-areas: "num icon" "text text";
		row-gap: var(--space-sm);
	}
	.danje-about-pillar-row__number { grid-area: num; }
	.danje-about-pillar-row__icon { grid-area: icon; justify-self: start; }
	.danje-about-pillar-row__text { grid-area: text; }
}

/* --- Location section: aerial video (container-width, matches header) + glass card --- */
.danje-about-location {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: var(--space-3xl) auto;
	max-width: calc(var(--container) - var(--gutter) * 2);
	border-radius: var(--radius-lg);
}
@media (max-width: 900px) {
	.danje-about-location {
		border-radius: 0;
		max-width: 100%;
	}
}
.danje-about-location__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.danje-about-location__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.danje-about-location__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8,8,8,.82) 0%, rgba(8,8,8,.55) 45%, rgba(8,8,8,.25) 100%);
}
.danje-about-location__card {
	position: relative;
	z-index: 1;
	max-width: 460px;
	padding: var(--space-2xl);
	border-radius: var(--radius-lg);
	background: rgba(20, 18, 12, .45);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(201, 168, 76, .25);
	box-shadow: var(--shadow-card-hover, 0 12px 48px rgba(0,0,0,.6));
}
.danje-about-location__card .danje-about-page__sub-eyebrow {
	color: var(--gold-light, #E8D08A);
}
.danje-about-location__card h2 {
	color: #F5F0E6;
	font-size: var(--text-3xl);
	font-weight: 800;
	margin: var(--space-sm) 0 var(--space-md);
}
.danje-about-location__address {
	color: rgba(245,240,230,.85);
	line-height: 1.9;
	margin-bottom: var(--space-lg);
}
.danje-about-location__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}
.danje-about-location__call-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: transparent;
	border: 1px solid rgba(245,240,230,.3);
	color: #F5F0E6;
}
.danje-about-location__call-btn:hover {
	border-color: var(--gold, #C9A84C);
	color: var(--gold-light, #E8D08A);
}
@media (max-width: 768px) {
	.danje-about-location {
		min-height: 85vh;
		align-items: flex-end;
	}
	.danje-about-location__card {
		max-width: 100%;
		width: 100%;
		padding: var(--space-lg);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		margin-bottom: 0;
	}
	.danje-about-location__card h2 {
		font-size: var(--text-2xl);
		margin-block: var(--space-xs) var(--space-sm);
	}
	.danje-about-location__address {
		margin-bottom: var(--space-md);
		font-size: var(--text-sm);
	}
	.danje-about-location__actions {
		gap: var(--space-sm);
	}
	.danje-about-location__actions .danje-btn {
		flex: 1 1 auto;
		text-align: center;
		white-space: nowrap;
	}
}

/* Respect reduced-motion preference: freeze all about-page autoplay videos on first frame */
@media (prefers-reduced-motion: reduce) {
	.danje-autoplay-video {
		animation: none !important;
	}
}

.danje-shipping-notice {
	background: var(--gold-wash, rgba(201,168,76,0.08));
	border: 1px solid var(--gold-border, rgba(201,168,76,0.3));
	border-radius: var(--radius-md, 10px);
	padding: 12px 16px;
	margin: 12px 0;
	font-size: 13.5px;
	color: var(--text-primary);
	line-height: 1.8;
}

.danje-terms-inline-link {
	color: var(--gold-a11y);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--gold-border);
	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.danje-terms-inline-link:hover {
	color: var(--gold-dark);
	border-color: var(--gold-dark);
}

/* 17. MOBILE TAP-TARGET ACCESSIBILITY (Lighthouse: touch targets ≥ 44x44px)
   Scoped to mobile only, transparent buttons only — enlarges the invisible
   hit area without changing icon size or visual density. */
@media (max-width: 768px) {
	.danje-theme-toggle,
	.danje-cart-drawer__close,
	.danje-nav__mobile-close,
	.danje-footer-brand-card__scroll-top {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.danje-header__action-link {
		min-height: 44px;
		padding-block: var(--space-xs);
	}

	.support-pill-link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}