/* ============================================================
   HaiKom — the portal shop sheet

   Loaded after base.css on every page whose layout, or the page
   itself, declares StyleArea.Portal: the shop, the order wizard
   popup and the sign-in pages (AreaStylesheet.razor). A portal
   theme is meant to load after it (design.md §12).

   What belongs here: the shop's own chrome. Anything a flow,
   account or Shared/ component can render goes in base.css,
   because those render in the administration too.

   Contents
     1  Storefront information page (.hk-info-page)
     2  Shop layout                (.hk-shop)
     3  Product listing            (.hk-catalog)
     4  Account pages              (.hk-shop .hk-account-*)
   ============================================================ */

/* ── 1. Storefront information page ─────────────────────────────────────────
   A classic information page in the shop's look (#2363). InformationPageSections draws the sections as one
   Bootstrap row whose gutters space them both ways, each by its component in Components/Shop/InfoPages. The rules
   live here rather than in scoped sheets: an HTML section is the content administrator's raw markup, which no
   scoped rule reaches, and the cards and the banner read the shop's tokens, which a portal theme sets. */
.hk-info-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hk-info-page img,
.hk-catalog-information img {
    max-width: 100%;
    height: auto;
}

/* An HTML section on the shop's type: flush with the section at both ends, the headings on the shop's scale in the
   emphasis colour. */
.hk-info-page .hk-info-html > :first-child { margin-top: 0; }
.hk-info-page .hk-info-html > :last-child { margin-bottom: 0; }

.hk-info-page .hk-info-html :is(h1, h2, h3, h4) {
    margin: 1.5rem 0 .5rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--bs-emphasis-color);
}

.hk-info-page .hk-info-html h1 { font-size: var(--hk-shop-title-size, 1.5rem); }
.hk-info-page .hk-info-html h2 { font-size: 1.25rem; }
.hk-info-page .hk-info-html h3 { font-size: 1.0625rem; }
.hk-info-page .hk-info-html h4 { font-size: 1rem; }
.hk-info-page .hk-info-html :is(p, ul, ol) { margin: 0 0 .75rem; }
.hk-info-page .hk-info-html img { border-radius: var(--hk-shop-radius, var(--bs-border-radius)); }

/* A card (an image or push section): the picture rounded on the shop's tint, its title and text under it, the
   whole card one link. WebForms drew the texts as black bars on the picture. */
.hk-info-page .hk-info-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.hk-info-page .hk-info-card-media {
    display: block;
    overflow: hidden;
    border-radius: var(--hk-shop-radius, var(--bs-border-radius));
    background: var(--hk-shop-tint, var(--bs-tertiary-bg));
}

.hk-info-page .hk-info-card-media img {
    display: block;
    width: 100%;
    transition: transform .2s ease;
}

.hk-info-page a.hk-info-card:hover .hk-info-card-media img {
    transform: scale(1.03);
}

.hk-info-page .hk-info-card-title {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-info-page a.hk-info-card:hover .hk-info-card-title {
    color: var(--bs-primary);
    text-decoration: underline;
}

.hk-info-page .hk-info-card-text,
.hk-info-page .hk-info-tile-text {
    margin: 0;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.hk-info-page .hk-info-card-price,
.hk-info-page .hk-info-tile-price {
    margin: 0;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
}

/* A banner (a full-width image section with a label or text): the texts on a dark fade at the picture's foot. */
.hk-info-page .hk-info-banner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--bs-border-radius-lg);
    color: var(--hk-n-0);
    text-decoration: none;
}

.hk-info-page .hk-info-banner img {
    display: block;
    width: 100%;
}

.hk-info-page .hk-info-banner-text {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    padding: 3rem 1.5rem 1.5rem;
    background: linear-gradient(to top, color-mix(in srgb, var(--hk-n-900) 75%, transparent), transparent);
}

.hk-info-page .hk-info-banner-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.hk-info-page a.hk-info-banner:hover .hk-info-banner-title {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .hk-info-page .hk-info-banner-text { padding: 2rem 1rem 1rem; }
    .hk-info-page .hk-info-banner-title { font-size: 1.125rem; }
}

/* A template section: the listing's tiles (base.css §16), and "View all" under them. */
.hk-info-page .hk-info-view-all {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: var(--hk-control-height, 2.75rem);
    margin-top: .5rem;
    font-weight: 600;
    text-decoration: none;
}

.hk-info-page .hk-info-view-all:hover {
    text-decoration: underline;
}

