<div class="oppo-row"><button type="button" class="oppo-button " data-commerce-message="Основное действие выбрано.">Продолжить</button><button type="button" class="oppo-button oppo-button--secondary" data-commerce-message="Редактирование выбрано.">Изменить</button><button type="button" class="oppo-button oppo-button--quiet" data-commerce-message="Необязательный шаг пропущен.">Пропустить</button><button type="button" class="oppo-button oppo-button--danger" data-commerce-message="Пример опасного действия. Данные не удаляются.">Удалить</button></div><p>Одно главное действие на область. Удаление не выглядит как продолжение.</p>

<div class="oppo-foundation-grid"><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">В строке</span><button type="button" class="oppo-button oppo-button--sm" >Выбрать</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">В форме</span><button type="button" class="oppo-button " >Продолжить</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">На первом экране</span><button type="button" class="oppo-button oppo-button--lg" >Смотреть модели</button></div></div>

<div class="oppo-foundation-grid"><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Обычная</span><button type="button" class="oppo-button " >Продолжить</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Наведение</span><button type="button" class="oppo-button oppo-foundation-hover" >Продолжить</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Фокус клавиатуры</span><button type="button" class="oppo-button oppo-foundation-focus" >Продолжить</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Выбрана</span><button type="button" class="oppo-button oppo-button--secondary" aria-pressed="true" data-oppo-toggle>Выбор</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Недоступна</span><button type="button" class="oppo-button " disabled>Продолжить</button></div></div><p>Фокус показан отдельно; доступные кнопки можно обойти клавишей Tab.</p>

<div class="oppo-foundation-grid"><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Готово к отправке</span><button type="button" class="oppo-button " data-commerce-message="Изменения сохранены в примере.">Сохранить</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Выполняется</span><button type="button" class="oppo-button " aria-busy="true" disabled><span class="oppo-spinner" aria-hidden="true"></span>Сохраняем</button></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Завершено</span><span class="oppo-foundation-result"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#check"></use></svg>Изменения сохранены</span></div></div>

<div class="oppo-row"><button type="button" class="oppo-icon-button" aria-label="Добавить в избранное" aria-pressed="false" data-oppo-toggle><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#heart"></use></svg></button><button type="button" class="oppo-icon-button" aria-label="Избранное" aria-pressed="true" data-oppo-toggle><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#heart"></use></svg></button><button type="button" class="oppo-icon-button" aria-label="Удаление недоступно" disabled><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#close"></use></svg></button></div><p>Смысл действия доступен без наведения и без цвета.</p>

<div class="oppo-stack"><a class="oppo-link" href="#cp-fnd-typography">Типографика <svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#arrow"></use></svg></a><a class="oppo-link" href="https://www.oppo.com/ru/support/" target="_blank" rel="noopener noreferrer">Поддержка OPPO <svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#arrow-up"></use></svg></a><button type="button" class="oppo-button oppo-button--quiet" data-commerce-message="Выбор можно изменить в этом примере.">Изменить выбор</button></div>

<div class="oppo-row"><span class="oppo-badge">Новинка</span><span class="oppo-badge oppo-badge--success">Оплачен</span><span class="oppo-badge oppo-badge--warning">Нужно подтвердить</span><span class="oppo-badge oppo-badge--danger">Ошибка оплаты</span></div><p>Длинная метка: <span class="oppo-badge">Доступно после подтверждения номера</span></p>

<div class="oppo-stack"><div class="oppo-alert oppo-alert--success"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#check"></use></svg><p>Адрес сохранён. Его можно выбрать при оформлении.</p></div><div class="oppo-alert oppo-alert--warning"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#warning"></use></svg><p>Стоимость доставки изменилась. Проверьте итог перед продолжением.</p></div><div class="oppo-alert oppo-alert--danger"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#info"></use></svg><div><p>Данные не загрузились. Сохранённые изменения остались на месте.</p><button type="button" class="oppo-button oppo-button--sm oppo-button--secondary" data-commerce-message="Повторная попытка выполнена в примере.">Повторить</button></div></div></div>

<div class="oppo-foundation-grid"><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Подсказка</span><label class="oppo-field"><span class="oppo-field__label">Имя</span><input class="oppo-input" placeholder="Как к вам обращаться" aria-describedby="fnd-name-hint"><small id="fnd-name-hint">Так имя будет показано в заказе.</small></label></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Ошибка</span><label class="oppo-field"><span class="oppo-field__label">Email</span><input class="oppo-input" type="email" value="buyer" aria-invalid="true" aria-describedby="fnd-email-error"><span class="oppo-field__error" id="fnd-email-error">Укажите адрес в формате name@example.com.</span></label></div><div class="oppo-foundation-sample"><span class="oppo-foundation-caption">Подтверждено</span><label class="oppo-field"><span class="oppo-field__label">Телефон</span><input class="oppo-input oppo-foundation-input--success" type="tel" value="+7 900 000-00-00" readonly aria-describedby="fnd-phone-success"><small class="oppo-foundation-success" id="fnd-phone-success">Номер подтверждён в примере.</small></label></div></div>

<div class="oppo-stack"><label for="fnd-progress-value">Подготовка данных · 64%</label><progress id="fnd-progress-value" class="oppo-foundation-progress" value="64" max="100">64%</progress><label for="fnd-progress-complete">Подготовка завершена · 100%</label><progress id="fnd-progress-complete" class="oppo-foundation-progress" value="100" max="100">100%</progress></div>

<div class="oppo-foundation-skeleton" aria-busy="true" aria-label="Загружаем карточку устройства"><div class="oppo-skeleton oppo-foundation-skeleton__image" aria-hidden="true"></div><div class="oppo-stack" aria-hidden="true"><div class="oppo-skeleton"></div><div class="oppo-skeleton oppo-foundation-width-70"></div><div class="oppo-skeleton oppo-foundation-width-45"></div></div><span class="oppo-visually-hidden">Загрузка карточки</span></div>

<div class="oppo-foundation-wait" role="status"><span class="oppo-spinner" aria-hidden="true"></span><div><strong>Проверяем условия получения</strong><p>Результат появится в этой области.</p></div></div><p>При reduced motion вращение отключается базовыми стилями.</p>

<div class="oppo-foundation-type"><span class="oppo-foundation-type__display">Ваш следующий OPPO</span><span class="oppo-foundation-type__title">Устройства для каждого дня</span><span class="oppo-foundation-type__body">Выберите модель и сравните характеристики. Длинный текст должен сохранять спокойный ритм и оставаться удобным для чтения.</span><span class="oppo-foundation-type__caption">Подпись к изображению · дополнительная информация</span></div>

<div class="oppo-foundation-palette"><div><span style="--foundation-color:var(--oppo-ink)" aria-hidden="true"></span><strong>Текст</strong><small>#000000</small></div><div><span style="--foundation-color:var(--oppo-white)" aria-hidden="true"></span><strong>Фон</strong><small>#FFFFFF</small></div><div><span style="--foundation-color:var(--oppo-green)" aria-hidden="true"></span><strong>Акцент</strong><small>#2CFF73</small></div><div><span style="--foundation-color:var(--oppo-green-dark)" aria-hidden="true"></span><strong>Глубокий зелёный</strong><small>#046A38</small></div><div><span style="--foundation-color:var(--oppo-gray-100)" aria-hidden="true"></span><strong>Поверхность</strong><small>gray-100</small></div><div><span style="--foundation-color:var(--oppo-danger)" aria-hidden="true"></span><strong>Ошибка</strong><small>danger</small></div></div>

<div class="oppo-foundation-spacing"><div><code>8 px</code><span style="--foundation-space:8px" aria-hidden="true"></span><small>Связанная подпись</small></div><div><code>16 px</code><span style="--foundation-space:16px" aria-hidden="true"></span><small>Поля формы</small></div><div><code>24 px</code><span style="--foundation-space:24px" aria-hidden="true"></span><small>Внутри карточки</small></div><div><code>32 px</code><span style="--foundation-space:32px" aria-hidden="true"></span><small>Группы</small></div><div><code>48 px</code><span style="--foundation-space:48px" aria-hidden="true"></span><small>Разделы</small></div></div>

<div class="oppo-foundation-surface"><strong>Группа данных</strong><p>Общий контекст и пояснение.</p><div class="oppo-foundation-surface__inner"><span>Вложенная информация</span><strong>Без дополнительной тени</strong></div><div class="oppo-foundation-surface__accent"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#info"></use></svg><span>Область, требующая внимания</span></div></div>

