/**
 * Hyllkortet, components: band, shelf card, buttons, tables and FAQ. 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.
 *
 * The green band with the heading and the quiz button, and the shelf card that hangs over its lower edge.
 */

/* ---------- 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. */

/* The article with the table of contents in a column to the left on desktop. */
:where(body.mwm-hk) .article-grid {
  display: grid;
  grid-template-columns: minmax(170px, 235px) minmax(0, 760px);
  justify-content: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

:where(body.mwm-hk) .article-toc {
  position: sticky;
  top: 1.5rem;
  padding: 1.35rem 0;
  border-block: 1px solid var(--mwm-line);
}

:where(body.mwm-hk) .article-toc ol {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(body.mwm-hk) .article-content {
  min-width: 0;
}

/* An anchor jump stops a little above the section heading. */
:where(body.mwm-hk) .article-content > section,
:where(body.mwm-hk) .article-content > .faq-section,
:where(body.mwm-hk) .article-content > .related-guides {
  scroll-margin-top: 2rem;
}

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

:where(body.mwm-hk) .style-card dl > div {
  padding: 0.7rem 0;
  border-top: 1px solid var(--mwm-line);
}

@media (max-width: 900px) {
  :where(body.mwm-hk) .article-grid {
    grid-template-columns: 1fr;
  }

  :where(body.mwm-hk) .article-toc {
    position: static;
  }

  :where(body.mwm-hk) .article-toc ol {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  :where(body.mwm-hk) .article-toc ol {
    grid-template-columns: 1fr;
  }
}

/* On narrow screens buttons in the text take the full width. */
@media (max-width: 500px) {
  :where(body.mwm-hk) .primary-button,
  :where(body.mwm-hk) .secondary-button {
    width: 100%;
  }
}

/* A quiz link in running text: the old inline form, without the old colors and sizes. */
:where(body.mwm-hk) .text-link {
  width: max-content;
  display: inline-flex;
  gap: 0.75rem;
  margin-top: 1.8rem;
  padding-bottom: 0.25rem;
}

/* ---------- Layout ---------- */

body.mwm-hk .article-page {
  padding: 0 var(--mwm-gutter) var(--mwm-space-8);
}

body.mwm-hk .article-content {
  padding-top: var(--mwm-space-7);
}

/* Fas 3 steg 6: 72 px before a new section on mobile and 96 px on desktop (--mwm-space-h2, mwm-hk-base.css). */
body.mwm-hk .article-content > section,
body.mwm-hk .article-content > .faq-section {
  margin-top: var(--mwm-space-h2);
}

/* ---------- The green band: label, heading, subline, quiz button, byline and the shelf card ---------- */

/* The band color reaches the edges of the window through border-image outset,
   which paints outside the box without making the page wider. */
body.mwm-hk .mwm-hk-band {
  /* flow-root keeps the card's negative bottom margin inside the band, so the card reaches past the green. */
  display: flow-root;
  max-width: var(--mwm-wide);
  margin: 0 auto;
  padding: 28px 0 0;
  color: #fff;
  border-image: linear-gradient(var(--mwm-bottle), var(--mwm-bottle)) fill 0 / 0 / 0 100vw;
}

body.mwm-hk .mwm-hk-band:not(:has(.mwm-hk-tag)) {
  padding-bottom: var(--mwm-space-6);
}

/* Fas 3 steg 6, Första glaset: a soft curve at the band's lower edge, like the bottom of a glass.
   32 px deep on mobile and 56 px from 761 px. The band's green is a border-image that reaches the window edges,
   and border-radius does not cut a border-image. So the two lower corners are painted over in page white:
   a zero wide box in the band's middle whose border-image reaches 50vw to each side, which is ink overflow and
   never makes the page wider. Inside the half ellipse the image is transparent, so the green shows.
   The card and the quiz card stand above it (z-index 1). */
body.mwm-hk .mwm-hk-band {
  --mwm-band-curve: 32px;
  position: relative;
  padding-top: 36px;
}

body.mwm-hk .mwm-site .mwm-hk-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 50%;
  display: block;
  width: 0;
  height: var(--mwm-band-curve);
  border-image: radial-gradient(farthest-side at 50% 0, transparent 99%, var(--mwm-page) 100%) fill 0 / 0 / 0 50vw;
  pointer-events: none;
}

body.mwm-hk .mwm-hk-band:not(:has(.mwm-hk-tag)) {
  padding-bottom: 40px;
}

/* The page's own heading block inside the band: no frame, no paper, no centering. */
body.mwm-hk .mwm-hk-band__main > header,
body.mwm-hk .mwm-hk-band .article-hero {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  border: 0;
  background: none;
  box-shadow: none;
}

body.mwm-hk .mwm-hk-band__main > header::before,
body.mwm-hk .mwm-hk-band__main > header::after,
body.mwm-hk .mwm-hk-band .article-hero::before,
body.mwm-hk .mwm-hk-band .article-hero::after {
  content: none;
}

body.mwm-hk .mwm-hk-band .article-corner {
  display: none;
}

/* The label above the heading: sentence case as written, no letter spacing, no gold, no rule before. */
body.mwm-hk .mwm-hk-band .section-label {
  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 .section-label::before,
body.mwm-hk .mwm-hk-band .section-label::after {
  content: none;
  display: none;
}

body.mwm-hk .mwm-hk-band h1 {
  max-width: 20ch;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h1);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.06;
  text-align: left;
  text-transform: none;
  text-wrap: balance;
}

body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) h1 {
  max-width: 12ch;
}

/* The subline under the heading. */
body.mwm-hk .mwm-hk-band .article-dek,
body.mwm-hk .mwm-hk-band .article-hero-sub,
body.mwm-hk .mwm-hk-band__main > header > p:not(.section-label):not(.mwm-hk-cta) {
  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-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

/* The byline: after the button, parts apart by space, no dots. */
body.mwm-hk .mwm-hk-band .article-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--mwm-space-1) var(--mwm-space-4);
  margin: var(--mwm-space-5) 0 0;
  color: var(--mwm-leaf);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

body.mwm-hk .mwm-hk-band .article-byline > *::before,
body.mwm-hk .mwm-hk-band .article-byline > *::after {
  content: none;
}

body.mwm-hk .mwm-hk-band .article-byline a {
  color: var(--mwm-leaf);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

body.mwm-hk .mwm-hk-band .article-byline a:hover {
  color: #fff;
}

body.mwm-hk .mwm-hk-band .mwm-hk-cta {
  max-width: none;
  margin: var(--mwm-space-5) 0 0;
}

/* Disclosure first in the band (functions.php, mwm_hk_find_disclosure). Only when the content marks a block
   with the class mwm-disclosure. Leaf on bottle green, 8,3:1. Links in leaf, focus white (mwm-hk-base.css). */
body.mwm-hk .mwm-hk-band .mwm-hk-disclosure {
  margin: 0 0 var(--mwm-space-5);
  padding: 0 0 var(--mwm-space-4);
  border-bottom: 1px solid rgba(227, 236, 230, 0.35);
}

body.mwm-hk .mwm-hk-band .mwm-hk-disclosure > *,
body.mwm-hk .mwm-hk-band .mwm-hk-disclosure p {
  max-width: var(--mwm-measure);
  margin: 0 0 var(--mwm-space-2);
  padding: 0;
  color: var(--mwm-leaf);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
}

body.mwm-hk .mwm-hk-band .mwm-hk-disclosure > *:last-child,
body.mwm-hk .mwm-hk-band .mwm-hk-disclosure p:last-child {
  margin-bottom: 0;
}

body.mwm-hk .mwm-hk-band .mwm-hk-disclosure em,
body.mwm-hk .mwm-hk-band .mwm-hk-disclosure i {
  font-style: normal;
}

body.mwm-hk .mwm-hk-band .mwm-hk-disclosure strong,
body.mwm-hk .mwm-hk-band .mwm-hk-disclosure b,
body.mwm-hk .mwm-hk-band .mwm-hk-disclosure .section-label {
  display: inline;
  margin: 0;
  color: #fff;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk .mwm-hk-band .mwm-hk-disclosure .section-label::before,
body.mwm-hk .mwm-hk-band .mwm-hk-disclosure .section-label::after {
  content: none;
}

body.mwm-hk .mwm-hk-band .mwm-hk-disclosure a {
  color: var(--mwm-leaf);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

body.mwm-hk .mwm-hk-band .mwm-hk-disclosure a:hover {
  color: #fff;
}

@media (min-width: 1024px) {
  body.mwm-hk .mwm-hk-band .mwm-hk-disclosure {
    grid-column: 1 / -1;
    align-self: start;
  }

  /* In the grid the gap already gives the air below. */
  body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) > .mwm-hk-disclosure,
  body.mwm-hk .mwm-hk-band:has(.mwm-hk-photo) > .mwm-hk-disclosure {
    margin-bottom: 0;
  }
}

/* The line under the button: leaf on bottle green, 8,3:1. */
body.mwm-hk .mwm-hk-band .mwm-hk-cta__note {
  max-width: none;
  margin: var(--mwm-space-2) 0 0;
  padding: 0;
  color: var(--mwm-leaf);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

/* The narrow band on the legal pages: no button, less air, a smaller heading. */
body.mwm-hk .mwm-hk-band--smal {
  padding-top: var(--mwm-space-5);
  padding-bottom: var(--mwm-space-5);
}

body.mwm-hk .mwm-hk-band--smal:not(:has(.mwm-hk-tag)) {
  padding-bottom: var(--mwm-space-5);
}

/* Fas 3 steg 6, rättelse: no curve on the narrow band. Its air below (24 and 48 px) is less than the curve is deep
   (32 and 56 px), so the curve began above the last line of text. The band stays narrow and ends straight. */
body.mwm-hk .mwm-site .mwm-hk-band--smal::after {
  content: none;
}

body.mwm-hk .mwm-hk-band--smal h1 {
  font-size: clamp(2.375rem, 2.1429rem + 0.9524vw, 3rem);
}

body.mwm-hk .mwm-hk-band--smal .mwm-hk-band__main > header > p:not(.section-label) {
  font-size: 0.9375rem;
}

/* The shelf card: the verdict or the quick answer, white, with a hole and a slight tilt. */
body.mwm-hk .mwm-hk-tag {
  position: relative;
  z-index: 1;
  margin: var(--mwm-space-6) 4px -56px;
  padding: 38px 22px 22px;
  color: var(--mwm-ink);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--mwm-line);
  transform: rotate(-1deg);
}

/* Fas 3 steg 6: the card settles once when the page loads, from straight and 8 px higher to its tilt, in 700 ms.
   Only when the visitor has not asked for reduced motion. Otherwise it stands still from the start.
   The keyframe has no end, so the card ends at its own tilt on every width. A transform moves no layout. */
@media (prefers-reduced-motion: no-preference) {
  body.mwm-hk .mwm-hk-band .mwm-hk-tag {
    animation: mwm-hk-settle 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both;
  }
}

@keyframes mwm-hk-settle {
  from {
    transform: rotate(0deg) translateY(-8px);
  }
}

body.mwm-hk .mwm-hk-tag::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin-inline: auto;
  background: var(--mwm-bottle);
  border-radius: 999px;
}

body.mwm-hk .mwm-hk-tag p {
  max-width: none;
  margin: 0 0 0.8em;
  color: var(--mwm-ink);
  font-size: 1rem;
  line-height: 1.55;
}

body.mwm-hk .mwm-hk-tag p:last-child {
  margin-bottom: 0;
}

/* aside.quick-answer on the card: the element is moved whole, so its own frame and star are taken away. */
body.mwm-hk .mwm-hk-tag .quick-answer {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--mwm-ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.mwm-hk .quick-answer > span[aria-hidden="true"] {
  display: none;
}

body.mwm-hk .mwm-hk-tag .quick-answer h2,
body.mwm-hk .article-content .quick-answer h2 {
  margin: 0 0 var(--mwm-space-2);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

body.mwm-hk .mwm-hk-tag .quick-answer strong {
  font-weight: 600;
}

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

body.mwm-hk .mwm-hk-tag a:hover,
body.mwm-hk .mwm-hk-tag a:focus-visible {
  text-decoration-thickness: 2px;
}

/* The card's focus ring is on white, so it is wine like the rest of the page. */
body.mwm-hk .mwm-site .mwm-hk-band .mwm-hk-tag a:focus-visible {
  outline-color: var(--mwm-wine);
}

/* When the card stays in the text (one of the conditions in functions.php did not hold), it keeps a plain card form. */
body.mwm-hk .article-content .quick-answer {
  display: block;
  margin: var(--mwm-space-6) 0;
  padding: var(--mwm-space-5);
  color: var(--mwm-ink);
  background: #fff;
  border: 1px solid var(--mwm-line);
  border-radius: 6px;
}

/* Room under the card, which reaches 56 px below the band. */
body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) + .article-content {
  padding-top: 80px;
}

body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) + .article-grid,
body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) + figure {
  margin-top: 80px !important;
}

/* Below 360 px, about 200 percent zoom on a phone, the card stands straight. */
@media (max-width: 359px) {
  body.mwm-hk .mwm-hk-tag {
    transform: none;
  }
}

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

  body.mwm-hk .mwm-hk-band:not(:has(.mwm-hk-tag)) {
    padding-bottom: 72px;
  }

  body.mwm-hk .mwm-hk-band--smal,
  body.mwm-hk .mwm-hk-band--smal:not(:has(.mwm-hk-tag)) {
    padding-bottom: var(--mwm-space-7);
  }

  body.mwm-hk .mwm-hk-band .mwm-hk-cta {
    margin-top: 36px;
  }

  body.mwm-hk .mwm-hk-band .article-dek,
  body.mwm-hk .mwm-hk-band .article-hero-sub,
  body.mwm-hk .mwm-hk-band__main > header > p:not(.section-label):not(.mwm-hk-cta) {
    font-size: 1.1875rem;
  }

  body.mwm-hk .mwm-hk-tag {
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  /* Fas 3 steg 6: 80 px above and 104 px below on desktop. */
  body.mwm-hk .mwm-hk-band,
  body.mwm-hk .mwm-hk-band:not(:has(.mwm-hk-tag)) {
    padding: 80px 0 104px;
  }

  body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag),
  body.mwm-hk .mwm-hk-band:has(.mwm-hk-photo) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 450px);
    gap: var(--mwm-space-8);
    align-items: center;
  }

  body.mwm-hk .mwm-hk-band--smal,
  body.mwm-hk .mwm-hk-band--smal:not(:has(.mwm-hk-tag)) {
    padding: var(--mwm-space-7) 0;
  }

  body.mwm-hk .mwm-hk-band h1 {
    line-height: 1.03;
  }

  body.mwm-hk .mwm-hk-tag {
    max-width: none;
    margin: 0;
    padding: 44px 34px 30px;
    /* Fas 3 steg 6: a thin line inside, like the edge of a card. */
    box-shadow: inset 0 0 0 1px var(--mwm-line);
    transform: rotate(-1.2deg);
  }

  body.mwm-hk .mwm-hk-tag p {
    font-size: 1.03125rem;
  }

  body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) + .article-content {
    padding-top: var(--mwm-space-7);
  }

  body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) + .article-grid,
  body.mwm-hk .mwm-hk-band:has(.mwm-hk-tag) + figure {
    margin-top: var(--mwm-space-7) !important;
  }
}

