/* Novira — Digikala-inspired homepage styles */

:root {
  --ds-brand: #EF4056;
  --ds-brand-dark: #D32F45;
  --ds-green: #00A049;
  --ds-blue: #2196F3;
  --ds-text: #3F3F3F;
  --ds-text-secondary: #424750;
  --ds-text-muted: #81858B;
  --ds-bg: #FFFFFF;
  --ds-bg-soft: #F0F0F1;
  --ds-bg-gray: #F5F5F5;
  --ds-border: #E0E0E2;
  --ds-container: 1336px;
  --ds-radius: 8px;
  --ds-radius-lg: 16px;
  --ds-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
  --ds-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --ds-font: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body.ds-page {
  font-family: var(--ds-font);
  color: var(--ds-text);
  background: var(--ds-bg-soft);
}

[x-cloak] {
  display: none !important;
}

/* Layout */
.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 1280px) {
  .ds-container {
    padding-inline: 20px;
  }
}

/* Header */
.ds-header {
  background: var(--ds-bg);
  position: sticky;
  top: 0;
  z-index: 500;
  isolation: isolate;
  box-shadow: var(--ds-shadow);
}

.ds-header .ds-container {
  position: relative;
  overflow: visible;
}

.ds-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  width: 100%;
}

/* Tailwind .hidden loses to .ds-header-row / .ds-location — hide desktop chrome on mobile */
@media (max-width: 767px) {
  .ds-header .ds-header-row--top,
  .ds-header .ds-location {
    display: none !important;
  }

  .ds-header .ds-nav-row,
  .ds-header .ds-mega-wrap {
    display: none !important;
  }
}

.ds-header-row--top {
  gap: 16px;
}

.ds-logo {
  flex-shrink: 0;
  display: block;
}

.ds-logo img,
.ds-logo svg:not(.ds-logo-mark) {
  height: 44px;
  width: auto;
}

.ds-logo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.ds-logo-wordmark .ds-logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.ds-logo-wordmark .ds-logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ds-brand);
  line-height: 1;
  white-space: nowrap;
}

.ds-footer-top .ds-logo-wordmark .ds-logo-mark {
  width: 36px;
  height: 36px;
}

.ds-footer-top .ds-logo-wordmark .ds-logo-text {
  font-size: 1.375rem;
}

.ds-logo-mark {
  display: block;
}

.ds-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius);
  background: rgba(239, 64, 86, 0.08);
  transition: background 0.2s;
}

.ds-logo-icon:hover {
  background: rgba(239, 64, 86, 0.14);
}

.ds-logo-icon svg {
  width: 28px;
  height: 28px;
}

@media (min-width: 768px) {
  .ds-logo-icon {
    width: 48px;
    height: 48px;
  }

  .ds-logo-icon svg {
    width: 32px;
    height: 32px;
  }
}

.ds-search {
  flex: 1;
  min-width: 0;
  max-width: none;
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--ds-bg-soft);
  border-radius: var(--ds-radius);
  padding: 12px 16px;
  border: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ds-search:focus-within {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 2px rgba(239, 64, 86, 0.12);
  background: var(--ds-bg);
}

@media (min-width: 768px) {
  .ds-search {
    display: flex;
  }
}

.ds-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--ds-text-secondary);
}

.ds-search input::placeholder {
  color: var(--ds-text-muted);
}

.ds-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-inline-start: auto;
  overflow: visible;
  position: relative;
  z-index: 530;
}

.ds-header-divider {
  width: 1px;
  height: 32px;
  background: var(--ds-border);
  margin-inline: 4px;
}

.ds-btn-login {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius);
  transition: background 0.2s;
}

.ds-btn-login:hover {
  background: var(--ds-bg-soft);
}

.ds-btn-login--icon {
  padding: 8px;
}

.ds-btn-login--icon span {
  display: none;
}

.ds-cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--ds-radius);
  cursor: pointer;
  transition: background 0.2s;
}

.ds-cart-btn:hover {
  background: var(--ds-bg-soft);
}

.ds-cart-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--ds-brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header dropdowns */
.ds-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}

.ds-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 530;
  background: var(--ds-bg);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--ds-border);
  overflow: hidden;
}

.ds-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: var(--ds-radius);
  cursor: pointer;
  font-family: inherit;
  color: var(--ds-text-secondary);
  transition: background 0.2s;
}

