/**
 * Hyllkortet, pages: rules for single pages and page types. Fas 3 steg 5, planer/design/fas3-steg5/utrullning.md avsnitt 6.2.
 * Loaded on every page with the MyWineMatch template (functions.php, mwm_is_hk_page). Every rule starts with body.mwm-hk.
 * Order: mwm-hk-base.css, mwm-hk-shell.css, mwm-hk-components.css, mwm-hk-pages.css.
 *
 * Page types: front page, quiz, about, hubs, legal pages, profiles.
 */

/* ---------- Structure moved from mywinematch-components.css (steg 15) ----------
   :where() keeps the old specificity. The rules further down in this file win where they set the same thing. */

/* About. */
:where(body.mwm-hk) .about-manifesto {
  position: relative;
}

:where(body.mwm-hk) .pen-name-note {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 2rem;
  align-items: center;
}

:where(body.mwm-hk) .founder-mark {
  display: grid;
  aspect-ratio: 1;
  max-width: 320px;
  place-items: center;
  align-content: center;
  border-radius: 50%;
}

:where(body.mwm-hk) .founder-mark-small {
  width: 120px;
}

:where(body.mwm-hk) .about-start > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 680px) {
  :where(body.mwm-hk) .pen-name-note {
    grid-template-columns: 1fr;
  }

  :where(body.mwm-hk) .founder-mark {
    width: 180px;
  }
}

/* Front page. */
:where(body.mwm-hk) .hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
}

:where(body.mwm-hk) .hero-visual {
  position: relative;
  z-index: 2;
  align-self: center;
}

:where(body.mwm-hk) .hero-image-wrap {
  position: relative;
}

:where(body.mwm-hk) .hero-subhead {
  text-wrap: pretty;
}

