/* Phase 1 UI/UX baseline override - 2026-03-30 */
:root {
  --ux-blue-950: var(--color-background-darker, #002a54);
  --ux-blue-900: var(--color-background-dark, #003864);
  --ux-blue-860: var(--color-background-light, #00457f);
  --ux-blue-820: var(--color-background-lighter, #00508f);
  --ux-blue-700: var(--color-primary, #005cb9);
  --ux-blue-650: var(--color-primary-hover, #1b75d1);
  --ux-orange-500: var(--color-secondary, #ff6a00);
  --ux-orange-450: var(--color-secondary, #ff8a45);
  --ux-surface-panel:
    linear-gradient(155deg, rgba(150, 205, 255, 0.1), rgba(0, 92, 185, 0.16) 42%, rgba(0, 63, 128, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 74, 134, 0.78), rgba(0, 56, 100, 0.86));
  --ux-surface-subtle:
    linear-gradient(140deg, rgba(150, 205, 255, 0.08), rgba(0, 63, 128, 0.16)),
    rgba(0, 57, 104, 0.56);
  --ux-border: rgba(150, 205, 255, 0.24);
  --ux-shadow: 0 24px 58px rgba(0, 19, 39, 0.24);
  --color-success: #ff8a45;
}

body,
input,
select,
textarea,
button {
  font-family: var(--site-font, 'Vazirmatn', 'Tahoma', 'Arial', sans-serif);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(circle at 10% 8%, rgba(92, 176, 255, 0.14), transparent 28%),
    radial-gradient(circle at 90% 16%, rgba(0, 92, 185, 0.16), transparent 30%),
    radial-gradient(circle at 42% 92%, rgba(0, 63, 128, 0.14), transparent 36%),
    linear-gradient(180deg, var(--ux-blue-950) 0%, var(--ux-blue-900) 52%, var(--ux-blue-860) 100%) !important;
}

.site-header {
  background: color-mix(in srgb, var(--ux-blue-950) 86%, transparent) !important;
}

.site-header.header-shrunk {
  background: color-mix(in srgb, var(--ux-blue-950) 95%, transparent) !important;
}

.header-shell {
  background:
    radial-gradient(circle at 85% -22%, rgba(127, 183, 255, 0.24), transparent 40%),
    radial-gradient(circle at 10% 110%, rgba(0, 63, 128, 0.22), transparent 44%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ux-blue-860) 90%, transparent),
      color-mix(in srgb, var(--ux-blue-900) 90%, transparent)
    ),
    color-mix(in srgb, var(--ux-blue-950) 78%, transparent) !important;
  border-color: rgba(127, 183, 255, 0.28) !important;
}

@media (min-width: 981px) {
  .header-main-inner {
    display: grid !important;
    grid-template-columns: minmax(220px, max-content) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
  }

  .main-nav {
    min-width: 0;
  }

  .main-nav ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .main-nav ul::-webkit-scrollbar {
    display: none;
  }

  .main-nav a {
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.25;
    border-radius: 12px;
  }

  .header-actions {
    min-width: 0;
    max-width: min(430px, 100%);
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-link-chip,
  .btn-auth,
  .btn-logout {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.84rem;
  }
}

.header-link-chip,
.mobile-nav-cta,
.footer-showcase-actions .btn-primary,
.btn-primary,
.page-home .filter-submit-btn,
.page-home .hero-actions .btn-primary,
.page-products .catalog-filter-actions .btn-primary,
.page-products .catalog-product-actions .btn-primary,
.storefront-motorechi .motorechi-btn-primary {
  background: var(--ux-blue-700) !important;
  border-color: var(--ux-blue-700) !important;
  color: #fff !important;
}

.header-link-chip:hover,
.mobile-nav-cta:hover,
.footer-showcase-actions .btn-primary:hover,
.btn-primary:hover,
.page-home .filter-submit-btn:hover,
.page-home .hero-actions .btn-primary:hover,
.page-products .catalog-filter-actions .btn-primary:hover,
.page-products .catalog-product-actions .btn-primary:hover,
.storefront-motorechi .motorechi-btn-primary:hover {
  background: #004a95 !important;
  border-color: #004a95 !important;
  color: #fff !important;
}

.btn-logout,
.logout-btn,
.page-home .product-card-add-btn,
.storefront-motorechi .motorechi-btn-secondary,
.page-products .catalog-status-badge.status-new,
.page-products .catalog-status-badge.status-popular {
  background: var(--ux-orange-500) !important;
  border-color: var(--ux-orange-500) !important;
  color: #fff !important;
}

.btn-logout:hover,
.logout-btn:hover,
.page-home .product-card-add-btn:hover,
.storefront-motorechi .motorechi-btn-secondary:hover,
.page-products .catalog-status-badge.status-new:hover,
.page-products .catalog-status-badge.status-popular:hover {
  background: color-mix(in srgb, var(--ux-orange-500) 78%, #000) !important;
  border-color: color-mix(in srgb, var(--ux-orange-500) 78%, #000) !important;
  color: #fff !important;
}

.site-footer {
  background:
    radial-gradient(circle at 10% 0%, rgba(92, 176, 255, 0.16), transparent 30%),
    radial-gradient(circle at 88% 100%, rgba(0, 63, 128, 0.24), transparent 36%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ux-blue-860) 84%, transparent),
      color-mix(in srgb, var(--ux-blue-950) 96%, transparent)
    ),
    var(--ux-blue-950) !important;
}

.footer-showcase,
.footer-col,
.footer-highlight-card {
  background:
    linear-gradient(150deg, rgba(127, 183, 255, 0.1), rgba(0, 63, 128, 0.2)),
    color-mix(in srgb, var(--ux-blue-900) 38%, transparent) !important;
  border-color: rgba(127, 183, 255, 0.24) !important;
}

.page-home {
  --home-card-surface:
    linear-gradient(
      155deg,
      rgba(150, 205, 255, 0.1),
      color-mix(in srgb, var(--ux-blue-700) 16%, transparent) 42%,
      color-mix(in srgb, var(--ux-blue-900) 30%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ux-blue-860) 78%, transparent),
      color-mix(in srgb, var(--ux-blue-900) 86%, transparent)
    );
  --home-card-border: rgba(150, 205, 255, 0.24);
  --home-card-shadow: 0 24px 58px rgba(0, 19, 39, 0.24);
  --home-card-soft-layer:
    radial-gradient(circle at 16% 16%, rgba(159, 211, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.page-home .filter-card,
.page-home .product-card,
.page-home .motorcycle-hero,
.page-home .main-category-card,
.page-home .brand-card,
.page-home .article-card,
.page-home .customer-hub-card,
.page-home .customer-voice-panel,
.page-home .customer-club-panel {
  background: var(--home-card-surface) !important;
  border-color: var(--home-card-border) !important;
  box-shadow: var(--home-card-shadow) !important;
}

.page-home .product-image,
.page-home .main-category-image,
.page-home .brand-logo-wrap,
.page-home .article-image {
  background:
    radial-gradient(circle at top center, rgba(150, 205, 255, 0.16), transparent 52%),
    linear-gradient(180deg, rgba(0, 74, 134, 0.42), rgba(0, 56, 100, 0.52)) !important;
}

.page-home .hero-slider {
  --hero-nav-side-gap: 18px;
}

.page-home .hero-nav-btn {
  top: 47%;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.page-home .hero-prev {
  left: calc(var(--site-shell-gutter) + var(--hero-nav-side-gap));
  right: auto;
}

.page-home .hero-next {
  right: calc(var(--site-shell-gutter) + var(--hero-content-width) + var(--hero-shell-gap) + var(--hero-nav-side-gap));
  left: auto;
}

@media (max-width: 1180px) {
  .page-home .hero-prev {
    left: calc(var(--site-shell-gutter) + 14px);
    right: auto;
  }

  .page-home .hero-next {
    right: calc(var(--site-shell-gutter) + 14px);
    left: auto;
  }
}

@media (max-width: 820px) {
  .page-home .hero-nav-btn {
    top: clamp(155px, 28vw, 230px);
  }

  .page-home .hero-prev {
    left: 20px;
    right: auto;
  }

  .page-home .hero-next {
    right: 20px;
    left: auto;
  }
}

.page-products .catalog-hero-copy,
.page-products .catalog-hero-panel,
.page-products .catalog-panel,
.page-products .catalog-toolbar-panel,
.page-products .catalog-product-card,
.page-products .product-media-card,
.page-products .product-summary-column,
.page-products .product-support-card,
.page-products .product-tabs-shell,
.page-products .product-copy-card,
.page-products .product-spec-box {
  background: var(--ux-surface-panel) !important;
  border-color: var(--ux-border) !important;
  box-shadow: var(--ux-shadow) !important;
}

.page-products .catalog-stat-card,
.page-products .catalog-results-chip,
.page-products .catalog-active-filters,
.page-products .catalog-spec-card,
.page-products .product-highlight-card,
.page-products .catalog-help-link,
.page-products .product-cta-links a,
.page-products .catalog-page-link {
  background: var(--ux-surface-subtle) !important;
  border-color: var(--ux-border) !important;
}

.page-products .catalog-product-media,
.page-products .product-media-stage,
.page-products .product-gallery-card {
  background:
    radial-gradient(circle at top center, rgba(150, 205, 255, 0.14), transparent 52%),
    linear-gradient(180deg, rgba(0, 74, 134, 0.42), rgba(0, 56, 100, 0.52)) !important;
}

.page-products .catalog-product-card:hover {
  border-color: rgba(255, 138, 69, 0.44) !important;
  box-shadow:
    0 30px 74px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 138, 69, 0.2) !important;
}

.page-products .catalog-filter-chip,
.page-products .catalog-reset-link,
.page-products .catalog-inline-link,
.page-products .catalog-panel-kicker,
.page-products .catalog-eyebrow {
  color: var(--ux-orange-450) !important;
}

.storefront-motorechi .motorechi-hero-card,
.storefront-motorechi .motorechi-metric-card,
.storefront-motorechi .motorechi-panel,
.storefront-motorechi .motorechi-product-card,
.storefront-motorechi .motorechi-brand-card,
.storefront-motorechi .motorechi-detail-card,
.storefront-motorechi .motorechi-story-card,
.storefront-motorechi .motorechi-contact-card {
  background: var(--ux-surface-panel) !important;
  border-color: var(--ux-border) !important;
  box-shadow: var(--ux-shadow) !important;
}

.storefront-motorechi .motorechi-benefit-card,
.storefront-motorechi .motorechi-trust-card,
.storefront-motorechi .motorechi-shelf-column,
.storefront-motorechi .motorechi-showcase-primary,
.storefront-motorechi .motorechi-showcase-mini,
.storefront-motorechi .motorechi-article-card,
.storefront-motorechi .motorechi-active-filter,
.storefront-motorechi .motorechi-pill,
.storefront-motorechi .motorechi-filter-grid input,
.storefront-motorechi .motorechi-filter-grid select {
  background: var(--ux-surface-subtle) !important;
  border-color: var(--ux-border) !important;
}

.storefront-motorechi .motorechi-section-label,
.storefront-motorechi .motorechi-eyebrow {
  color: var(--ux-orange-450) !important;
}