.ds-user-trigger:hover,
.ds-user-trigger.is-open {
  background: var(--ds-bg-soft);
}

.ds-user-trigger--icon {
  padding: 8px;
}

.ds-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fce4ec, #f8bbd9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-brand);
  flex-shrink: 0;
}

.ds-user-trigger-text {
  text-align: right;
  display: none;
}

@media (min-width: 768px) {
  .ds-user-trigger-text {
    display: block;
  }

  .ds-user-trigger--icon .ds-user-trigger-text {
    display: none;
  }
}

.ds-user-trigger-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-secondary);
  line-height: 1.3;
}

.ds-user-trigger-chevron {
  width: 16px;
  height: 16px;
  color: var(--ds-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.ds-user-trigger.is-open .ds-user-trigger-chevron {
  transform: rotate(180deg);
}

.ds-user-dropdown {
  width: 280px;
}

.ds-user-dropdown-head {
  padding: 16px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-user-dropdown-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 10px;
}

.ds-user-dropdown-profile:hover .ds-user-dropdown-name {
  color: var(--ds-brand);
}

.ds-user-dropdown-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text-secondary);
  transition: color 0.15s;
}

.ds-user-dropdown-points {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ds-text-muted);
}

.ds-user-dropdown-points strong {
  color: var(--ds-text-secondary);
  font-weight: 600;
}

.ds-user-dropdown-menu {
  padding: 8px 0;
}

.ds-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ds-text-secondary);
  text-decoration: none;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  text-align: right;
}

.ds-menu-item:hover {
  background: var(--ds-bg-soft);
}

.ds-menu-item-label {
  flex: 1;
}

.ds-menu-item-extra {
  font-size: 11px;
  color: #7b1fa2;
  font-weight: 600;
  margin-inline-start: 8px;
}

.ds-menu-item-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.ds-menu-item--logout {
  border-top: 1px solid var(--ds-border);
  margin-top: 4px;
  color: var(--ds-text-muted);
}

.ds-cart-dropdown {
  width: min(380px, calc(100vw - 24px));
}

.ds-cart-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--ds-brand);
  color: #fff;
}

.ds-cart-dropdown-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.ds-cart-dropdown-head-count {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
}

.ds-cart-dropdown-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 12px;
}

.ds-cart-dropdown-body::-webkit-scrollbar {
  width: 4px;
}

.ds-cart-dropdown-body::-webkit-scrollbar-thumb {
  background: var(--ds-border);
  border-radius: 4px;
}

.ds-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--ds-bg-soft);
  border-radius: 12px;
  margin-bottom: 10px;
}

.ds-cart-item:last-child {
  margin-bottom: 0;
}

.ds-cart-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--ds-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.ds-cart-item-info {
  flex: 1;
  min-width: 0;
}

.ds-cart-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.ds-cart-item-prices {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ds-cart-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-brand);
}

.ds-cart-item-price-old {
  font-size: 11px;
  color: var(--ds-text-muted);
  text-decoration: line-through;
}

.ds-cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ds-qty-control {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  padding: 2px 6px;
}

.ds-qty-control button {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--ds-text-muted);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.ds-qty-control button:hover {
  color: var(--ds-brand);
}

.ds-qty-control span {
  font-size: 12px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

.ds-cart-item-remove {
  border: none;
  background: transparent;
  padding: 4px;
  color: var(--ds-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.ds-cart-item-remove:hover {
  color: var(--ds-brand);
}

.ds-cart-dropdown-foot {
  padding: 14px 16px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg-gray);
}

.ds-cart-dropdown-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--ds-text-muted);
}

.ds-cart-dropdown-total strong {
  font-size: 15px;
  color: var(--ds-text-secondary);
}

.ds-cart-dropdown-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: var(--ds-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}

.ds-cart-dropdown-btn:hover {
  background: var(--ds-brand-dark);
}

.ds-cart-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ds-text-muted);
}

.ds-location {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  font-size: 12px;
  color: var(--ds-text-muted);
  border-bottom: 1px solid var(--ds-border);
}

.ds-location strong {
  color: var(--ds-text-secondary);
  font-weight: 600;
}

.ds-nav-row {
  display: none;
  align-items: center;
  gap: 4px;
  padding-block: 10px;
  overflow: visible;
  position: relative;
}

