/** * Storefront theme entry — the `ik` template ported from the Bitrix shop. * * ⚠️ WHY THIS FILE EXISTS AT ALL, INSTEAD OF SIX TAGS. * The page already carries a second design system: /build/iknit-islands.css, * the Cortium UI catalogue that the Vue islands are built against. It declares * its own `reset`, `tokens` and `theme` layers — and it declares NO layer * ORDER (verified: zero `@layer a, b, c;` statements in the built file, the * same defect recorded as vite-drops-layer-order-padding-zero). Unordered * layers fall back to first-appearance order, which is decided by whichever * stylesheet the browser happens to parse first. * * Two resets that both style `body`, `img`, `button` and `a`, in an order * nobody controls, is a coin flip re-tossed on every build. So this file: * 1. states the order explicitly — the shop theme wins over the island kit, * because the pages are ours and the islands are guests on them; * 2. wraps the ported files in one `ik.*` layer group, so nothing here can * outrank an island's own component styles by accident of specificity. * * ⚠️ THE IMPORTED css/ FILES ARE VERBATIM COPIES from the Bitrix template * (ik.lobzov.itua.in.ua:.../local/templates/ik/css/). Do not edit them in * place: they are upstream, and a local tweak would silently diverge from the * shop they came from — with no diff to show it, because there is no shared * repository between the two projects. Corrections go into overrides.css, * which loads last on purpose. * * ⚠️ WHY public/theme/ AND NOT assets/ OR public/build/. * public/build/ is wiped on every island build (`emptyOutDir: true` in * frontend/vite.config.js), so anything hand-placed there survives exactly * until the next `npm run build`. assets/ is not web-served at all. This * folder is carried verbatim by passthrough (ADR-152) and touched by nothing * else — which also means it is the ONLY copy: do not mirror it into assets/, * two copies of a stylesheet drift and neither is authoritative. */ /* Order is declared BEFORE any import, because a layer's position is fixed by its first mention — mentioning them later would inherit the very first-appearance ordering this file exists to replace. */ @layer catalogue, ik.reset, ik.tokens, ik.layout, ik.ui, ik.header, ik.shop, ik.overrides; /* ⚠️ AND THE ORDER *INSIDE* `catalogue`, which the line above does NOT cover. `layer(catalogue)` on the import nests the island's own layers as catalogue.reset / catalogue.headless / … — so the declaration above, which names bare `reset` and `headless`, ranks a different set of layers entirely and leaves the nested ones to fall back to first-appearance order. The built island bundle emits them headless → variants → reset (vite inlines each component's `import './x.css'` before the kernel's empty order declaration), which puts `reset` LAST — so `*{padding:0}` beats `.btn{padding:0 var(--btn-padding)}` and every catalogue component on the storefront loses its inner padding. Measured live on /product/{slug}, "У кошик" button: without this block: padding-left 0px, width 90px with it: padding-left 16px, width 122px (--btn-padding resolved to 16px in both cases — the variable was never the problem, the layer rank was.) Declaring the same order nested inside `catalogue` fixes the rank without touching the island build. Keep it BEFORE the import below: a layer's position is fixed by its first mention. ⚠️ WRITTEN AS DOTTED NAMES, NOT AS A `@layer catalogue { … }` BLOCK. A block is a non-@import rule, and per spec every `@import` after one is DROPPED — the browser reported theme.css as carrying 2 rules instead of the whole shop theme, and the storefront rendered with user-agent styles only (header 159px tall, buttons at 1px 6px). A comma list of dotted names is a plain layer-order statement, so the imports below still apply. */ @layer catalogue.reset, catalogue.tokens, catalogue.semantic, catalogue.base, catalogue.headless, catalogue.variants, catalogue.theme, catalogue.project.tokens, catalogue.project.theme, catalogue.project.overrides, catalogue.a11y; /* The island kit is imported into the `catalogue` layer above, so it keeps working while ranking below the shop theme. `layer()` on an import is how a stylesheet that declares its own layers gets nested wholesale. ⚠️ The file is named after the island that pulls it in (add-to-cart.ts, the only entry importing the catalogue kernel). It used to be `iknit-islands.css` — a leftover from the project's old name that no longer matched anything the build emits, and which the next island build deleted. */ @import url('/build/add-to-cart.css?v=1459fdad88') layer(catalogue); @import url('./css/reset.css?v=1459fdad88') layer(ik.reset); @import url('./css/tokens.css?v=1459fdad88') layer(ik.tokens); @import url('./css/layout.css?v=1459fdad88') layer(ik.layout); @import url('./css/ui.css?v=1459fdad88') layer(ik.ui); @import url('./css/header.css?v=1459fdad88') layer(ik.header); /* Product cards and catalogue pages. `.ik-card` is what the storefront grid uses; the `.splide__*` rules inside are inert here (no slider markup) and are kept only so the file stays a verbatim copy of upstream. */ @import url('./css/product-card.css?v=1459fdad88') layer(ik.shop); @import url('./css/catalog.css?v=1459fdad88') layer(ik.shop); /* Yarn calculator: the island's form plus the page around it (tables, FAQ accordion). Loads on every page — 551 lines, ~7 kB — rather than only on /yarn-calculator, because splitting it would mean a second stylesheet link and a second layer-order declaration to keep in sync, for a file smaller than the logo. */ @import url('./css/calculator.css?v=1459fdad88') layer(ik.shop); /* Ours, not upstream: fixes and additions for pages the Bitrix shop does not have (the customer account). Last, so it wins without !important. */ @import url('./overrides.css?v=1459fdad88') layer(ik.overrides); /* Теж наше й теж не з Бітрикса: те, чого в тому шаблоні не існувало — акційна ціна, кошик, головна сторінка. Окремо від overrides.css, бо той ПРАВИТЬ портоване, а цей ДОДАЄ нове; змішавши, за півроку не скажеш, який рядок можна викинути разом із портованим файлом, а який ні. */ @import url('./storefront.css?v=1459fdad88') layer(ik.overrides); /* Дизайн-система: токени (кеглі, тіні, радіуси, кільце фокусу) і базові компоненти (кнопки, поля, вибір, повідомлення, таблиці, порожні стани). ПІСЛЯ overrides/storefront — вони правлять і додають розмітку, а цей файл задає спільний вигляд поверх; ПЕРЕД banners і motion — банери беруть звідси токени, motion накриває описані тут переходи. */ @import url('./system.css?v=1459fdad88') layer(ik.overrides); /* Оболонка: шапка (пошук полем, тінь при прокрутці, мобільний drawer) і підвал у колонки. Після system.css — бере звідти токени. */ @import url('./shell.css?v=1459fdad88') layer(ik.overrides); /* Оформлення замовлення: кроки + липка панель (2026-10-11). Після shell.css, бо перекриває правила кошика зі storefront.css. */ @import url('./checkout.css?v=1459fdad88') layer(ik.overrides); /* Картка товару: галерея, липка панель покупки, мобільна панель купівлі (2026-10-11). Після checkout.css. */ @import url('./product.css?v=1459fdad88') layer(ik.overrides); /* Кабінет покупця: оболонка, список замовлень, кольори станів (2026-10-11). Після system.css — перекриває його нейтральну пігулку стану й смугу вкладок. */ @import url('./account.css?v=1459fdad88') layer(ik.overrides); /* Банери: п'ять видів, три теми. Після storefront.css (додає нове, а не править портоване) і ПЕРЕД motion.css — щоб глобальне вимкнення руху під `prefers-reduced-motion` накрило й переходи банерів. */ @import url('./banners.css?v=1459fdad88') layer(ik.overrides); /* Рух: токени тривалості й кілька анімацій. ОСТАННІМ, бо додає переходи до вже описаних станів (кнопка, картка) — і мусить перекривати їх, не чіпаючи портованих фай