/* ─────────────────────────────────────────────────────────────────────────
 * koreanskbeauty — rung-2 design overrides (ADR-042)
 *
 * Loaded after kronika's app.css by smedja-overrides.php, in filename order.
 * Every rule below is the site's own fork, carried across because upstream
 * kronika either does not ship it at all or ships it in the shared tone.
 *
 * Derived mechanically from `git diff <last-engine-sync fce677e> HEAD --
 * wp-engine/templates/kronika/theme/assets/app.css`, with every rule whose body
 * is byte-identical to upstream dropped (it needs no override).
 *
 * TWO REWRITES were applied, both forced by upstream markup:
 *   .kr-faq__item        →  .kr-faq        (kronika's faq emits <details class="kr-faq">)
 *   .kr-faq__a p{...}    →  .kr-faq__a     (kronika renders the answer with inlineMd —
 *                                           there is NO <p> wrapper, so p-scoped rules are dead)
 *
 * DROPPED deliberately (SMED-58/66 — kronika's own CSS restores the look):
 *   .kr-rec__img
 *   the clickable-product-image selector group for roundup and rec cards
 *   .kr-rec__imglink
 *   .kr-imglink img, .kr-rec__imglink img
 *   .kr-imglink:hover img, .kr-rec__imglink:hover img
 * ───────────────────────────────────────────────────────────────────────── */


/* == mobile-nav ==
   Mobile nav overlay — a core-CSS override; upstream kronika ships none.
   NOT in the documented list — flagged. Fork commits e185e1f / fcc1c15. */
/* == Mobile nav overlay (Rosé fork) ================================== */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  inset: 0;
  z-index: 1000 !important;
  background: var(--kr-panel) !important;
  padding: 4.5rem 1.6rem 2rem !important;
  overflow: auto !important;
  display: block !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open ul .wp-block-navigation-item {
  border-bottom: 1px var(--kr-rule-style) var(--kr-dot) !important;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  display: block;
  width: 100%;
  font-family: var(--kr-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kr-ink);
  text-decoration: none;
  padding: 1.05rem 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
  color: var(--kr-rea);
}

.wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--kr-ink);
  background: var(--kr-panel);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.wp-block-navigation__responsive-container-close:hover { color: var(--kr-rea); }

.wp-block-navigation__responsive-container-open {
  padding: 0.6rem;
  color: var(--kr-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

html:has(.wp-block-navigation__responsive-container.is-menu-open) {
  overflow: hidden;
}


/* == faq ==
   FAQ accordion, Rosé tone + the class rename and the missing <p>. */
/* == FAQ accordion (Rosé fork) ======================================= */
.kr-band--faq .kr-section-head { margin-bottom: 0.75rem; }

.kr-faq {
  border-bottom: 1px var(--kr-rule-style) var(--kr-dot);
}

.kr-faq:first-of-type {
  border-top: 1px var(--kr-rule-style) var(--kr-dot);
}

.kr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1rem 0.25rem;
  font-family: var(--kr-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kr-ink);
  transition: color 140ms ease;
}

.kr-faq__q:hover { color: var(--kr-rea); }

/* Hide the browser's default disclosure triangle in every engine — WebKit uses
   ::-webkit-details-marker, Firefox/standard uses ::marker. Without the ::marker
   rule a stray triangle appears next to our custom +/– marker in those browsers. */
.kr-faq__q { list-style: none; }

.kr-faq__q::-webkit-details-marker { display: none; }

.kr-faq__q::marker { content: ""; }

.kr-faq__marker {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kr-rea) 14%, var(--kr-paper));
  position: relative;
  transition: transform 180ms var(--kr-ease), background-color 140ms ease;
}

.kr-faq__marker::after { transform: rotate(90deg); transition: transform 180ms var(--kr-ease); }

.kr-faq[open] > .kr-faq__q .kr-faq__marker { background: color-mix(in srgb, var(--kr-rea) 24%, var(--kr-paper)); }

.kr-faq[open] > .kr-faq__q .kr-faq__marker::after { transform: rotate(0deg); }