/* ---------- Buttons ---------- */

body.mwm-hk .mwm-button--quiz,
body.mwm-hk .article-content .article-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 28px;
  color: var(--mwm-ink);
  background: var(--mwm-mustard);
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  font-family: var(--mwm-font-text);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

body.mwm-hk .mwm-button--quiz:hover,
body.mwm-hk .mwm-button--quiz:active,
body.mwm-hk .mwm-button--quiz:visited,
body.mwm-hk .article-content .article-cta a:hover,
body.mwm-hk .article-content .article-cta a:active,
body.mwm-hk .article-content .article-cta a:visited {
  color: var(--mwm-ink);
}

body.mwm-hk .mwm-button--quiz:hover,
body.mwm-hk .mwm-button--quiz:active,
body.mwm-hk .article-content .article-cta a:hover,
body.mwm-hk .article-content .article-cta a:active {
  background: var(--mwm-mustard-deep);
}

body.mwm-hk .article-content .article-cta {
  margin: var(--mwm-space-5) 0;
}

body.mwm-hk .article-content .article-cta strong {
  font-weight: inherit;
}

@media (max-width: 760px) {
  body.mwm-hk .mwm-button--quiz,
  body.mwm-hk .article-content .article-cta a {
    width: 100%;
  }
}

/* The outgoing link: unfilled, so it is never mistaken for the quiz. */
body.mwm-hk .article-content .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: var(--mwm-space-2);
  min-height: 48px;
  padding: var(--mwm-space-3) 20px;
  color: var(--mwm-ink);
  background: #fff;
  border: 1px solid var(--mwm-control);
  border-radius: 4px;
  font-family: var(--mwm-font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

body.mwm-hk .article-content .secondary-button:hover {
  color: var(--mwm-ink);
  background: #fff;
  border-color: var(--mwm-ink);
}

/* ---------- Tables ---------- */

body.mwm-hk .comparison-table-wrap {
  margin: var(--mwm-space-5) 0 var(--mwm-space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 3px solid var(--mwm-bottle);
  background:
    linear-gradient(to right, var(--mwm-page) 30%, rgb(255 255 255 / 0%)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--mwm-page) 30%, rgb(255 255 255 / 0%)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(33 29 26 / 18%), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(33 29 26 / 18%), transparent) right center / 14px 100% no-repeat scroll;
  background-color: var(--mwm-page);
}

body.mwm-hk .comparison-table {
  width: 100%;
  min-width: 560px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-small);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.45;
}

