/* ==========================================================================
   lyvorex-host.css – what the Atheox host adds to the LYVOREX look.

   lyvorex.css is the frontend's stylesheet (assets/styles.css of D:\Peptit_web\entwuerfe\website, copied by
   scripts/export-frontend.mjs and never edited). The CMS pages and the theme's shop pages carry the frontend's
   markup and get that stylesheet alone. This sheet dresses what the frontend never had: the markup the
   framework's scripts write into the theme's pages (the checkout's shipping and payment methods and messages of
   commerce-checkout.js), a few states of the shop the frontend had no page for (order page, not found), and the
   application pages with the base theme's Bootstrap markup (sign-in, registration, profile, customer account),
   which also load the base theme's stylesheets. It also holds the site's deliberate differences of look (CLAUDE.md,
   "Frontend fidelity"): the header's menus and the catalog's filters.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Checkout: the methods and messages commerce-checkout.js writes (Bootstrap's .form-check markup)
   -------------------------------------------------------------------------- */
.checkout-choices {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

/* One method: the radio, its name and its description below, in a box like the frontend's payment options. */
.checkout-choices .form-check {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface, #fffdf9);
}

.checkout-choices .form-check:has(input:checked) {
  border-color: var(--rose);
  box-shadow: inset 0 0 0 1px var(--rose);
}

/* The frontend's form fields (.lyvorex-form input:not([type="checkbox"])) would make the radio a full-width field. */
.lyvorex-form .checkout-choices input[type="radio"] {
  display: inline-block;
  flex: none;
  float: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--rose);
}

.checkout-choices .form-check-label {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.5;
}

.checkout-choices .commerce-payment-description {
  flex-basis: 100%;
  padding-left: 32px;
}

.checkout-choices p,
.checkout-choices .small,
.checkout-choices small {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* The texts the frontend's line above the rates already says are empty (Checkout.cshtml). */
.checkout-choices p:empty,
.checkout-choices:empty {
  display: none;
}

.checkout-choices .text-warning {
  color: #8a5a00;
}

.checkout-choices .text-muted {
  color: var(--muted);
}

.checkout-message:empty {
  display: none;
}

.checkout-message .alert {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 0;
  border-left: 3px solid var(--rose);
  border-radius: 0;
  background: #f0e4d9;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.checkout-message .alert-danger,
.checkout-message .alert-warning {
  border-color: #942323;
  background: #fff3ef;
  color: #942323;
}

.d-none {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Order page
   -------------------------------------------------------------------------- */
.preline {
  white-space: pre-line;
}

.commerce-bank-account {
  display: grid;
  grid-template-columns: minmax(130px, 0.4fr) 1fr;
  gap: 10px 18px;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.commerce-bank-account dd {
  margin: 0;
}

.confirmation-actions a + a {
  margin-left: 18px;
}

/* The Commerce storefront's floating cart button duplicates the header's bag. */
.commerce-cartfab {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Cookie consent (the Compliance module's banner, default skin): the frontend has none of its own, so it gets the
   look of the frontend's panels (the cart drawer): pearl ground, the frontend's fonts and buttons, the rose accent.
   The banner's colour settings (inline custom properties) are set here; the theme draws the banner.
   -------------------------------------------------------------------------- */
#atheox-consent-banner {
  --consent-primary: var(--rose) !important;
  --consent-bg: var(--pearl) !important;
  --consent-text: var(--ink) !important;
  border-top: 1px solid var(--rule-soft, var(--line));
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font);
  box-shadow: 0 -24px 80px #17181c26;
}

#atheox-consent-banner .consent-banner__title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

#atheox-consent-banner .consent-banner__description,
#atheox-consent-banner .consent-category__description {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

#atheox-consent-banner a {
  color: var(--rose);
}

#atheox-consent-banner .consent-btn {
  min-height: 50px;
  padding: 13px 23px;
  border-radius: 5px;
  color: var(--ink);
  font: 650 15px/1.2 var(--font);
}

#atheox-consent-banner .consent-btn--primary {
  border: 1px solid #bb8c79;
  background: linear-gradient(115deg, #ebcfc1, #f0dacf 35%, #c99a86);
  box-shadow: 0 1px 0 #fff9 inset;
}

#atheox-consent-banner .consent-btn--primary:hover {
  box-shadow: 0 4px 20px #a4755633;
}

#atheox-consent-banner .consent-btn--secondary {
  border: 1px solid var(--rose);
  background: #f8f5f080;
}