@media (min-width: 768px) {
  .ds-nav-row {
    display: flex;
  }
}

.ds-nav-mega-anchor {
  position: relative;
  flex-shrink: 0;
  z-index: 510;
}

.ds-nav-links-scroll {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ds-nav-links-scroll::-webkit-scrollbar {
  display: none;
}

.ds-nav-categories {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-secondary);
  cursor: pointer;
  border-radius: var(--ds-radius);
  flex-shrink: 0;
}

.ds-nav-categories:hover,
.ds-nav-categories.is-open {
  color: var(--ds-brand);
  background: rgba(239, 64, 86, 0.06);
}

.ds-nav-link {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ds-text-muted);
  white-space: nowrap;
  border-radius: var(--ds-radius);
  transition: color 0.2s, background 0.2s;
}

.ds-nav-link:hover {
  color: var(--ds-text-secondary);
  background: var(--ds-bg-soft);
}

.ds-nav-link--hot {
  color: var(--ds-brand);
  font-weight: 600;
}

/* Mega menu */
.ds-mega-wrap {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 520;
  pointer-events: auto;
}

.ds-mega {
  display: flex;
  width: min(1200px, calc(100vw - 32px));
  max-height: 480px;
  background: var(--ds-bg);
  border-radius: var(--ds-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid var(--ds-border);
}

.ds-mega-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ds-bg-gray);
  border-left: 1px solid var(--ds-border);
  overflow-y: auto;
}

.ds-mega-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ds-text-secondary);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.ds-mega-cat:hover,
.ds-mega-cat.is-active {
  background: var(--ds-bg);
  color: var(--ds-brand);
  font-weight: 600;
}

.ds-mega-cat.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--ds-brand);
  border-radius: 2px 0 0 2px;
}

.ds-mega-content {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

.ds-mega-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-brand);
  margin-bottom: 16px;
}

.ds-mega-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
}

@media (min-width: 1024px) {
  .ds-mega-columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ds-mega-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text-secondary);
  margin-bottom: 10px;
  padding-right: 10px;
  border-right: 3px solid var(--ds-brand);
}

.ds-mega-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ds-mega-col-links li {
  margin-bottom: 6px;
}

.ds-mega-col-links a {
  font-size: 12px;
  color: var(--ds-text-muted);
  transition: color 0.15s;
}

.ds-mega-col-links a:hover {
  color: var(--ds-brand);
}

/* Mobile menu */
.ds-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
}

.ds-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--ds-bg);
  z-index: 301;
  display: flex;
  flex-direction: column;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.ds-mobile-drawer__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  margin-top: 4px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-mobile-drawer__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text-secondary);
}

.ds-mobile-drawer__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--ds-bg-soft);
  border-radius: var(--ds-radius);
  color: var(--ds-text-secondary);
  cursor: pointer;
}

.ds-mobile-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px max(28px, env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.ds-mobile-drawer__section {
  margin-bottom: 20px;
}

.ds-mobile-drawer__section:last-child {
  margin-bottom: 0;
}

.ds-mobile-drawer__section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  padding-top: 4px;
}

.ds-mobile-drawer__section--border {
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--ds-border);
}

.ds-mobile-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--ds-bg-soft);
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text-secondary);
  text-decoration: none;
  line-height: 1.4;
}

.ds-mobile-drawer__item:last-child {
  border-bottom: none;
}

.ds-mobile-drawer__item:active {
  background: var(--ds-bg-soft);
}

.ds-mobile-drawer__item-icon {
  flex-shrink: 0;
  width: 28px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.ds-mobile-drawer__item-label {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.ds-mobile-drawer__item-badge {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--ds-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Stories swiper */
.ds-stories-swiper-wrap {
  margin: 0 -4px;
  padding: 16px 0;
}

.ds-stories-swiper {
  overflow: hidden;
  padding: 0 4px;
}

.ds-stories-swiper .swiper-slide {
  width: 72px;
  height: auto;
}

.ds-stories-swiper .swiper-slide .ds-story {
  width: 100%;
}

.ds-story {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px;
  text-decoration: none;
}

.ds-story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--ds-brand), #ff8a65);
}

.ds-story-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ds-bg-soft);
  border: 2px solid var(--ds-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-story-img .ds-product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ds-story-label {
  font-size: 11px;
  color: var(--ds-text-secondary);
  text-align: center;
  line-height: 1.3;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero swiper */
.ds-hero {
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  margin-block: 8px;
}

.ds-hero .swiper-slide {
  aspect-ratio: 3.2 / 1;
  min-height: 180px;
}

.ds-hero-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}

.ds-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-hero .swiper-pagination-bullet-active {
  background: var(--ds-brand);
}

/* Services */
.ds-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 0;
}

