Задача

Создать адаптивную верстку детальной страницы товара (карточки товара) на основе предоставленных PSD-макетов. Готовый код должен быть готов к размещению на сайте под управлением CMS и правильно отображаться на desktop и mobile.

Требования

• Инструменты: Только HTML, CSS (или SASS/SCSS) и чистый JavaScript (vanilla JS, без jQuery или React для базовой логики).
• Адаптивность: Pixel Perfect на основных разрешениях (1920px, 1280px, fhd, планшет, телефон).
• Источник: Следовать PSD-макетам (графика + стили). CSS-свойства подбирать максимально близко к оригиналу.
• Интеграция: Семантическая верстка, простая для развития библиотекой 1С. Уделите внимание именно оберткам для слайдера и основных переключателей (галерея/image magnifier на JS).
• Соответствие макету: соблюсти позиционирование для кнопок, переключения меток (размер, цвет, наличие) и floating индикаторов, если значатся в исходных PSD.

Подробности

В исходном ПСД находятся фото товара, описание, вариации выбора товара и количества, кнопки 'В корзину' и слайдер со стрелками. Необходимо ничего не фрагментировать на мобильной и Tab версии - оставить нативным JS/CSS, не используя сторонних ui китов (плагинов и бутсрапов). Рисунки для сетки (сеток разрешений)

Дополнительно

• Заливать верстку частями примерами скриншотами контрольных или реального выполнения: В3 прото проверять margin и метрику через ruler.
• Отсев третьих скриптов; всё должно отрабатывать умеренно, используя методы setTimeout/sizes-change adjust