#atheox-consent-banner .consent-btn--outline {
  border-color: transparent;
  background: none;
  color: var(--rose);
}

#atheox-consent-banner .consent-category,
#atheox-consent-banner .consent-banner__preferences {
  border-color: var(--rule-soft, var(--line));
}

#atheox-consent-banner .consent-category__name {
  color: var(--ink);
  font-weight: 600;
}

#atheox-consent-banner .consent-category__badge {
  background: var(--champagne);
  color: var(--ink);
}

/* The switch of a category: the frontend's field rules (padding, border, height of its inputs) would squeeze it. */
#atheox-consent-banner .consent-category__toggle {
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--line);
}

#atheox-consent-banner .consent-category__toggle:checked {
  background: var(--rose);
}

#atheox-consent-banner :focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Application pages (sign-in, registration, profile, customer account): the base theme's Bootstrap markup in the
   frontend's type, colours and width. They load the base theme's stylesheets before the frontend's.
   -------------------------------------------------------------------------- */
.lyvorex-app main > .app-shell {
  width: min(var(--content-wide, 1600px), calc(100% - 2 * var(--space)));
  min-height: 50vh;
  margin: 0 auto;
  padding: 24px 0 72px;
}

.lyvorex-app .page-header {
  margin: 8px 0 24px;
}

.lyvorex-app .page-title,
.lyvorex-app .app-shell h1 {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
}

.lyvorex-app .app-shell h2,
.lyvorex-app .app-shell h3,
.lyvorex-app .app-shell h4,
.lyvorex-app .app-shell h5 {
  font-family: var(--display);
  font-weight: 500;
}

/* The frontend's product card and carousel share Bootstrap's class names; on these pages they are Bootstrap's. */
.lyvorex-app .app-shell .card {
  display: block;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface, #fffdf9);
  box-shadow: none;
  transform: none;
}

.lyvorex-app .app-shell .card:hover {
  transform: none;
  box-shadow: none;
}

.lyvorex-app .btn {
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
}