body.mwm-hk .comparison-table th,
body.mwm-hk .comparison-table td {
  padding: var(--mwm-space-3) 14px;
  color: var(--mwm-ink);
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk .comparison-table th {
  background: var(--mwm-leaf);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

body.mwm-hk .comparison-table td {
  background: transparent;
}

body.mwm-hk .comparison-table td:first-child {
  font-weight: 600;
}

body.mwm-hk .comparison-table-wrap > p {
  max-width: none;
  margin: var(--mwm-space-3) 0;
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-small);
  line-height: 1.5;
}

/* ---------- FAQ ---------- */

body.mwm-hk .faq-list {
  margin-top: var(--mwm-space-4);
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk .faq-list details {
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk .faq-list summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--mwm-space-3) 40px var(--mwm-space-3) 0;
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-h3);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

body.mwm-hk .faq-list summary::after,
body.mwm-hk .faq-list details[open] summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  float: none;
  width: 10px;
  height: 10px;
  margin: -7px 0 0;
  border-right: 2px solid var(--mwm-wine);
  border-bottom: 2px solid var(--mwm-wine);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

body.mwm-hk .faq-list details[open] summary::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

body.mwm-hk .faq-list details > p,
body.mwm-hk .faq-list details > div {
  margin: 0;
  padding: 0 40px 20px 0;
  color: var(--mwm-ink);
  font-size: var(--mwm-size-body);
}

/* ---------- Article column and the table of contents (utrullning.md 2.4) ---------- */

body.mwm-hk .article-page > .article-grid,
body.mwm-hk .article-page > figure,
body.mwm-hk .article-page > .article-content {
  max-width: var(--mwm-wide);
  margin-right: auto;
  margin-left: auto;
}

body.mwm-hk .article-grid {
  padding-top: var(--mwm-space-7);
}

body.mwm-hk .article-grid > .article-content {
  padding-top: 0;
}

/* A picture directly under the band is followed by the text without an extra gap. */
body.mwm-hk .article-page > figure + .article-content,
body.mwm-hk .article-page > figure + .article-grid {
  padding-top: 0;
}

body.mwm-hk .article-content > section:first-child {
  margin-top: 0;
}

/* Several H2 in one section get the same air as a new section. */
body.mwm-hk .article-content section > :not(.section-label) + h2 {
  margin-top: var(--mwm-space-h2);
}

body.mwm-hk .article-toc {
  padding: var(--mwm-space-4) 0;
  border-color: var(--mwm-line);
}

body.mwm-hk .article-toc > p {
  margin: 0 0 var(--mwm-space-3);
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk .article-toc li {
  display: block;
  color: var(--mwm-ink);
  font-size: 0.9375rem;
  line-height: 1.4;
}

body.mwm-hk .article-toc li::before {
  content: none;
}

body.mwm-hk .article-toc a {
  display: inline-block;
  padding: 2px 0;
  color: var(--mwm-ink);
  text-decoration: none;
}

body.mwm-hk .article-toc a:hover,
body.mwm-hk .article-toc a:focus-visible {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------- Text in the article: lists, links in lists, H3 spacing ---------- */

body.mwm-hk .article-content ul,
body.mwm-hk .article-content ol {
  max-width: var(--mwm-measure);
  padding-left: 1.25em;
}

/* Plain lists in the text get their bullets back. Lists with a class keep their own form. */
body.mwm-hk .article-content ul:not([class]) {
  list-style: disc;
}

body.mwm-hk .article-content ol:not([class]) {
  list-style: decimal;
}

body.mwm-hk .article-content ul:not([class]) > li::marker,
body.mwm-hk .article-content ol:not([class]) > li::marker {
  color: var(--mwm-bottle);
}

body.mwm-hk .article-content li a:not(.secondary-button):not(.primary-button),
body.mwm-hk .article-content td a,
body.mwm-hk .article-content dd a {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.mwm-hk .article-content li a:not(.secondary-button):not(.primary-button):hover,
body.mwm-hk .article-content td a:hover,
body.mwm-hk .article-content dd a:hover {
  text-decoration-thickness: 2px;
}

body.mwm-hk .article-content h3 {
  margin: var(--mwm-space-6) 0 var(--mwm-space-2);
}

body.mwm-hk .article-content .section-label,
body.mwm-hk .article-content .eyebrow {
  display: block;
  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;
  line-height: 1.4;
  text-transform: none;
}

body.mwm-hk .article-content .section-label::before,
body.mwm-hk .article-content .section-label::after {
  content: none;
  display: none;
}

/* ---------- Disclosure: first under the band, plain, between two thin lines ---------- */

body.mwm-hk .article-content .article-disclosure,
body.mwm-hk .article-content .disclosure-note {
  max-width: var(--mwm-measure);
  margin: 0 0 var(--mwm-space-6);
  padding: var(--mwm-space-4) 0;
  color: var(--mwm-ink-soft);
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
  border-bottom: 1px solid var(--mwm-line);
  border-radius: 0;
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-small);
  line-height: 1.5;
}

body.mwm-hk .article-content .article-disclosure em,
body.mwm-hk .article-content .disclosure-note em {
  font-style: normal;
}

body.mwm-hk .article-content .disclosure-note p {
  max-width: none;
  margin: 0 0 var(--mwm-space-2);
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-small);
  line-height: 1.5;
}

body.mwm-hk .article-content .disclosure-note p:last-child {
  margin-bottom: 0;
}

body.mwm-hk .article-content .disclosure-note .section-label,
body.mwm-hk .article-content .disclosure-note strong {
  display: inline;
  color: var(--mwm-ink);
  font-size: var(--mwm-size-small);
  font-weight: 600;
}

body.mwm-hk .article-content .article-disclosure + .disclosure-note {
  margin-top: calc(-1 * var(--mwm-space-6));
  border-top: 0;
}

body.mwm-hk .article-content .article-disclosure a,
body.mwm-hk .article-content .disclosure-note a {
  color: var(--mwm-wine);
}

/* ---------- Lead paragraph ---------- */

body.mwm-hk .article-content .article-lead,
body.mwm-hk .article-content .article-lead p {
  max-width: var(--mwm-measure);
  margin-top: 0;
  color: var(--mwm-ink);
  background: none;
  border: 0;
  font-family: var(--mwm-font-text);
  font-size: clamp(1.1875rem, 1.1652rem + 0.0952vw, 1.25rem);
  font-style: normal;
  line-height: 1.55;
}

body.mwm-hk .article-content div.article-lead {
  margin-bottom: var(--mwm-space-6);
}

body.mwm-hk .article-content div.article-lead p {
  margin-bottom: 1em;
}

/* ---------- Images: the column's width, 6 px corners, no frame, no shadow ---------- */

body.mwm-hk .mwm-site .article-page figure,
body.mwm-hk .mwm-site .article-inline-media,
body.mwm-hk .mwm-site .mwm-lifestyle-image {
  max-width: var(--mwm-column) !important;
  margin: var(--mwm-space-7) auto !important;
  padding: 0;
  background: none;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

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

body.mwm-hk .mwm-site .article-page figure img,
body.mwm-hk .mwm-site .article-inline-media img,
body.mwm-hk .mwm-site .mwm-lifestyle-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 0 !important;
  border-radius: var(--mwm-radius-media) !important;
  box-shadow: none !important;
}

/* Fas 3 steg 6, Första glaset: the first picture after the band is the first glass. 1120 px wide on desktop
   with 6 px corners, edge to edge without corners on mobile. Two forms in the pages: the figure directly after
   the band, or first in the article directly after the band. */
body.mwm-hk .mwm-site .mwm-hk-band + figure,
body.mwm-hk .mwm-site .mwm-hk-band + .article-content > figure:first-child {
  max-width: var(--mwm-wide) !important;
}

/* On /firstleaf-review/ and /winc-review/ the page's own style keeps the article 760 px wide. The picture reaches out
   of it on both sides, up to 1120 px and never wider than the page inside its margins. 20 px is room for a scrollbar. */
@media (min-width: 761px) {
  body.mwm-hk .mwm-site .mwm-hk-band + .article-content > figure:first-child {
    --mwm-first-glass: max(100%, min(var(--mwm-wide), 100vw - 2 * var(--mwm-gutter) - 20px));
    width: var(--mwm-first-glass) !important;
    margin-right: calc((100% - var(--mwm-first-glass)) / 2) !important;
    margin-left: calc((100% - var(--mwm-first-glass)) / 2) !important;
  }
}

@media (max-width: 760px) {
  body.mwm-hk .mwm-site .mwm-hk-band + figure,
  body.mwm-hk .mwm-site .mwm-hk-band + .article-content > figure:first-child {
    width: auto !important;
    max-width: none !important;
    margin-right: calc(-1 * var(--mwm-gutter)) !important;
    margin-left: calc(-1 * var(--mwm-gutter)) !important;
  }

  body.mwm-hk .mwm-site .mwm-hk-band + figure img,
  body.mwm-hk .mwm-site .mwm-hk-band + .article-content > figure:first-child img {
    border-radius: 0 !important;
  }

  body.mwm-hk .mwm-site .mwm-hk-band + figure figcaption,
  body.mwm-hk .mwm-site .mwm-hk-band + .article-content > figure:first-child figcaption {
    padding-right: var(--mwm-gutter);
    padding-left: var(--mwm-gutter);
  }
}

body.mwm-hk .mwm-site .article-page figure::before,
body.mwm-hk .mwm-site .article-page figure::after,
body.mwm-hk .mwm-site .mwm-lifestyle-image::before,
body.mwm-hk .mwm-site .mwm-lifestyle-image::after {
  content: none;
}

body.mwm-hk .mwm-site figcaption {
  margin-top: var(--mwm-space-2);
  color: var(--mwm-ink-soft);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-small);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
}

/* ---------- Tables: every wrapper the same as the comparison table ---------- */

body.mwm-hk .table-wrap,
body.mwm-hk .article-table-wrap,
body.mwm-hk .mwm-table-scroll {
  margin: var(--mwm-space-5) 0 var(--mwm-space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-top: 3px solid var(--mwm-bottle);
  background:
    linear-gradient(to right, var(--mwm-page) 30%, rgb(255 255 255 / 0%)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--mwm-page) 30%, rgb(255 255 255 / 0%)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(33 29 26 / 18%), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(33 29 26 / 18%), transparent) right center / 14px 100% no-repeat scroll;
  background-color: var(--mwm-page);
}

body.mwm-hk .table-wrap:focus-visible,
body.mwm-hk .article-table-wrap:focus-visible,
body.mwm-hk .mwm-table-scroll:focus-visible {
  outline: 3px solid var(--mwm-wine);
  outline-offset: 3px;
}

body.mwm-hk .table-wrap table,
body.mwm-hk .article-table-wrap table,
body.mwm-hk .mwm-table-scroll table {
  width: 100%;
  min-width: 560px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-small);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.45;
}