.kr-faq__a {
  padding: 0 0.25rem 1.15rem;
  color: var(--kr-black);
  line-height: 1.66;
}

.kr-faq__a { margin: 0 0 0.8em; }

.kr-faq__a { margin-bottom: 0; }

.kr-faq__a a { color: var(--kr-rea); text-decoration-thickness: 1px; }


/* == compare ==
   Snabbjämförelse scan table — structure is upstream (SMED-65), tone is the site's. */
/* == Snabbjämförelse table (Rosé fork) =============================== */
.kr-compare {
  overflow-x: auto;
  margin: 0 0 2rem;
  border: 1px solid var(--kr-dot);
  border-radius: var(--kr-r-md);
  background: var(--kr-paper);
}

.kr-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.kr-compare th {
  font-family: var(--kr-mono);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kr-pencil);
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--kr-dot);
  background: var(--kr-panel);
}

.kr-compare tr:last-child td { border-bottom: 0; }

.kr-compare__num {
  font-family: var(--kr-mono);
  font-weight: 700;
  color: var(--kr-grafit);
  width: 2rem;
}

.kr-compare__name { font-weight: 600; color: var(--kr-ink); }

.kr-compare__name .kr-tag { margin-left: 0.4em; font-size: 0.56rem; }

.kr-compare__link { text-align: right; white-space: nowrap; }

.kr-compare__link .kr-mlink { font-size: 0.6875rem; }


/* == jump ==
   Disclosure jump button tone (structure upstream, SMED-59).

   The honesty line and the button under it are the page's monetisation
   handshake: one quiet sentence, then the one tap that gets a decided reader
   to the picks. They read as a single centred unit, directly under the hero
   image — which is the ONLY affiliate disclosure the site shows, now that the
   engine's prepended `.smedja-disclosure` banner is off
   (site.config.json → monetization.disclosure: false). */
.kr-disclosure {
  text-align: center;
}

/* `margin-left/right: auto` here is belt-and-braces: WordPress's constrained
   layout already centres the band's children with `!important`. Keep both so
   the button stays centred if the block ever leaves a constrained group. */
.kr-disclosure__jump {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0.9rem auto 0.1rem;
}

.kr-disclosure__jump .kr-arrow {
  font-size: 0.9em;
}


/* == gift ==
   Newsletter lead magnet tone (structure upstream, SMED-65). */
/* Newsletter gift (lead magnet) */
.kr-news__gift {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kr-rea);
  margin: 0.5rem 0 0;
}

.kr-news__giftlink {
  color: var(--kr-rea);
  font-weight: 700;
  text-decoration-thickness: 2px;
}


/* == rec-tone ==
   Redaktionens val card tone (structure upstream, SMED-66). */
/* == Recommendation cards (post "Redaktionens val" blocks) =========== */
.kr-rec {
  margin: 2.25rem 0;
  padding: 1.5rem 1.4rem 1.25rem;
  background: color-mix(in srgb, var(--kr-rea) 6%, var(--kr-paper));
  border: 1px solid color-mix(in srgb, var(--kr-rea) 18%, var(--kr-dot));
  border-radius: var(--kr-r-md);
}

.kr-rec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.8rem;
}

.kr-rec__actions .kr-btn {
  padding: 0.6em 1em;
  font-size: 0.75rem;
}

.kr-rec__read:hover { color: var(--kr-rea); }


/* == cta ==
   Masthead CTA — NOT in the documented list; flagged. */
