orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/storefront/StorefrontFooter.tsx

@@ -1,168 +0,0 @@
-'use client';
-
-import { useMemo, type MouseEvent } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceCatalog,
-  useOrionplaceProducts,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import { navigationCatalogCategories } from '@/lib/orionplace/catalog';
-import { footerLabels } from '@/lib/orionplace/footerLabels';
-import { homeProductSections } from '@/lib/orionplace/homeContent';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import { BrandLogos } from '@/components/orionplace/branding/BrandLogos';
-import { SocialLinks } from '@/components/orionplace/social/SocialLinks';
-import styles from './StorefrontFooter.module.css';
-
-export interface StorefrontFooterProps {
-  year?: number;
-  onNavigate?: (path: string) => void;
-}
-
-export function StorefrontFooter({
-  year = new Date().getFullYear(),
-  onNavigate,
-}: StorefrontFooterProps) {
-  const init         = useOrionplace(selectInit);
-  const catalog      = useOrionplaceCatalog((state) => state.catalog);
-  const products     = useOrionplaceProducts((state) => state);
-  const locale       = useOrionplaceSelections((state) => state.localeCode);
-  const labels       = footerLabels(locale);
-  const company      = init?.contact?.company_legal_name ||
-    init?.contact?.company_name || '';
-  const categories   = useMemo(
-    () => navigationCatalogCategories(catalog).slice(0, 6),
-    [catalog],
-  );
-  const sections     = useMemo(
-    () => homeProductSections(
-      products.init?.products ?? [],
-      products.init?.featured ?? [],
-      products.homeNewProductIds,
-    ),
-    [products.init, products.homeNewProductIds],
-  );
-  const route        = (path: string, hash = '') =>
-    `${path}?locale=${encodeURIComponent(locale)}${hash}`;
-  const sectionHref  = (key: string) => key === 'featured'
-    ? route('/featured')
-    : route('/', `#${key}`);
-  const primaryLinks = {
-    catalog: labels.catalog,
-    tariffs: locale.toLowerCase().startsWith('ru')
-      ? 'Тарифы подписок'
-      : locale.toLowerCase().startsWith('es') ? 'Planes de suscripción' : 'Subscription plans',
-    manufacturers: labels.manufacturers,
-    ...(init?.visual_settings?.single_seller_mode ? {} : { sellers: labels.sellers }),
-    stores: labels.stores,
-  };
-
-  function navigate(event: MouseEvent<HTMLElement>) {
-    if (!(event.target instanceof Element)) {
-      return;
-    }
-    const anchor = event.target.closest('a');
-    if (
-      !anchor ||
-      anchor.target === '_blank' ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.shiftKey ||
-      event.altKey ||
-      event.button !== 0
-    ) {
-      return;
-    }
-
-    const path = anchor.getAttribute('href');
-    if (path?.startsWith('/')) {
-      event.preventDefault();
-      onNavigate?.(path);
-    }
-  }
-
-  return (
-    <footer
-      data-storefront-footer
-      className={styles.footer}
-      onClick={navigate}
-    >
-      <div className={styles.content}>
-        <div className={styles.columns}>
-          <div className={styles.brandColumn}>
-            <a
-              href={route('/')}
-              aria-label={labels.home}
-              className={styles.brandLink}
-              data-footer-part="BrandLogos"
-            >
-              <BrandLogos
-                type="big"
-                label={init?.contact?.company_name || labels.home}
-              />
-            </a>
-            <div data-footer-part="SocialLinks">
-              <SocialLinks />
-            </div>
-          </div>
-          {categories.length > 0 && (
-            <nav aria-label={labels.catalog} className={styles.navigation}>
-              <h2>{labels.catalog}</h2>
-              {categories.map((category) => (
-                <a
-                  key={category.id}
-                  href={route(`/category/${category.id}`)}
-                  className={styles.navigationLink}
-                >
-                  {getAvailableNestedValueFromObject(
-                    category.locale,
-                    locale,
-                    'cg_name',
-                  ) || category.id}
-                </a>
-              ))}
-            </nav>
-          )}
-          <nav aria-label={labels.sections} className={styles.navigation}>
-            <h2>{labels.sections}</h2>
-            {Object.entries(primaryLinks).map(([path, title]) => (
-              <a
-                key={path}
-                href={route(`/${path}`)}
-                className={styles.navigationLink}
-              >
-                {title}
-              </a>
-            ))}
-            {sections.map((section) => (
-              <a
-                key={section.key}
-                href={sectionHref(section.key)}
-                className={styles.navigationLink}
-              >
-                {labels[section.key]}
-              </a>
-            ))}
-            <a href={route('/profile')} className={styles.navigationLink}>
-              {labels.profile}
-            </a>
-            <a href={route('/journal')} className={styles.navigationLink}>
-              {labels.journal}
-            </a>
-            <a href={route('/contact')} className={styles.navigationLink}>
-              {labels.contact}
-            </a>
-            <a href={route('/privacy')} className={styles.navigationLink}>
-              {labels.privacy}
-            </a>
-          </nav>
-        </div>
-        <p className={styles.copyright}>
-          © {year} {company} · {labels.rights}
-        </p>
-      </div>
-    </footer>
-  );
-}