<div class="oppo-foundation-grid"><label class="oppo-field"><span class="oppo-field__label">Пустое поле</span><input class="oppo-input" placeholder="Введите значение"></label><label class="oppo-field"><span class="oppo-field__label">Заполненное</span><input class="oppo-input" value="Покупатель OPPO"></label><label class="oppo-field"><span class="oppo-field__label">Ошибка</span><input class="oppo-input" value="Некорректное значение" aria-invalid="true" aria-describedby="forms-state-error"><span class="oppo-field__error" id="forms-state-error">Проверьте введённые данные.</span></label><label class="oppo-field"><span class="oppo-field__label">Недоступно</span><input class="oppo-input" value="Редактирование недоступно" disabled></label><label class="oppo-field"><span class="oppo-field__label">Только чтение</span><input class="oppo-input" value="Сохранённое значение" readonly></label></div>

<form method="dialog" data-commerce-form="Обязательное поле заполнено. Это локальный пример." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Имя получателя · обязательно</span><input class="oppo-input" name="foundationRecipient" required autocomplete="name" maxlength="80" aria-describedby="forms-required-hint"><small id="forms-required-hint">Кто будет получать заказ.</small></label><label class="oppo-field"><span class="oppo-field__label">Комментарий · необязательно</span><input class="oppo-input" name="foundationComment" maxlength="160" placeholder="Пожелания к получению"></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div class="oppo-stack"><label class="oppo-field"><span class="oppo-field__label">Номер телефона</span><span class="oppo-foundation-input-group"><span aria-hidden="true">+7</span><input class="oppo-input" type="tel" inputmode="tel" placeholder="900 000-00-00" aria-label="Номер телефона после +7"></span></label><label class="oppo-field"><span class="oppo-field__label">Бюджет в рублях</span><span class="oppo-foundation-input-group"><input class="oppo-input" type="number" min="0" step="1000" value="60000"><span aria-hidden="true">₽</span></span></label><label class="oppo-field"><span class="oppo-field__label">Найти устройство</span><span class="oppo-foundation-input-group"><span aria-hidden="true"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#search"></use></svg></span><input class="oppo-input" type="search" placeholder="Название модели"></span></label></div>

<div data-textarea-demo><label class="oppo-field"><span class="oppo-field__label">Комментарий</span><textarea class="oppo-input" rows="4" maxlength="200" data-foundation-counter aria-describedby="forms-comment-count" placeholder="Укажите детали, которые помогут при получении"></textarea></label><span class="oppo-foundation-counter" id="forms-comment-count"><output data-foundation-count>0</output> / 200 символов</span></div>

<div class="oppo-stack"><label class="oppo-check"><input type="checkbox" ><span>Получать новости</span></label><label class="oppo-check"><input type="checkbox" checked><span>Согласие подтверждено</span></label><label class="oppo-check"><input type="checkbox" data-foundation-mixed><span>Выбрана часть позиций</span></label><label class="oppo-check"><input type="checkbox" disabled><span>Настройка недоступна</span></label></div>

<fieldset class="oppo-stack"><legend>Как показать характеристики</legend><label class="oppo-check"><input type="radio" name="foundation-spec-view" value="short" checked><span>Кратко</span></label><label class="oppo-check"><input type="radio" name="foundation-spec-view" value="full"><span>Полностью</span></label><label class="oppo-check"><input type="radio" name="foundation-spec-view" value="print" disabled><span>Распечатать · недоступно</span></label></fieldset>

<div class="oppo-stack"><label class="oppo-switch"><input type="checkbox" checked><span>Показывать подсказки</span></label><label class="oppo-switch"><input type="checkbox" ><span>Получать новости</span></label><label class="oppo-switch"><input type="checkbox" disabled><span>Настройка недоступна</span></label></div>

<div class="oppo-row" data-demo-segments><button type="button" class="oppo-button oppo-button--secondary" data-segment aria-pressed="true">Кратко</button><button type="button" class="oppo-button oppo-button--secondary" data-segment aria-pressed="false">Подробно</button><button type="button" class="oppo-button oppo-button--secondary" data-segment aria-pressed="false">Для печати</button></div><p>Каждая кнопка доступна с клавиатуры; выбор не отправляет данные.</p>

<div class="oppo-foundation-grid"><label class="oppo-field"><span class="oppo-field__label">Устройство</span><select class="oppo-input" required><option value="">Выберите модель</option><optgroup label="Find X"><option>Find X9</option><option>Find X9 Pro</option></optgroup><optgroup label="Reno"><option>Reno15</option><option disabled>Reno16 · недоступно в примере</option></optgroup></select></label><label class="oppo-field"><span class="oppo-field__label">Сохранённый выбор</span><select class="oppo-input" disabled><option>Find X9 Pro</option></select></label></div>

<form method="dialog" data-commerce-form="Формат данных проверен. Ничего не отправляется." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Email</span><input class="oppo-input" type="email" required autocomplete="email" placeholder="name@example.com"></label><label class="oppo-field"><span class="oppo-field__label">Телефон</span><input class="oppo-input" type="tel" required pattern="[+]7[0-9]{10}" placeholder="+79000000000" aria-describedby="forms-phone-format"><small id="forms-phone-format">+7 и десять цифр без пробелов.</small></label><label class="oppo-check"><input type="checkbox" required><span>Я проверил данные</span></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div data-foundation-search><div class="oppo-field"><label class="oppo-field__label" for="forms-search-control">Поиск по моделям</label><span class="oppo-foundation-input-group"><span aria-hidden="true"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#search"></use></svg></span><input class="oppo-input" id="forms-search-control" type="search" value="Reno" maxlength="140"><button class="oppo-icon-button" type="button" data-foundation-clear aria-label="Очистить поисковый запрос"><svg class="oppo-icon" aria-hidden="true"><use href="../src/ui/icons.svg#close"></use></svg></button></span></div><small>Пример поля. Для поиска по всей библиотеке используйте её верхний поиск.</small></div>

<form method="dialog" data-commerce-form="Число соответствует ограничениям примера." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Количество образцов</span><input class="oppo-input" type="number" min="1" max="12" step="1" value="3" required aria-describedby="forms-number-hint"><small id="forms-number-hint">От 1 до 12, только целые числа.</small></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div class="oppo-foundation-grid"><label class="oppo-field"><span class="oppo-field__label">Предпочитаемая дата</span><input class="oppo-input" type="date" aria-describedby="forms-date-hint"><small id="forms-date-hint">Проверка поля, без назначения доставки.</small></label><label class="oppo-field"><span class="oppo-field__label">Предпочитаемое время</span><input class="oppo-input" type="time" min="10:00" max="20:00" step="1800" value="14:00"></label></div>

<label class="oppo-field"><span class="oppo-field__label">Изображение для обращения</span><input class="oppo-input oppo-foundation-file" type="file" accept="image/png,image/jpeg" data-foundation-upload aria-describedby="forms-upload-note"><small id="forms-upload-note">PNG или JPEG. Файл остаётся на устройстве; сервер не вызывается.</small><p role="status" data-foundation-file-result>Файл не выбран</p></label>

<label class="oppo-field"><span class="oppo-field__label">Город</span><input class="oppo-input" list="forms-city-options" autocomplete="address-level2" placeholder="Начните вводить название"><datalist id="forms-city-options"><option value="Москва"></option><option value="Санкт-Петербург"></option><option value="Казань"></option></datalist><small>Показаны справочные города, это не список действующих точек выдачи.</small></label>

<div class="oppo-foundation-grid"><label class="oppo-field"><span class="oppo-field__label">Номер примера · можно скопировать</span><input class="oppo-input" value="DEMO-100" readonly></label><label class="oppo-field"><span class="oppo-field__label">Служебное значение · недоступно</span><input class="oppo-input" value="Не редактируется" disabled></label></div><p>Не используйте disabled вместо read-only, если человеку нужно скопировать значение.</p>

<nav class="oppo-breadcrumbs" aria-label="Хлебные крошки"><a href="./storefront.html">Главная</a><span>/</span><a href="./storefront.html#catalog">Смартфоны</a><span>/</span><span aria-current="page">Find X9 Pro</span></nav>

