Плитка розділу

Дві форми, і лише друга може нести посилання. Плитка без посилань усередині - це якір: <a class="ntile">. Плитка з підпосиланнями - це <div class="ntile">, у якому якорем є НАЗВА, розтягнута на всю плитку через ::after, а підпосилання стоять над цією зоною. Сірий оригінал кладе три <a> всередину четвертого; агент етапу 12 зняв розібраний DOM і побачив, що Chrome ділить таку плитку на якір, порожній дублікат якоря і .nt-sub ПОЗА сіткою - дванадцять плиток дали б двадцять чотири дитини. Це дефект замороженого сірого шару, полагоджений тут, а не вгору по ланцюгу.

Сітка .ntiles плинна: auto-fill від --grid-col-fluid, як у .prow. Плитка .ntile - оболонка; усередині або .nt-top з міткою і назвою, або коробка логотипа з brand-logo.css.

• Плитка веде в ОБСЯГ, а не до товару. Товар - це product-card.css; ціль - goal-tile.css; логотип без назви в стрічці на головній - brand-logo.css (.brandrow)
• Тіло-категорія: мітка, назва, під ними перелік дітей посиланнями
• Тіло-бренд: коробка логотипа, назва, країна, лічильник товарів

• Сітка не має точок. responsive.md уже приписав обом екранам «WIDER · grid · fluid (auto-fit)». Сірі блоки несуть 720 і 1040; 1040 немає в реєстрі точок узагалі, а product-grid.css свій 1040 видалив на етапі 10, вимірявши, що він жодного разу не намалював чотири рівні колонки
• Плитка не підстрибує під курсором. .gtile піднімається на 2px, бо шість плиток - це весь екран; тут їх двадцять дев'ять в одній сітці, і transform на такій картці платиться малюванням на кожен рух миші
• Бейдж має місце тільки тут. .tag і .tag-new живуть у badge.css і вже означають це слово; чого не було - МІСЦЯ для бейджа на плитці без фотографії, бо product-card.css позиціонує .tag лише всередині .pcard .ph
• Висота коробки логотипа належить brand-logo.css, не цьому файлу. Розмір - анатомія того компонента, і написаний тут він був би вторгненням

• hover - край іде в --line-action, з'являється --elevation-1
• hover на посиланні всередині (.nt-sub a) - чорнило й лінія підкреслення йдуть в дію
• focus-visible - від base.css, власного немає
• РУХ: «відповідь», --dur-fast + --ease-standard, поіменно border-color і box-shadow. Жодного transform: див. «Обмеження»

Інвентар виводиться зі СТИЛІВ, а wireframes/_wf.css не має жодного правила ні на chub-*, ні на b*: обидва екрани несуть усю свою розкладку плиток у власному блоці <style>, що в сірому шарі законно й невидиме для всього, що читає спільний аркуш. Та сама причина, що в info-page.css на кроці 12.2.

І чому це ОДИН компонент, а не два. Два агенти, які не знали один про одного, надіслали те саме замовлення різними словами - «картка бренду» для 29 карток вузла 2.4 і «плитка категорії» для 12 плиток вузла 2.0. Прочитані поруч, їхні сірі блоки оголошують ТУ САМУ оболонку - border 1.5px var(--hair2), radius 12, padding 13, колонка з малим проміжком - і різняться лише тим, що стоїть усередині. Драбина читається за РОБОТОЮ: обидва - плитка, якою заходять в обсяг каталогу.

Сторінка звіряє себе з файлом: 8 власних класів і 0 станів, які вона може назвати, але не показати наживо.

Прочитані з nav-tile.css: 9 семантичних ролей і 12 примітивів. Список виводить node tools/roles.mjs nav-tile з самого файла, тож він не може розійтися з ним.