/**
 * Neutralize legacy main.css conflicts on migrated storefront pages.
 * Loads last — main.css must load before the design-system stack.
 */

body.sf-storefront {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

/* Product card — استایل‌ها کاملاً در product-card.css با انتخابگرهای
   compound مدیریت می‌شوند و از main.css جلو می‌کنند. این‌جا فقط صرفاً
   اطمینان می‌دهیم قوانای قدیمی خنثی هستند. */

/* Header — let sf-header win over .main-header */
.main-header.sf-header {
  height: auto !important;
  min-height: 0 !important;
  background: #fff !important;
  backdrop-filter: none;
  box-shadow: none !important;
  border-bottom: 1px solid #e5e7eb;
}

.main-header.sf-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(17, 17, 26, 0.06) !important;
}

/* خنثی‌سازی تداخل main.css قدیمی با چیدمان هدر RTL */
.sf-storefront .sf-header__inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  flex-wrap: unset !important;
}

.sf-storefront .sf-header__actions,
.sf-storefront .header-actions {
  flex-wrap: nowrap !important;
  justify-self: end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
}

/* خنثی‌سازی min-width و right قدیمی main.css برای مگا‌منو */
.sf-storefront .mega-menu,
.sf-storefront .categories-mega {
  right: auto !important;
  left: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sf-storefront .sf-header__search .form-control,
.sf-storefront .sf-header__search .search-input {
  direction: rtl !important;
  text-align: right !important;
  position: static !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

.sf-storefront .sf-header__search .search-btn,
.sf-storefront .sf-header__search-btn {
  position: static !important;
  transform: none !important;
  inset: auto !important;
}

/* Hero — override flat legacy swiper */
.sf-storefront .hero-swiper {
  height: auto !important;
  border-radius: var(--radius-2xl) !important;
}

.sf-storefront .hero-slide {
  min-height: 22rem !important;
}

@media (max-width: 575px) {
  .sf-storefront .hero-slide {
    min-height: 16rem !important;
    padding: var(--space-5) !important;
  }
}

/* Legacy countdown block */
.sf-storefront .countdown:not(.az-countdown) {
  background: var(--color-bg-inverse) !important;
  border-radius: var(--radius-xl) !important;
}

/* Premium flip-clock countdown */
.sf-storefront .az-countdown {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sf-storefront .az-countdown__value {
  min-width: 3rem;
  height: 3.25rem;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(180deg, #1e1e1e 0%, #111 48%, #0d0d0d 52%, #181818 100%);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
  position: relative;
}

.sf-storefront .az-countdown__value::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.sf-storefront .az-countdown__label {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.sf-storefront .az-countdown__sep {
  color: rgba(255, 255, 255, 0.2);
  margin-top: 0.5rem;
}

/* Deals carousel — compact cards */
.deals-swiper .swiper-slide {
  width: auto;
  height: auto;
}

.deals-swiper {
  padding-block: var(--space-2);
}

.deals-swiper .swiper-button-next,
.deals-swiper .swiper-button-prev {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-bg-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
}

.deals-swiper .swiper-button-next::after,
.deals-swiper .swiper-button-prev::after {
  display: none;
}