package/templates/components/orionplace/storefront/StorefrontHeader.README.md

@@ -1,150 +0,0 @@
-# StorefrontHeader
-
-## English
-
-`StorefrontHeader` composes the Application Load logo, shared search, currency
-and language selectors, account, wishlist, cart and interactive catalog. These
-controls remain disabled until Application Load succeeds. `productActionsDisabled`
-blocks favorite and purchase actions inside catalog representative cards while
-keeping catalog navigation available.
-
-`variantPending` shows a localized live status while the application loads the
-product variant chosen from a catalog representative. `variantError` replaces
-that message with the localized failure text after the request fails. The card
-itself shows its loading or error state; these props provide the matching status
-for the complete header. Both default to `false`.
-
-Manufacturer and Journal are real locale-preserving links. A plain click closes
-the catalog and calls `onSelectManufacturers` or `onSelectJournal`; modifier
-clicks retain browser navigation. The active route receives `aria-current` and
-is revealed when a narrow navigation row scrolls. Product and category callbacks
-forward the complete payloads from `CatalogHeader`; search receives the trimmed
-query, while account, wishlist and cart actions have no payload.
-
-The cart button calls `onSelectCart`, and the storefront shell opens `/cart`.
-Resting the mouse pointer on the cart area, or moving keyboard focus into it,
-calls `onPreviewCart`; the shell loads `cart_guest_modal_get` and returns
-`CartPreview` from `renderCartPreview`. Leaving the area calls
-`onCloseCartPreview`.
-
-Every `render…` callback replaces its named physical child. Its argument contains
-the same localized labels, compact mode and disabled state used by the default
-child. A replacement owns the events of the content it returns.
-
-### Props
-
-| Prop                                                                                                              | Meaning                                                                                                                                                                                                              |
-| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `variantPending?: boolean`                                                                                        | Shows that the selected product representative variant is loading.                                                                                                                                                   |
-| `variantError?: boolean`                                                                                          | Error from loading the selected product representative variant.                                                                                                                                                      |
-| `productActionsDisabled?: boolean`                                                                                | Disables cart, wishlist, subscription and preorder actions.                                                                                                                                                          |
-| `categoryHref?: (categoryId: number) => string`                                                                   | Builds the category destination from the callback arguments.                                                                                                                                                         |
-| `productHref?: (productId: number) => string`                                                                     | Builds the product page address; the image and name of a product become links.                                                                                                                                       |
-| `onSignIn?: () => void`                                                                                           | Called when the visitor chooses sign-in. The callback has no payload.                                                                                                                                                |
-| `onSignOut?: () => void`                                                                                          | Called when the visitor chooses sign-out. The callback has no payload.                                                                                                                                               |
-| `onSelectProfile?: () => void`                                                                                    | Called when the visitor opens the profile. The callback has no payload.                                                                                                                                              |
-| `onSelectWallet?: () => void`                                                                                     | Called when the visitor opens the wallet. The callback has no payload.                                                                                                                                               |
-| `onSelectWishlist?: () => void`                                                                                   | Called when the visitor opens the wishlist. The callback has no payload.                                                                                                                                             |
-| `onSelectCart?: () => void`                                                                                       | Called when the visitor opens the cart. The callback has no payload.                                                                                                                                                 |
-| `onPreviewCart?: () => void`                                                                                      | Called when a mouse pointer has rested on the cart area for a moment or keyboard focus has entered it. The callback has no payload; touch input does not call it.                                                    |
-| `onCloseCartPreview?: () => void`                                                                                 | Called shortly after the pointer and focus leave the cart area, and at once on Escape. The callback has no payload.                                                                                                  |
-| `onSelectManufacturers?: () => void`                                                                              | Called when the visitor opens manufacturers. The callback has no payload.                                                                                                                                            |
-| `onSelectJournal?: () => void`                                                                                    | Called when the visitor opens the journal. The callback has no payload.                                                                                                                                              |
-| `onSearch?: (query: string) => void`                                                                              | Called when the visitor submits search text. The callback payload is shown in its type.                                                                                                                              |
-| `onSelectCategory?: (category: ICategory) => void`                                                                | Called when the visitor chooses a category. The callback payload is shown in its type.                                                                                                                               |
-| `onSelectProduct?: (product: IProduct) => void`                                                                   | Called when the visitor chooses a product. The callback payload is shown in its type.                                                                                                                                |
-| `renderLogo?: (props: { label: string; }) => ReactNode`                                                           | Replaces the default logo region; the renderer inputs are shown in its type.                                                                                                                                         |
-| `renderActions?: () => ReactNode`                                                                                 | Replaces the default actions region; the renderer inputs are shown in its type.                                                                                                                                      |
-| `renderCatalog?: () => ReactNode`                                                                                 | Replaces the default catalog region; the renderer inputs are shown in its type.                                                                                                                                      |
-| `renderSearch?: (props: { label: string; buttonLabel: string; disabled: boolean; }) => ReactNode`                 | Replaces the default search region; the renderer inputs are shown in its type.                                                                                                                                       |
-| `renderLocale?: (props: { label: string; codeOnly: true; disabled: boolean; }) => ReactNode`                      | Replaces the default locale region; the renderer inputs are shown in its type.                                                                                                                                       |
-| `renderCurrency?: (props: { label: string; codeOnly: true; disabled: boolean; }) => ReactNode`                    | Replaces the default currency region; the renderer inputs are shown in its type.                                                                                                                                     |
-| `renderAccount?: (props: { disabled: boolean; }) => ReactNode`                                                    | Replaces the default account region; the renderer inputs are shown in its type.                                                                                                                                      |
-| `renderWishlist?: (props: { disabled: boolean; compact: true; }) => ReactNode`                                    | Replaces the default wishlist region; the renderer inputs are shown in its type.                                                                                                                                     |
-| `renderCart?: (props: { disabled: boolean; compact: true; }) => ReactNode`                                        | Replaces the default cart region; the renderer inputs are shown in its type.                                                                                                                                         |
-| `renderCartPreview?: () => ReactNode`                                                                             | Renders below the cart button, right-aligned with the cart area, for example `CartPreview`.                                                                                                                          |
-| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Passes the displayed product’s seller object when the seller is selected. The application opens the seller page.                                                                                                     |
-| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Passes the previously displayed product ID in `product` and chosen primary variant in `variant`. An available variant product replaces the card; the application loads missing product data.                         |
-| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                 | Passes the product ID in `product`, product group ID in `productGroup` and primary variant in `variant` when its secondary variants need loading. The application loads them and supplies them to the product store. |
-| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Passes the previously displayed product ID in `product` and chosen secondary variant in `variant` after replacing the displayed product. The secondary-variant data remains available.                               |
-| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Passes the product ID in `product` and desired wishlist state in `selected` after the heart is pressed. The application confirms the change with a request and updates product data.                                 |
-| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                     | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data.               |
-| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                  | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data.                                           |
-| `onSubscribe?: (selection: ProductActionSelection) => void`                                                       | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state.                                   |
-| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                     | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state.                                                    |
-| `onPreorder?: (selection: ProductActionSelection) => void`                                                        | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request.                                                                         |
-
-## Русский
-
-`StorefrontHeader` объединяет логотип из Application Load, общий поиск,
-переключатели валюты и языка, аккаунт, избранное, корзину и интерактивный каталог.
-До успешного Application Load эти элементы недоступны.
-`productActionsDisabled` блокирует избранное и покупку в карточках товаров
-каталога, сохраняя навигацию по категориям.
-
-`variantPending` показывает локализованный статус загрузки, когда приложение
-получает вариант товара, выбранный в карточке представителя категории.
-`variantError` заменяет его сообщением об ошибке после неудачного запроса. Сама
-карточка также показывает состояние загрузки или ошибки; эти свойства добавляют
-соответствующий статус для всей шапки. Оба свойства по умолчанию равны `false`.
-
-«Производители» и «Журнал» — настоящие ссылки с выбранным языком. Обычное нажатие
-закрывает каталог и вызывает `onSelectManufacturers` или `onSelectJournal`, а
-нажатие с модификатором сохраняет переход браузера. Текущий маршрут получает
-`aria-current` и остаётся видимым при прокрутке узкой строки навигации. События
-товара и категории передают полные данные из `CatalogHeader`; поиск передаёт
-очищенный запрос, а действия аккаунта, избранного и корзины не содержат данных.
-
-Кнопка корзины вызывает `onSelectCart`, и оболочка магазина открывает `/cart`.
-Задержка указателя мыши на области корзины или переход туда фокуса клавиатуры
-вызывает `onPreviewCart`; оболочка загружает `cart_guest_modal_get` и
-возвращает `CartPreview` из `renderCartPreview`. Уход из области вызывает
-`onCloseCartPreview`.
-
-Каждый обработчик `render…` заменяет названный физический дочерний компонент. Он
-получает те же локализованные подписи, компактный режим и состояние блокировки,
-которые использует стандартный компонент. Заменяющий компонент сам связывает
-события возвращаемого содержимого.
-
-### Свойства
-
-| Свойство                                                                                                          | Назначение                                                                                                                                                                                                         |
-| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `variantPending?: boolean`                                                                                        | Показывает загрузку выбранного варианта представителя товара.                                                                                                                                                      |
-| `variantError?: boolean`                                                                                          | Ошибка загрузки выбранного варианта представителя товара.                                                                                                                                                          |
-| `productActionsDisabled?: boolean`                                                                                | Блокирует корзину, избранное, подписку и предзаказ.                                                                                                                                                                |
-| `categoryHref?: (categoryId: number) => string`                                                                   | Строит адрес ссылки категории из аргументов обработчика.                                                                                                                                                           |
-| `productHref?: (productId: number) => string`                                                                     | Строит адрес страницы товара; фото и название товара становятся ссылками.                                                                                                                                          |
-| `onSignIn?: () => void`                                                                                           | Вызывается, когда покупатель выбирает вход. Обработчик не получает данные.                                                                                                                                         |
-| `onSignOut?: () => void`                                                                                          | Вызывается, когда покупатель выбирает выход. Обработчик не получает данные.                                                                                                                                        |
-| `onSelectProfile?: () => void`                                                                                    | Вызывается, когда покупатель открывает профиль. Обработчик не получает данные.                                                                                                                                     |
-| `onSelectWallet?: () => void`                                                                                     | Вызывается, когда покупатель открывает кошелёк. Обработчик не получает данные.                                                                                                                                     |
-| `onSelectWishlist?: () => void`                                                                                   | Вызывается, когда покупатель открывает избранное. Обработчик не получает данные.                                                                                                                                   |
-| `onSelectCart?: () => void`                                                                                       | Вызывается, когда покупатель открывает корзину. Обработчик не получает данные.                                                                                                                                     |
-| `onPreviewCart?: () => void`                                                                                      | Вызывается, когда указатель мыши ненадолго задержался на области корзины или туда перешёл фокус клавиатуры. Обработчик не получает данные; касание экрана его не вызывает.                                         |
-| `onCloseCartPreview?: () => void`                                                                                 | Вызывается вскоре после того, как указатель и фокус покинули область корзины, и сразу по Escape. Обработчик не получает данные.                                                                                    |
-| `onSelectManufacturers?: () => void`                                                                              | Вызывается, когда покупатель открывает производителей. Обработчик не получает данные.                                                                                                                              |
-| `onSelectJournal?: () => void`                                                                                    | Вызывается, когда покупатель открывает журнал. Обработчик не получает данные.                                                                                                                                      |
-| `onSearch?: (query: string) => void`                                                                              | Вызывается, когда покупатель отправляет поисковый текст. Данные обработчика указаны в его типе.                                                                                                                    |
-| `onSelectCategory?: (category: ICategory) => void`                                                                | Вызывается, когда покупатель выбирает категорию. Данные обработчика указаны в его типе.                                                                                                                            |
-| `onSelectProduct?: (product: IProduct) => void`                                                                   | Вызывается, когда покупатель выбирает товар. Данные обработчика указаны в его типе.                                                                                                                                |
-| `renderLogo?: (props: { label: string; }) => ReactNode`                                                           | Заменяет стандартный блок логотипа; входные данные функции указаны в её типе.                                                                                                                                      |
-| `renderActions?: () => ReactNode`                                                                                 | Заменяет стандартный блок действий; входные данные функции указаны в её типе.                                                                                                                                      |
-| `renderCatalog?: () => ReactNode`                                                                                 | Заменяет стандартный блок каталога; входные данные функции указаны в её типе.                                                                                                                                      |
-| `renderSearch?: (props: { label: string; buttonLabel: string; disabled: boolean; }) => ReactNode`                 | Заменяет стандартный блок поиска; входные данные функции указаны в её типе.                                                                                                                                        |
-| `renderLocale?: (props: { label: string; codeOnly: true; disabled: boolean; }) => ReactNode`                      | Заменяет стандартный блок языка; входные данные функции указаны в её типе.                                                                                                                                         |
-| `renderCurrency?: (props: { label: string; codeOnly: true; disabled: boolean; }) => ReactNode`                    | Заменяет стандартный блок валюты; входные данные функции указаны в её типе.                                                                                                                                        |
-| `renderAccount?: (props: { disabled: boolean; }) => ReactNode`                                                    | Заменяет стандартный блок аккаунта; входные данные функции указаны в её типе.                                                                                                                                      |
-| `renderWishlist?: (props: { disabled: boolean; compact: true; }) => ReactNode`                                    | Заменяет стандартный блок избранного; входные данные функции указаны в её типе.                                                                                                                                    |
-| `renderCart?: (props: { disabled: boolean; compact: true; }) => ReactNode`                                        | Заменяет стандартный блок корзины; входные данные функции указаны в её типе.                                                                                                                                       |
-| `renderCartPreview?: () => ReactNode`                                                                             | Выводится под кнопкой корзины и выравнивается по правому краю области корзины, например `CartPreview`.                                                                                                             |
-| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Передаёт объект продавца отображаемого товара при выборе продавца. Приложение открывает его страницу.                                                                                                              |
-| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Передаёт ID ранее отображаемого товара в `product` и выбранный основной вариант в `variant`. Доступный товар выбранного варианта заменяет карточку; отсутствующие данные загружает приложение.                     |
-| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                 | Передаёт ID товара в `product`, ID группы товаров в `productGroup` и основной вариант в `variant`, когда для него нужно загрузить дополнительные варианты. Приложение загружает и передаёт их в хранилище товаров. |
-| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Передаёт ID ранее отображаемого товара в `product` и выбранный дополнительный вариант в `variant` после замены отображаемого товара. Выбор сохраняет данные дополнительных вариантов.                              |
-| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Передаёт ID товара в `product` и желаемое состояние избранного в `selected` после нажатия сердца. Приложение подтверждает изменение запросом и обновляет данные товара.                                            |
-| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                     | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара.                        |
-| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                  | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара.                                           |
-| `onSubscribe?: (selection: ProductActionSelection) => void`                                                       | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки.                                                   |
-| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                     | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки.                                                                    |
-| `onPreorder?: (selection: ProductActionSelection) => void`                                                        | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос.                                                                                       |

