@layer components {
  .modal {
    width: min(440px, calc(100vw - var(--sp-32)));
    padding: var(--sp-32);
    border: 1px solid var(--surface-glass-2);
    border-radius: var(--r-20);
    background: var(--surface-secondary);
    color: var(--label-primary);
  }

  .modal[open] { display: grid; gap: var(--sp-16); }

  /* Третій і останній елемент із backdrop-filter у темі. */
  .modal::backdrop {
    background: var(--surface-scrim);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .modal__close {
    position: absolute;
    inset-block-start: var(--sp-16);
    inset-inline-end: var(--sp-16);
    padding: var(--sp-4);
    background: none;
    border: 0;
    color: var(--label-tertiary);
    cursor: pointer;
  }
  .modal__close:hover { color: var(--label-primary); }

  .modal__title { font-size: var(--fs-h4); }

  .modal__price {
    font-family: var(--font-display);
    /* h3, не h2: діапазон «1 900 – 3 200 USD» на 48px не влазить у рядок
       і розривається навпіл. */
    font-size: var(--fs-h3);
    line-height: 1.2;
    letter-spacing: -.04em;
    text-wrap: nowrap;
  }
  .modal__price[hidden] { display: none; }

  .modal__note {
    color: var(--label-tertiary);
    font-size: var(--fs-body-2);
    line-height: 1.43;
  }

  .modal__actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-12);
    margin-block-start: var(--sp-8);
  }

  @media (max-width: 420px) {
    .modal__actions { grid-template-columns: 1fr; }
  }
}