@media (min-width: 640px) {
  .ds-services {
    grid-template-columns: repeat(8, 1fr);
  }
}

.ds-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.ds-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.ds-service-label {
  font-size: 11px;
  color: var(--ds-text-secondary);
  text-align: center;
  line-height: 1.3;
}

/* Amazing offers */
.ds-amazing {
  background: var(--ds-brand);
  border-radius: var(--ds-radius-lg);
  padding: 20px;
  margin-block: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1024px) {
  .ds-amazing {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }
}

.ds-amazing-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 12px;
  min-width: 180px;
}

.ds-amazing-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 16px;
}

.ds-amazing-timer {
  display: flex;
  gap: 8px;
  direction: rtl;
  margin-bottom: 16px;
}

.ds-amazing-timer-unit {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ds-radius);
  padding: 8px 10px;
  min-width: 44px;
}

.ds-amazing-timer-val {
  font-size: 20px;
  font-weight: 800;
  display: block;
}

.ds-amazing-timer-label {
  font-size: 10px;
  opacity: 0.9;
}

.ds-amazing-more {
  font-size: 13px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.ds-amazing-products-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.ds-amazing-swiper {
  overflow: hidden;
  padding-bottom: 28px;
}

.ds-amazing-swiper .swiper-wrapper {
  align-items: stretch;
}

.ds-amazing-swiper .swiper-slide {
  display: flex;
  width: 180px;
  height: auto;
}

.ds-amazing-swiper .swiper-slide > .ds-product-card {
  flex: 1;
  width: 100%;
  height: 100%;
}

.ds-amazing-pagination {
  bottom: 0 !important;
  line-height: 1;
}

.ds-amazing-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ds-amazing-pagination .swiper-pagination-bullet-active {
  background: #fff;
  transform: scale(1.15);
}

/* Product card */
.ds-product-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 180px;
  background: var(--ds-bg);
  border-radius: var(--ds-radius);
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}

.ds-product-card:hover {
  box-shadow: var(--ds-shadow-lg);
}

.ds-product-card--white {
  background: var(--ds-bg);
}

.ds-product-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ds-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.ds-product-img-wrap {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-bg-soft);
  border-radius: var(--ds-radius);
  overflow: hidden;
}

.ds-product-img-wrap img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.ds-product-title {
  font-size: 12px;
  color: var(--ds-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
  font-weight: 900;
}

.ds-product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text);
  margin: 0;
}

.ds-product-price-old {
  font-size: 11px;
  color: var(--ds-text-muted);
  text-decoration: line-through;
  margin: 0;
}

/* Prices row — same height with or without discount */
.ds-product-card__prices {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-height: 1.125rem;
  line-height: 1.3;
  margin-top: auto;
}

