Тема магазина по макету Figma

Каталог, карточка товара, корзина, оформление заказа и блог на WooCommerce.

Стили разложены по слоям: токены из Figma, база, компоненты, страницы,
брейкпоинты. Цвета, типографика, радиусы и отступы взяты из Variables и
текстовых стилей макета, ниже по слоям хардкода нет.

Иконки — Phosphor, вставляются инлайном как SVG, символами ничего не рисуется.
Стили WooCommerce отключены, вёрстка своя, !important не используется.

assets/css/base.css

@@ -0,0 +1,186 @@
+/*
+ * Base layer: font faces, reset, document defaults and the type scale.
+ * Only element selectors and utility classes live here.
+ */
+
+@font-face {
+  font-family: Inter;
+  src: url("../fonts/Inter.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none;
+}
+
+html {
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  min-height: 100dvh;
+  margin: 0;
+  flex-direction: column;
+  color: var(--text-main);
+  background: var(--bg-main);
+  font: var(--body-m);
+  -webkit-font-smoothing: antialiased;
+}
+
+body.menu-open {
+  overflow: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+img {
+  height: auto;
+}
+
+button,
+input,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+/* ------------------------------------------------------------ type scale --- */
+
+h1,
+.h1 {
+  margin: 0;
+  font: var(--h1);
+  letter-spacing: var(--ls-tight);
+}
+
+h2,
+.h2 {
+  margin: 0;
+  font: var(--h2);
+  letter-spacing: var(--ls-tight);
+}
+
+h3,
+.h3 {
+  margin: 0;
+  font: var(--h3);
+  letter-spacing: var(--ls-tight);
+}
+
+h4,
+.h4 {
+  margin: 0;
+  font: var(--h4);
+  letter-spacing: var(--ls-tight);
+}
+
+h5,
+.h5 {
+  margin: 0;
+  font: var(--h5);
+  letter-spacing: var(--ls-tight-s);
+}
+
+.lead {
+  font: var(--lead);
+}
+
+.control-m {
+  font: var(--control-m);
+}
+
+.control-s {
+  font: var(--control-s);
+}
+
+.caption {
+  font: var(--caption);
+}
+
+.upper-l,
+.upper-m,
+.upper-s {
+  letter-spacing: var(--ls-upper);
+  text-transform: uppercase;
+}
+
+.upper-l {
+  font: var(--upper-l);
+}
+
+.upper-m {
+  font: var(--upper-m);
+}
+
+.upper-s {
+  font: var(--upper-s);
+}
+
+.accent-m {
+  font: var(--accent-m);
+}
+
+/* --------------------------------------------------------------- layout --- */
+
+.container {
+  width: min(calc(100% - var(--container-gutter) * 2), var(--container));
+  margin-inline: auto;
+}
+
+.site-main {
+  display: block;
+  min-height: 0;
+  flex: 1 0 auto;
+}
+
+.screen-reader-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+}