<div data-pagination-demo><nav class="oppo-pagination" aria-label="Страницы списка" data-demo-pagination><button type="button" class="oppo-button oppo-button--secondary" data-page="1" aria-current="page">1</button><button type="button" class="oppo-button oppo-button--secondary" data-page="2">2</button><button type="button" class="oppo-button oppo-button--secondary" data-page="3">3</button><button type="button" class="oppo-button oppo-button--secondary" data-page="4">4</button></nav><p role="status" data-page-result>Страница 1 из 4</p></div>

<details class="oppo-dropdown" data-commerce-menu><summary>Действия с подборкой</summary><div class="oppo-stack"><button type="button" class="oppo-button oppo-button--secondary" data-commerce-message="Подборка сохранена в примере.">Сохранить подборку</button><button type="button" class="oppo-button oppo-button--secondary" data-commerce-message="Подборка очищена в примере.">Очистить</button></div></details>

<div data-model-search-demo><label class="oppo-field"><span class="oppo-field__label">Найти модель</span><input class="oppo-input" type="search" data-model-search placeholder="Например, Reno"></label><div class="oppo-search-suggestions"><button type="button" class="oppo-button oppo-button--secondary" data-suggestion="Find X9 Pro">Find X9 Pro</button><button type="button" class="oppo-button oppo-button--secondary" data-suggestion="Find X9">Find X9</button><button type="button" class="oppo-button oppo-button--secondary" data-suggestion="Reno15">Reno15</button><button type="button" class="oppo-button oppo-button--secondary" data-suggestion="Enco Air3 Pro">Enco Air3 Pro</button></div><p data-search-empty hidden>Модели не найдены</p></div>

<nav class="oppo-bottom-nav" aria-label="Мобильное меню" data-demo-segments><button type="button" class="oppo-button oppo-button--secondary" data-segment aria-pressed="true">Главная</button><button type="button" class="oppo-button oppo-button--secondary" data-segment aria-pressed="false">Каталог</button><button type="button" class="oppo-button oppo-button--secondary" data-segment aria-pressed="false">Избранное</button><button type="button" class="oppo-button oppo-button--secondary" data-segment aria-pressed="false">Корзина · 2</button></nav>

<div class="oppo-category-tree"><details open><summary>Смартфоны <span>3</span></summary><a href="./storefront.html#catalog">Find X <span>2</span></a><a href="./storefront.html#catalog">Reno <span>1</span></a></details><details><summary>Аудио <span>1</span></summary><a href="./rich-content.html#enco-air3-pro">Enco Air3 Pro</a></details></div>

<nav class="oppo-section-nav" aria-label="Разделы карточки"><strong>OPPO Reno15</strong><a href="#cp-color-variant">Обзор</a><a href="#cp-spec-groups">Характеристики</a><a href="#cp-review">Отзывы</a><a class="oppo-button oppo-button--sm" href="#cp-sku">Выбрать</a></nav>

<nav class="oppo-account-nav" aria-label="Личный кабинет"><a href="#cp-profile">Мой профиль <span>→</span></a><a href="#cp-order-search" aria-current="page">Заказы <span>2</span></a><a href="#cp-address">Адреса <span>→</span></a><a href="#cp-favorite-list">Избранное <span>2</span></a><a href="#cp-sessions">Безопасность <span>→</span></a></nav>

<nav class="oppo-series-grid" aria-label="Серии OPPO"><a href="#cp-gallery"><img class="oppo-commerce-thumb" src="../assets/rich/find-x9-pro/catalog-white.png" alt="Find X" width="96" height="96" loading="lazy"><strong>Find X</strong><small>В центре — камера</small></a><a href="#cp-color-variant"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno" width="96" height="96" loading="lazy"><strong>Reno</strong><small>Ваш стиль каждый день</small></a><a href="#cp-bundle"><img class="oppo-commerce-thumb" src="../assets/rich/enco-air3-pro/white.jpg" alt="Enco" width="96" height="96" loading="lazy"><strong>Enco</strong><small>Погружение в звук</small></a></nav>

<div data-sort-demo><div class="oppo-results-heading"><div><small>Смартфоны</small><h4>Найдите свой OPPO</h4></div><label class="oppo-field"><span class="oppo-field__label">Сортировать</span><select class="oppo-input" data-sort-products><option value="default">Рекомендуемые</option><option value="asc">Сначала дешевле</option><option value="desc">Сначала дороже</option></select></label></div><div class="oppo-sort-products"><div data-sort-item data-price="89990"><img class="oppo-commerce-thumb" src="../assets/rich/find-x9-pro/catalog-white.png" alt="Find X9 Pro" width="96" height="96" loading="lazy"><strong>Find X9 Pro</strong><small>89 990 ₽</small></div><div data-sort-item data-price="49990"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15" width="96" height="96" loading="lazy"><strong>Reno15</strong><small>49 990 ₽</small></div><div data-sort-item data-price="7990"><img class="oppo-commerce-thumb" src="../assets/rich/enco-air3-pro/white.jpg" alt="Enco Air3 Pro" width="96" height="96" loading="lazy"><strong>Enco Air3 Pro</strong><small>7 990 ₽</small></div></div><p role="status" data-sort-result>3 товара · рекомендуемый порядок</p></div>

<div data-facet-browser><label class="oppo-field"><span class="oppo-field__label">Объём памяти</span><input type="search" class="oppo-input" data-facet-search placeholder="256"></label><label class="oppo-check" data-facet-option><input type="checkbox" ><span>128 ГБ</span><small>2</small></label><label class="oppo-check" data-facet-option><input type="checkbox" ><span>256 ГБ</span><small>3</small></label><label class="oppo-check" data-facet-option><input type="checkbox" ><span>512 ГБ</span><small>2</small></label><label class="oppo-check" data-facet-option><input type="checkbox" disabled><span>1024 ГБ</span><small>0</small></label><p role="status" data-facet-count>4 значения</p></div>

<label class="oppo-field"><span class="oppo-field__label">Бюджет до <output data-budget-value>80 000 ₽</output></span><input type="range" min="20000" max="140000" step="5000" value="80000" data-budget></label>

<div class="oppo-row" data-filter-chips><button type="button" class="oppo-button oppo-button--secondary" data-remove-chip aria-label="Убрать фильтр Find X">Find X ×</button><button type="button" class="oppo-button oppo-button--secondary" data-remove-chip aria-label="Убрать фильтр 256 ГБ">256 ГБ ×</button><button type="button" class="oppo-button oppo-button--secondary" data-remove-chip aria-label="Убрать фильтр В наличии">В наличии ×</button></div><button type="button" class="oppo-button oppo-button--secondary" data-clear-chips>Сбросить все</button><p role="status" data-chip-count>3 фильтра</p>

<div class="oppo-product-row"><img class="oppo-commerce-thumb" src="../assets/rich/find-x9-pro/catalog-white.png" alt="OPPO Find X9 Pro" width="96" height="96" loading="lazy"><div><strong>OPPO Find X9 Pro</strong><p>256 ГБ · белый</p><span class="oppo-badge oppo-badge--success">В наличии</span></div><div><strong>89 990 ₽</strong><button type="button" class="oppo-button" data-commerce-message="Find X9 Pro добавлен в демо-корзину.">В корзину</button></div></div>

<div class="oppo-stock-grid"><div><span class="oppo-stock-dot ok"></span><strong>В наличии</strong><p>Можно выбрать количество</p><button class="oppo-button oppo-button--secondary" type="button" disabled>Доступно</button></div><div><span class="oppo-stock-dot wait"></span><strong>Ожидается</strong><p>Срок уточняется</p><button class="oppo-button oppo-button--secondary" type="button" disabled>Уточнить</button></div><div><span class="oppo-stock-dot off"></span><strong>Нет в наличии</strong><p>Покупка недоступна</p><button class="oppo-button oppo-button--secondary" type="button" disabled>Нет в наличии</button></div><div><span class="oppo-stock-dot off"></span><strong>Снят с продажи</strong><p>Карточка остаётся доступной</p><button class="oppo-button oppo-button--secondary" type="button" disabled>Недоступно</button></div></div>

<div data-catalog-view><div class="oppo-row" data-demo-segments><button type="button" class="oppo-button oppo-button--secondary" data-segment data-view="grid" aria-pressed="true">Карточки</button><button type="button" class="oppo-button oppo-button--secondary" data-segment data-view="list" aria-pressed="false">Список</button></div><div class="oppo-mini-products"><div><img class="oppo-commerce-thumb" src="../assets/rich/find-x9/catalog-black.png" alt="Find X9" width="96" height="96" loading="lazy"><strong>Find X9</strong></div><div><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15" width="96" height="96" loading="lazy"><strong>Reno15</strong></div></div></div>