.ds-product-card__prices .ds-product-price {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ds-product-card__prices .ds-product-price-old {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.ds-product-card__prices .ds-product-price-old.is-empty {
  visibility: hidden;
  pointer-events: none;
  min-width: 4.5rem;
}

/* Product card — rich variant (reusable in rows / PDP related) */
.ds-product-card-wrap.ds-product-card--rich,
a.ds-product-card.ds-product-card--rich {
  min-width: 200px;
  width: 220px;
  padding: 16px;
  gap: 12px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.ds-product-card-wrap.ds-product-card--rich {
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (min-width: 768px) {
  .ds-product-card-wrap.ds-product-card--rich,
  a.ds-product-card.ds-product-card--rich {
    width: 240px;
  }
}

.ds-product-card-wrap.ds-product-card--rich:hover,
a.ds-product-card.ds-product-card--rich:hover {
  border-color: #d0d0d2;
  box-shadow: var(--ds-shadow-lg);
  transform: translateY(-2px);
}

.ds-product-card__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

.ds-product-card-wrap.ds-product-card--rich .ds-product-img-wrap,
.ds-product-card--rich .ds-product-img-wrap {
  aspect-ratio: auto;
  min-height: 140px;
  background: var(--ds-bg-soft);
  border: 1px solid var(--ds-border);
}

.ds-product-card-wrap.ds-product-card--rich .ds-product-title,
.ds-product-card--rich .ds-product-title {
  font-size: 13px;
  min-height: 40px;
  margin: 0;
}

.ds-product-card-wrap.ds-product-card--rich .ds-product-discount,
.ds-product-card--rich .ds-product-discount {
  top: 16px;
  left: 16px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  z-index: 1;
}

.ds-product-card-wrap.ds-product-card--rich .ds-product-card__prices .ds-product-price,
.ds-product-card--rich .ds-product-card__prices .ds-product-price {
  font-size: 12px;
}

.ds-amazing-swiper .ds-product-card__prices .ds-product-price {
  font-size: 11px;
}

.ds-amazing-swiper .ds-product-card__prices .ds-product-price-old {
  font-size: 10px;
}

/* Card action bar (cart / list / share) */
.ds-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-border);
}

.ds-card-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 4px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: var(--ds-bg);
  color: var(--ds-text-secondary);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.ds-card-action:hover {
  border-color: #c0c0c2;
  color: var(--ds-text);
}

.ds-card-action svg {
  flex-shrink: 0;
}

.ds-card-action-label {
  line-height: 1.2;
  white-space: nowrap;
}

.ds-card-action--cart {
  background: var(--ds-card-accent, var(--ds-brand));
  border-color: var(--ds-card-accent, var(--ds-brand));
  color: #fff;
}

.ds-card-action--cart:hover {
  filter: brightness(0.92);
  color: #fff;
  border-color: var(--ds-card-accent, var(--ds-brand));
}

.ds-card-action.is-active {
  border-color: var(--ds-card-accent, var(--ds-brand));
  color: var(--ds-card-accent, var(--ds-brand));
}

.ds-card-actions--compact {
  margin-top: 8px;
  padding-top: 8px;
}

.ds-card-actions--compact .ds-card-action {
  min-height: 36px;
  padding: 4px 2px;
}

.ds-card-actions--compact .ds-card-action-label {
  font-size: 9px;
}

.ds-card-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ds-text-secondary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 600;
  box-shadow: var(--ds-shadow-lg);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .ds-card-toast {
    bottom: 24px;
  }
}

.ds-product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ds-text-muted);
}

.ds-product-rating-stars {
  color: #f9a825;
  letter-spacing: 0.5px;
}

.ds-product-card-wrap.ds-product-card--rich .ds-product-card__main .ds-product-card__prices,
.ds-product-card.ds-product-card--rich > .ds-product-card__prices {
  margin-top: auto;
}

.ds-product-row--rich {
  gap: 16px;
  padding: 4px 2px 12px;
}

/* Product row swiper (main pages) */
.ds-product-swiper-wrap {
  position: relative;
  margin: 0 -4px;
}

.ds-product-swiper {
  overflow: hidden;
  padding: 4px 4px 12px;
}

.ds-product-swiper .swiper-slide {
  display: flex;
  width: 220px;
  height: auto;
}

.ds-product-swiper .swiper-slide > a.ds-product-card,
.ds-product-swiper .swiper-slide > .ds-product-card-wrap {
  height: 100%;
  flex: 1;
}

@media (min-width: 768px) {
  .ds-product-swiper .swiper-slide {
    width: 240px;
  }
}

.ds-product-swiper .swiper-slide .ds-product-card-wrap.ds-product-card--rich,
.ds-product-swiper .swiper-slide a.ds-product-card.ds-product-card--rich,
.ds-product-swiper .swiper-slide a.ds-product-card.ds-product-card--market,
.ds-product-swiper .swiper-slide .ds-product-card-wrap.ds-product-card--fresh,
.ds-product-swiper .swiper-slide .ds-product-card-wrap.ds-product-card--fashion {
  width: 100%;
  min-width: 0;
}