/* The new format's blocks (#2363, ShopPageBlocks), one under the other. A block's ground is its appearance: the page's,
   the shop's tint, or the portal's primary with the text in its on-colour. Headings use the shop's scale. */
.hk-info-page .hk-blocks {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hk-info-page .hk-block-on-tinted,
.hk-info-page .hk-block-on-primary {
    padding: 2rem;
    border-radius: var(--bs-border-radius-lg);
}

.hk-info-page .hk-block-on-tinted {
    background: var(--hk-shop-tint, var(--bs-tertiary-bg));
}

.hk-info-page .hk-block-on-primary {
    background: var(--bs-primary);
    color: var(--hk-on-primary);
    --bs-emphasis-color: var(--hk-on-primary);
    --bs-secondary-color: color-mix(in srgb, var(--hk-on-primary) 80%, transparent);
    --bs-link-color-rgb: var(--hk-on-primary-rgb);
    --bs-link-hover-color-rgb: var(--hk-on-primary-rgb);
}

.hk-info-page .hk-block-eyebrow {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
}

.hk-info-page .hk-block-on-primary .hk-block-eyebrow {
    color: inherit;
}

.hk-info-page :is(.hk-block-title, .hk-block-hero-title) {
    margin: 0;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--bs-emphasis-color);
}

.hk-info-page .hk-block-title { font-size: 1.25rem; }
.hk-info-page .hk-block-hero-title { font-size: 2rem; letter-spacing: -.02em; }
.hk-info-page .hk-block-lead { margin: 0; max-width: 40rem; font-size: 1.0625rem; color: var(--bs-secondary-color); }

/* A block's own heading over its items, and the title row of a products block with "View all" beside it. */
.hk-info-page :is(.hk-block-benefits, .hk-block-tiles, .hk-block-text, .hk-block-waiting, .hk-block-reorder) > .hk-block-title {
    margin-bottom: 1rem;
}

.hk-info-page .hk-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.hk-info-page .hk-block-head-link {
    margin-left: auto;
    font-weight: 600;
    text-decoration: none;
}

.hk-info-page .hk-block-head-link:hover {
    text-decoration: underline;
}

/* Hero, picture and text, news band: the text beside the picture from md, under it on a phone. */
.hk-info-page :is(.hk-block-hero, .hk-block-media, .hk-block-news) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .hk-info-page .hk-block-hero:has(.hk-block-picture) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .hk-info-page .hk-block-media:has(.hk-block-picture) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hk-info-page .hk-block-news:has(.hk-block-picture) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
    .hk-info-page .hk-block-news .hk-block-picture { order: 2; }
    .hk-info-page .hk-block-hero.hk-block-on-tinted,
    .hk-info-page .hk-block-hero.hk-block-on-primary { padding: 3rem; }
}

.hk-info-page :is(.hk-block-hero-text, .hk-block-media-text) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

.hk-info-page .hk-block-picture {
    overflow: hidden;
    border-radius: var(--hk-shop-radius, var(--bs-border-radius));
}

.hk-info-page .hk-block-picture img {
    display: block;
    width: 100%;
}

@media (max-width: 575.98px) {
    .hk-info-page .hk-block-on-tinted,
    .hk-info-page .hk-block-on-primary { padding: 1.5rem; }
    .hk-info-page .hk-block-hero-title { font-size: 1.5rem; }
}

/* Benefits: a card each, the icon in a round tint beside the title and text. */
.hk-info-page .hk-block-benefit {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    height: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--hk-shop-radius, var(--bs-border-radius));
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    /* The card is on the page's ground even in a block on the primary colour, so it takes the page's text colours back. */
    --bs-emphasis-color: var(--bs-body-color);
    --bs-secondary-color: color-mix(in srgb, var(--bs-body-color) 75%, transparent);
}

.hk-info-page .hk-block-benefit-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 1.25rem;
}

.hk-info-page .hk-block-benefit-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.hk-info-page .hk-block-benefit-text {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

/* Text: a readable measure. */
.hk-info-page .hk-block-text > .hk-info-html {
    max-width: 48rem;
}

/* The personal blocks. The greeting: the welcome beside the budget left, under it on a phone. */
.hk-info-page .hk-block-greeting {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .hk-info-page .hk-block-greeting:has(.hk-block-budget) { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.hk-info-page .hk-block-budget {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--hk-shop-radius, var(--bs-border-radius));
    background: var(--bs-body-bg);
}

.hk-info-page .hk-block-budget-label {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.hk-info-page .hk-block-budget-amount {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--bs-emphasis-color);
}

/* Waiting for you: a card per order, the status first. */
.hk-info-page .hk-block-card {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    height: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--hk-shop-radius, var(--bs-border-radius));
    background: var(--bs-body-bg);
}

.hk-info-page .hk-block-card .btn {
    margin-top: .5rem;
}

.hk-info-page .hk-block-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-info-page .hk-block-card-meta {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* My orders and order again: rows in one card. */
.hk-info-page .hk-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--hk-shop-radius, var(--bs-border-radius));
    background: var(--bs-body-bg);
}