package/templates/components/orionplace/storefront/StorefrontHeader.module.css

@@ -1,186 +0,0 @@
-.header {
-  position: relative;
-  z-index: 30;
-  container-name: header;
-  container-type: inline-size;
-  background: var(--orionplace-inverse-surface);
-  color: var(--orionplace-inverse-text);
-}
-
-.grid {
-  display: grid;
-  box-sizing: border-box;
-  max-width: 90rem;
-  margin: 0 auto;
-  padding-inline: 1rem;
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-areas:
-    'preferences preferences'
-    'logo actions'
-    'search search'
-    'navigation navigation';
-  column-gap: 1rem;
-}
-
-.logo {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  align-self: center;
-  padding-block: 0.75rem;
-  color: inherit;
-  text-decoration: none;
-  outline: none;
-  grid-area: logo;
-}
-
-.logo:focus-visible {
-  background: color-mix(
-    in srgb,
-    var(--orionplace-inverse-text) 10%,
-    transparent
-  );
-}
-
-.logoSurface {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  background: var(--orionplace-inverse-text);
-}
-
-.search {
-  min-width: 0;
-  align-self: center;
-  padding-bottom: 0.75rem;
-  grid-area: search;
-}
-
-.preferences {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.25rem;
-  padding-block: 0.25rem;
-  border-bottom: 1px solid
-    color-mix(in srgb, var(--orionplace-inverse-text) 15%, transparent);
-  color: var(--orionplace-inverse-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  grid-area: preferences;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  align-self: center;
-  gap: 0.125rem;
-  color: var(--orionplace-inverse-text);
-  grid-area: actions;
-}
-
-.cart {
-  position: relative;
-}
-
-.navigation {
-  min-width: 0;
-  border-top: 1px solid
-    color-mix(in srgb, var(--orionplace-inverse-text) 15%, transparent);
-  grid-area: navigation;
-}
-
-.pageLink {
-  display: inline-flex;
-  box-sizing: border-box;
-  align-items: center;
-  flex-shrink: 0;
-  height: 3rem;
-  padding: 0;
-  border-block: 2px solid transparent;
-  color: inherit;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-  outline: none;
-  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.pageLink:focus-visible,
-.pageLink[aria-current='page'] {
-  border-bottom-color: currentColor;
-}
-
-@media (hover: hover) {
-  .pageLink:hover {
-    border-bottom-color: currentColor;
-  }
-}
-
-.variantStatus {
-  margin: 0;
-  padding-bottom: 0.75rem;
-  color: var(--orionplace-inverse-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-/* The header's own width picks the layout, as in the Nuxt and Svelte headers. */
-@container header (min-width: 640px) {
-  .grid {
-    padding-inline: 1.5rem;
-    grid-template-columns: minmax(0, 1fr) auto auto;
-    grid-template-areas:
-      'logo preferences actions'
-      'search search search'
-      'navigation navigation navigation';
-  }
-
-  .preferences {
-    padding-block: 0;
-    border-bottom: 0;
-  }
-}
-
-@container header (min-width: 1024px) {
-  .grid {
-    padding-inline: 2rem;
-    grid-template-columns: minmax(8.75rem, 12.5rem) minmax(0, 1fr) auto auto;
-    grid-template-areas:
-      'logo search preferences actions'
-      'navigation navigation navigation navigation';
-    column-gap: 1.5rem;
-  }
-
-  .search {
-    padding-bottom: 0;
-  }
-}
-
-/* A narrow header scrolls the catalog row instead of wrapping it. */
-@container header (max-width: 1023px) {
-  .navigation :global([data-orionplace-catalog] > nav) {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .navigation :global([data-orionplace-catalog] > nav > button) {
-    flex-shrink: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .pageLink {
-    transition: none;
-  }
-}