.lyvorex-app .btn-primary {
  border: 1px solid #bb8c79;
  background: linear-gradient(115deg, #ebcfc1, #f0dacf 35%, #c99a86);
  color: var(--ink);
  box-shadow: 0 1px 0 #fff9 inset;
}

.lyvorex-app .btn-primary:hover,
.lyvorex-app .btn-primary:focus {
  border-color: #bb8c79;
  background: linear-gradient(115deg, #ebcfc1, #f0dacf 35%, #c99a86);
  color: var(--ink);
  box-shadow: 0 4px 20px #a4755633;
}

.lyvorex-app .btn-outline-primary,
.lyvorex-app .btn-outline-secondary,
.lyvorex-app .btn-secondary {
  border: 1px solid var(--rose);
  background: transparent;
  color: var(--rose);
}

/* The page's own links; the header and footer keep the frontend's. */
.lyvorex-app main a:not(.btn):not(.button) {
  color: var(--rose);
}

.lyvorex-app .app-shell .card-header .card-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

.lyvorex-app .form-control,
.lyvorex-app .form-select {
  min-height: 48px;
  border: 1px solid #aa9282;
  border-radius: 4px;
  background-color: #fffaf5;
  color: var(--ink);
  font: inherit;
}

.lyvorex-app .form-control:focus,
.lyvorex-app .form-select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px #8d5b5026;
}

.lyvorex-app .form-label {
  font-weight: 600;
  font-size: 15px;
}

/* Bootstrap floats its checkboxes into the padding; the frontend's .form-check is a flex row. A label wraps: up to
   Atheox 3.0.5 the base theme's admin-base.css cut a checkbox label to one line on public pages too, which a consent
   must not be. */
.lyvorex-app .form-check {
  align-items: center;
  padding-left: 0;
}

.lyvorex-app .form-check .form-check-input {
  float: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
}

.lyvorex-app .form-check .form-check-input + .form-check-label {
  margin: 0;
  padding: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.lyvorex-app .form-check-input:checked {
  border-color: var(--rose);
  background-color: var(--rose);
}

.lyvorex-app .nav-tabs .nav-link.active {
  border-bottom-color: var(--rose);
  color: var(--rose);
}

.lyvorex-app .table {
  --bs-table-bg: transparent;
  color: var(--ink);
}

.lyvorex-app .alert {
  border-radius: 0;
  border-left: 3px solid var(--rose);
}

.lyvorex-app .page-link {
  color: var(--rose);
}

.lyvorex-app .page-item.active .page-link {
  border-color: var(--rose);
  background: var(--rose);
  color: #fff;
}

/* --------------------------------------------------------------------------
   The header's menus: the navigation's Atheox mega menus (_LyvorexHeader, an entry's mega panel such as the CMS
   section "produkte-menue" of the products entry) and the sub-entries of an entry, in the site's own design; the
   frontend has a plain list of links there. The arrow is drawn: the frontend's "⌄" is a glyph the fonts lack, which
   a fallback font sets small and low. It keeps the glyph's box (8px wide, 8px from the label), so the closed header
   stays the frontend's.
   -------------------------------------------------------------------------- */
.mega summary {
  cursor: pointer;
  transition: color 0.2s ease;
}

.mega summary::-webkit-details-marker {
  display: none;
}

.mega summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.75 4 5.75 7 2.75' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.75 4 5.75 7 2.75' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
  transition: transform 0.2s ease;
}

.mega summary:hover,
.mega[open] summary {
  color: var(--rose);
}

.mega[open] summary::after {
  transform: rotate(180deg);
}

/* The sheet below the header that holds a mega panel or an entry's sub-entries. */
.mega-sheet {
  display: block;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 34px 60px -34px #5b45353d, var(--shadow);
  animation: mega-open 0.22s ease both;
}

.mega-sheet > div:last-child {
  columns: auto;
}

@keyframes mega-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-sheet {
    animation: none;
  }
}

/* The products menu: the catalog's introduction, its substance groups and the products the shop features. */
.mega-menu {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(0, 2fr) minmax(250px, 1fr);
  hyphens: manual;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 44px var(--space) 48px;
}

.mega-menu > div {
  padding: 0 clamp(24px, 3vw, 48px);
}

.mega-menu > div:first-child {
  padding-left: 0;
}

.mega-menu > div:last-child {
  padding-right: 0;
}

.mega-menu > div + div {
  border-left: 1px solid var(--rule-soft);
}

.mega-menu h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(32px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
}

