/* ============================================================
   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)
   ============================================================ */

/* ── 1. Storefront information page ─────────────────────────────────────────
   The page body is tenant HTML built by InformationPageService and rendered raw,
   so no scoped stylesheet reaches it; these are the WebForms infopage-* rules. */
.hk-info-page .hk-info-row {
    row-gap: 1rem;
}

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

.hk-info-page .infopage-image-container {
    position: relative;
}

.hk-info-page .infopage-image-container a {
    text-decoration: none;
}

.hk-info-page .infopage-image {
    display: block;
    width: 100%;
    height: auto;
}

.hk-info-page .infopage-image-text-container {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.hk-info-page .infopage-image-label,
.hk-info-page .infopage-image-text {
    margin: 0;
    padding: 0 20px;
    background-color: #000;
    color: #fff;
}

.hk-info-page .infopage-image-label {
    font-size: .8rem;
}

.hk-info-page .infopage-image-label-below,
.hk-info-page .infopage-image-text-below,
.hk-info-page .infopage-image-price-below {
    margin: .25rem 0 0;
    text-align: center;
    line-height: 1.125rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.hk-info-page .infopage-image-text-below {
    font-size: .75rem;
}