/* Market product card (index) */
a.ds-product-card.ds-product-card--market {
  min-width: 200px;
  width: 220px;
  padding: 14px;
  gap: 10px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

@media (min-width: 768px) {
  a.ds-product-card.ds-product-card--market {
    width: 240px;
    padding: 16px;
  }
}

a.ds-product-card.ds-product-card--market:hover {
  border-color: #d0d0d2;
  box-shadow: var(--ds-shadow-lg);
  transform: translateY(-2px);
}

.ds-product-card--market .ds-product-img-wrap {
  min-height: 140px;
  border: 1px solid var(--ds-border);
}

.ds-product-card--market .ds-product-discount {
  top: 14px;
  left: 14px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--ds-brand);
}

.ds-product-card--market .ds-product-title {
  font-size: 13px;
  min-height: 40px;
  font-weight: 700;
}

.ds-product-card--market .ds-product-rating {
  font-size: 11px;
  color: var(--ds-text-muted);
  margin-top: -4px;
}

.ds-product-card__ship {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #00897b;
  font-weight: 600;
  margin-top: -2px;
}

.ds-product-card__ship::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00897b;
  flex-shrink: 0;
}

.ds-product-card--market .ds-product-card__prices .ds-product-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-text);
}

/* Flash deal card inside amazing panel */
a.ds-product-card.ds-product-card--market-flash {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 10px;
  gap: 8px;
  border: none;
  box-shadow: none;
  border-radius: var(--ds-radius);
  display: flex;
  flex-direction: column;
}

a.ds-product-card.ds-product-card--market-flash:hover {
  transform: none;
  box-shadow: var(--ds-shadow-lg);
}

.ds-amazing-swiper .ds-product-card--market-flash .ds-product-img-wrap {
  flex-shrink: 0;
  aspect-ratio: 1;
  min-height: 0;
  width: 100%;
}

.ds-amazing-swiper .ds-product-card--market-flash .ds-product-title {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.5;
  height: 33px;
  min-height: 33px;
  max-height: 33px;
  -webkit-line-clamp: 2;
}

.ds-amazing-swiper .ds-product-card--market-flash .ds-product-card__prices {
  flex-shrink: 0;
  margin-top: auto;
  min-height: 1.125rem;
}

.ds-page:not(.ds-page--fresh):not(.ds-page--fashion) .ds-product-swiper .swiper-slide {
  width: 220px;
}

@media (min-width: 768px) {
  .ds-page:not(.ds-page--fresh):not(.ds-page--fashion) .ds-product-swiper .swiper-slide {
    width: 240px;
  }
}

/* Section head */
.ds-section {
  margin-block: 24px;
}

.ds-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ds-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-text-secondary);
}

.ds-section-more {
  font-size: 13px;
  color: var(--ds-brand);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Banners */
.ds-banner-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .ds-banner-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ds-banner-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .ds-banner-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ds-banner {
  position: relative;
  display: block;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--ds-bg-soft);
  transition: transform 0.2s, box-shadow 0.2s;
}

.ds-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 100%);
  pointer-events: none;
}

.ds-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-lg);
}

.ds-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-banner__title {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: 55%;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.ds-banner__title--lg {
  font-size: 1.125rem;
}

.ds-banner--tall {
  aspect-ratio: 2.5 / 1;
}

/* Categories grid */
.ds-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 12px;
}

@media (min-width: 640px) {
  .ds-categories-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1024px) {
  .ds-categories-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

.ds-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.ds-category-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ds-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: var(--ds-shadow);
  transition: transform 0.2s;
}

.ds-category-item:hover .ds-category-icon {
  transform: scale(1.05);
}

.ds-category-label {
  font-size: 12px;
  color: var(--ds-text-secondary);
  text-align: center;
}

/* Brands swiper */
.ds-brands {
  padding: 8px 0 20px;
}

.ds-brands-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ds-brands-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ds-text);
  margin: 0 0 4px;
}

.ds-brands-sub {
  font-size: 13px;
  color: var(--ds-text-muted);
  margin: 0;
  line-height: 1.5;
}

.ds-brands-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-brand);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ds-brands-more:hover {
  opacity: 0.85;
}

