/* Home page. Tokens only. */
@layer page {
  /* ─── Hero ──────────────────────────────────────────────────────── */
  /* One soft ambient wash behind the hero, fading out well before the next section.
     It is the only gradient on the page and it exists for one reason: the storefront
     opened on flat grey with no sense of where the page began. Deliberately weak —
     `--color-primary-soft` over the canvas is a few percent of colour, not a banner. */
  .home-hero {
    position: relative;
    padding-block: var(--space-8) var(--space-6);
    isolation: isolate;
  }

  .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60% 70% at 85% 0%, var(--color-primary-soft), transparent 70%),
      linear-gradient(var(--color-bg), transparent 60%);
    pointer-events: none;
  }

  @media (min-width: 768px) {
    .home-hero {
      padding-block: var(--space-10) var(--space-12);
    }
  }

  .home-hero__inner {
    display: grid;
    align-items: center;
    gap: var(--space-10);
  }

  /* A grid item's automatic minimum size is its content's min-content width. The chip
     rail below is a scroll container, but the exemption only covers the scroller itself
     — this column is the grid item, so without the opt-out the rail's full width (plus
     its two negative margins) grew the track and the whole page scrolled sideways.
     Same mechanism as `.account-nav` in account.css; see .ai/MEMORY.md. */
  .home-hero__copy {
    min-inline-size: 0;
  }

  .home-hero h1 {
    font-size: var(--text-h1);
    letter-spacing: 0;
  }

  /* 18px over three lines is a wall on a 375px screen; 16px with a snugger leading is
     the same sentence in the same space but reads as a subtitle rather than a block. */
  .home-hero__lead {
    max-inline-size: 46ch;
    margin-block-start: var(--space-3);
    color: var(--color-text-strong-muted);
    font-size: var(--text-16);
    line-height: var(--leading-snug);
  }

  @media (min-width: 768px) {
    .home-hero__lead {
      margin-block-start: var(--space-4);
      font-size: var(--text-18);
      line-height: var(--leading-body);
    }
  }

  .home-hero__search {
    margin-block-start: var(--space-6);
    max-inline-size: 560px;
  }

  @media (min-width: 768px) {
    .home-hero__search {
      margin-block-start: var(--space-8);
    }
  }

  .home-hero__search .input {
    min-block-size: var(--control-lg);
    padding-inline-end: 104px;
    border-color: var(--color-border-strong);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-xs);
  }

  .home-hero__search-button {
    position: absolute;
    inset-block: 4px;
    inset-inline-end: 4px;
    min-block-size: auto;
    padding-inline: var(--space-5);
  }

  /* One scrolling row, never a wrapped block. Five chips of different widths wrapped
     2 / 2 / 1 and the ragged, right-hugging staircase was the first thing on the page.
     A single rail is the same shape at every width; the mask says there is more to the
     side, and the same categories are spelled out in full one section below, so nothing
     here is the only way to reach them. */
  .home-hero__chips {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--gutter), #000 calc(100% - var(--space-8)), transparent);
    mask-image: linear-gradient(to left, transparent, #000 var(--gutter), #000 calc(100% - var(--space-8)), transparent);
  }

  .home-hero__chips::-webkit-scrollbar {
    display: none;
  }

  .home-hero__chips > .chip {
    flex: none;
    scroll-snap-align: start;
  }

  @media (min-width: 768px) {
    .home-hero__chips {
      flex-wrap: wrap;
      margin-inline: 0;
      padding-inline: 0;
      overflow-x: visible;
      -webkit-mask-image: none;
      mask-image: none;
    }
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 36px;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-strong-muted);
    font-size: var(--text-14);
    text-decoration: none;
    transition:
      var(--transition-raise),
      background-color var(--duration-micro) var(--ease-out);
  }

  .chip .icon {
    color: var(--color-text-secondary);
  }

  @media (hover: hover) {
    .chip:hover {
      border-color: var(--color-border-strong);
      background: var(--color-bg);
      color: var(--color-text);
      transform: translateY(var(--raise));
      box-shadow: var(--shadow-xs);
    }
  }

  .chip:active {
    transform: translateY(0);
    transition-duration: var(--duration-micro);
  }

  .home-hero__visual {
    display: none;
  }

  @media (min-width: 1024px) {
    .home-hero {
      padding-block: var(--space-16) var(--space-20);
    }

    .home-hero__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: var(--space-16);
    }

    .home-hero__visual {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      grid-template-rows: repeat(2, 196px);
      gap: var(--space-4);
    }
  }

  .hero-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-surface-alt);
    transition: var(--transition-raise);
  }

  .hero-tile img {
    transition: transform var(--duration-large) var(--ease-out);
  }

  @media (hover: hover) {
    .hero-tile:hover {
      transform: translateY(var(--raise));
      box-shadow: var(--shadow-md);
    }

    .hero-tile:hover img {
      transform: scale(1.04);
    }
  }

  .hero-tile--1 {
    grid-row: span 2;
  }

  .hero-tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .hero-tile__label {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
  }

  .hero-tile__name {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-14);
    font-weight: var(--weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-tile__price {
    color: var(--color-text-secondary);
    font-size: var(--text-13);
    font-variant-numeric: tabular-nums;
  }

  /* ─── Sections ──────────────────────────────────────────────────── */
  .home-section {
    padding-block: var(--space-12);
  }

  @media (min-width: 1024px) {
    .home-section {
      padding-block: var(--space-16);
    }
  }

  .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
  }

  @media (min-width: 768px) {
    .section-heading {
      margin-block-end: var(--space-8);
    }
  }

  .section-heading h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
  }

  .section-heading__link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-2);
    font-size: var(--text-14);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  /* ─── Bento categories ──────────────────────────────────────────── */
  .bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bento__item--1 {
    grid-column: span 2;
  }

  @media (min-width: 768px) {
    .bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: minmax(148px, auto);
      gap: var(--space-4);
    }

    .bento__item--1 {
      grid-column: span 2;
      grid-row: span 2;
    }

    .bento__item--2 {
      grid-column: span 2;
    }

    /* After the 2×2 + 2 + 1 + 1 opening rows, a final row of three leaves a hole: let its last tile fill it. */
    .bento__item:nth-child(4n + 3):last-child {
      grid-column: span 2;
    }
  }

  .bento__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    block-size: 100%;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-raise);
  }

  @media (hover: hover) {
    .bento__link:hover {
      border-color: var(--color-border-strong);
      color: var(--color-text);
      box-shadow: var(--shadow-sm);
      transform: translateY(var(--raise));
    }

    .bento__link:hover .bento__icon {
      transform: scale(1.06);
    }
  }

  .bento__link:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
    transition-duration: var(--duration-micro);
  }

  /* Categories are the main way into the catalog, so the tile gets the one accent on this section.
     (It also has to differ from the card: since the layering pass the card is white too, and a white
     chip on a white card was invisible — only its shadow showed.) */
  .bento__icon {
    display: grid;
    place-items: center;
    transition: transform var(--duration-normal) var(--ease-spring);
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .bento__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .bento__title {
    font-size: var(--text-16);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }

  .bento__description {
    display: none;
    color: var(--color-text-strong-muted);
    font-size: var(--text-14);
    line-height: var(--leading-body);
  }

  .bento__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: auto;
    color: var(--color-text-secondary);
    font-size: var(--text-13);
  }

  .bento__item--1 .bento__description {
    display: block;
    max-inline-size: 34ch;
  }

  @media (min-width: 768px) {
    .bento__item--1 .bento__link {
      padding: var(--space-8);
    }

    .bento__item--1 .bento__icon {
      inline-size: 56px;
      block-size: 56px;
    }

    .bento__item--1 .bento__title {
      font-size: var(--text-h4);
    }

    .bento__item--2 .bento__description {
      display: block;
    }
  }

  /* ─── Process ───────────────────────────────────────────────────── */
  .home-process {
    border-block: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  .home-process__inner {
    display: grid;
    gap: var(--space-8);
  }

  .home-process__intro h2 {
    font-size: var(--text-h2);
  }

  .home-process__intro p {
    max-inline-size: 38ch;
    margin-block: var(--space-3) var(--space-6);
    color: var(--color-text-strong-muted);
    line-height: var(--leading-body);
  }

  .process {
    display: grid;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .process__step h3 {
    margin-block-start: var(--space-3);
    font-size: var(--text-18);
  }

  .process__step p {
    margin-block-start: var(--space-2);
    color: var(--color-text-strong-muted);
    font-size: var(--text-14);
    line-height: var(--leading-body);
  }

  .process__number {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-full);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: var(--text-15);
    font-weight: var(--weight-bold);
  }

  /* Phones: a real timeline instead of four stacked blocks.
     Stacked, each step was a heavy black disc floating above a heading and a paragraph
     with nothing tying it to the next one — four separate announcements rather than one
     sequence, which is the whole point of "خرید در چهار قدم". The rail on the start edge
     joins them, and moving the number out of the flow buys back a whole line per step. */
  @media (max-width: 767px) {
    .process {
      gap: 0;
    }

    .process__step {
      position: relative;
      padding-inline-start: 52px;
      padding-block-end: var(--space-6);
    }

    .process__step::before {
      content: "";
      position: absolute;
      inset-inline-start: 17px;
      inset-block: 40px 0;
      inline-size: 2px;
      border-radius: var(--radius-full);
      background: var(--color-border);
    }

    .process__step:last-child {
      padding-block-end: 0;
    }

    .process__step:last-child::before {
      display: none;
    }

    .process__number {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
    }

    .process__step h3 {
      margin-block-start: 0;
      /* Align the heading's cap-height with the middle of the 36px number disc. */
      min-block-size: 36px;
      display: flex;
      align-items: center;
    }
  }

  @media (min-width: 768px) {
    .process {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-8) var(--space-6);
    }
  }

  @media (min-width: 1024px) {
    .home-process__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
      gap: var(--space-16);
    }

    .process {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ─── Trust list ────────────────────────────────────────────────── */
  .home-trust h2 {
    margin-block-end: var(--space-6);
    font-size: var(--text-h2);
  }

  .trust-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
  }

  .trust-list__item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
  }

  .trust-list__item + .trust-list__item {
    border-block-start: 1px solid var(--color-border);
  }

  .trust-list dt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    font-size: var(--text-18);
    font-weight: var(--weight-semibold);
  }

  .trust-list dt .icon {
    color: var(--color-primary);
  }

  .trust-list dd {
    max-inline-size: 60ch;
    color: var(--color-text-strong-muted);
    font-size: var(--text-15);
    line-height: var(--leading-body);
  }

  @media (min-width: 768px) {
    .trust-list__item {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
      align-items: baseline;
      gap: var(--space-8);
    }
  }

  /* ─── FAQ teaser ────────────────────────────────────────────────── */
  .home-faq .faq {
    max-inline-size: none;
  }
}