<div class="oppo-commerce-empty"><span class="oppo-empty-mark" aria-hidden="true">○</span><h4>Ничего не нашлось</h4><p>Уберите часть фильтров или выберите другую серию.</p><a class="oppo-link" href="#cp-filter-chips">Изменить фильтры →</a></div>

<div class="oppo-catalog-skeleton" role="status" aria-label="Загружаем товары"><div aria-hidden="true"><span class="oppo-skeleton oppo-skeleton-product"></span><span class="oppo-skeleton"></span><span class="oppo-skeleton oppo-skeleton-short"></span></div><div aria-hidden="true"><span class="oppo-skeleton oppo-skeleton-product"></span><span class="oppo-skeleton"></span><span class="oppo-skeleton oppo-skeleton-short"></span></div><div aria-hidden="true"><span class="oppo-skeleton oppo-skeleton-product"></span><span class="oppo-skeleton"></span><span class="oppo-skeleton oppo-skeleton-short"></span></div></div>

<div data-favorites-demo><div data-favorite-items><div class="oppo-product-row" data-favorite-item><img class="oppo-commerce-thumb" src="../assets/rich/find-x9-pro/catalog-white.png" alt="Find X9 Pro" width="96" height="96" loading="lazy"><div><strong>Find X9 Pro</strong><small>256 ГБ · белый</small></div><button type="button" class="oppo-button oppo-button--secondary" data-favorite-remove>Убрать</button></div><div class="oppo-product-row" data-favorite-item><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15" width="96" height="96" loading="lazy"><div><strong>Reno15</strong><small>256 ГБ · белый</small></div><button type="button" class="oppo-button oppo-button--secondary" data-favorite-remove>Убрать</button></div></div><div data-favorite-empty hidden><div class="oppo-commerce-empty"><span class="oppo-empty-mark" aria-hidden="true">○</span><h4>В избранном пока пусто</h4><p>Сохраните устройства, чтобы вернуться к ним позже.</p><a class="oppo-link" href="#cp-product-row">Посмотреть товар →</a></div></div><div class="oppo-row"><p role="status" data-favorite-count>Сохранено: 2</p><button type="button" class="oppo-button oppo-button--secondary" data-favorite-restore>Восстановить подборку</button></div></div>

<div class="oppo-compare-tray"><div><small>Сравнение устройств</small><strong>Две комплектации Reno15. Найдите отличия.</strong></div><div class="oppo-compare-mini"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15 — 256 ГБ" width="96" height="96" loading="lazy"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15 — 512 ГБ" width="96" height="96" loading="lazy"></div><a class="oppo-link" href="#cp-compare-differences">Сравнить →</a></div>

<div data-load-more-demo><ul class="oppo-more-list"><li>OPPO Find X9 Pro <span>Серия Find X</span></li><li>OPPO Reno15 <span>Серия Reno</span></li><li data-more-item hidden>OPPO Find X9 <span>Серия Find X</span></li><li data-more-item hidden>OPPO Enco Air3 Pro <span>Аудио</span></li></ul><button type="button" class="oppo-button oppo-button--secondary" data-load-more>Показать ещё 2</button><p role="status" data-more-count>Показано 2 из 4</p></div>

<div class="oppo-state-message oppo-state-message--danger"><strong>Не удалось получить товары</strong><p>Сохранённые фильтры остаются на месте. Повторите запрос позже.</p></div><a class="oppo-link" href="#cp-recovery">Пример повторной загрузки →</a>

<div data-sku-picker><div class="oppo-row" data-demo-segments><button type="button" class="oppo-button oppo-button--secondary" data-segment data-sku-price="89990" aria-pressed="true">256 ГБ</button><button type="button" class="oppo-button oppo-button--secondary" data-segment data-sku-price="99990" aria-pressed="false">512 ГБ</button><button type="button" class="oppo-button oppo-button--secondary" disabled>1 ТБ · нет</button></div><p class="oppo-commerce-price" data-sku-total>89 990 ₽</p></div>

<div class="oppo-purchase-bar"><div><strong>OPPO Reno15</strong><small>256 ГБ · белый</small></div><strong>49 990 ₽</strong><button type="button" class="oppo-button" data-commerce-message="Reno15 выбран в примере.">Купить</button></div>

<div data-spec-browser><label class="oppo-field"><span class="oppo-field__label">Найти характеристику</span><input class="oppo-input" type="search" data-spec-search placeholder="Например, экран"></label><dl class="oppo-spec-list"><div data-spec-row><dt>Экран</dt><dd>AMOLED</dd></div><div data-spec-row><dt>Память</dt><dd>256 ГБ</dd></div><div data-spec-row><dt>Корпус</dt><dd>Белый</dd></div></dl><p data-spec-count role="status">3 характеристики</p></div>

<div class="oppo-rating"><strong>4,8 <small>/ 5</small></strong><span aria-label="4,8 из 5">★★★★★</span><p>24 отзыва · пример</p><label>5 ★ <meter min="0" max="24" value="19">19</meter><span>19</span></label><label>4 ★ <meter min="0" max="24" value="4">4</meter><span>4</span></label><label>3 ★ <meter min="0" max="24" value="1">1</meter><span>1</span></label><label>2 ★ <meter min="0" max="24" value="0">0</meter><span>0</span></label><label>1 ★ <meter min="0" max="24" value="0">0</meter><span>0</span></label></div>

<div class="oppo-review"><header><span class="oppo-avatar">А</span><div><strong>Алексей</strong><small>Покупка подтверждена · пример</small></div><span aria-label="5 из 5">★★★★★</span></header><h4>Удобно каждый день</h4><p>Нравятся экран и фотографии. Телефон удобно лежит в руке.</p><button type="button" class="oppo-button oppo-button--secondary" data-review-helpful aria-pressed="false">Полезно · 12</button><blockquote><strong>Ответ магазина</strong><p>Спасибо, что поделились впечатлениями!</p></blockquote></div>

<form method="dialog" data-commerce-form="Запрос сохранён в примере. Письмо не отправляется." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Email</span><input class="oppo-input" type="email" required placeholder="buyer@example.invalid"></label><label class="oppo-check"><input type="checkbox" required><span>Сообщить, когда появится товар</span></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div class="oppo-product-gallery" data-product-gallery><div class="oppo-gallery-stage"><img data-gallery-main src="../assets/rich/find-x9-pro/catalog-white.png" alt="OPPO Find X9 Pro — белый" width="420" height="420" loading="lazy"></div><div class="oppo-gallery-rail"><button type="button" data-gallery-src="../assets/rich/find-x9-pro/catalog-white.png" data-gallery-alt="OPPO Find X9 Pro — белый" aria-pressed="true" aria-label="OPPO Find X9 Pro — белый"><img class="oppo-commerce-thumb" src="../assets/rich/find-x9-pro/catalog-white.png" alt="OPPO Find X9 Pro — белый" width="96" height="96" loading="lazy"></button><button type="button" data-gallery-src="../assets/rich/find-x9-pro/hero-device.webp" data-gallery-alt="OPPO Find X9 Pro — корпус" aria-pressed="false" aria-label="OPPO Find X9 Pro — корпус"><img class="oppo-commerce-thumb" src="../assets/rich/find-x9-pro/hero-device.webp" alt="OPPO Find X9 Pro — корпус" width="96" height="96" loading="lazy"></button><button type="button" data-gallery-src="../assets/rich/find-x9-pro/camera-device.webp" data-gallery-alt="OPPO Find X9 Pro — камеры" aria-pressed="false" aria-label="OPPO Find X9 Pro — камеры"><img class="oppo-commerce-thumb" src="../assets/rich/find-x9-pro/camera-device.webp" alt="OPPO Find X9 Pro — камеры" width="96" height="96" loading="lazy"></button></div><p data-gallery-caption role="status">OPPO Find X9 Pro — белый</p></div>

