@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #2e2e2e;

  /* Brand palette lifted from the live moalem.shop theme
     (--wb-primary-color #E51E22 / --wb-secondary-color #3B3B3B). Flat, no gradients. */
  --color-brand: #e51e22;
  --color-brand-dark: #b10123;
  --color-brand-soft: #fdecec;
  --color-ink: #2e2e2e;
  --color-ink-soft: #3b3b3b;
  --color-body: #7c7c7c;
  --color-surface: #f6f7f9;
  --color-line: #ececec;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-brand: var(--color-brand);
  --color-brand-dark: var(--color-brand-dark);
  --color-brand-soft: var(--color-brand-soft);
  --color-ink: var(--color-ink);
  --color-ink-soft: var(--color-ink-soft);
  --color-body: var(--color-body);
  --color-surface: var(--color-surface);
  --color-line: var(--color-line);

  --font-fa: var(--font-fa);
  --font-en: var(--font-en);

  --container-boxed: 1200px;
}

/* Base defaults live in Tailwind's base layer so utilities can override them. */
@layer base {
  body {
    background: var(--background);
    color: var(--color-ink);
    font-family: var(--font-fa), Tahoma, sans-serif;
    font-weight: 300;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-ink);
    font-weight: 700;
  }
}

@utility boxed {
  width: 100%;
  max-width: var(--container-boxed);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Latin runs (model names, SKUs) inside Farsi copy — Montserrat keeps
   real 0-9 digits; IRANYekan fanum would otherwise paint them as ۰-۹. */
.en {
  font-family: var(--font-en), var(--font-fa), sans-serif;
  unicode-bidi: isolate;
}

/* Swiper theming: its own CSS reads these custom properties when drawing
   bullets (background: var(--swiper-pagination-bullet-inactive-color, #000)
   etc.) — setting a plain .swiper-pagination-bullet{background} rule has the
   same specificity as swiper's own rule and lost the cascade depending on
   chunk order, which is why the dots were showing swiper's black/blue
   defaults instead of white. Setting the variables is the way swiper itself
   documents for overriding bullet colors, and it's cascade-order-proof. */
.hero-dots {
  --swiper-pagination-bullet-inactive-color: #ffffff;
  --swiper-pagination-bullet-inactive-opacity: 0.55;
  --swiper-pagination-color: #ffffff;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
}
/* The active pill shape has no swiper variable of its own — .hero-dots
   raises specificity (0,2,0) above swiper's base bullet rule (0,1,0) so
   this wins without !important. */
.hero-dots .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 4px;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}