.kr-masthead__cta {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kr-rea);
  text-decoration: none;
  border-radius: var(--kr-r-sm);
  padding: 0.85em 1.1em;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--kr-rea) 70%, transparent);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.kr-masthead__cta:hover {
  background: color-mix(in srgb, var(--kr-rea) 84%, #3a2230);
  color: #fff;
}


/* == footer-legal ==
   Footer legal links — required by the fork-verbatim footer.html theme part.
   NOT in the documented list — flagged. */
/* Footer legal links */
.kr-footer__legal {
  font-family: var(--kr-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-pencil);
  margin: 0;
}

.kr-footer__legal a { color: var(--kr-pencil); text-decoration: none; }

.kr-footer__legal a:hover { color: var(--kr-rea); text-decoration: underline; text-underline-offset: 0.25em; }


/* == 404 ==
   Branded 404 search box — required by the EJECTED 404.html.
   NOT in the documented list — flagged. */
/* 404 search box */
.kr-404-search { margin-top: 1.6rem; max-width: 32rem; }

.kr-404-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--kr-dot);
  border-radius: var(--kr-r-md);
  overflow: hidden;
  background: var(--kr-paper);
}

.kr-404-search .wp-block-search__input {
  border: 0;
  padding: 0.8rem 1rem;
  font-family: var(--kr-mono);
  font-size: 0.95rem;
  background: transparent;
  color: var(--kr-ink);
}

.kr-404-search .wp-block-search__input:focus { outline: none; }

.kr-404-search .wp-block-search__button {
  margin: 0;
  border: 0;
  background: var(--kr-rea);
  color: #fff;
  font-family: var(--kr-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 0 1.2rem;
  cursor: pointer;
}

.kr-404-search .wp-block-search__button:hover { background: color-mix(in srgb, var(--kr-rea) 84%, #3a2230); }


/* == buy ==
   The affiliate call-to-action, everywhere it appears (2026-09-10, CRO).

   Before this, the money link on 154 toplist pages was `.kr-mlink` — grey
   uppercase mono text with an arrow, byte-for-byte the same treatment as the
   editorial "Läs recensionen" beside it. Three identical grey links in a row,
   one of which pays for the site. Now every tracked link in a product card's
   action row is a filled rosé button and the editorial link stays quiet text,
   so the hierarchy states which is which without a word of copy.

   `a[rel~="sponsored"]` IS the affiliate test — the pack stamps
   `rel="sponsored noopener"` on every `http(s):` shop href and on nothing else
   (`shopRel`, sections/index.mjs). So this needs no per-link class, cannot
   drift from what the disclosure claims, and an internal href never picks up a
   buy button by accident. Scoped to the action containers on purpose: product
   PHOTOS are also sponsored links (`imgLink`, SMED-58) and must not inflate. */

:root {
  /* NOT var(--kr-rea). The brand rosé #D9799A carries white text at 2.95:1,
     under the 4.5:1 WCAG AA floor these 13px bold labels need. This is the
     same hue held to the standard: 4.67:1 on white, 6.18:1 on hover. Measured,
     not eyeballed — re-measure if the accent knob ever moves. */
  --kb-buy: #B4547A;
  --kb-buy-hover: #9A4468;
}

/* Roundup rows: text link → button. The other three containers already ship a
   `.kr-btn`, so they only need the colour further down. */
.kr-roundup__links a[rel~="sponsored"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0.45em;
  border-radius: var(--kr-r-sm);
  padding: 0.7em 1.15em;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

/* Upstream `.kr-mlink:hover` underlines. On a filled button that reads as a
   rendering fault, so it is cancelled rather than left to fight the fill. */
.kr-roundup__links a[rel~="sponsored"]:hover {
  text-decoration: none;
}

/* The buy colour itself — one declaration for all four surfaces. `.kr-btn--ink`
   and `.kr-btn--ghost` are single-class selectors, so this two-class form wins
   without `!important`. */
.kr-roundup__links a[rel~="sponsored"],
.kr-rec__actions a[rel~="sponsored"],
.kr-review__buys a[rel~="sponsored"],
a.kr-stickycta__btn[rel~="sponsored"] {
  color: #fff;
  background: var(--kb-buy);
  /* Ghost buys arrive carrying an inset ring in ink; the fill replaces it. */
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--kb-buy) 75%, transparent);
}

.kr-roundup__links a[rel~="sponsored"]:hover,
.kr-rec__actions a[rel~="sponsored"]:hover,
.kr-review__buys a[rel~="sponsored"]:hover,
a.kr-stickycta__btn[rel~="sponsored"]:hover {
  color: #fff;
  background: var(--kb-buy-hover);
  box-shadow: 0 10px 20px -11px color-mix(in srgb, var(--kb-buy) 85%, transparent);
}

/* Buttons need less air between them than text links did, and the editorial
   link needs more, so it reads as a separate thing rather than a third button. */
.kr-roundup__links {
  gap: 0.55rem 0.7rem;
}

/* Only while the row is still a row. Once it wraps to a column on a phone the
   indent stops separating anything and just knocks the editorial link out of
   alignment with the buttons above it. */
@media (min-width: 40rem) {
  .kr-roundup__links a:not([rel~="sponsored"]) {
    margin-left: 0.5rem;
  }
}

/* The comparison table is the exception (agreed 2026-09-10): 545 link cells in
   a dense 4-column scan grid, where a filled button per row would destroy the
   scan. It takes the buy COLOUR and keeps the text weight. */
.kr-compare__link a[rel~="sponsored"] {
  color: var(--kb-buy);
}


/* == chips ==
   Product facts as a scannable chip row (2026-09-10, CRO).

   `spec:` is the engine's own structured-facts array — the same slot commit
   a66185b chose for social proof rather than forking the pack, and the reason
   "Passar för" and "Nyckelingrediens" need no new vocabulary either. Upstream
   renders it as an indented bullet list, which reads as more body copy; as
   chips the facts register in one glance on the way to the button. */
.kr-roundup__spec {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  margin: 0.15rem 0 0;
  padding-left: 0;
}

.kr-roundup__spec li {
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--kr-pencil);
  background: color-mix(in srgb, var(--kr-rea) 7%, var(--kr-paper));
  border: 1px solid color-mix(in srgb, var(--kr-rea) 20%, var(--kr-dot));
  border-radius: var(--kr-r-sm);
  padding: 0.32em 0.62em;
}

/* On a roundup row the chips inherit air from the price row above them. After a
   review's multi-line verdict paragraph they do not, and sit on the text. */
.kr-review__verdict + .kr-roundup__spec {
  margin-top: 0.7rem;
}

/* Post cards cannot take `spec` — kronika's `rec` validates against a closed
   ITEM_KEYS set, and forking it would fail the BUILD if an engine sync ever
   reverted it. The same facts ride in `meta:` instead, one string, so the
   card gains the information without the site gaining that risk. */
.kr-rec__meta {
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--kr-pencil);
}