<div class="oppo-color-variant" data-product-gallery><img data-gallery-main src="../assets/rich/reno15/color-white.webp" alt="OPPO Reno15 — белый" width="260" height="260" loading="lazy"><div><small>OPPO Reno15</small><h4>Ваш цвет. Ваш характер.</h4><div class="oppo-color-options"><button type="button" data-gallery-src="../assets/rich/reno15/color-white.webp" data-gallery-alt="OPPO Reno15 — белый" aria-pressed="true"><span style="--swatch-color:#eeeae4"></span>Белый</button><button type="button" data-gallery-src="../assets/rich/reno15/color-blue.webp" data-gallery-alt="OPPO Reno15 — голубой" aria-pressed="false"><span style="--swatch-color:#afcde2"></span>Голубой</button><button type="button" data-gallery-src="../assets/rich/reno15/color-dark-blue.webp" data-gallery-alt="OPPO Reno15 — тёмно-синий" aria-pressed="false"><span style="--swatch-color:#2e3346"></span>Тёмно-синий</button></div><p data-gallery-caption role="status">OPPO Reno15 — белый</p></div></div>

<div class="oppo-spec-groups"><details open><summary>Об устройстве</summary><dl class="oppo-spec-list"><div><dt>Модель</dt><dd>OPPO Reno15</dd></div><div><dt>Категория</dt><dd>Смартфон</dd></div><div><dt>Цвет</dt><dd>Белый</dd></div></dl></details><details ><summary>Память и комплектация</summary><dl class="oppo-spec-list"><div><dt>Память</dt><dd>256 ГБ · пример варианта</dd></div><div><dt>В коробке</dt><dd>Состав зависит от региона</dd></div></dl></details><details ><summary>Материалы</summary><dl class="oppo-spec-list"><div><dt>Изображения</dt><dd>Официальные материалы OPPO</dd></div><div><dt>Характеристики</dt><dd>Уточняются для артикула</dd></div></dl></details></div>

<div data-compare-demo><label class="oppo-check"><input type="checkbox" data-differences-only><span>Только различия</span></label><div class="oppo-table-scroll"><table class="oppo-commerce-table"><caption>Пример структуры сравнения двух вариантов</caption><thead><tr><th scope="col">Параметр</th><th scope="col">Reno15 · 256 ГБ</th><th scope="col">Reno15 · 512 ГБ</th></tr></thead><tbody><tr data-compare-equal><th scope="row">Серия</th><td>Reno</td><td>Reno</td></tr><tr><th scope="row">Память</th><td>256 ГБ</td><td>512 ГБ</td></tr><tr data-compare-equal><th scope="row">Цвет</th><td>Белый</td><td>Белый</td></tr><tr><th scope="row">Доступность</th><td>В наличии</td><td>Ожидается</td></tr></tbody></table></div><p data-compare-count role="status">4 характеристики</p></div>

<form method="dialog" data-commerce-form="Отзыв проверен в примере. На сайт не отправлен." class="oppo-stack" novalidate><fieldset class="oppo-review-score"><legend>Ваша оценка</legend><label><input type="radio" name="cp-review-score" value="1" required><span>1 ★</span></label><label><input type="radio" name="cp-review-score" value="2" required><span>2 ★</span></label><label><input type="radio" name="cp-review-score" value="3" required><span>3 ★</span></label><label><input type="radio" name="cp-review-score" value="4" required><span>4 ★</span></label><label><input type="radio" name="cp-review-score" value="5" required><span>5 ★</span></label></fieldset><label class="oppo-field"><span class="oppo-field__label">Что понравилось</span><input class="oppo-input" maxlength="120" placeholder="Расскажите о впечатлениях"></label><label class="oppo-field"><span class="oppo-field__label">Текст отзыва</span><textarea class="oppo-input" rows="3" minlength="10" maxlength="500" required placeholder="Не менее 10 символов"></textarea></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div class="oppo-state-message oppo-state-message--neutral"><strong>Отзыв на проверке</strong><p>После модерации он появится на странице товара.</p></div><div class="oppo-state-message oppo-state-message--warning"><strong>Отзыв после покупки</strong><p>Войдите в аккаунт, с которого оформлен заказ.</p></div><a class="oppo-link" href="#cp-otp">Перейти к форме входа →</a>

<div class="oppo-bundle"><div><img class="oppo-commerce-thumb" src="../assets/rich/enco-air3-pro/white.jpg" alt="OPPO Enco Air3 Pro" width="96" height="96" loading="lazy"></div><div><small>Дополните свой OPPO</small><h4>Enco Air3 Pro</h4><p>Музыка, звонки и любимые подкасты — всегда рядом.</p><a class="oppo-link" href="./rich-content.html#enco-air3-pro">Об устройстве →</a></div></div>

<div class="oppo-cart-line" data-line-price="49990"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="OPPO Reno15" width="96" height="96" loading="lazy"><div><strong>OPPO Reno15</strong><p>256 ГБ · белый</p><div class="oppo-quantity" data-oppo-quantity><button type="button" data-oppo-step="-1" aria-label="Уменьшить количество Reno15">−</button><input type="number" min="1" max="3" value="1" aria-label="Количество Reno15"><button type="button" data-oppo-step="1" aria-label="Увеличить количество Reno15">+</button></div></div><strong data-commerce-line-total>49 990 ₽</strong></div>

<div data-bulk-select><label class="oppo-check"><input type="checkbox" data-select-all checked><span>Выбрать все доступные</span></label><label class="oppo-choice-card"><input type="checkbox" data-select-item data-price="49990" checked><span><strong>Reno15</strong><small>В наличии</small></span><strong>49 990 ₽</strong></label><label class="oppo-choice-card"><input type="checkbox" data-select-item data-price="7990" checked><span><strong>Enco Air3 Pro</strong><small>В наличии</small></span><strong>7 990 ₽</strong></label><label class="oppo-choice-card"><input type="checkbox" data-select-item data-price="990" disabled><span><strong>Кабель</strong><small>Нет в наличии</small></span><strong>990 ₽</strong></label><p role="status" data-selection-total>2 товара · 57 980 ₽</p></div>

<form method="dialog" data-promo novalidate class="oppo-stack"><label class="oppo-field"><span class="oppo-field__label">Промокод</span><input class="oppo-input" name="promo" placeholder="Попробуйте OPPO10" required></label><div class="oppo-row"><button class="oppo-button" type="submit">Применить</button><button type="button" class="oppo-button oppo-button--secondary" data-promo-reset>Отменить</button></div><p role="status" data-promo-result>Демо-код OPPO10 даёт скидку в этом примере.</p></form>

<div class="oppo-order-summary"><div class="oppo-summary-row"><span>Товары · 2 шт.</span><strong>57 980 ₽</strong></div><div class="oppo-summary-row"><span>Получение</span><strong>Бесплатно</strong></div><div class="oppo-summary-row"><span>Скидка</span><strong>− 5 000 ₽</strong></div><div class="oppo-summary-row"><span>Итого</span><strong>52 980 ₽</strong></div><a class="oppo-button" href="#cp-contacts">Перейти к оформлению</a></div>

<ol class="oppo-checkout-steps"><li class="is-complete"><span>✓</span>Корзина</li><li aria-current="step"><span>2</span>Получение</li><li><span>3</span>Оплата</li></ol>

<div data-removable-cart><div data-removable-item class="oppo-product-row"><img class="oppo-commerce-thumb" src="../assets/rich/enco-air3-pro/white.jpg" alt="Enco Air3 Pro" width="96" height="96" loading="lazy"><strong>Enco Air3 Pro</strong><button type="button" class="oppo-button oppo-button--secondary" data-oppo-dialog-open="cp-remove-dialog">Удалить</button></div><div data-removed-state hidden><p role="status">Товар удалён из примера.</p><button type="button" class="oppo-button oppo-button--secondary" data-cart-restore>Восстановить</button></div></div>
<dialog class="oppo-dialog" id="cp-remove-dialog"><h3>Удалить Enco Air3 Pro?</h3><p>Товар можно будет восстановить.</p><div class="oppo-row"><button type="button" class="oppo-button" data-oppo-dialog-close autofocus>Оставить</button><button type="button" class="oppo-button oppo-button--secondary" data-cart-remove>Удалить</button></div></dialog>

<div class="oppo-commerce-empty"><span class="oppo-empty-mark" aria-hidden="true">○</span><h4>Ваша корзина пока пуста</h4><p>Посмотрите устройства OPPO и выберите то, что подходит вам.</p><a class="oppo-link" href="#cp-product-row">Перейти к товарам →</a></div>

<div class="oppo-state-message oppo-state-message--warning"><strong>Доступно только 2 устройства</strong><p>В корзине было 3. Проверьте количество перед продолжением.</p></div><div class="oppo-product-row"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="OPPO Reno15" width="96" height="96" loading="lazy"><div><strong>OPPO Reno15</strong><small>Выбрано: 3 · доступно: 2</small></div><a class="oppo-link" href="#cp-cart-line">Изменить количество →</a></div>