body.mwm-hk .compact-table table {
  min-width: 470px;
}

body.mwm-hk .table-wrap th,
body.mwm-hk .table-wrap td,
body.mwm-hk .article-table-wrap th,
body.mwm-hk .article-table-wrap td,
body.mwm-hk .mwm-table-scroll th,
body.mwm-hk .mwm-table-scroll td {
  padding: var(--mwm-space-3) 14px;
  color: var(--mwm-ink);
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk .table-wrap th,
body.mwm-hk .article-table-wrap th,
body.mwm-hk .mwm-table-scroll th {
  background: var(--mwm-leaf);
  font-size: var(--mwm-size-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk .table-wrap td,
body.mwm-hk .article-table-wrap td,
body.mwm-hk .mwm-table-scroll td {
  background: transparent;
}

body.mwm-hk .table-wrap td:first-child,
body.mwm-hk .article-table-wrap td:first-child,
body.mwm-hk .mwm-table-scroll td:first-child {
  font-weight: 600;
}

/* ---------- Quiz box in the text: one light surface, the same mustard button ---------- */

/* Fas 3 steg 6, Första glaset: the quiz box is grape skin in the full width of the window instead of a leaf box.
   The text stays in the column. The color reaches the window edges with border-image outset, which never makes
   the page wider, and the box itself has the same background color, so tests that read background-color see it.
   The air to the sides is the page margin, at least 20 px. None of these boxes has an unfilled button or field. */
body.mwm-hk .article-content .quiz-bridge,
body.mwm-hk .mwm-site .profile-cta,
body.mwm-hk .mwm-site .about-start,
body.mwm-hk .article-content > section:not([class]):has(> p.article-cta):not(:has(.article-signature)) {
  display: block;
  margin: var(--mwm-space-h2) 0;
  padding: 64px 0 72px;
  color: var(--mwm-ink);
  background: var(--mwm-grape);
  border: 0;
  border-radius: 0;
  border-image: linear-gradient(var(--mwm-grape), var(--mwm-grape)) fill 0 / 0 / 0 100vw;
  box-shadow: none;
}

@media (min-width: 761px) {
  body.mwm-hk .article-content .quiz-bridge,
  body.mwm-hk .mwm-site .profile-cta,
  body.mwm-hk .mwm-site .about-start,
  body.mwm-hk .article-content > section:not([class]):has(> p.article-cta):not(:has(.article-signature)) {
    padding: 88px 0 96px;
  }
}

body.mwm-hk .article-content .quiz-bridge::before,
body.mwm-hk .article-content .quiz-bridge::after,
body.mwm-hk .mwm-site .profile-cta::before,
body.mwm-hk .mwm-site .profile-cta::after,
body.mwm-hk .mwm-site .about-start::before,
body.mwm-hk .mwm-site .about-start::after {
  content: none;
}

body.mwm-hk .article-content .quiz-bridge .bridge-badge {
  display: none;
}

body.mwm-hk .article-content .quiz-bridge h2,
body.mwm-hk .mwm-site .profile-cta h2,
body.mwm-hk .mwm-site .about-start h2 {
  margin: 0 0 var(--mwm-space-3);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

body.mwm-hk .article-content .quiz-bridge p,
body.mwm-hk .article-content .quiz-bridge .bridge-copy p,
body.mwm-hk .mwm-site .profile-cta p,
body.mwm-hk .mwm-site .about-start p {
  max-width: var(--mwm-measure);
  color: var(--mwm-ink);
  font-size: var(--mwm-size-body);
}

body.mwm-hk .article-content .quiz-bridge .section-label,
body.mwm-hk .mwm-site .profile-cta .section-label,
body.mwm-hk .mwm-site .about-start .section-label {
  color: var(--mwm-ink-soft);
}

body.mwm-hk .article-content > section:not([class]):has(> p.article-cta):not(:has(.article-signature)) > h2 {
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.875rem);
}

body.mwm-hk .article-content > section:not([class]):has(> p.article-cta):not(:has(.article-signature)) > p:last-child {
  margin-bottom: 0;
}

/* The quiz links that look like buttons today become the mustard button. The arrow in the text stays (Öppet 3). */
body.mwm-hk .mwm-site .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mwm-space-2);
  min-height: 54px;
  margin-top: var(--mwm-space-4);
  padding: 14px 28px;
  color: var(--mwm-ink);
  background: var(--mwm-mustard);
  border: 0;
  border-radius: var(--mwm-radius);
  box-shadow: none;
  font-family: var(--mwm-font-text);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
}

body.mwm-hk .mwm-site .primary-button:hover,
body.mwm-hk .mwm-site .primary-button:active {
  color: var(--mwm-ink);
  background: var(--mwm-mustard-deep);
}

body.mwm-hk .mwm-site .primary-button:visited {
  color: var(--mwm-ink);
}

/* The arrow the theme drew after the button text is hidden. Arrows that stand in the page's own text stay. */
body.mwm-hk .mwm-site .primary-button > span[aria-hidden="true"] {
  display: none;
}

/* Quiz links in a sentence or a list: ordinary underlined links. */
body.mwm-hk .mwm-site .text-link,
body.mwm-hk .mwm-site .browse-quiz-link {
  color: var(--mwm-wine);
  background: none;
  border: 0;
  font-family: var(--mwm-font-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-transform: none;
}

body.mwm-hk .mwm-site .text-link::before,
body.mwm-hk .mwm-site .text-link::after,
body.mwm-hk .mwm-site .browse-quiz-link::before,
body.mwm-hk .mwm-site .browse-quiz-link::after {
  content: none;
}

/* ---------- Related pages and lists of cards: a plain list with a thin line between ---------- */

body.mwm-hk .article-content .related-grid,
body.mwm-hk .article-content .budget-grid,
body.mwm-hk .article-content .style-card-grid,
body.mwm-hk .article-content .decision-grid,
body.mwm-hk .article-content .principle-grid {
  display: block;
  margin-top: var(--mwm-space-5);
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk .article-content .related-grid > a,
body.mwm-hk .article-content .budget-grid > article,
body.mwm-hk .article-content .style-card,
body.mwm-hk .article-content .decision-grid > article,
body.mwm-hk .article-content .principle-grid > article {
  display: block;
  padding: var(--mwm-space-5) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
  box-shadow: none;
}

body.mwm-hk .article-content .related-grid > a:hover {
  background: none;
}

body.mwm-hk .article-content .related-grid > a > span,
body.mwm-hk .article-content .style-card > span,
body.mwm-hk .article-content .decision-grid article > span,
body.mwm-hk .article-content .principle-grid article > span {
  display: none;
}

body.mwm-hk .article-content .related-grid h3 {
  margin: 0 0 var(--mwm-space-1);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: 1.375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

body.mwm-hk .article-content .related-grid p,
body.mwm-hk .article-content .budget-grid span,
body.mwm-hk .article-content .style-card p,
body.mwm-hk .article-content .style-card dd {
  margin: 0;
  color: var(--mwm-ink);
  font-size: 1rem;
  line-height: 1.55;
}

body.mwm-hk .article-content .budget-grid article > p,
body.mwm-hk .article-content .style-card dt,
body.mwm-hk .article-content .club-price,
body.mwm-hk .article-content .split-explainer span {
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk .article-content .style-card h3,
body.mwm-hk .article-content .budget-grid h3,
body.mwm-hk .article-content .decision-grid h3,
body.mwm-hk .article-content .principle-grid h3 {
  margin-top: 0;
}

body.mwm-hk .article-content .style-card dl > div {
  border-color: var(--mwm-line);
}

body.mwm-hk .article-content .fine-print {
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-min);
}

/* ---------- Small text: at least 14 px everywhere ---------- */

body.mwm-hk .mwm-site small,
body.mwm-hk .mwm-site .article-disclaimer {
  font-size: max(var(--mwm-size-min), 1em);
}

/* ---------- Topic pages: lists of short items, steps, tips (utrullning.md 3.3) ---------- */

/* Grids of small cards become a plain list with a thin line between. Labels in the items stay, in sentence case. */
body.mwm-hk .article-content .shelf-clue-list,
body.mwm-hk .article-content .element-list,
body.mwm-hk .article-content .callout-grid,
body.mwm-hk .article-content .recommendation-list {
  display: block;
  margin: var(--mwm-space-5) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk .article-content .shelf-clue-list > article,
body.mwm-hk .article-content .element-list > article,
body.mwm-hk .article-content .callout-grid > div,
body.mwm-hk .article-content .recommendation-list > article {
  display: block;
  padding: var(--mwm-space-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
  border-radius: 0;
  box-shadow: none;
}

body.mwm-hk .article-content .shelf-clue-list h3,
body.mwm-hk .article-content .element-list h3,
body.mwm-hk .article-content .callout-grid h3,
body.mwm-hk .article-content .recommendation-list 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;
  text-transform: none;
}

body.mwm-hk .article-content .shelf-clue-list p,
body.mwm-hk .article-content .element-list p,
body.mwm-hk .article-content .callout-grid p,
body.mwm-hk .article-content .recommendation-list p {
  max-width: var(--mwm-measure);
  margin: 0;
  color: var(--mwm-ink);
  font-size: 1rem;
  line-height: 1.55;
}

body.mwm-hk .article-content .callout-grid > div > span,
body.mwm-hk .article-content .recommendation-list > article > span {
  display: block;
  margin-bottom: 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;
}

/* Numbered steps are a real sequence, so the numbers stay, in bottle green. */
body.mwm-hk .article-content .numbered-steps {
  display: block;
  max-width: var(--mwm-measure);
  margin: var(--mwm-space-5) 0;
  padding-left: 1.5em;
  list-style: decimal;
}

body.mwm-hk .article-content .numbered-steps > li {
  padding: var(--mwm-space-3) 0 var(--mwm-space-3) var(--mwm-space-2);
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk .article-content .numbered-steps > li::marker {
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-weight: 700;
}

/* A tip: a thin bottle green rule on the left, no surface. */
body.mwm-hk .article-content .tip-card {
  max-width: var(--mwm-measure);
  margin: var(--mwm-space-6) 0;
  padding: var(--mwm-space-1) 0 var(--mwm-space-1) var(--mwm-space-5);
  background: none;
  border: 0;
  border-left: 3px solid var(--mwm-bottle);
  border-radius: 0;
}

body.mwm-hk .article-content .tip-card h3 {
  margin-top: 0;
}

body.mwm-hk .article-content .tip-card p:last-child {
  margin-bottom: 0;
}

/* The style cards' term and description. */
body.mwm-hk .article-content .style-card dl {
  margin: var(--mwm-space-3) 0 0;
}

body.mwm-hk .article-content .style-card dd {
  margin: var(--mwm-space-1) 0 0;
}

/* FAQ in section.article-faq has no .faq-list wrapper: the same form as the FAQ list. */
body.mwm-hk .article-content .article-faq > details:first-of-type {
  margin-top: var(--mwm-space-4);
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk .article-content .article-faq > details {
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk .article-content .article-faq > details > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--mwm-space-3) 40px var(--mwm-space-3) 0;
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-h3);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

body.mwm-hk .article-content .article-faq > details > summary::-webkit-details-marker {
  display: none;
}

body.mwm-hk .article-content .article-faq > details > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 10px;
  margin: -7px 0 0;
  border-right: 2px solid var(--mwm-wine);
  border-bottom: 2px solid var(--mwm-wine);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

body.mwm-hk .article-content .article-faq > details[open] > summary::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

body.mwm-hk .article-content .article-faq > details > p,
body.mwm-hk .article-content .article-faq > details > div {
  margin: 0;
  padding: 0 40px 20px 0;
  color: var(--mwm-ink);
  font-size: var(--mwm-size-body);
}

/* The fine print under prices. */
body.mwm-hk .article-content .fine-print,
body.mwm-hk .article-content details.fine-print p {
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-small);
  line-height: 1.5;
}

body.mwm-hk .article-content details.fine-print > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-small);
}

@media (prefers-reduced-motion: reduce) {
  body.mwm-hk .article-content .article-faq > details > summary::after {
    transition: none;
  }
}

/* ---------- Comparisons and buying guides (utrullning.md 3.2) ---------- */

body.mwm-hk .article-content .club-list {
  display: block;
  margin-top: var(--mwm-space-5);
  border-top: 1px solid var(--mwm-line);
}

/* A club is a row with a thin line, no surface and no frame. */
body.mwm-hk .article-content .club-card {
  display: block;
  margin: 0;
  padding: var(--mwm-space-6) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
  border-radius: 0;
  box-shadow: none;
}

/* The rank is a real order, so the number stays, small and bottle green, with the "best for" line beside it. */
body.mwm-hk .article-content .club-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mwm-space-1) var(--mwm-space-3);
  margin: 0 0 var(--mwm-space-2);
  padding: 0;
  background: none;
}

body.mwm-hk .article-content .club-rank span {
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

body.mwm-hk .article-content .club-rank p {
  margin: 0;
  color: var(--mwm-ink-soft);
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-small);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

body.mwm-hk .article-content .club-copy {
  padding: 0;
}

body.mwm-hk .article-content .club-copy h3 {
  margin: 0 0 var(--mwm-space-2);
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.875rem);
}

body.mwm-hk .article-content .club-copy li,
body.mwm-hk .article-content .club-verdicts p {
  font-size: 1rem;
}

body.mwm-hk .article-content .club-verdicts {
  margin: var(--mwm-space-4) 0;
  padding: var(--mwm-space-3) 0;
  border-top: 1px solid var(--mwm-line);
  border-bottom: 1px solid var(--mwm-line);
}

body.mwm-hk .article-content .club-verdicts strong {
  color: var(--mwm-ink);
  font-weight: 600;
}

/* Two sides explained: a plain list with the label kept. */
body.mwm-hk .article-content .split-explainer {
  display: block;
  margin: var(--mwm-space-5) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--mwm-line);
}