/* == measure ==
   One left edge per section (2026-09-10, UX).

   Upstream ships `.kr-section-head { max-width: none }`, so a section's HEADING
   runs the full band while the content under it is capped by WordPress's
   constrained layout at the band's own `contentSize`. Below ~1200px the two
   converge and it looks deliberate. On a 1440px screen they do not: the roundup
   heading sat at x=58 while its table and list sat at x=240 — a 182px jog, and
   four different left edges down one page (58 heads / 240 roundup / 320 hero /
   384 prose). That is what reads as "cramped narrow in the middle": the body
   copy looks like a narrow ribbon parked to the right of its own headline.

   The head is capped to the SAME measure its band gives its content, so the
   3px rule, the heading, the lede and the content share one edge. `--kb-measure`
   mirrors the `band()` width argument in
   `wp-engine/templates/kronika/sections/index.mjs` — if a band's width changes
   upstream, change it here too. */
.kr-band {
  --kb-measure: 76rem;   /* band() default: cards, front, links, rea */
}

.kr-band--faq,
.kr-band--prose,
.kr-band--rec {
  --kb-measure: 42rem;
}

.kr-band--disclosure,
.kr-band--hero,
.kr-band--news,
.kr-band--review,
.kr-band--roundup,
.kr-band--statement {
  --kb-measure: 60rem;
}

/* `margin-inline: auto` is belt-and-braces — WordPress's constrained layout
   already centres a band's children with `!important`. */
.kr-band > .kr-section-head {
  max-width: var(--kb-measure);
  margin-inline: auto;
}