<div class="oppo-price-change"><span class="oppo-badge">Цена обновлена</span><h4>OPPO Reno15</h4><p><del>49 990 ₽</del> <strong>47 990 ₽</strong></p><small>Пример изменения после обновления корзины.</small></div><a class="oppo-link" href="#cp-summary">Проверить итог →</a>

<div class="oppo-product-row oppo-unavailable-row"><img class="oppo-commerce-thumb" src="../assets/rich/enco-air3-pro/white.jpg" alt="Enco Air3 Pro" width="96" height="96" loading="lazy"><div><strong>Enco Air3 Pro</strong><span class="oppo-badge">Нет в наличии</span><small>Исключён из суммы заказа</small></div></div><a class="oppo-link" href="#cp-stock-notify">Сообщить о поступлении →</a>

<div class="oppo-cart-composition"><div class="oppo-stack"><div class="oppo-product-row"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15" width="96" height="96" loading="lazy"><div><strong>OPPO Reno15</strong><small>Белый · 256 ГБ · 1 шт.</small></div><strong>49 990 ₽</strong></div><div class="oppo-product-row"><img class="oppo-commerce-thumb" src="../assets/rich/enco-air3-pro/white.jpg" alt="Enco Air3 Pro" width="96" height="96" loading="lazy"><div><strong>Enco Air3 Pro</strong><small>Белый · 1 шт.</small></div><strong>7 990 ₽</strong></div></div><div class="oppo-order-summary"><div class="oppo-summary-row"><span>Товары · 2</span><strong>57 980 ₽</strong></div><div class="oppo-summary-row"><span>Получение</span><strong>Бесплатно</strong></div><div class="oppo-summary-row"><span>Итого</span><strong>57 980 ₽</strong></div><a class="oppo-button" href="#cp-checkout-review">К оформлению</a><small>Цены для демонстрации композиции</small></div></div>

<form method="dialog" data-commerce-form="Данные проверены. Заказ не создаётся." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Имя получателя</span><input class="oppo-input" required maxlength="80" placeholder="Имя"></label><label class="oppo-field"><span class="oppo-field__label">Email для документов</span><input class="oppo-input" type="email" required placeholder="buyer@example.invalid"></label><label class="oppo-check"><input type="checkbox" required><span>Согласие с условиями покупки</span></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div data-fulfillment><fieldset class="oppo-stack"><legend class="oppo-visually-hidden">Выбор варианта</legend><label class="oppo-choice-card"><input type="radio" name="cp-fulfillment" value="pickup" checked><span><strong>Самовывоз</strong><small>Завтра · бесплатно</small></span></label><label class="oppo-choice-card"><input type="radio" name="cp-fulfillment" value="courier" ><span><strong>Курьер</strong><small>Послезавтра · 390 ₽</small></span></label></fieldset><p data-fulfillment-note>Выберите пункт выдачи.</p><div data-courier-address hidden><label class="oppo-field"><span class="oppo-field__label">Адрес доставки</span><input class="oppo-input" placeholder="Город, улица, дом"></label></div></div>

<fieldset class="oppo-stack"><legend class="oppo-visually-hidden">Выбор варианта</legend><label class="oppo-choice-card"><input type="radio" name="cp-payment" value="card" checked><span><strong>Банковская карта</strong><small>После подтверждения заказа</small></span></label><label class="oppo-choice-card"><input type="radio" name="cp-payment" value="invoice" ><span><strong>По счёту</strong><small>Для юридических лиц</small></span></label></fieldset><label class="oppo-choice-card"><input type="radio" name="cp-payment" disabled><span><strong>При получении</strong><small>Временно недоступно</small></span></label>

<div class="oppo-pickup-card"><span class="oppo-badge">Самовывоз</span><h4>Центральный</h4><p>Москва, Лесная улица, 1</p><p>Ежедневно · 10:00–20:00</p><small>Условный адрес в примере</small><button type="button" class="oppo-button oppo-button--secondary" data-pickup aria-pressed="false">Выбрать пункт</button></div>

<form method="dialog" data-commerce-form="Интервал выбран в примере. Доставка не изменяется." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Дата получения</span><input class="oppo-input" type="date" required></label><label class="oppo-field"><span class="oppo-field__label">Интервал</span><select class="oppo-input"><option>10:00–14:00</option><option>14:00–18:00</option><option>18:00–22:00</option></select></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<form method="dialog" data-commerce-form="Реквизиты проверены в примере. Счёт не выставляется." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Организация</span><input class="oppo-input" required placeholder="ООО Пример"></label><label class="oppo-field"><span class="oppo-field__label">ИНН</span><input class="oppo-input" inputmode="numeric" pattern="[0-9]{10}|[0-9]{12}" required placeholder="10 или 12 цифр"></label><label class="oppo-field"><span class="oppo-field__label">Email для счёта</span><input class="oppo-input" type="email" required></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<form method="dialog" data-commerce-form="Адрес проверен в примере. Доставка не оформлена." class="oppo-stack" novalidate><div class="oppo-form-columns"><label class="oppo-field"><span class="oppo-field__label">Город</span><input class="oppo-input" required placeholder="Москва"></label><label class="oppo-field"><span class="oppo-field__label">Улица</span><input class="oppo-input" required placeholder="Название улицы"></label><label class="oppo-field"><span class="oppo-field__label">Дом</span><input class="oppo-input" required placeholder="12"></label><label class="oppo-field"><span class="oppo-field__label">Квартира или офис</span><input class="oppo-input" placeholder="Необязательно"></label><label class="oppo-field"><span class="oppo-field__label">Подъезд</span><input class="oppo-input" inputmode="numeric"></label><label class="oppo-field"><span class="oppo-field__label">Этаж</span><input class="oppo-input" inputmode="numeric"></label></div><label class="oppo-field"><span class="oppo-field__label">Комментарий курьеру</span><textarea class="oppo-input" rows="2" maxlength="200" placeholder="Как вас найти"></textarea></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div data-pickup-search><label class="oppo-field"><span class="oppo-field__label">Город или улица</span><input class="oppo-input" type="search" data-pickup-query placeholder="Например, Лесная"></label><div class="oppo-pickup-list"><label class="oppo-choice-card" data-pickup-option><input type="radio" name="cp-pickup-location" value="0"><span><strong>Центральный</strong><small>Москва, Лесная улица, 1 · 10:00–20:00</small></span></label><label class="oppo-choice-card" data-pickup-option><input type="radio" name="cp-pickup-location" value="1"><span><strong>Северный</strong><small>Москва, Парковая улица, 2 · 10:00–20:00</small></span></label><label class="oppo-choice-card" data-pickup-option><input type="radio" name="cp-pickup-location" value="2"><span><strong>Городской</strong><small>Москва, Садовая улица, 3 · 10:00–20:00</small></span></label></div><p role="status" data-pickup-count>3 пункта · условные адреса</p><p data-pickup-none hidden>Пунктов по этому запросу нет. Попробуйте другую улицу.</p></div>

<div class="oppo-delivery-estimate"><span class="oppo-badge oppo-badge--success">Доступно для адреса</span><h4>Курьером до двери</h4><div class="oppo-summary-row"><span>Срок</span><strong>Завтра, 10:00–14:00</strong></div><div class="oppo-summary-row"><span>Стоимость</span><strong>390 ₽</strong></div><small>Пример результата расчёта доставки.</small></div>

<div class="oppo-checkout-review"><div><small>Получатель</small><strong>Алексей · +7 900 000-00-00</strong><a class="oppo-link" href="#cp-contacts">Изменить →</a></div><div><small>Получение</small><strong>Курьер · Москва, Лесная, 1</strong><a class="oppo-link" href="#cp-courier-address">Изменить →</a></div><div><small>Оплата</small><strong>Банковской картой</strong><a class="oppo-link" href="#cp-payment">Изменить →</a></div></div><p>Условные данные для просмотра состава блока.</p>

<div class="oppo-state-message oppo-state-message--danger"><strong>Проверьте состав корзины</strong><p>Одна позиция больше недоступна. Обновите корзину перед продолжением.</p></div><button class="oppo-button" type="button" disabled>Подтвердить заказ</button><a class="oppo-link" href="#cp-cart-unavailable">Вернуться к корзине →</a>