body.mwm-hk .article-content .split-explainer > article {
  display: block;
  padding: var(--mwm-space-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mwm-line);
  box-shadow: none;
}

body.mwm-hk .article-content .split-explainer > article > span {
  display: block;
  margin-bottom: var(--mwm-space-1);
}

body.mwm-hk .article-content .split-explainer h3 {
  margin: 0 0 var(--mwm-space-1);
}

body.mwm-hk .article-content .split-explainer p {
  margin: 0;
  font-size: 1rem;
}

body.mwm-hk .article-content .secondary-button > span[aria-hidden="true"] {
  display: inline;
}

/* ---------- Fas 3 steg 6: every mustard button has an ink edge, 2 px, drawn inside ----------
   On grape skin and on white the mustard face is pale (1.61:1 and 1.84:1), so the edge shows that it is a button.
   One button form everywhere: the header Quiz on desktop and mobile, the band button, the bottom bar, the buttons
   in the text and the quiz boxes, the front page hero, and the quiz's own buttons. Ink against grape skin is 14.65:1,
   against white 16.7:1 and against mustard 9.09:1. The focus ring stays outside the button (mwm-hk-base.css). */
body.mwm-hk #header-grid .nav-ul.menu-desktop a[href$="/quiz/"],
body.mwm-hk #header-grid .mwm-header-quiz,
body.mwm-hk .mwm-button--quiz,
body.mwm-hk .article-content .article-cta a,
body.mwm-hk .mwm-site .primary-button,
body.mwm-hk .mwm-hk-band--startsida .hero-quiz-copy strong,
body.mwm-hk #mywinematch-quiz .mwm-quiz-primary,
body.mwm-hk #mywinematch-quiz .mwm-quiz-club > a {
  box-shadow: inset 0 0 0 2px var(--mwm-ink);
}