.mega-menu h3 {
  margin: 0 0 14px;
  font: 600 12px/1.4 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mega-intro .eyebrow {
  margin-bottom: 10px;
}

.mega-intro > p:not([class]) {
  max-width: 34ch;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.mega-panel .mega-intro .button {
  display: inline-flex;
  min-height: 46px;
  font-size: 14px;
}

.mega-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 18px 0 0;
}

.mega-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mega-links a::after {
  content: "↗";
  margin-left: 6px;
  color: var(--metal);
}

.mega-links a:hover {
  color: var(--rose);
}

/* The substance groups (data-lyvorex-groups="links"): two columns, each group with its number of products. */
.mega-panel [data-lyvorex-groups="links"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.mega-panel [data-lyvorex-groups="links"] a,
.mega-panel .mega-children a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.mega-panel [data-lyvorex-groups="links"] small {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.mega-panel [data-lyvorex-groups="links"] a:hover,
.mega-panel .mega-children a:hover {
  background: var(--champagne);
  color: var(--rose);
}

.mega-panel [data-lyvorex-groups="links"] a:hover small {
  color: var(--rose);
}

/* The products the shop features (data-lyvorex-products="menu"): small cards with image, name and group. */
.mega-panel [data-lyvorex-products="menu"] {
  display: grid;
  gap: 12px;
}

.mega-panel .mega-product {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mega-product img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--pearl);
}

.mega-product strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.mega-product small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.mega-panel .mega-product:hover {
  border-color: var(--glow);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* An entry's sub-entries: one row of links. */
.mega-menu.mega-children {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 36px;
  padding-top: 26px;
  padding-bottom: 30px;
}

.mega-menu.mega-children a {
  margin: 0;
}

/* Between the small screens' menu and a wide header: the featured products below the groups. */
@media (max-width: 1099px) {
  .mega-menu {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.7fr);
    row-gap: 28px;
  }

  .mega-menu > .mega-featured {
    grid-column: 1 / -1;
    padding: 28px 0 0;
    border-top: 1px solid var(--rule-soft);
    border-left: 0;
  }

  .mega-panel .mega-featured [data-lyvorex-products="menu"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   The site's own design where it differs from the frontend's on purpose:
   - the catalog's filters: each filter's head is one row with a drawn chevron on the right, without the browser's
     black triangle and the summaries' padding above it, and the report check box takes the fields' border and the
     site's rose instead of the system's grey box; the frontend keeps the browser's own;
   - the logo: the glycine molecule (brand/lyvorex-logo.svg, written by LyvorexUi.Logo, 1.6 : 1) where the frontend
     has its hexagon mark, and the wordmark in the serif of the product labels, in the box of the frontend's brand;
   - the page's container beyond 1440 pixels, as Atheox lays out its pages.
   scripts/compare-frontend.mjs gives the frontend's page the rules between the two markers, and the logo, before it
   compares, so they stay between them.
   -------------------------------------------------------------------------- */
/* compare-frontend: begin */
@media screen {
  .filters details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0;
    line-height: 1.1;
    list-style: none;
  }

  .filters details > summary::-webkit-details-marker {
    display: none;
  }

  .filters details > summary::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin: -5px 6px 0 0;
    border-right: 1.5px solid var(--rose);
    border-bottom: 1.5px solid var(--rose);
    transform: rotate(45deg);
  }

  .filters details[open] > summary::after {
    margin-top: 5px;
    transform: rotate(-135deg);
  }

  .filters details > summary:hover {
    color: var(--rose);
  }

  .filters .check input {
    appearance: none;
    flex: none;
    width: 22px;
    height: 22px;
    min-height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid #a39183;
    border-radius: 4px;
    background: var(--surface) center / 14px no-repeat;
    cursor: pointer;
  }

  .filters .check input:hover {
    border-color: var(--rose);
  }

  .filters .check input:checked {
    border-color: var(--rose);
    background-color: var(--rose);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .filters .check input:focus-visible {
    outline: 3px solid var(--rose);
    outline-offset: 3px;
  }
}

/* The logo in the header and the footer and the wordmark beside it, in the box of the frontend's brand (its mark 36 x
   44 beside its wordmark: 192 x 53, below 768 pixels 157 x 47, below 375 pixels 132 x 42): no wider, as tall. The
   header has no room for a wider brand: at 768 and 1280 pixels the navigation breaks into two lines, at 320 the
   buttons leave the screen. scripts/compare-frontend.mjs checks the box. */
.brand {
  gap: 12px;
  min-height: 52.8px;
}

.brand .lyvorex-logo {
  flex: none;
  width: 64px;
  height: 40px;
}

.brand > span {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.brand small {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4em;
}

/* The offer page's sheet, the confirmations (the frontend's image: 45 x 55) and the products' print sheets. */
.quote-brand .lyvorex-logo {
  flex: none;
  width: 64px;
  height: 40px;
}

.quote-brand span {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.quote-brand small {
  font-family: var(--font);
  font-weight: 500;
}

.inquiry-confirmation > .lyvorex-logo {
  width: 88px;
  height: 55px;
}

.print-only .lyvorex-logo {
  width: 104px;
  height: 65px;
}

@media (max-width: 767px) {
  .brand {
    gap: 8px;
    min-height: 46.8px;
  }

  .brand .lyvorex-logo {
    width: 48px;
    height: 30px;
  }

  .brand > span {
    font-size: 20px;
  }

  .brand small {
    font-size: 11px;
    letter-spacing: 0.35em;
  }
}

@media screen and (max-width: 374px) {
  .brand {
    gap: 6px;
    min-height: 42.4px;
  }

  .brand .lyvorex-logo {
    width: 40px;
    height: 25px;
  }

  .brand > span {
    font-size: 17px;
  }

  .brand small {
    font-size: 10px;
    letter-spacing: 0.3em;
  }
}

/* The page in a container, as Atheox lays out its pages (its container stops growing at 1320 px): beyond 1440 pixels
   the header with its menus, the content and the footer keep the frontend's width at 1440 pixels, 1296 px of content,
   and stay centred. The frontend's gutter stops growing at 80 px instead, so its header and footer run to the
   window's edges while its sections stop at 1600 px. Every block the frontend sets on the page's width pads itself
   with --space, which grows here beyond 1440 pixels; its backgrounds still span the window. Up to 1440 pixels
   nothing changes. */
:root {
  --page-gutter: clamp(24px, 5vw, 80px);
  --space: max(var(--page-gutter), calc((100vw - 1296px) / 2));
  --content-wide: 100%;
}

.page-hero {
  max-width: none;
}

/* The article's head keeps its measure, centred as in the frontend. */
.article-head {
  max-width: calc(1100px - 2 * var(--page-gutter) + 2 * var(--space));
}

@media (min-width: 1760px) {
  .open-data {
    max-width: none;
    margin-inline: var(--space);
  }
}

/* The hero (a deliberate difference): its image, the generated still (hero-first-frame), covers the hero behind the
   copy as a normal hero's image does, where the frontend fits its still into the right three quarters over a backdrop
   and below the copy on small screens. The hero keeps the frontend's height. Beyond 1440 pixels the image keeps the
   width of the page's band (as header and content do), centred, and fades out at its sides into the hero's
   background, so the products stay as large as at 1440 pixels instead of growing out of the hero. On small screens
   the copy stands on a light veil over the image. LyvorexUi.WithHeroStill leaves out the frontend's film, its pause
   button and the backdrop. */
.hero-image {
  --hero-fade: clamp(0px, (100vw - 1440px) / 2, 120px);
  inset: 0 auto 0 max(0px, 50% - 720px);
  width: min(100%, 1440px);
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  mask-image: linear-gradient(90deg, transparent, #000 var(--hero-fade), #000 calc(100% - var(--hero-fade)), transparent);
}

@media (max-width: 767px) {
  .hero-image {
    object-position: 78% 50%;
  }

  .hero:after {
    background: linear-gradient(#f8f5f0e6 0%, #f8f5f0d1 40%, #f8f5f08c 60%, #f8f5f000 80%);
  }
}

/* The language switch (a deliberate difference, _LyvorexLanguages): the flag of the page's language among the header's
   actions, as large a target as its icons, and the site's languages below it in the look of the header's menus. */
.language-menu {
  position: relative;
}

.language-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  list-style: none;
  cursor: pointer;
}

.language-menu > summary::-webkit-details-marker {
  display: none;
}

.language-menu .flag {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #22252a1f;
}

.language-menu > summary:hover .flag,
.language-menu[open] > summary .flag {
  box-shadow: 0 0 0 1px var(--metal);
}

.language-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 184px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 48px -28px #5b45353d, var(--shadow);
}

.language-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

.language-panel a:hover,
.language-panel a:focus-visible {
  background: var(--champagne);
}

.language-panel a[aria-current] {
  color: var(--rose);
  font-weight: 600;
}

@media (max-width: 767px) {
  .language-menu > summary {
    padding: 6px;
  }
}

@media (max-width: 374px) {
  .language-menu > summary {
    min-width: 36px;
  }
}
/* compare-frontend: end */