<div data-otp-demo><form method="dialog" class="oppo-stack" data-otp-phone novalidate><label class="oppo-field"><span class="oppo-field__label">Номер телефона</span><input class="oppo-input" type="tel" name="phone" required placeholder="+7 900 000-00-00"></label><button class="oppo-button" type="submit">Получить код</button><p role="status" data-otp-phone-result></p></form><form method="dialog" class="oppo-stack" data-otp-code hidden novalidate><label class="oppo-field"><span class="oppo-field__label">Код из SMS</span><input class="oppo-input oppo-otp" name="code" inputmode="numeric" maxlength="6" autocomplete="one-time-code" placeholder="000000" required></label><small>Любые шесть цифр для примера. SMS не отправляется.</small><button class="oppo-button" type="submit">Проверить код</button><button type="button" class="oppo-button oppo-button--secondary" data-otp-back>Изменить номер</button><p role="status" data-otp-code-result></p></form></div>

<div class="oppo-row"><span class="oppo-avatar">О</span><div><strong data-profile-name>Покупатель OPPO</strong><small>Телефон подтверждён</small></div></div><form method="dialog" data-commerce-form="Изменения сохранены в примере." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Имя</span><input class="oppo-input" name="profileName" value="Покупатель OPPO" required></label><label class="oppo-field"><span class="oppo-field__label">Email</span><input class="oppo-input" type="email" placeholder="buyer@example.invalid"></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div data-address-demo><div class="oppo-address-card"><strong>Дом</strong><p data-address-copy>Москва, Лесная улица, 1</p><span class="oppo-badge">Основной</span></div><details><summary>Редактировать адрес</summary><form method="dialog" data-commerce-form="Изменения сохранены в примере." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Адрес</span><input class="oppo-input" name="address" value="Москва, Лесная улица, 1" required maxlength="160"></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form></details></div>

<div class="oppo-session"><strong>Этот браузер</strong><small>Текущий сеанс</small><span class="oppo-badge oppo-badge--success">Активен</span></div><div class="oppo-session" data-other-session><strong>Другой браузер</strong><small>Сегодня, 10:30 · пример</small><button type="button" class="oppo-button oppo-button--secondary" data-session-end>Завершить</button></div><p data-session-result role="status"></p>

<form method="dialog" data-commerce-form="Изменения сохранены в примере." class="oppo-stack" novalidate><label class="oppo-switch"><input type="checkbox" role="switch" checked><span>Статусы заказов</span></label><label class="oppo-switch"><input type="checkbox" role="switch"><span>Новинки OPPO</span></label><label class="oppo-switch"><input type="checkbox" role="switch"><span>Специальные предложения</span></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div class="oppo-ticket"><span class="oppo-badge">В работе</span><h4>Обращение DEMO-204</h4><p>Гарантия · OPPO Reno15</p><details><summary>История обращения</summary><ol class="oppo-timeline"><li>Заявка принята</li><li aria-current="step">Специалист проверяет информацию</li></ol></details></div>

<div class="oppo-account-overview"><div class="oppo-row"><span class="oppo-avatar">А</span><div><small>Рады видеть вас снова</small><h4>Алексей</h4></div></div><div class="oppo-account-metrics"><a href="#cp-order-search"><strong>2</strong><span>Активных заказа</span></a><a href="#cp-favorite-list"><strong>2</strong><span>Избранных товара</span></a><a href="#cp-address"><strong>1</strong><span>Адрес получения</span></a></div></div>

<div class="oppo-stack"><div class="oppo-contact-status"><div><small>Телефон</small><strong>+7 900 000-00-00</strong></div><span class="oppo-badge oppo-badge--success">Подтверждён</span></div><div class="oppo-contact-status"><div><small>Email</small><strong>buyer@example.invalid</strong></div><span class="oppo-badge">Не подтверждён</span></div><a class="oppo-link" href="#cp-profile">Изменить контакты →</a></div>

<div class="oppo-commerce-empty"><span class="oppo-empty-mark" aria-hidden="true">○</span><h4>Сохраните первый адрес</h4><p>Он будет доступен при следующем оформлении заказа.</p><a class="oppo-link" href="#cp-courier-address">Добавить адрес →</a></div>

<div class="oppo-commerce-empty"><span class="oppo-empty-mark" aria-hidden="true">○</span><h4>Войдите, чтобы увидеть заказы</h4><p>Используйте номер телефона, указанный при оформлении.</p><a class="oppo-link" href="#cp-otp">Войти по телефону →</a></div>

<form method="dialog" data-commerce-form="Настройки изменены только в примере." class="oppo-stack" novalidate><p>Сообщения о заказах приходят на контакт получателя.</p><label class="oppo-check"><input type="checkbox" checked disabled><span>Изменения статуса заказа · обязательно</span></label><label class="oppo-switch"><input type="checkbox" role="switch" checked><span>Новинки OPPO по email</span></label><label class="oppo-switch"><input type="checkbox" role="switch"><span>Персональные предложения</span></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div class="oppo-order-card"><div class="oppo-row"><strong>Заказ DEMO-1024</strong><span class="oppo-badge oppo-badge--success">Готов к выдаче</span></div><p>14 октября · 2 товара</p><div class="oppo-row"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15" width="96" height="96" loading="lazy"><img class="oppo-commerce-thumb" src="../assets/rich/enco-air3-pro/white.jpg" alt="Enco Air3 Pro" width="96" height="96" loading="lazy"></div><strong class="oppo-commerce-price">57 980 ₽</strong><a class="oppo-link" href="#cp-order-items">Состав заказа →</a></div>

<ol class="oppo-timeline"><li class="is-complete"><strong>Заказ принят</strong><small>14 октября · 10:00</small></li><li class="is-complete"><strong>Собран</strong><small>14 октября · 11:20</small></li><li aria-current="step"><strong>Готов к выдаче</strong><small>Получите до 18 октября</small></li><li><strong>Получен</strong></li></ol>

<div class="oppo-table-scroll"><table class="oppo-commerce-table"><caption>Товары заказа DEMO-1024</caption><thead><tr><th>Товар</th><th>Кол-во</th><th>Сумма</th></tr></thead><tbody><tr><td>Reno15 · 256 ГБ</td><td>1</td><td>49 990 ₽</td></tr><tr><td>Enco Air3 Pro</td><td>1</td><td>7 990 ₽</td></tr></tbody><tfoot><tr><th colspan="2">Итого</th><td>57 980 ₽</td></tr></tfoot></table></div>

<ul class="oppo-document-list"><li><div><strong>Счёт на оплату</strong><small>PDF · 128 КБ</small></div><button type="button" class="oppo-button oppo-button--secondary" data-commerce-message="Это образец документа. Реальный файл не формируется.">Посмотреть</button></li><li><div><strong>Кассовый чек</strong><small>Появится после оплаты</small></div><button class="oppo-button oppo-button--secondary" type="button" disabled>Ожидается</button></li></ul>

<form method="dialog" data-commerce-form="Обращение проверено в примере. Заявка не отправляется." class="oppo-stack" novalidate><label class="oppo-check"><input type="checkbox" required><span>OPPO Reno15 · 1 шт.</span></label><label class="oppo-field"><span class="oppo-field__label">Причина</span><select class="oppo-input"><option>Не подошёл</option><option>Есть неисправность</option><option>Другая причина</option></select></label><label class="oppo-field"><span class="oppo-field__label">Комментарий</span><textarea class="oppo-input" rows="2" required maxlength="300"></textarea></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div data-orders-search><label class="oppo-field"><span class="oppo-field__label">Номер заказа</span><input type="search" class="oppo-input" data-order-query placeholder="1024"></label><div data-order-result>DEMO-1024 <span class="oppo-badge">Готов к выдаче</span></div><div data-order-result>DEMO-1025 <span class="oppo-badge">Собирается</span></div><p data-order-empty hidden>Заказы не найдены</p></div>

<div class="oppo-commerce-empty"><span class="oppo-empty-mark" aria-hidden="true">○</span><h4>Здесь будут ваши заказы</h4><p>После оформления можно следить за получением и открыть документы.</p><a class="oppo-link" href="#cp-series-navigation">Выбрать устройство →</a></div>