.hk-info-page .hk-block-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .75rem 1.25rem;
}

.hk-info-page .hk-block-list-row + .hk-block-list-row {
    border-top: 1px solid var(--bs-border-color);
}

.hk-info-page .hk-block-list-name {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.hk-info-page a.hk-block-list-name:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.hk-info-page .hk-block-reorder-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
}

.hk-info-page .hk-block-reorder-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bs-border-radius-sm);
    background: var(--hk-shop-tint, var(--bs-tertiary-bg));
}

.hk-info-page .hk-block-reorder-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .hk-info-page .hk-block-reorder-row { grid-template-columns: 4rem minmax(0, 1fr); }
    .hk-info-page .hk-block-reorder-row .btn { grid-column: 2; justify-self: start; }
}

/* ── 2. Shop layout ──────────────────────────────────────────────────────────
   ShopLayout, as the shop mockup draws it (#2329): the shop's tokens and density, the utility bar, the
   header (top row and menu bar), the off-canvas menu, the mini cart, the side panel, the content and the footer.

   Deliberate deviation from the back office's density (design.md §3: 13px text, 31px controls). Shoppers
   read and tap rather than work in the page all day, so inside .hk-shop the body text is 15px and every
   control and button is at least 44px tall, the tap target of design.md §11. With a mouse the shop is a
   step denser (14px text, 39px controls, a smaller page title; below), since the tap target is a finger's.
   Only what renders inside .hk-shop takes it; the administration keeps its own. Every colour still derives
   from --bs-primary, so the profile colour, or the portal theme (#2314 S1), recolours the shop.

   The portal theme (ShopThemeCss, after colors.css) sets custom properties only: the primary and link colours and
   the font on :root, and here the --hk-shop-menu-*, -submenu-*, -action-*, -heading-*, -footer-* and -side-*
   tokens, the radius and the mouse density. Each rule that reads one keeps today's look as its fallback, so a page
   without a theme is drawn as before.

   The layout's rules live here rather than in its scoped sheet so a portal theme can override them with
   plain selectors (#2323). Every selector carries .hk-shop, the layout's root, so it weighs what it did with
   the scope attribute; without it Bootstrap's .btn:hover (0,2,0) would take the header's icon buttons on
   hover. Only the root's own rule is one class lighter, which holds because nothing else styles that div. */
.hk-shop {
    --hk-shop-radius: 0.5rem;
    --hk-shop-tint: color-mix(in srgb, var(--bs-primary) 7%, white);
    --hk-shop-wrap: 80rem;
    --hk-shop-top-h: 3.5rem;
    /* The page's heading: the content header, a flow step's title, the cart's, the checkout's and a product's. */
    --hk-shop-title-size: 1.5rem;
    --bs-border-radius: var(--hk-shop-radius);
    --bs-border-radius-sm: calc(var(--hk-shop-radius) * 0.6);
    --bs-border-radius-lg: calc(var(--hk-shop-radius) * 1.5);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.5;
    --hk-control-font-size: 0.9375rem;
    --hk-control-line-height: 1.5;
    --hk-control-padding-y: 0.625rem;
    --hk-control-padding-x: 0.75rem;
    /* Derived on :root from the padding there; re-derived here, or the shop's controls would keep the
       back office's height (base.css §1). */
    --hk-control-height: calc(var(--hk-control-line-height) * var(--hk-control-font-size)
                              + 2 * var(--hk-control-padding-y)
                              + 2 * var(--bs-border-width));
    /* Radzen's input metrics are mapped onto the tokens on :root (radzen-overrides.css), so they are mapped
       again here, or a date picker or dropdown in the shop keeps the back office's height beside a field. */
    --rz-input-height: var(--hk-control-height);
    --rz-input-font-size: var(--hk-control-font-size);
    --rz-input-line-height: var(--hk-control-line-height);
    --rz-input-padding-block: var(--hk-control-padding-y);
    --rz-input-padding-inline: var(--hk-control-padding-x);
    --rz-datepicker-line-height: calc(var(--hk-control-line-height) * var(--hk-control-font-size));
    --hk-focus-ring: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.4);
    --hk-focus-border-color: color-mix(in srgb, var(--bs-primary) 60%, white);
    /* Read by the page alerts (HkPageAlerts) and the sticky rails: they park below the pinned header
       instead of over its cart and account icons. The top row, plus the menu bar from lg (below). */
    --hk-sticky-top: calc(var(--hk-shop-top-h) + 1px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    background: var(--hk-app-bg);
}