:where(body.mwm-hk) .hero-action {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

:where(body.mwm-hk) .process-section {
  position: relative;
}

:where(body.mwm-hk) .section-intro {
  max-width: 430px;
  margin: 1.4rem 0 0;
}

:where(body.mwm-hk) .steps {
  position: relative;
  z-index: 1;
}

:where(body.mwm-hk) .process-heading h2,
:where(body.mwm-hk) .profile-intro h2,
:where(body.mwm-hk) .browse-heading h2 {
  max-width: 660px;
}

:where(body.mwm-hk) .hero-image-wrap img {
  object-position: 50% 55%;
}

:where(body.mwm-hk) .profile-intro > p {
  max-width: 450px;
  margin: 0 0 0.4rem;
}

:where(body.mwm-hk) .story-image {
  position: relative;
}

:where(body.mwm-hk) .story-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

:where(body.mwm-hk) .story-copy {
  position: relative;
}

:where(body.mwm-hk) .story-copy > p:not(.section-label) {
  margin: 0;
}

:where(body.mwm-hk) .profile-cta {
  justify-content: space-between;
}

:where(body.mwm-hk) .browse-section {
  position: relative;
  overflow: hidden;
}

:where(body.mwm-hk) .browse-heading,
:where(body.mwm-hk) .browse-grid,
:where(body.mwm-hk) .browse-quiz-link {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  :where(body.mwm-hk) .profile-intro > p {
    margin: 0;
  }

  :where(body.mwm-hk) .profile-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  :where(body.mwm-hk) .story-image img {
    min-height: 330px;
    object-position: 48% center;
  }
}

@media (max-width: 500px) {
  :where(body.mwm-hk) .hero-action {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---------- Images ---------- */

body.mwm-hk .firstleaf-media {
  margin: var(--mwm-space-7) 0 !important;
}

body.mwm-hk .article-content > .firstleaf-media:first-child {
  margin-top: 0 !important;
}

body.mwm-hk .firstleaf-media img {
  border: 0 !important;
  border-radius: 6px !important;
}

/* ---------- Profile overview and profile pages (utrullning.md 3.4) ---------- */

/* The eight profile names on /wine-profiles/ look like the links they are. No color per profile. */
body.mwm-hk .wine-profiles-hub-article .article-content h3 {
  margin: var(--mwm-space-6) 0 var(--mwm-space-1);
  font-size: 1.5rem;
}

body.mwm-hk .wine-profiles-hub-article .article-content h3 a {
  color: var(--mwm-bottle);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

body.mwm-hk .wine-profiles-hub-article .article-content h3 a:hover,
body.mwm-hk .wine-profiles-hub-article .article-content h3 a:focus-visible {
  text-decoration-thickness: 2px;
}

body.mwm-hk .wine-profiles-hub-article .article-content h3 + p {
  color: var(--mwm-ink);
}

/* Links in the profile pages' headings and paragraphs: wine, underlined. */
body.mwm-hk .wine-profile-article .article-content h3 a {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------- The main element of the other page kinds: no top padding, so the band meets the header ---------- */

body.mwm-hk .guide-index,
body.mwm-hk .legal-page,
body.mwm-hk .about-page {
  max-width: none;
  margin: 0;
  padding: 0 var(--mwm-gutter) var(--mwm-space-8);
}

/* ---------- Hubs: /guides/ and /wine-types/ (utrullning.md 3.3) ---------- */

body.mwm-hk .guide-index > figure,
body.mwm-hk .guide-index > .guide-card-list,
body.mwm-hk .guide-index > .article-cta {
  max-width: var(--mwm-column);
  margin-right: auto;
  margin-left: auto;
}

body.mwm-hk .guide-index > figure {
  margin-top: var(--mwm-space-7) !important;
}

/* The guide cards become a list: the heading as the link, one line of text, a thin line between. No number, no arrow. */
body.mwm-hk .guide-card-list {
  display: block;
  margin-top: var(--mwm-space-7);
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk .guide-card-list .guide-card {
  display: block;
  min-height: 0;
  padding: var(--mwm-space-5) 0;
  color: var(--mwm-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
  text-decoration: none;
}

body.mwm-hk .guide-card-list .guide-card:hover {
  background: none;
}

body.mwm-hk .guide-card-list .guide-card > span,
body.mwm-hk .guide-card-list .guide-card > b {
  display: none;
}

body.mwm-hk .guide-card-list .guide-card h2 {
  margin: 0 0 var(--mwm-space-1);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

body.mwm-hk .guide-card-list .guide-card:hover h2,
body.mwm-hk .guide-card-list .guide-card:focus-visible h2 {
  text-decoration-thickness: 2px;
}

body.mwm-hk .guide-card-list .guide-card p {
  max-width: var(--mwm-measure);
  margin: 0;
  color: var(--mwm-ink);
  font-size: 1rem;
  line-height: 1.55;
}

/* /wine-types/: the square picture stays, small, before the heading. */
body.mwm-hk .guide-card-list .guide-card figure {
  max-width: 200px !important;
  margin: 0 0 var(--mwm-space-3) !important;
}

/* A sentence with a link under the list is a plain link, not a button. */
body.mwm-hk .guide-index > .article-cta {
  margin-top: var(--mwm-space-6) !important;
  text-align: left !important;
}

body.mwm-hk .guide-index > .article-cta a {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ---------- About (utrullning.md 3.5) ---------- */

/* The page has its own <style> in the content (selectors up to 0,3,0). These rules are stronger. */
body.mwm-hk .mwm-hk-band .about-hero.about-founder-overlay {
  position: static;
  display: block;
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border-radius: 0;
  container-type: normal;
}

body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-copy {
  position: static;
  width: auto;
  padding: 0;
  color: #fff;
  background: none;
}

body.mwm-hk .mwm-hk-band .about-founder-overlay .section-label {
  margin: 0 0 var(--mwm-space-3);
  color: var(--mwm-leaf);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk .mwm-hk-band .about-founder-overlay h1 {
  max-width: 20ch;
  font-family: var(--mwm-font-head);
  font-weight: 700;
  letter-spacing: 0;
}

/* The two parts of the heading: the first at the band's heading size, the second a step smaller. */
body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-primary {
  display: block;
  font-size: var(--mwm-size-h1);
  line-height: 1.06;
  letter-spacing: 0;
}

body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-secondary {
  display: block;
  margin-top: var(--mwm-space-3);
  font-size: clamp(1.625rem, 1.4196rem + 0.8429vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: 0;
}

body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-rule {
  display: none;
}

body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-support {
  max-width: 40ch;
  margin: var(--mwm-space-4) 0 0;
  color: var(--mwm-leaf);
  font-family: var(--mwm-font-text);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* The signature on the green band: the dark ink becomes light, the paper disappears into the green. */
body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-signature {
  position: static;
  width: 220px;
  height: 80px;
  margin: var(--mwm-space-4) 0 0;
  overflow: hidden;
}

body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-signature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
  border-radius: 0 !important;
  filter: invert(1);
  mix-blend-mode: screen;
}

/* The photo beside the heading on desktop and after the button on mobile. */
body.mwm-hk .mwm-hk-band .mwm-hk-photo {
  margin: var(--mwm-space-6) 0 0;
}

body.mwm-hk .mwm-hk-band .mwm-hk-photo .founder-overlay-image {
  position: static;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: 1409 / 1116;
}

body.mwm-hk .mwm-hk-band .mwm-hk-photo .founder-overlay-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mwm-radius-media) !important;
}

@media (min-width: 761px) {
  body.mwm-hk .mwm-hk-band .about-founder-overlay .founder-overlay-support {
    font-size: 1.1875rem;
  }
}

@media (min-width: 1024px) {
  body.mwm-hk .mwm-hk-band .mwm-hk-photo {
    margin: 0;
  }
}

/* The story under the band. */
body.mwm-hk .about-story {
  max-width: var(--mwm-column);
  margin: var(--mwm-space-7) auto 0;
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-body);
}

body.mwm-hk .about-story > section:first-child {
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-body);
}

body.mwm-hk .about-story > section {
  margin-top: var(--mwm-space-h2);
}

body.mwm-hk .about-story p,
body.mwm-hk .about-story li {
  max-width: var(--mwm-measure);
  margin: 0 0 1em;
  line-height: var(--mwm-leading);
}

body.mwm-hk .about-story h2 {
  margin: 0 0 var(--mwm-space-4);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h2);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  text-wrap: balance;
}

body.mwm-hk .about-story h3 {
  margin: 0 0 var(--mwm-space-2);
  color: var(--mwm-ink);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h3);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

body.mwm-hk .about-story .section-label {
  margin: 0 0 var(--mwm-space-2);
  color: var(--mwm-ink-soft);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk .about-story .section-label::before {
  content: none;
  display: none;
}

body.mwm-hk .about-story p a:not(.primary-button) {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* The manifesto: a quote in bottle green on white with a line above. No big quotation mark. */
body.mwm-hk .about-story .about-manifesto {
  margin: var(--mwm-space-7) 0;
  padding: var(--mwm-space-5) 0 0;
  color: var(--mwm-bottle);
  background: none;
  border-top: 3px solid var(--mwm-bottle);
  border-radius: 0;
}

body.mwm-hk .about-story .about-manifesto > span {
  display: none;
}

body.mwm-hk .about-story .about-manifesto p {
  max-width: none;
  margin: 0;
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}

/* Beliefs: a plain list. The numbers 01 to 03 are decoration and are hidden. */
body.mwm-hk .about-story .belief-list {
  display: block;
  margin-top: var(--mwm-space-5);
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk .about-story .belief-list article {
  padding: var(--mwm-space-5) 0;
  background: none;
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk .about-story .belief-list article > span {
  display: none;
}

body.mwm-hk .about-story .belief-list h3 {
  margin-top: 0;
}

body.mwm-hk .about-story .pen-name-note {
  align-items: start;
}

body.mwm-hk .about-story .founder-mark-small {
  box-shadow: none;
}

body.mwm-hk .about-story .founder-mark-small img {
  border-radius: var(--mwm-radius-media);
}

body.mwm-hk .about-story .about-start > div {
  gap: var(--mwm-space-4);
  margin-top: var(--mwm-space-4);
}

body.mwm-hk .about-story .about-start .primary-button {
  margin-top: 0;
}

body.mwm-hk .about-story .founder-signoff {
  margin-top: var(--mwm-space-7);
  padding-top: var(--mwm-space-5);
  border-top: 1px solid var(--mwm-line);
}

/* ---------- Legal pages (utrullning.md 3.6): a narrow band, no button, a text column with side margins ---------- */

body.mwm-hk .legal-page > :not(.mwm-hk-band),
body.mwm-hk .mwm-hk-prose {
  max-width: var(--mwm-column);
  margin-right: auto;
  margin-left: auto;
}

body.mwm-hk .mwm-hk-band--enkel {
  padding-right: var(--mwm-gutter);
  padding-left: var(--mwm-gutter);
}

body.mwm-hk .mwm-hk-prose {
  padding: var(--mwm-space-7) var(--mwm-gutter) var(--mwm-space-8);
  box-sizing: content-box;
}

body.mwm-hk .legal-page > section:first-of-type {
  margin-top: var(--mwm-space-7);
}

body.mwm-hk .legal-page > section {
  margin-top: var(--mwm-space-h2);
}

body.mwm-hk .legal-page p,
body.mwm-hk .legal-page li,
body.mwm-hk .mwm-hk-prose p,
body.mwm-hk .mwm-hk-prose li {
  max-width: var(--mwm-measure);
  margin: 0 0 1em;
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-body);
  line-height: var(--mwm-leading);
}

/* Fas 3 steg 6: 1.25em between paragraphs, as in the articles. */
body.mwm-hk .legal-page p,
body.mwm-hk .mwm-hk-prose p,
body.mwm-hk .about-story p {
  margin-bottom: 1.25em;
}

body.mwm-hk .legal-page h2,
body.mwm-hk .mwm-hk-prose h2 {
  margin: 0 0 var(--mwm-space-4);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h2);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  text-wrap: balance;
}

body.mwm-hk .mwm-hk-prose h2 {
  margin-top: var(--mwm-space-h2);
}

body.mwm-hk .mwm-hk-prose > h2:first-child {
  margin-top: 0;
}

body.mwm-hk .legal-page h3,
body.mwm-hk .mwm-hk-prose h3 {
  margin: var(--mwm-space-6) 0 var(--mwm-space-2);
  color: var(--mwm-ink);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h3);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

body.mwm-hk .legal-page ul,
body.mwm-hk .mwm-hk-prose ul {
  max-width: var(--mwm-measure);
  padding-left: 1.25em;
  list-style: disc;
}

body.mwm-hk .legal-page a,
body.mwm-hk .mwm-hk-prose a {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.mwm-hk .legal-page a:hover,
body.mwm-hk .mwm-hk-prose a:hover {
  text-decoration-thickness: 2px;
}

body.mwm-hk .legal-page > section .section-label {
  color: var(--mwm-ink-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Front page (utrullning.md 4.4) ---------- */

/* section.hero is the band. */
body.mwm-hk .mwm-hk-band--startsida {
  position: relative;
  display: block;
  min-height: 0;
  max-width: var(--mwm-wide);
  margin: 0 auto;
  /* Fas 3 steg 6: 56 px below on mobile, so the curve (mwm-hk-components.css) has room. */
  padding: 28px var(--mwm-gutter) 56px;
  overflow: visible;
  color: #fff;
  background: none;
  border: 0;
  border-image: linear-gradient(var(--mwm-bottle), var(--mwm-bottle)) fill 0 / 0 / 0 100vw;
  box-shadow: none;
}

body.mwm-hk .mwm-hk-band--startsida::before,
body.mwm-hk .mwm-hk-band--startsida::after {
  content: none;
  display: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-corner,
body.mwm-hk .mwm-hk-band--startsida .editorial-rule,
body.mwm-hk .mwm-hk-band--startsida .hero-facts,
body.mwm-hk .mwm-hk-band--startsida .taste-stamp,
body.mwm-hk .mwm-hk-band--startsida .cta-disc {
  display: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-copy {
  max-width: none;
}

body.mwm-hk .mwm-hk-band--startsida .eyebrow {
  display: block;
  margin: 0 0 var(--mwm-space-3);
  padding: 0;
  color: var(--mwm-leaf);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

body.mwm-hk .mwm-hk-band--startsida .eyebrow::before,
body.mwm-hk .mwm-hk-band--startsida .eyebrow::after {
  content: none;
  display: none;
}

/* The three spans of the heading read as one line of text, without the indent. */
body.mwm-hk .mwm-hk-band--startsida h1 {
  max-width: 14ch;
}

body.mwm-hk .mwm-hk-band--startsida h1 span {
  display: inline;
  padding: 0;
}

body.mwm-hk .mwm-hk-band--startsida h1 span + span::before {
  content: " ";
}

body.mwm-hk .mwm-hk-band--startsida .hero-subhead {
  max-width: 40ch;
  margin: var(--mwm-space-4) 0 0;
  color: var(--mwm-leaf);
  font-family: var(--mwm-font-text);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

/* The hero's own quiz link is the band's button: the strong text is the mustard button, the small line stays under it. */
body.mwm-hk .mwm-hk-band--startsida .hero-action {
  margin: var(--mwm-space-5) 0 0;
}

body.mwm-hk .mwm-hk-band--startsida .hero-quiz-link {
  display: block;
  width: auto;
  color: var(--mwm-ink);
  text-decoration: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-quiz-copy {
  display: block;
}

body.mwm-hk .mwm-hk-band--startsida .hero-quiz-copy strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 28px;
  color: var(--mwm-ink);
  background: var(--mwm-mustard);
  border-radius: var(--mwm-radius);
  font-family: var(--mwm-font-text);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-quiz-link:hover .hero-quiz-copy strong,
body.mwm-hk .mwm-hk-band--startsida .hero-quiz-link:active .hero-quiz-copy strong {
  background: var(--mwm-mustard-deep);
}

body.mwm-hk .mwm-hk-band--startsida .hero-quiz-copy small {
  display: block;
  max-width: none;
  margin-top: var(--mwm-space-2);
  color: var(--mwm-leaf);
  font-size: 0.9375rem;
  line-height: 1.4;
}

body.mwm-hk .mwm-site .mwm-hk-band--startsida .hero-quiz-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* The picture: no arch, no inner frame, 6 px corners. After the button on mobile. */
body.mwm-hk .mwm-hk-band--startsida .hero-visual {
  width: 100%;
  max-width: 450px;
  margin: var(--mwm-space-6) 0 0;
}

body.mwm-hk .mwm-hk-band--startsida .hero-image-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--mwm-radius-media);
  box-shadow: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-image-wrap::after {
  content: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

body.mwm-hk .mwm-hk-band--startsida .hero-visual figcaption {
  position: static;
  margin-top: var(--mwm-space-2);
  padding: 0;
  color: var(--mwm-leaf);
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-visual figcaption span,
body.mwm-hk .mwm-hk-band--startsida .hero-visual figcaption p {
  display: inline;
  margin: 0;
  color: var(--mwm-leaf);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk .mwm-hk-band--startsida .hero-visual figcaption span {
  font-weight: 600;
}

body.mwm-hk .mwm-hk-band--startsida .hero-visual figcaption span::after {
  content: " ";
}

@media (min-width: 761px) {
  body.mwm-hk .mwm-hk-band--startsida {
    padding-top: var(--mwm-space-7);
    padding-bottom: 72px;
  }

  body.mwm-hk .mwm-hk-band--startsida .hero-subhead {
    font-size: 1.1875rem;
  }

  body.mwm-hk .mwm-hk-band--startsida .hero-quiz-link {
    display: inline-block;
  }

  body.mwm-hk .mwm-hk-band--startsida .hero-action {
    margin-top: 36px;
  }
}

@media (min-width: 1024px) {
  body.mwm-hk .mwm-hk-band--startsida {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--mwm-space-8);
    align-items: center;
    /* Fas 3 steg 6: 80 px above and 104 px below, as on the other pages. The medallion picture stays. */
    padding-top: 80px;
    padding-bottom: 104px;
  }

  body.mwm-hk .mwm-hk-band--startsida .hero-copy,
  body.mwm-hk .mwm-hk-band--startsida .hero-visual {
    grid-row: 1;
  }

  body.mwm-hk .mwm-hk-band--startsida .hero-copy {
    grid-column: 1;
  }

  body.mwm-hk .mwm-hk-band--startsida .hero-visual {
    grid-column: 2;
    margin: 0;
  }
}

/* Under the band: plain white sections in one column. */
body.mwm-hk.home .mwm-site > main > section:not(.hero) {
  max-width: var(--mwm-wide);
  margin: 0 auto;
  padding: var(--mwm-space-h2) var(--mwm-gutter) 0;
  color: var(--mwm-ink);
  background: none;
  border: 0;
  box-shadow: none;
}

body.mwm-hk.home .mwm-site > main > section:not(.hero)::before,
body.mwm-hk.home .mwm-site > main > section:not(.hero)::after,
body.mwm-hk.home .story-image::before,
body.mwm-hk.home .story-copy::after {
  content: none;
  display: none;
}

body.mwm-hk.home .mwm-site > main > section:last-child {
  padding-bottom: var(--mwm-space-8);
}

body.mwm-hk.home .mwm-site > main h2 {
  margin: 0 0 var(--mwm-space-4);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h2);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  text-wrap: balance;
}

body.mwm-hk.home .mwm-site > main h3 {
  margin: 0 0 var(--mwm-space-1);
  color: var(--mwm-ink);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h3);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

body.mwm-hk.home .mwm-site > main section:not(.hero) p {
  max-width: var(--mwm-measure);
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-body);
  line-height: var(--mwm-leading);
}

body.mwm-hk.home .mwm-site > main .section-label {
  margin: 0 0 var(--mwm-space-2);
  color: var(--mwm-ink-soft);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk.home .mwm-site > main .section-label::before,
body.mwm-hk.home .mwm-site > main .section-label::after {
  content: none;
  display: none;
}

/* The method: three steps, a real sequence. The numbers stay, in Zilla Slab bottle green. */
body.mwm-hk.home .process-section {
  display: block;
}

body.mwm-hk.home .process-heading {
  position: static;
  max-width: none;
}

body.mwm-hk.home .steps {
  display: block;
  margin: var(--mwm-space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk.home .steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--mwm-space-4);
  padding: var(--mwm-space-5) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
  box-shadow: none;
}

body.mwm-hk.home .steps li::before,
body.mwm-hk.home .steps li::after {
  content: none;
}

body.mwm-hk.home .steps span {
  grid-row: span 2;
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}

body.mwm-hk.home .steps h3,
body.mwm-hk.home .steps p {
  grid-column: 2;
  margin: 0;
}

body.mwm-hk.home .steps h3 a,
body.mwm-hk.home .profile-grid h3 a {
  color: var(--mwm-bottle);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* The story with the picture. */
body.mwm-hk.home .story-section {
  display: grid;
  gap: var(--mwm-space-6);
}

body.mwm-hk.home .story-image {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

body.mwm-hk.home .story-image img {
  border: 0;
  border-radius: var(--mwm-radius-media);
  box-shadow: none;
}

body.mwm-hk.home .story-image figcaption {
  position: static;
  margin-top: var(--mwm-space-2);
  padding: 0;
  color: var(--mwm-ink-soft);
  background: none;
  font-size: var(--mwm-size-small);
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk.home .story-copy {
  position: static;
  padding: 0;
  background: none;
  border: 0;
}

body.mwm-hk.home .taste-notes {
  display: block;
  margin: var(--mwm-space-4) 0;
  padding-left: 1.25em;
  list-style: disc;
}

body.mwm-hk.home .taste-notes li {
  display: list-item;
  padding: 0;
  color: var(--mwm-ink);
  background: none;
  border: 0;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 1024px) {
  body.mwm-hk.home .story-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--mwm-space-8);
  }
}

/* Fas 3 steg 6, Första glaset: "Your palate, translated" stands on grape skin to the window edges.
   Same method as the quiz boxes (mwm-hk-components.css). The section has only text and a text link, no unfilled control.
   Must come after the rule for every section under the band, whose border shorthand resets border-image. */
body.mwm-hk.home .mwm-site > main > section.story-section {
  margin-top: var(--mwm-space-h2);
  padding-top: var(--mwm-space-h2);
  padding-bottom: var(--mwm-space-h2);
  background: var(--mwm-grape);
  border-image: linear-gradient(var(--mwm-grape), var(--mwm-grape)) fill 0 / 0 / 0 100vw;
}

/* The eight profiles: a list of links, two columns on desktop. No color per profile and no numbers. */
body.mwm-hk.home .profile-intro {
  display: block;
}

body.mwm-hk.home .profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--mwm-space-7);
  margin: var(--mwm-space-5) 0 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}

body.mwm-hk.home .profile-grid .profile-item {
  display: block;
  padding: var(--mwm-space-4) 0;
  color: var(--mwm-ink);
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
  box-shadow: none;
  transform: none;
}

body.mwm-hk.home .profile-grid .profile-item::before,
body.mwm-hk.home .profile-grid .profile-item::after {
  content: none;
}

body.mwm-hk.home .profile-grid .profile-badge {
  display: none;
}

body.mwm-hk.home .profile-grid .profile-cue {
  margin: 0 0 var(--mwm-space-1);
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk.home .profile-grid h3 {
  font-size: 1.5rem;
}

body.mwm-hk.home .profile-grid .profile-item p {
  margin: 0;
}

@media (min-width: 761px) {
  body.mwm-hk.home .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The highlight strip repeats the subline. Hidden. The text stays in the database. */
body.mwm-hk.home .stat-strip {
  display: none !important;
}

/* Browse first: a plain list. No numbers. */
body.mwm-hk.home .browse-section > figure {
  max-width: var(--mwm-column) !important;
  margin: 0 0 var(--mwm-space-6) !important;
}

body.mwm-hk.home .browse-section > figure img {
  border-radius: var(--mwm-radius-media);
}

body.mwm-hk.home .browse-heading {
  display: block;
  max-width: none;
}

body.mwm-hk.home .browse-section .browse-grid,
body.mwm-hk.home .browse-section .browse-grid--four {
  display: block;
  max-width: var(--mwm-column);
  margin: var(--mwm-space-5) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk.home .browse-card {
  display: block;
  color: var(--mwm-ink);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk.home .browse-card article {
  padding: var(--mwm-space-5) 0;
  background: none;
  border: 0;
  box-shadow: none;
}

body.mwm-hk.home .browse-card article::before,
body.mwm-hk.home .browse-card article::after,
body.mwm-hk.home .browse-grid article::after {
  content: none;
  display: none;
}

body.mwm-hk.home .browse-number {
  display: none;
}

body.mwm-hk.home .browse-eyebrow {
  margin: 0 0 var(--mwm-space-1);
  color: var(--mwm-ink-soft);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk.home .browse-card h3 {
  color: var(--mwm-bottle);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

body.mwm-hk.home .browse-card:hover h3,
body.mwm-hk.home .browse-card:focus-visible h3 {
  text-decoration-thickness: 2px;
}

body.mwm-hk.home .browse-card p:last-child {
  margin: 0;
}

body.mwm-hk.home .browse-quiz-link,
body.mwm-hk.home .process-heading .text-link,
body.mwm-hk.home .story-copy .text-link {
  display: inline-block;
  margin-top: var(--mwm-space-5);
}

/* The arrows the theme drew in a span after the link text are hidden. */
body.mwm-hk.home .text-link > span[aria-hidden="true"] {
  display: none;
}

/* The old arches, circles and fixed heights on the front page are taken away. */
body.mwm-hk.home .steps li,
body.mwm-hk.home .profile-grid .profile-item,
body.mwm-hk.home .browse-card article {
  min-height: 0;
  overflow: visible;
  border-radius: 0;
  text-align: left;
}

body.mwm-hk.home .steps li {
  justify-content: normal;
}

body.mwm-hk.home .steps span {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

body.mwm-hk.home .steps h3 {
  margin: 0 0 var(--mwm-space-1);
  font-size: var(--mwm-size-h3);
}

body.mwm-hk.home .profile-grid .profile-item:nth-child(n) {
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

body.mwm-hk.home .browse-grid article:first-child {
  border-left: 0;
}

body.mwm-hk.home .browse-card article {
  border-right: 0;
  border-bottom: 0;
}

body.mwm-hk.home .browse-card h3 {
  margin: 0 0 var(--mwm-space-1);
  font-family: var(--mwm-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

body.mwm-hk.home .browse-heading {
  text-align: left;
}

body.mwm-hk.home .browse-heading h2 {
  max-width: none;
  margin: 0 0 var(--mwm-space-4);
}

body.mwm-hk.home .story-image {
  max-width: none !important;
}

body.mwm-hk.home .story-image figcaption {
  display: block;
  max-width: none;
  border: 0;
  text-align: left;
}

body.mwm-hk .mwm-hk-band--startsida .hero-visual figcaption {
  display: block;
  max-width: none;
  border-top: 0;
  text-align: left;
}

body.mwm-hk .mwm-hk-band--startsida .hero-visual figcaption p {
  text-align: left;
}

/* Fas 3 steg 6: on the front page the quiz box is a grape skin box in the column, not the full width band
   (mwm-hk-components.css), as in the sketch rekommendation-startsida.html. At least 20 px padding. */
body.mwm-hk.home .profile-section .profile-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mwm-space-4) var(--mwm-space-5);
  margin: var(--mwm-space-7) 0 0;
  padding: var(--mwm-space-5) 20px;
  background: var(--mwm-grape);
  border-image: none;
  border-radius: var(--mwm-radius-media);
}

@media (max-width: 760px) {
  body.mwm-hk.home .profile-section .profile-cta {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 761px) {
  body.mwm-hk.home .profile-section .profile-cta {
    padding: 28px var(--mwm-space-6);
  }
}

body.mwm-hk.home .profile-section .profile-cta p {
  margin: 0;
}

body.mwm-hk.home .profile-section .profile-cta .primary-button {
  margin-top: 0;
}

/* The old rule for the cue line uses !important, so these must too.
   Fas 3 steg 6, the loan from Provningsboken: the taste words come first and large, in Zilla Slab wine
   (13.0:1 on white), 19 px on mobile and 21 px from 761 px. The profile name follows as the link, smaller. */
body.mwm-hk.home .profile-grid .profile-cue {
  margin: 0 0 var(--mwm-space-1) !important;
  color: var(--mwm-wine) !important;
  font-family: var(--mwm-font-head) !important;
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body.mwm-hk.home .mwm-site > main .profile-grid h3 {
  margin: 0 0 2px;
  font-family: var(--mwm-font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

body.mwm-hk.home .mwm-site > main .profile-grid h3 a {
  color: var(--mwm-ink);
}

body.mwm-hk.home .mwm-site > main .profile-grid .profile-item p:not(.profile-cue) {
  color: var(--mwm-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 761px) {
  body.mwm-hk.home .profile-grid .profile-cue {
    font-size: 1.3125rem !important;
  }
}

body.mwm-hk.home .story-image figcaption {
  width: auto;
  margin: var(--mwm-space-2) 0 0;
  font-weight: 400;
}

/* ---------- The quiz (utrullning.md 4.2), theme CSS only ---------- */

/* The bundle's styles use #mywinematch-quiz .x (1,1,0) and the page's own style #mwm-quiz-page .x (1,1,1).
   Every rule here starts with body.mwm-hk and an id, so it is stronger. Texts and behavior are the bundle's. */

body.mwm-hk #mwm-quiz-page {
  max-width: none;
  padding: 0 var(--mwm-gutter) var(--mwm-space-8);
}

/* The hero is a short green band. */
body.mwm-hk #mwm-quiz-page .mwm-hk-band--quiz {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 0 88px;
  color: #fff;
  border-image: linear-gradient(var(--mwm-bottle), var(--mwm-bottle)) fill 0 / 0 / 0 100vw;
}

body.mwm-hk #mwm-quiz-page .mwm-quiz-hero h1 {
  max-width: none;
  margin: 0 0 var(--mwm-space-3);
  color: #fff;
  font-family: var(--mwm-font-head);
  font-size: clamp(2.125rem, 1.6607rem + 1.9048vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.06;
  text-wrap: balance;
}

body.mwm-hk #mwm-quiz-page .mwm-quiz-hero-copy > p {
  max-width: 44ch;
  margin: 0 0 var(--mwm-space-2);
  color: var(--mwm-leaf);
  font-family: var(--mwm-font-text);
  font-size: 1rem;
  line-height: 1.5;
}

body.mwm-hk #mwm-quiz-page .mwm-quiz-hero-copy .mwm-quiz-hero-note {
  margin: 0;
  color: var(--mwm-leaf);
  font-size: 0.9375rem;
}

/* The quiz card overlaps the band's lower edge by 40 px. No tilt: the tilt belongs to the verdict. */
body.mwm-hk #mwm-quiz-page #mywinematch-quiz {
  position: relative;
  z-index: 1;
  margin-top: -52px;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-app,
body.mwm-hk #mywinematch-quiz .mwm-quiz-app * {
  font-family: var(--mwm-font-text);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-app {
  color: var(--mwm-ink);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-card {
  background: #fff;
  border: 1px solid var(--mwm-line);
  border-radius: var(--mwm-radius-media);
  box-shadow: none;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-progress-heading {
  font-size: 0.9375rem;
  color: var(--mwm-ink-soft);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-step {
  color: var(--mwm-bottle);
  font-size: 0.9375rem;
  font-weight: 600;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-progress {
  background: var(--mwm-line);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-progress > div {
  background: var(--mwm-bottle);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-question-title {
  color: var(--mwm-ink);
  font-family: var(--mwm-font-head);
  font-size: clamp(1.8125rem, 1.6667rem + 0.5952vw, 2.125rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-option {
  min-height: 56px;
  color: var(--mwm-ink);
  background: #fff;
  border: 1px solid var(--mwm-control);
  border-radius: var(--mwm-radius);
  font-family: var(--mwm-font-text);
  font-size: 1.0625rem;
  font-weight: 400;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-option:hover,
body.mwm-hk #mywinematch-quiz .mwm-quiz-option[aria-pressed="true"] {
  background: var(--mwm-leaf);
  border-color: var(--mwm-bottle);
  box-shadow: inset 0 0 0 1px var(--mwm-bottle);
}

/* The emoji already has aria-hidden, so nothing is read out differently. */
body.mwm-hk #mywinematch-quiz .mwm-quiz-option-icon,
body.mwm-hk #mywinematch-quiz .mwm-quiz-profile-badge {
  display: none;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-primary {
  min-height: 54px;
  color: var(--mwm-ink);
  background: var(--mwm-mustard);
  border-radius: var(--mwm-radius);
  font-family: var(--mwm-font-text);
  font-size: 1.125rem;
  font-weight: 600;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-primary:hover {
  background: var(--mwm-mustard-deep);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-back {
  color: var(--mwm-wine);
  font-size: 0.9375rem;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-hint {
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-min);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-intro {
  color: var(--mwm-ink-soft);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-email-label {
  color: var(--mwm-ink);
  font-size: 0.9375rem;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-email-input {
  border: 1px solid var(--mwm-control);
  border-radius: var(--mwm-radius);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-consent {
  color: var(--mwm-ink-soft);
  font-size: 0.9375rem;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-error {
  font-family: var(--mwm-font-text);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-eyebrow {
  color: var(--mwm-ink-soft);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-result-summary h2,
body.mwm-hk #mywinematch-quiz .mwm-quiz-result-summary h2 * {
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-weight: 700;
  letter-spacing: 0;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-disclosure {
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-min);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-wines {
  display: block;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-wine {
  padding: var(--mwm-space-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
  border-radius: 0;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-wine h4 {
  color: var(--mwm-ink);
  font-family: var(--mwm-font-head);
  font-size: 1.375rem;
  font-weight: 700;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-wine p {
  color: var(--mwm-ink-soft);
  font-size: 0.9375rem;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-wine a {
  color: var(--mwm-wine);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-pairings {
  color: var(--mwm-ink-soft);
  font-size: 0.9375rem;
}

/* The club box: the only green surface on the result. White text, the link as the mustard button. */
body.mwm-hk #mywinematch-quiz .mwm-quiz-club {
  color: #fff;
  background: var(--mwm-bottle);
  border-radius: var(--mwm-radius-media);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-club .mwm-quiz-eyebrow,
body.mwm-hk #mywinematch-quiz .mwm-quiz-club > p {
  color: #fff;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-club > p:last-child {
  font-size: var(--mwm-size-min);
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-club > a {
  color: var(--mwm-ink);
  background: var(--mwm-mustard);
  border-radius: var(--mwm-radius);
  font-size: 1rem;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-club a:focus-visible,
body.mwm-hk #mywinematch-quiz .mwm-quiz-club button:focus-visible {
  outline-color: #fff;
}

body.mwm-hk #mywinematch-quiz .mwm-quiz-share {
  border: 1px solid var(--mwm-control);
  border-radius: var(--mwm-radius);
  color: var(--mwm-ink);
  font-size: 0.9375rem;
}

/* Under the quiz: the page's text in the article column. */
body.mwm-hk #mwm-quiz-page > .article-cta {
  text-align: left !important;
}

body.mwm-hk #mwm-quiz-page > .article-cta a {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.mwm-hk #mwm-quiz-page .quiz-seo-copy h2 {
  margin: var(--mwm-space-h2) 0 var(--mwm-space-4);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h2);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

body.mwm-hk #mwm-quiz-page .quiz-seo-copy h2:first-child {
  margin-top: 0;
}

body.mwm-hk #mwm-quiz-page .quiz-seo-copy p,
body.mwm-hk #mwm-quiz-page .quiz-seo-copy li {
  max-width: var(--mwm-measure);
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-body);
  line-height: var(--mwm-leading);
}

body.mwm-hk #mwm-quiz-page .quiz-seo-copy ul {
  padding-left: 1.25em;
  list-style: disc;
}

body.mwm-hk #mwm-quiz-page .quiz-seo-copy a {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (min-width: 761px) {
  body.mwm-hk #mwm-quiz-page .mwm-hk-band--quiz {
    padding-top: var(--mwm-space-7);
  }

  body.mwm-hk #mwm-quiz-page .mwm-quiz-hero-copy > p {
    font-size: 1.0625rem;
  }
}

/* ---------- Set on purpose before the old files go (steg 15) ----------
   These values came from the old stylesheets and showed through. They are replaced here by the Hyllkortet form. */

/* The story text no longer slides up over the picture on narrow screens. */
body.mwm-hk.home .story-copy {
  width: auto;
  margin: 0;
}

/* The small portrait on /about/: a thin line and leaf, no gold ring and no sage. */
body.mwm-hk .about-story .founder-mark-small {
  background: var(--mwm-leaf);
  border: 1px solid var(--mwm-line);
}

/* The taste words under the story are plain list text. */
body.mwm-hk.home .taste-notes li {
  font-family: var(--mwm-font-text);
}