.ds-brands-band {
  background: linear-gradient(135deg, #f8f9fb 0%, #fff 45%, #fff5f6 100%);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.ds-brands-band::before,
.ds-brands-band::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}

.ds-brands-band::before {
  inset-inline-start: 0;
  background: linear-gradient(to left, transparent, #f8f9fb);
}

.ds-brands-band::after {
  inset-inline-end: 0;
  background: linear-gradient(to right, transparent, #fff5f6);
}

.ds-brands-swiper {
  padding-inline: 16px;
}

.ds-brands .swiper-slide {
  width: auto;
  height: auto;
}

.ds-brand-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 148px;
  padding: 12px 16px 12px 12px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}

.ds-brand-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-color, var(--ds-brand)) 35%, var(--ds-border));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.ds-brand-card-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: var(--brand-color, var(--ds-brand));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-color, var(--ds-brand)) 40%, transparent);
}

.ds-brand-card-mark--light {
  color: var(--ds-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ds-brand-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-brand-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text);
  white-space: nowrap;
}

.ds-brand-card-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
}

/* Legacy brand pill (fresh/fashion) */
.ds-brand-slide {
  width: 100px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-bg);
  border-radius: var(--ds-radius);
  padding: 8px 16px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.2s, opacity 0.2s;
}

.ds-fresh-brands .swiper-slide:hover .ds-brand-slide,
.ds-fashion-brands .swiper-slide:hover .ds-brand-slide {
  filter: none;
  opacity: 1;
}

.ds-brand-slide span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text-muted);
}

/* Product row scroll */
.ds-product-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.ds-product-row::-webkit-scrollbar {
  display: none;
}

/* Fresh / supermarket */
.ds-fresh {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border-radius: var(--ds-radius-lg);
  padding: 20px;
  margin-block: 24px;
}

.ds-fresh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ds-fresh-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-green);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Blog */
.ds-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .ds-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ds-blog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ds-blog-card {
  background: var(--ds-bg);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}

.ds-blog-card:hover {
  box-shadow: var(--ds-shadow-lg);
}

.ds-blog-img {
  aspect-ratio: 16 / 10;
  background: var(--ds-bg-soft);
  overflow: hidden;
}

.ds-blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-blog-body {
  padding: 12px 16px 16px;
}

.ds-blog-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer */
.ds-footer {
  background: var(--ds-bg);
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--ds-border);
}

.ds-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 32px;
}

.ds-footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  font-size: 13px;
  color: var(--ds-text-muted);
  cursor: pointer;
  background: var(--ds-bg);
  transition: border-color 0.2s, color 0.2s;
}

.ds-footer-back-top:hover {
  border-color: var(--ds-brand);
  color: var(--ds-brand);
}

.ds-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .ds-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ds-footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ds-footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text-secondary);
  margin-bottom: 16px;
}

.ds-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ds-footer-col li {
  margin-bottom: 10px;
}

.ds-footer-col a {
  font-size: 13px;
  color: var(--ds-text-muted);
  transition: color 0.15s;
}

.ds-footer-col a:hover {
  color: var(--ds-brand);
}

.ds-footer-newsletter {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ds-footer-newsletter input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  font-size: 13px;
  outline: none;
}

.ds-footer-newsletter button {
  padding: 10px 20px;
  background: var(--ds-brand);
  color: #fff;
  border: none;
  border-radius: var(--ds-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ds-footer-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ds-footer-app-btn {
  padding: 8px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  font-size: 12px;
  color: var(--ds-text-secondary);
}

.ds-footer-seo {
  margin-top: 32px;
  padding: 20px;
  background: var(--ds-bg-soft);
  border-radius: var(--ds-radius);
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.8;
}

.ds-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.ds-footer-badge {
  width: 80px;
  height: 80px;
  background: var(--ds-bg-soft);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ds-text-muted);
  text-align: center;
}

.ds-footer-bottom {
  padding: 20px 0;
  margin-top: 24px;
  border-top: 1px solid var(--ds-border);
  text-align: center;
  font-size: 12px;
  color: var(--ds-text-muted);
}

/* FAB */
.ds-fab {
  position: fixed;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 28px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: transform 0.2s;
}

.ds-fab:hover {
  transform: scale(1.03);
}

.ds-fab--market {
  bottom: 24px;
  right: 24px;
  background: var(--ds-green);
}

.ds-fab--support {
  bottom: 24px;
  left: 24px;
  background: var(--ds-blue);
  width: 52px;
  height: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

@media (max-width: 480px) {
  .ds-fab--market span {
    display: none;
  }
  .ds-fab--market {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}

/* Main content card */
.ds-main {
  position: relative;
  z-index: 1;
  background: var(--ds-bg);
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  margin-top: 8px;
  padding-bottom: 32px;
}

/* Mobile header */
.ds-mobile-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .ds-mobile-bar {
    display: none;
  }
}

.ds-hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius);
}