@media (min-width: 768px) {
    .hk-shop {
        --hk-shop-title-size: 1.875rem;
    }
}

@media (min-width: 992px) {
    .hk-shop {
        --hk-shop-top-h: 4.5rem;
    }

    .hk-shop:has(.hk-shop-navbar) {
        --hk-sticky-top: calc(var(--hk-shop-top-h) + 2.75rem + 1px);
    }
}

/* With a mouse a step denser: the 44px tap target is a finger's, and at it a desktop page read large. */
@media (hover: hover) and (pointer: fine) {
    .hk-shop {
        --bs-body-font-size: 0.875rem;
        --hk-control-font-size: 0.875rem;
        --hk-control-padding-y: 0.5rem;
        --hk-control-padding-x: 0.625rem;
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .hk-shop {
        --hk-shop-title-size: 1.625rem;
    }
}

/* Buttons at the controls' height. base.css §4 writes .btn's and .btn-sm's padding as literals, so
   the tokens above do not reach them. */
.hk-shop .btn,
.hk-shop .btn-sm,
.hk-shop .btn-group-sm > .btn {
    --bs-btn-padding-y: var(--hk-control-padding-y);
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: var(--hk-control-font-size);
    --bs-btn-line-height: var(--hk-control-line-height);
}

/* A primary button's text is --hk-on-primary, white unless a portal theme picks a primary that needs dark text. */
.hk-shop .btn-primary {
    --bs-btn-color: var(--hk-on-primary);
    --bs-btn-hover-color: var(--hk-on-primary);
    --bs-btn-active-color: var(--hk-on-primary);
    --bs-btn-disabled-color: var(--hk-on-primary);
}

/* One content width for the header, the page and the footer. */
.hk-shop .hk-shop-wrap {
    width: 100%;
    max-width: var(--hk-shop-wrap);
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .hk-shop .hk-shop-wrap {
        padding-inline: 1.5rem;
    }
}

/* The utility bar: from lg, and only when it has something to show — the customer, a staff link or
   more than one language (ShopLanguageMenu renders nothing for one; its toggle is a utility link). It stacks over
   the pinned header (1020), or its dropdowns open behind the header; the two never overlap otherwise, as the header
   only pins once the bar has scrolled away. */
.hk-shop .hk-shop-utility {
    display: none;
    position: relative;
    z-index: 1021;
    background: var(--hk-shop-tint);
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    --hk-link-font-weight: 400;
}

@media (min-width: 992px) {
    .hk-shop .hk-shop-utility:has(.hk-shop-utility-who, .hk-shop-utility-link) {
        display: block;
    }
}

.hk-shop .hk-shop-utility > .hk-shop-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem 1.5rem;
    min-height: 2.25rem;
}

.hk-shop .hk-shop-utility-who,
.hk-shop .hk-shop-utility-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hk-shop .hk-shop-utility-end {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.hk-shop .hk-shop-utility-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-body-color);
    font: inherit;
}

.hk-shop .hk-shop-utility-link:hover,
.hk-shop .hk-shop-utility-link[aria-expanded="true"] {
    color: var(--bs-primary);
}

/* The language choice (ShopLanguageMenu): names, the current one checked in the dropdown and filled in the
   off-canvas menu's row. */
.hk-shop .hk-shop-language-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.hk-shop .hk-shop-language-item[aria-current="true"] {
    font-weight: 600;
}

.hk-shop .hk-shop-language-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The header: the top row and the menu bar, pinned while the utility bar scrolls away. */
.hk-shop .hk-shop-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--hk-app-bg);
    border-bottom: 1px solid var(--bs-border-color);
    --hk-link-font-weight: 500;
}

.hk-shop .hk-shop-top > .hk-shop-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem 1.5rem;
    min-height: var(--hk-shop-top-h);
}

/* Below lg the top row is WebForms' mobile title bar: on a portal theme's menu colour, its brand text and actions in
   the menu's text colour. Without a theme both are unset and the row stays white. */
@media (max-width: 991.98px) {
    .hk-shop .hk-shop-top {
        background: var(--hk-shop-menu-bg, transparent);
        --hk-shop-top-color: var(--hk-shop-menu-color);
        --hk-shop-top-hover-bg: color-mix(in srgb, var(--hk-shop-menu-color) 14%, transparent);
    }
}