<details class="oppo-order-details" open><summary><span><strong>Заказ DEMO-1024</strong><small>14 октября · 2 товара</small></span><span class="oppo-badge oppo-badge--success">Готов к выдаче</span></summary><div class="oppo-order-details-body"><div class="oppo-product-row"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15" width="96" height="96" loading="lazy"><div><strong>OPPO Reno15</strong><small>Белый · 256 ГБ · 1 шт.</small></div><strong>49 990 ₽</strong></div><div class="oppo-summary-row"><span>Enco Air3 Pro · 1 шт.</span><strong>7 990 ₽</strong></div><div class="oppo-summary-row"><span>Итого</span><strong>57 980 ₽</strong></div><p>Самовывоз · Москва, Лесная улица, 1 · условный адрес</p><a class="oppo-link" href="#cp-timeline">История статусов →</a></div></details>

<div class="oppo-state-grid"><div class="oppo-state-message oppo-state-message--success"><strong>Оплата подтверждена</strong><p>Заказ передан в обработку.</p></div><div class="oppo-state-message oppo-state-message--warning"><strong>Ожидаем подтверждение</strong><p>Обновление статуса может занять несколько минут.</p></div><div class="oppo-state-message oppo-state-message--danger"><strong>Оплата не прошла</strong><p>Деньги не подтверждены. Выберите способ оплаты повторно.</p></div></div>

<form method="dialog" data-commerce-form="Обращение проверено. Возврат не создан." class="oppo-stack" novalidate><fieldset class="oppo-stack"><legend>Товар из заказа DEMO-1024</legend><label class="oppo-choice-card"><input type="radio" name="cp-return-item" required><span><strong>OPPO Reno15</strong><small>1 шт.</small></span></label><label class="oppo-choice-card"><input type="radio" name="cp-return-item"><span><strong>Enco Air3 Pro</strong><small>1 шт.</small></span></label></fieldset><label class="oppo-field"><span class="oppo-field__label">Причина обращения</span><select class="oppo-input" required><option value="">Выберите причину</option><option>Проблема с устройством</option><option>Ошибка комплектации</option><option>Другая причина</option></select></label><label class="oppo-field"><span class="oppo-field__label">Комментарий</span><textarea class="oppo-input" rows="2" required maxlength="500"></textarea></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<div class="oppo-state-message oppo-state-message--warning"><strong>Доступна 1 позиция из 2</strong><p>Enco Air3 Pro сейчас нет в наличии. Состав и цена нового заказа могут отличаться.</p></div><div class="oppo-product-row"><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="Reno15" width="96" height="96" loading="lazy"><div><strong>OPPO Reno15</strong><small>Доступен для новой покупки</small></div></div><a class="oppo-link" href="#cp-cart-composition">Проверить корзину →</a>

<button type="button" class="oppo-button oppo-button--secondary" data-oppo-dialog-open="cp-overlay-drawer">Открыть панель</button>
<dialog class="oppo-dialog oppo-drawer" id="cp-overlay-drawer"><div class="oppo-dialog__header"><h3>Ваша подборка</h3><button class="oppo-icon-button" type="button" data-oppo-dialog-close aria-label="Закрыть панель">×</button></div><p>Два устройства для ежедневных задач.</p><div class="oppo-stack"><strong>OPPO Reno15</strong><strong>Enco Air3 Pro</strong><button type="button" class="oppo-button" data-oppo-dialog-close>Готово</button></div></dialog>

<button type="button" class="oppo-button oppo-button--secondary" data-oppo-dialog-open="cp-overlay-confirm">Очистить подборку</button><p role="status" data-confirm-result></p>
<dialog class="oppo-dialog" id="cp-overlay-confirm"><h3>Очистить подборку?</h3><p>Выбранные устройства будут убраны из примера.</p><div class="oppo-row"><button type="button" class="oppo-button" data-oppo-dialog-close autofocus>Оставить</button><button type="button" class="oppo-button oppo-button--secondary" data-confirm-action>Очистить</button></div></dialog>

<button type="button" class="oppo-button oppo-button--secondary" data-oppo-dialog-open="cp-overlay-quick-view">Посмотреть Reno15</button>
<dialog class="oppo-dialog" id="cp-overlay-quick-view"><div class="oppo-dialog__header"><h3>OPPO Reno15</h3><button type="button" class="oppo-icon-button" data-oppo-dialog-close aria-label="Закрыть быстрый просмотр">×</button></div><img class="oppo-commerce-thumb" src="../assets/rich/reno15/catalog-white.png" alt="OPPO Reno15" width="96" height="96" loading="lazy"><p>256 ГБ · белый</p><strong class="oppo-commerce-price">49 990 ₽</strong><a class="oppo-link" href="./rich-content.html#reno-design">Подробнее об устройстве →</a></dialog>

<div data-chat-demo><div class="oppo-chat-log" role="log" aria-label="Переписка"><p>Поддержка: чем можем помочь?</p></div><form method="dialog" data-chat-form class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Сообщение</span><textarea class="oppo-input" name="message" rows="2" maxlength="300" required></textarea></label><button class="oppo-button" type="submit">Добавить сообщение</button><p role="status" data-chat-result></p></form></div>

<div data-recovery><div class="oppo-alert oppo-alert--danger" data-recovery-error><div class="oppo-stack"><strong>Не удалось загрузить заказы</strong><p>Попробуйте ещё раз.</p><button type="button" class="oppo-button oppo-button--secondary" data-retry>Повторить</button></div></div><div data-recovery-success hidden><span class="oppo-badge oppo-badge--success">Список обновлён</span><p>Заказ DEMO-1024 готов к выдаче.</p></div></div>

<div class="oppo-faq"><details><summary>Как выбрать способ получения?</summary><p>На шаге оформления выберите пункт выдачи или курьера.</p></details><details><summary>Где посмотреть заказ?</summary><p>Номер и статус заказа отображаются в личном кабинете.</p></details><details><summary>Как оформить возврат?</summary><p>Откройте заказ и выберите товар для обращения.</p></details></div>

<div data-notice-demo><div class="oppo-inline-notice" data-notice><div><strong>Настройки сохранены</strong><p>Можно продолжить работу.</p></div><button type="button" class="oppo-button oppo-button--secondary" data-notice-dismiss aria-label="Закрыть уведомление">×</button></div><button type="button" class="oppo-button oppo-button--secondary" data-notice-show>Показать уведомление</button><p role="status" data-notice-status></p></div>

<form method="dialog" data-commerce-form="Обращение проверено в примере. Поддержке ничего не отправлено." class="oppo-stack" novalidate><label class="oppo-field"><span class="oppo-field__label">Тема</span><select class="oppo-input"><option>Вопрос по заказу</option><option>Устройство OPPO</option><option>Другое</option></select></label><label class="oppo-field"><span class="oppo-field__label">Номер заказа</span><input class="oppo-input" placeholder="Необязательно"></label><label class="oppo-field"><span class="oppo-field__label">Ваш вопрос</span><textarea class="oppo-input" rows="3" required minlength="10" maxlength="1000"></textarea></label><button class="oppo-button" type="submit">Сохранить</button><p role="status" data-form-result></p></form>

<nav class="oppo-help-grid" aria-label="Помощь покупателю"><a href="#cp-spec-groups"><strong>Об устройстве</strong><span>Параметры и комплектация →</span></a><a href="#cp-fulfillment"><strong>Получение заказа</strong><span>Доставка и самовывоз →</span></a><a href="#cp-return-items"><strong>Возврат и обращение</strong><span>Как описать проблему →</span></a><a href="#cp-support-request"><strong>Связаться с нами</strong><span>Форма обращения →</span></a></nav>

<div class="oppo-commerce-empty"><span class="oppo-error-number">404</span><h4>Здесь пока ничего нет</h4><p>Возможно, ссылка изменилась или страница больше недоступна.</p><a class="oppo-link" href="#cp-series-navigation">Открыть навигацию →</a></div>

<div data-consent-demo><div data-consent-panel><h4>Настройки cookies</h4><p>Обязательные cookies нужны для работы магазина. Выберите, разрешить ли дополнительные.</p><label class="oppo-check"><input type="checkbox" checked disabled><span>Необходимые</span></label><label class="oppo-check"><input type="checkbox" data-consent-analytics><span>Аналитика</span></label><div class="oppo-row"><button type="button" class="oppo-button oppo-button--secondary" data-consent-choice="required">Только необходимые</button><button type="button" class="oppo-button oppo-button--secondary" data-consent-choice="selected">Сохранить выбор</button></div></div><p role="status" data-consent-result></p><button type="button" class="oppo-button oppo-button--secondary" data-consent-edit hidden>Изменить выбор</button></div>