@media (min-width: 768px) {
  .ds-hamburger {
    display: none;
  }
}

.ds-mobile-search-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ds-bg-soft);
  border-radius: var(--ds-radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ds-text-muted);
}

.ds-mobile-search-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .ds-mobile-search-bar {
    display: none;
  }
}

/* Placeholder gradients for banners/heroes */
.ds-ph-hero-1 {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 50%, #fff 100%);
}

.ds-ph-hero-2 {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #fff 100%);
}

.ds-ph-banner-1 { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }
.ds-ph-banner-2 { background: linear-gradient(135deg, #e8eaf6, #c5cae9); }
.ds-ph-banner-3 { background: linear-gradient(135deg, #e0f2f1, #b2dfdb); }
.ds-ph-banner-4 { background: linear-gradient(135deg, #fce4ec, #f8bbd9); }
.ds-ph-banner-5 { background: linear-gradient(135deg, #ede7f6, #d1c4e9); }
.ds-ph-banner-6 { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }

.ds-ph-product {
  background: linear-gradient(180deg, #fafafa 0%, #f0f0f1 100%);
}

/* Product photos */
.ds-product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f7f7f8;
  border-radius: inherit;
}

.ds-story-img .ds-product-photo,
.ds-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ds-service-icon .ds-product-photo,
.ds-service-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.ds-category-icon .ds-product-photo,
.ds-category-icon img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.ds-cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #f7f7f8;
}

.ds-blog-img .ds-product-photo,
.ds-blog-img img.ds-product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Market page chrome (index) */
.ds-header--market {
  --ds-header-link-hover-bg: #f25568;
  border-bottom: none;
}

.ds-header--market .ds-nav-row {
  background: linear-gradient(135deg, #ef4056 0%, #d32f45 100%);
  margin-inline: -16px;
  padding-inline: 16px;
  padding-block: 8px;
}

@media (min-width: 1280px) {
  .ds-header--market .ds-nav-row {
    margin-inline: -20px;
    padding-inline: 20px;
  }
}

.ds-header--market .ds-nav-link {
  color: rgba(255, 255, 255, 0.92);
}

.ds-header--market .ds-nav-link:hover {
  color: #fff;
  background: var(--ds-header-link-hover-bg);
}

.ds-header--market .ds-nav-link--hot {
  color: #fff;
}

.ds-header--market .ds-nav-link--hot:hover {
  color: #fff;
  background: var(--ds-header-link-hover-bg);
}

.ds-header--market .ds-nav-categories {
  color: rgba(255, 255, 255, 0.95);
}

.ds-header--market .ds-nav-categories:hover,
.ds-header--market .ds-nav-categories.is-open {
  color: #fff;
  background: var(--ds-header-link-hover-bg);
}

.ds-footer--market .ds-footer-top {
  border-bottom-color: rgba(239, 64, 86, 0.12);
}

/* Bazaar promo (entry point to bazaar.html from the main storefront) */
.ds-section-more--bazaar {
  color: #6929C4;
}

.ds-bazaar-promo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(135deg, #7B3FE4 0%, #6929C4 55%, #4C1D95 100%);
  box-shadow: 0 4px 16px rgba(76, 29, 149, 0.16);
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}

.ds-bazaar-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(76, 29, 149, 0.24);
}

.ds-bazaar-promo img {
  display: block;
  width: 100%;
  height: auto;
}

.ds-bazaar-promo__body {
  padding: 16px;
  color: #fff;
}

.ds-bazaar-promo__body h3 {
  font-size: 1rem;
  font-weight: 800;
}

.ds-bazaar-promo__body p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
}

.ds-bazaar-promo__cta {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 22px;
  border-radius: 999px;
  background: #fff;
  color: #6929C4;
  font-size: 13px;
  font-weight: 800;
}

@media (min-width: 900px) {
  .ds-bazaar-promo {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    align-items: center;
  }

  .ds-bazaar-promo__body {
    padding: 24px 28px;
  }

  .ds-bazaar-promo__body h3 {
    font-size: 1.25rem;
  }
}