.hk-shop .hk-shop-brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--hk-shop-top-color, var(--bs-emphasis-color));
}

.hk-shop .hk-shop-logo {
    max-height: 2.5rem;
    max-width: 8rem;
    object-fit: contain;
}

.hk-shop .hk-shop-brand-text {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (min-width: 992px) {
    .hk-shop .hk-shop-logo {
        max-height: 3rem;
        max-width: 14rem;
    }
}

/* The search box, wide in the top row from lg and a row of its own under it below. */
.hk-shop .hk-shop-search-top {
    flex: 1 1 auto;
    max-width: 38rem;
}

.hk-shop .hk-shop-search-row {
    padding-block: 0.25rem 0.75rem;
}

.hk-shop .hk-shop-search {
    position: relative;
}

.hk-shop .hk-shop-search > .bi {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.hk-shop .hk-shop-search .form-control {
    padding-left: 2.75rem;
    background: var(--hk-surface-sunken);
    border-color: transparent;
    box-shadow: none;
}

.hk-shop .hk-shop-search .form-control:focus {
    background: var(--hk-surface-raised);
    border-color: var(--hk-focus-border-color);
    box-shadow: var(--hk-focus-ring);
}

/* The actions: an icon over a short label; below md the icon alone, the label kept as aria-label. */
.hk-shop .hk-shop-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.hk-shop .hk-shop-action {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--hk-shop-radius);
    background: transparent;
    color: var(--hk-shop-top-color, var(--hk-shop-action-color, var(--bs-body-color)));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

/* A portal theme may colour the icons apart from their labels, as WebForms' navigation icons were. */
.hk-shop .hk-shop-action > .bi {
    font-size: 1.375rem;
    line-height: 1;
    color: var(--hk-shop-top-color, var(--hk-shop-action-icon-color, currentColor));
}

.hk-shop .hk-shop-action:hover,
.hk-shop .hk-shop-action[aria-expanded="true"] {
    background: var(--hk-shop-top-hover-bg, var(--hk-surface-sunken));
    color: var(--hk-shop-top-color, var(--hk-shop-action-hover-color, var(--bs-emphasis-color)));
}

.hk-shop .hk-shop-action:hover > .bi,
.hk-shop .hk-shop-action[aria-expanded="true"] > .bi {
    color: var(--hk-shop-top-color, var(--hk-shop-action-hover-icon-color, currentColor));
}

.hk-shop .hk-shop-action-label {
    display: none;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .hk-shop .hk-shop-action {
        min-width: 3.75rem;
        min-height: 3rem;
    }

    .hk-shop .hk-shop-action-label {
        display: block;
    }
}

.hk-shop .hk-shop-menu-toggle {
    margin-left: -0.5rem;
}

.hk-shop .hk-shop-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 1rem;
    background: var(--bs-primary);
    color: var(--hk-on-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

@media (min-width: 768px) {
    .hk-shop .hk-shop-badge {
        right: 0.625rem;
    }
}

.hk-shop .hk-shop-badge-empty {
    display: none;
}

.hk-shop .hk-shop-cart-budget-error {
    color: var(--bs-danger);
}

/* The menu bar: the layout's main menu, the current entry underlined in the brand colour. A portal theme may give the
   bar a colour of its own (WebForms' main menu), and its dropdowns theirs. */
.hk-shop .hk-shop-navbar {
    background: var(--hk-shop-menu-bg, transparent);
    --hk-shop-menu-separator: color-mix(in srgb, var(--hk-shop-menu-color) 30%, transparent);
}

.hk-shop .hk-shop-navbar .dropdown-menu {
    --bs-dropdown-bg: var(--hk-shop-submenu-bg, var(--bs-body-bg));
    --bs-dropdown-color: var(--hk-shop-submenu-color, var(--bs-body-color));
    --bs-dropdown-link-color: var(--hk-shop-submenu-color, var(--bs-body-color));
    --bs-dropdown-link-hover-color: var(--hk-shop-submenu-hover-color, var(--bs-body-color));
    --bs-dropdown-link-hover-bg: var(--hk-shop-submenu-hover-bg, var(--bs-tertiary-bg));
}

.hk-shop .hk-shop-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hk-shop .hk-shop-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border-bottom: 2px solid transparent;
    color: var(--hk-shop-menu-color, var(--bs-body-color));
    white-space: nowrap;
}

.hk-shop .hk-shop-nav > :first-child > .hk-shop-nav-link {
    padding-left: 0;
}

.hk-shop .hk-shop-nav-link:hover {
    background: var(--hk-shop-menu-hover-bg, transparent);
    color: var(--hk-shop-menu-hover-color, var(--bs-primary));
}

.hk-shop .hk-shop-nav-link[aria-current="page"],
.hk-shop .hk-shop-nav-current {
    border-bottom-color: var(--hk-shop-menu-hover-color, var(--bs-primary));
    color: var(--hk-shop-menu-hover-color, var(--bs-primary-text-emphasis));
    --hk-link-font-weight: 600;
}

/* A label among the menu's entries: the head style of design.md §10, over the entries it groups. */
.hk-shop .hk-shop-nav-label {
    padding: 0 0.5rem;
    color: var(--hk-shop-menu-color, var(--bs-secondary-color));
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hk-shop .hk-shop-nav-separator {
    width: 1px;
    height: 1.5rem;
    background: var(--hk-shop-menu-separator, var(--bs-border-color));
}

.hk-shop .hk-shop-nav-sub {
    list-style: none;
    padding-left: 1rem;
}

.hk-shop .hk-shop-offcanvas {
    --bs-offcanvas-width: 18rem;
}

/* The header's dropdowns: account, administration and customer switch. */
.hk-shop .hk-shop-dropdown {
    min-width: 18rem;
}

.hk-shop .hk-shop-switch {
    min-width: 22rem;
}

/* The mini cart (ShopMiniCart): the mockup's side panel from the right, the lines under its heading and the way on at
   its foot. hk-shop.js swaps the panel's content, so that content is the offcanvas's one column: the body scrolls
   between a fixed heading and foot.

   Deliberate deviation from design.md §7's grounds (white head and foot, tinted body, n-300 rules): this is not a
   dialog to work in but a read-out on the page's white ground, as the mockup's flyout draws it, so the lines stay
   white with the shop's hairlines and only the foot that leads on is tinted, like the mockup's. */
.hk-shop .hk-shop-cart-panel {
    --bs-offcanvas-width: min(26rem, 100vw);
}

.hk-shop .hk-shop-minicart {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.hk-shop .hk-shop-minicart > .offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-shop .hk-shop-minicart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-shop .hk-shop-minicart > .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hk-shop .hk-shop-minicart-lines {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A line: the picture in the listing's 4:3 frame, the name over the quantity, the price at the end. */
.hk-shop .hk-shop-minicart-line {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.hk-shop .hk-shop-minicart-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bs-border-radius-sm);
    background: var(--hk-shop-tint);
}

.hk-shop .hk-shop-minicart-thumb > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hk-shop .hk-shop-minicart-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hk-shop .hk-shop-minicart-name {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

.hk-shop .hk-shop-minicart-quantity,
.hk-shop .hk-shop-minicart-note,
.hk-shop .hk-shop-minicart-empty {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.hk-shop .hk-shop-minicart-price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

.hk-shop .hk-shop-minicart-empty {
    margin: 0;
}

.hk-shop .hk-shop-minicart-sum {
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-shop .hk-shop-minicart-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
}

.hk-shop .hk-shop-minicart-note {
    margin: 0.25rem 0 0;
}

/* The foot: Continue shopping, then the way to the cart, in the dialog footer's button order (design.md §7). */
.hk-shop .hk-shop-minicart-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--hk-surface-sunken);
}

.hk-shop .hk-shop-minicart-foot > .btn {
    flex: 1 1 0;
}

/* The page: the side panel and the content in the shared width. */
.hk-shop .hk-shop-body {
    display: flex;
    flex: 1 0 auto;
    align-items: flex-start;
    gap: 1.5rem;
}

/* A portal theme's side menu colour makes the panel a card of its own; its --hk-nav-* reach the Sidebar inside. */
.hk-shop .hk-shop-side {
    flex: 0 0 14rem;
    margin-block: 2rem 4rem;
    padding: var(--hk-shop-side-padding, 0);
    border-radius: var(--hk-shop-radius);
    background: var(--hk-shop-side-bg, transparent);
}

.hk-shop .hk-shop-main {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 1.5rem 3rem;
}

@media (min-width: 992px) {
    .hk-shop .hk-shop-main {
        padding-block: 2rem 4rem;
    }
}

.hk-shop .hk-shop-alert {
    margin-bottom: 1.5rem;
}

.hk-shop .hk-shop-content-header {
    margin-bottom: 1.5rem;
}

/* The page's heading: the layout's content header, and the order wizard's step title (FlowWizard), which heads a
   product step as the content header heads a listing. A portal theme may set it on a band of its own colour, as
   WebForms' header was. */
.hk-shop .hk-shop-content-header .hk-page-title,
.hk-shop .hk-flow-content > .hk-page-title {
    font-size: var(--hk-shop-title-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--hk-shop-heading-color, var(--bs-emphasis-color));
}

.hk-shop .hk-shop-content-header,
.hk-shop .hk-flow-content > .hk-page-title {
    padding: var(--hk-shop-heading-padding, 0);
    border-radius: var(--hk-shop-radius);
    background: var(--hk-shop-heading-bg, transparent);
}

/* The footer: the tenant's footer HTML, on the sunken ground by default. Its two colours are tokens because
   WebForms took them from the portal theme (footer-background-color, footer-text-color), and footer HTML
   written for a dark theme footer often colours its own text white; the portal theme (#2314 S1) sets them. */
.hk-shop .hk-shop-footer {
    border-top: 1px solid var(--bs-border-color);
    background: var(--hk-shop-footer-bg, var(--hk-surface-sunken));
    color: var(--hk-shop-footer-color, var(--bs-secondary-color));
    font-size: 0.875rem;
}

.hk-shop .hk-shop-footer > .hk-shop-wrap {
    padding-block: 1.5rem;
}

/* The footer's links: Bootstrap's own link colour, or the portal theme's for the footer. On hover the theme's hover
   colour, or Bootstrap's hover link colour when it sets none. */
.hk-shop .hk-shop-footer a:not(.btn) {
    color: rgba(var(--hk-shop-footer-link-rgb, var(--bs-link-color-rgb)), var(--bs-link-opacity, 1));
}

.hk-shop .hk-shop-footer a:not(.btn):hover {
    --hk-shop-footer-link-rgb: var(--hk-shop-footer-link-hover-rgb);
}

/* The theme editor's live preview (hk-theme-preview.js): the note that this tab shows a theme as it is being edited,
   and the button that ends it. The script adds it to the body, outside .hk-shop, so it carries no root class. Its
   colours are the neutrals, not the theme's, so it stays readable whatever the draft does. It floats over the page
   and under the sticky header (1020), whose menus open from it, the mini cart and dialogs. */
.hk-theme-preview-note {
    position: fixed;
    inset-inline-start: 1rem;
    inset-block-end: 1rem;
    z-index: 1015;
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: calc(100vw - 2rem);
    padding: .375rem .375rem .375rem .75rem;
    border-radius: var(--bs-border-radius-pill);
    background: var(--hk-n-900);
    color: var(--hk-n-0);
    box-shadow: var(--bs-box-shadow);
    font-size: .8125rem;
}

.hk-theme-preview-note > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-theme-preview-note > .btn {
    flex-shrink: 0;
    border-radius: var(--bs-border-radius-pill);
}

/* On a touch screen the button keeps design.md §11's 44px tap target; the note is outside .hk-shop's touch density. */
@media (pointer: coarse) {
    .hk-theme-preview-note > .btn {
        min-height: 2.75rem;
    }
}

/* ── 3. Product listing ──────────────────────────────────────────────────────
   CatalogListing's grid (/{p}/ListTemplates), laid out as the shop mockup does it (#2314). The list
   control's layout and display mode pick the columns. On a wide screen they are WebForms' own: portrait
   compact 5, normal 4, wide 3; landscape 4, 3, 2. Below that they step down sooner than WebForms did, to
   three from tablet width and two on a phone, so a tile is never narrower than its order controls.
   Landscape tiles stack like portrait ones in a wider frame (base.css §16); list is one row per object in
   a framed panel. The tiles of a row stretch to one height, which pins their buy blocks to one line.
   Every selector carries .hk-catalog, the listing's root, for the same reason as §2. */
.hk-catalog .hk-catalog-list {
    --hk-catalog-cols: 2;
    display: grid;
    grid-template-columns: repeat(var(--hk-catalog-cols), minmax(0, 1fr));
    gap: 1.5rem .75rem;
}

.hk-catalog .hk-catalog-list.hk-catalog-list-landscape.hk-catalog-wide { --hk-catalog-cols: 1; }

@media (min-width: 768px) {
    .hk-catalog .hk-catalog-list {
        --hk-catalog-cols: 3;
        gap: 1.5rem;
    }

    .hk-catalog .hk-catalog-list.hk-catalog-list-landscape.hk-catalog-wide { --hk-catalog-cols: 2; }
}

@media (min-width: 992px) {
    .hk-catalog .hk-catalog-list.hk-catalog-list-portrait.hk-catalog-compact { --hk-catalog-cols: 4; }
}

@media (min-width: 1200px) {
    .hk-catalog .hk-catalog-list.hk-catalog-list-portrait.hk-catalog-compact { --hk-catalog-cols: 5; }
    .hk-catalog .hk-catalog-list.hk-catalog-list-portrait.hk-catalog-normal,
    .hk-catalog .hk-catalog-list.hk-catalog-list-landscape.hk-catalog-compact { --hk-catalog-cols: 4; }
}

/* List: the rows in one framed panel, the thumbnail as wide as the display mode asks — WebForms' list
   thumbnails on a wide screen. */
.hk-catalog .hk-catalog-list.hk-catalog-list-list {
    --hk-catalog-cols: 1;
    --hk-catalog-thumb-w: 6.5rem;
    gap: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--hk-shop-radius);
    background: var(--hk-surface-raised);
}

.hk-catalog .hk-catalog-list.hk-catalog-list-list.hk-catalog-compact { --hk-catalog-thumb-w: 4rem; }
.hk-catalog .hk-catalog-list.hk-catalog-list-list.hk-catalog-wide { --hk-catalog-thumb-w: 10rem; }

/* The list control's filter and the list's own actions: a quiet panel above the products. */
.hk-catalog .hk-catalog-filter {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border-radius: var(--hk-shop-radius);
    background: var(--hk-surface-sunken);
}

.hk-catalog .hk-catalog-filter-actions,
.hk-catalog .hk-catalog-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.hk-catalog .hk-catalog-list-actions {
    margin-left: auto;
}

/* Over the products, the hit count with the sort at the end; under them, the pager over a rule. */
.hk-catalog .hk-catalog-toolbar,
.hk-catalog .hk-catalog-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

.hk-catalog .hk-catalog-toolbar {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-catalog .hk-catalog-bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-catalog .hk-catalog-hits {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-catalog .hk-catalog-pager {
    flex: 1 1 auto;
}

.hk-catalog .hk-catalog-pager .hk-grid-pager {
    margin-top: 0;
}

.hk-catalog .hk-catalog-sort {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.hk-catalog .hk-catalog-sort-label {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.hk-catalog .hk-catalog-sort .form-select {
    width: auto;
}

@media (max-width: 767.98px) {
    .hk-catalog .hk-catalog-sort {
        width: 100%;
        margin-left: 0;
    }

    .hk-catalog .hk-catalog-sort .form-select {
        flex: 1 1 auto;
    }
}

/* ── 4. Account pages ────────────────────────────────────────────────────────
   My account (#2314): the tabs drawn as the shop's menu bar, the account and password forms in a card, and My orders.
   My orders is the administration's OrderListingView over the "user" view, so its section cards and grid keep their
   markup; inside .hk-account-orders they take the shop's look instead: a white card with a plain head where the
   administration has its brand band, and the grid at the shop's text size. */
.hk-shop .hk-account-tabs .nav-tabs {
    gap: .25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-shop .hk-account-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--hk-control-height);
    margin-bottom: -1px;
    padding: 0 .875rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--bs-body-color);
    font-weight: 500;
}

.hk-shop .hk-account-tabs .nav-item:first-child .nav-link {
    padding-left: 0;
}

.hk-shop .hk-account-tabs .nav-link:hover {
    color: var(--bs-primary);
}

.hk-shop .hk-account-tabs .nav-link.active {
    border-bottom-color: var(--bs-primary);
    background: none;
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.hk-shop .hk-account-profile,
.hk-shop .hk-account-password {
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--hk-shop-radius);
    background: var(--hk-surface-raised);
}

.hk-shop .hk-account-profile {
    max-width: 48rem;
}

.hk-shop .hk-account-password {
    max-width: 40rem;
}

.hk-shop .hk-account-orders {
    --hk-grid-font-size: 0.875rem;
}

.hk-shop .hk-account-orders .hk-order-section {
    border-radius: var(--hk-shop-radius);
    box-shadow: none;
}

.hk-shop .hk-account-orders .hk-order-section-head {
    padding: 1rem 1.25rem;
    border-bottom-color: var(--bs-border-color);
    background: var(--hk-surface-raised);
    color: var(--bs-emphasis-color);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    /* The band points these at the on-primary colour; the plain head reads in the page's own. */
    --bs-secondary-color: inherit;
    --bs-link-color-rgb: inherit;
    --bs-link-hover-color-rgb: inherit;
}

.hk-shop .hk-account-orders .hk-order-section-body {
    background: var(--hk-surface-raised);
}