/* KCK glossary page styles.
   Loaded last, after kck-header-footer.css, which is the only sheet in this
   install declaring the brand tokens on :root. Tokens missing from that copy
   carry the canonical tokens.css value as a var() fallback. */

:root {
  /* Local token. The glossary letter mark has no equivalent on the main site. */
  --kck-gloss-letter: clamp(32px, 5vw, 44px);
  --kck-gloss-h1: clamp(24px, 4.5vw, 32px);
  /* The store's --kck-space-24. This is the offset that clears the chat widget,
     read off the live site rather than guessed. Same name as the blog's copy in
     kck-totop.css so the two are literally identical. */
  --kck-totop-bottom: 96px;
  /* The glossary's token copy stops at --doc-space-8, so the two larger steps
     the store uses are declared here with their canonical values. */
  --doc-space-10: 40px;
  --doc-space-12: 48px;
}

/* ── BREADCRUMB ──────────────────────────────────────────────────────────────
   Matched to the main site pattern on /slim-shaker-kitchen-cabinets: a slash
   separator in the rule color, quiet links, the current page in ink at 600
   and not a link. Links use --doc-mid-aa rather than the main site's #7a736d,
   which is not a token and sits lighter than AA comfort.

   Markup comes from fragments/breadcrumb.php: nav.breadcrumb > ol > li. */

.section-single .breadcrumb {
  margin: 0 0 var(--doc-space-6);
  /* The breadcrumb is the first thing in the section and the theme gives the
     section no top padding, so it sat tight against the header. */
  padding: var(--doc-space-5) 0 0;
  border: 0;
}

.section-single .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--doc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-single .breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--doc-space-2);
  margin: 0;
  padding: 0;
  font-family: var(--doc-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--doc-mid-aa, #6e675f);
}

.section-single .breadcrumb li:not(:first-child)::before {
  content: "/";
  color: var(--doc-line);
}

.section-single .breadcrumb a {
  /* style.css sets margin-right: 25px on every crumb link, which stacked on top
     of the flex gap and left a wide hole either side of each slash. */
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--doc-mid-aa, #6e675f);
  text-decoration: none;
}

.section-single .breadcrumb a:hover {
  color: var(--doc-red);
  text-decoration: underline;
}

.section-single .breadcrumb [aria-current="page"] {
  font-weight: 600;
  color: var(--doc-ink);
}

/* ── DEFINITION PAGE WIDTH ───────────────────────────────────────────────────
   The 282 definition pages are deliberately wider than the rest of the site.

   The body container is capped at 1133px by kck-header-footer.css while the
   header container is 1440px, so on a 1500px screen the copy sat 147px inside
   the logo. These pages lift that cap to the header's 1440px, which is the same
   value .header-v2 .shell and .footer-v2 .shell already use, so the copy starts
   on the header's own left edge.

   :has(.post-main) scopes all of this to definition pages. The index renders
   .post-primary instead, so it keeps the 1133px container untouched. Verified
   against the live markup of both templates. */

.kckhf-header-container + .shell:has(.post-main) {
  max-width: 1440px;
}

/* new-styles.css caps this at 780px, which is the narrow column these pages are
   moving away from. */
.section-single .content:has(.post-main) {
  max-width: none;
}

/* ── TERM PAGE FLOATED FIGURE ────────────────────────────────────────────────
   Markup comes from the kck-glossary-layout plugin, which lifts the first
   aligned image out of the copy into a figure placed before it. Being before
   the copy in source order is exactly what a float needs, so this is a
   stylesheet change with no plugin change behind it.

   Why the image floats at its own width: 250 of the 279 image files are exactly
   400px wide and the widest is 421px, so the old 240px rail was showing every
   one of them at 60% of the detail the file holds. No width is set here. A
   shrink-to-fit float takes the per-image max-width the plugin writes inline,
   so a 180px file stays 180px and nothing upscales. */

.kck-gloss-lead {
  float: right;
  margin: 0 0 var(--doc-space-5) var(--doc-space-8);
}

/* Nothing after the copy may ride up beside the image. */
.kck-shop-links,
.post-main .post__actions,
.post-main .yarpp-related {
  clear: both;
}

.kck-gloss-figure {
  /* max-width is set inline by the plugin, per image, from the width attribute.
     This caps it for the handful of files that report no width. */
  max-width: 400px;
  margin: 0;
}

.kck-gloss-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--doc-line);
  border-radius: var(--doc-radius-sm);
}

/* The caption is printed by the layout plugin when the term carries the
   _kck_gl_caption meta. 14px is the scale's captions and secondary text step. */
.kck-gloss-figure__cap {
  margin: var(--doc-space-2) 0 0;
  font-family: var(--doc-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--doc-mid-aa, #6e675f);
}

/* ── COLUMN ALIGNMENT ────────────────────────────────────────────────────────
   Three theme rules put three different left edges on one page. */

/* new-styles.css centers the definition at 715px inside a 780px column, which
   set it 33px right of the breadcrumb, the heading and the related terms. */
.post-main .post__entry {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Back to Glossary carried a 75px horizontal margin from a media query rule. */
.post-main .post__actions {
  margin-left: 0;
  margin-right: 0;
}

/* Several definitions carry an empty paragraph left by the block editor. The
   plugin strips the one it creates by lifting the image out, so this is for the
   ones that were already in the content. */
.post__entry > p:empty {
  display: none;
}

/* ── TERM PAGE HEAD ──────────────────────────────────────────────────────── */

.post-main .post__head {
  margin: 0 0 var(--doc-space-6);
  padding: 0 0 var(--doc-space-5);
  border-bottom: 1px solid var(--doc-line);
}

/* Both selectors on purpose: the h6 is what the template renders today, the
   span is what it becomes. Nothing to change here after the swap. */
.post-main .post__head h6,
.post-main .post__head .gloss-eyebrow {
  display: block;
  margin: 0 0 var(--doc-space-2);
  font-family: var(--doc-font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--doc-red);
}

.post-main .post__head h1,
.post-primary .post__entry h1 {
  font-family: var(--doc-font-heading);
  font-size: var(--kck-gloss-h1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--doc-ink);
}

/* The two templates need different bottom margins, so they are split here.

   On a definition page the H1 is the last child of .post__head, which carries
   its own 20px padding, a hairline and a 24px margin, so the H1 itself must
   stay at 0. A bottom margin here would open a gap above that rule.

   On the index the H1 sits loose in .post__entry with the intro right after it,
   so it needs its own margin. new-styles.css set 24px on it; an earlier version
   of the rule above declared a blanket margin: 0 for both templates, which
   matched that selector at equal specificity, loaded later, and wiped it. That
   is what closed the gap under the index H1, not the empty paragraph. */
.post-main .post__head h1 {
  margin: 0;
}

.post-primary .post__entry h1 {
  margin: 0 0 var(--doc-space-6);
}

/* ── PROSE ───────────────────────────────────────────────────────────────── */

.post-main .post__entry,
.post-primary .post__entry {
  font-family: var(--doc-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--doc-charcoal);
}

.post-main .post__entry p,
.post-primary .post__entry p {
  margin: 0 0 var(--doc-space-5);
  font-size: 16px;
  line-height: 1.7;
}

/* The index keeps the 680px measure. Its body copy is an introduction with no
   image beside it, so there is nothing to justify a long line there. */
.post-primary .post__entry p {
  max-width: var(--kck-measure);
}

/* Definition pages run the full column. Andrew's call, and the floated image
   takes the right side out of most lines. On the longest definition 2 of 17
   lines reach the full width at 1280px. */
.post-main .post__entry p {
  max-width: none;
}

.post-main .post__entry p:last-child,
.post-primary .post__entry p:last-child {
  margin-bottom: 0;
}

/* Prose links. Note the asymmetry: the definition-page side is a bare `a`,
   which is what reaches into the shop links block below. */
.post-main .post__entry a,
.post-primary .post__entry p a {
  color: var(--doc-red);
  text-decoration: underline;
}

.post-main .post__entry a:hover,
.post-primary .post__entry p a:hover {
  color: var(--doc-red-hover);
}

/* The shop links block is exempt from the prose link rule above.

   This has to live here, not in the shop links plugin, and the reason is worth
   recording. The plugin's own sheet sets the tiles to --doc-info correctly, but
   it is enqueued FIRST, before every theme sheet, and its selector
   .kck-shop-links__link is 0-1-0 against .post-main .post__entry a at 0-2-1.
   It loses on specificity and on order, so the plugin can never win from where
   it loads without an !important, which is not allowed. That is why the tiles
   rendered with red underlined text inside a teal border: border and chevron
   were uncontested and came through teal, while color and text-decoration were
   overridden by the rule above.

   0-3-0, in the last sheet loaded. Nothing to change in the plugin. */
.post-main .post__entry .kck-shop-links__link {
  color: var(--doc-info);
  text-decoration: none;
}

.post-main .post__entry .kck-shop-links__link:hover,
.post-main .post__entry .kck-shop-links__link:focus {
  color: var(--doc-info);
  text-decoration: none;
}

/* A 400px float in a 620px column left three words a line. Capped to a third
   of the column, and it stops floating on a phone. */
.post-main .post__entry img.alignright {
  float: right;
  width: 33%;
  max-width: 240px;
  height: auto;
  margin: 0 0 var(--doc-space-5) var(--doc-space-6);
  border: 1px solid var(--doc-line);
  border-radius: var(--doc-radius-sm);
}

.post-main .post__entry img.alignleft {
  float: left;
  width: 33%;
  max-width: 240px;
  height: auto;
  margin: 0 var(--doc-space-6) var(--doc-space-5) 0;
  border: 1px solid var(--doc-line);
  border-radius: var(--doc-radius-sm);
}

/* ── INDEX: LETTER NAV ───────────────────────────────────────────────────── */

/* Specificity matched on purpose: the theme sets 44px top and 112px bottom
   through :not() selectors that outrank a bare .list-order. */
.list-order,
.list-order:not(:first-child),
.list-order:not(:last-child) {
  margin: var(--doc-space-8) 0 0;
}

.list-order .list__head {
  margin: 0 0 var(--doc-space-6);
  padding: var(--doc-space-3) 0;
  border-top: 1px solid var(--doc-line);
  border-bottom: 1px solid var(--doc-line);
}

.list-order .list__head ul {
  display: flex;
  flex-wrap: wrap;
  /* The theme sets space-between here, which strands X, Y and Z on their row. */
  justify-content: flex-start;
  gap: var(--doc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-order .list__head li {
  margin: 0;
  padding: 0;
}

.list-order .list__head a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--doc-space-2);
  border: 1px solid transparent;
  border-radius: var(--doc-radius-sm);
  font-family: var(--doc-font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--doc-red);
  text-decoration: none;
  transition:
    background-color var(--doc-dur, 200ms) var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--doc-dur, 200ms) var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--doc-dur, 200ms) var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.list-order .list__head a:hover {
  border-color: var(--doc-line);
  background: var(--doc-cream-soft, #fbf8f3);
  color: var(--doc-red-hover);
}

.list-order .list__head li.active a,
.list-order .list__head a.active {
  background: var(--doc-red);
  border-color: var(--doc-red);
  color: #fff;
}

.list-order .list__head a:focus-visible {
  outline: 2px solid var(--doc-ink);
  outline-offset: 2px;
}

/* ── INDEX: LETTER GROUPS ────────────────────────────────────────────────── */

.list-order .list__body > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-order .list__body > ul > li[data-id] {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--doc-space-5);
  margin: 0;
  padding: var(--doc-space-6) 0;
  border-bottom: 1px solid var(--doc-line);
  /* The theme sets 130px here, which leaves a tall gap on a two term group. */
  min-height: 0;
  /* Not a spacing token: this is the jump landing offset, clearing the header. */
  scroll-margin-top: 120px;
}

.list-order .list__body > ul > li[data-id]:last-child {
  border-bottom: 0;
}

.list-order .list__body > ul > li[data-id]::before {
  content: attr(data-title);
  /* Static on purpose. The theme positions this absolutely, which removes it
     from the grid and drops the term list into the 64px letter column. */
  position: static;
  align-self: start;
  display: block;
  font-family: var(--doc-font-heading);
  font-size: var(--kck-gloss-letter);
  font-weight: 700;
  line-height: 1;
  color: var(--doc-line);
  text-transform: uppercase;
}

/* Q, X, Y and Z have no terms yet, and the template gives an empty group a
   "No definitions available" paragraph, which reads as a rendering fault. The
   layout plugin now tags those rows; the :has() selector is kept as the
   fallback for the case where the plugin's anchors option is switched off. */
.list-order .list__body > ul > li.kck-gloss-group--empty,
.list-order .list__body > ul > li[data-id]:not(:has(ol li)) {
  display: none;
}

.list-order .list__body ol {
  /* The theme sets 33.333%, which is the old single narrow column. */
  width: 100%;
  min-width: 0;
  columns: 3;
  column-gap: var(--doc-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-order .list__body ol > li {
  margin: 0 0 var(--doc-space-2);
  padding: 0;
  min-width: 0;
  break-inside: avoid;
}

/* Ink, not red. Red means action sitewide, and 282 red items on one index
   spends that signal on a list. Red stays on the letter nav and the shop block. */
.list-order .list__body ol > li > a {
  display: inline-block;
  font-family: var(--doc-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--doc-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.list-order .list__body ol > li > a:hover {
  color: var(--doc-red);
  text-decoration: underline;
}

/* ── BACK TO GLOSSARY ────────────────────────────────────────────────────────
   The template renders a bare anchor with a 75px margin from a media query
   rule. The arrow is drawn here rather than added to the markup. */

.post-main .post__actions {
  margin: var(--doc-space-5) 0 0;
}

.post-main .post__actions a {
  display: inline-flex;
  align-items: center;
  gap: var(--doc-space-2);
  font-family: var(--doc-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--doc-red);
  text-decoration: none;
}

.post-main .post__actions a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.post-main .post__actions a:hover {
  color: var(--doc-red-hover);
  text-decoration: none;
}

.post-main .post__actions a:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.post-main .post__actions a:focus-visible {
  outline: 2px solid var(--doc-ink);
  outline-offset: 3px;
}

/* ── BACK TO TOP ─────────────────────────────────────────────────────────────
   Ported from the main site's .kck-totop in kck-header-2026.css. That sheet
   uses the --kck-* token set, which is not on this install, so each value is
   mapped to its --doc-* equivalent or written as the literal the main site
   resolves to. The behavior comes from kck-glossary-totop.js. */

.kck-totop {
  position: fixed;
  right: var(--doc-space-8);
  bottom: var(--kck-totop-bottom);
  z-index: 8900;
  display: inline-flex;
  align-items: center;
  gap: var(--doc-space-2);
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--doc-line);
  box-shadow: var(--doc-shadow-md, 0 4px 14px rgba(56, 52, 46, 0.08));
  font-family: var(--doc-font-heading);
  /* 13px, matched to .kck-totop in the store's kck-header-2026.css. The store
     is the reference for this component, so all three properties carry the same
     value. 13px has no named token in the scale, which jumps 12 to 14, but it
     is on the raw px scale and matching the store matters more here. */
  font-size: 13px;
  font-weight: 700;
  color: var(--doc-ink);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity var(--doc-dur, 200ms) var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--doc-dur, 200ms) var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    visibility var(--doc-dur, 200ms),
    border-color 140ms var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    color 140ms var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.kck-totop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.kck-totop:hover,
.kck-totop:focus {
  border-color: var(--doc-red);
  color: var(--doc-red);
  text-decoration: none;
}

.kck-totop:focus-visible {
  outline: 2px solid var(--doc-red);
  outline-offset: 3px;
}

.kck-totop svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The glossary runs header v1, which puts has-drawer-open on <html>, not the
   kck-drawer-open on <body> that the main site's v2 header uses. The ported
   rule named the wrong class on the wrong element and never fired. */
html.has-drawer-open .kck-totop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mobile collapses the pill to a 44px circle and drops the label, matching the
   live site. This whole block was missing from the port. */
@media (max-width: 767px) {
  .kck-totop {
    right: var(--doc-space-4);
    bottom: calc(var(--kck-totop-bottom) + env(safe-area-inset-bottom, 0px));
    padding: 0;
    width: 44px;
    justify-content: center;
  }

  .kck-totop span {
    display: none;
  }
}

@media print {
  .kck-totop {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kck-totop {
    transition: none;
    transform: none;
  }
}

/* ── RELATED TERMS ───────────────────────────────────────────────────────────
   YARPP output. Three things in new-styles.css had to be dealt with:
     body .yarpp-related .section-related h4 { font-size:34px; margin-bottom:30px !important }
     body .yarpp-related .section-related h4:before { width:172px; height:3px }
     body .yarpp-related .section-related a { float:left; clear:both; font-size:16px }
   The 30px margin carried !important. That one word has been removed from
   new-styles.css, so the margin is set properly here. Everything else is
   overridden at matching specificity. */

body .yarpp-related {
  margin: var(--doc-space-8) 0 0;
  padding: var(--doc-space-8) 0 0;
  border-top: 1px solid var(--doc-line);
}

body .yarpp-related .section-related h4 {
  padding-bottom: var(--doc-space-3);
  margin-bottom: var(--doc-space-4);
  font-family: var(--doc-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--doc-ink);
}

/* The theme's accent bar, kept but scaled. 172px was drawn for a 34px heading
   and read as an underline once the heading came down to 18px. */
body .yarpp-related .section-related h4:before {
  width: 48px;
  height: 2px;
  background-color: var(--doc-red);
}

body .yarpp-related .section-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .yarpp-related .section-related li {
  margin: 0;
  padding: 0;
  min-width: 0;
}

body .yarpp-related .section-related li + li {
  margin-top: var(--doc-space-2);
}

/* float and clear are legacy layout from new-styles.css. */
body .yarpp-related .section-related a {
  float: none;
  clear: none;
  display: inline-block;
  font-family: var(--doc-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--doc-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

body .yarpp-related .section-related a:hover {
  color: var(--doc-red);
  text-decoration: underline;
}

/* ── THEME SPACING THIS SHEET HAS TO UNDO ────────────────────────────────────

   .post-main:not(:last-child) { margin-bottom: 126px } in new-styles.css is the
   gap under Back to Glossary. Matched selector, not a guess. */

.post-main:not(:last-child) {
  margin-bottom: var(--doc-space-10, 40px);
}

/* .post-primary .post__head { margin-bottom: 24px } in new-styles.css is the
   extra space above "Common Kitchen Cabinet Terminology".

   An earlier version of this rule used :empty and did nothing, because the div
   holds a newline and an HTML comment, so it is not empty. No :empty here. The
   index is the only template using .post-primary (term pages use .post-main)
   and the div never has content on it, so hiding it outright is safe. */
.post-primary .post__head {
  display: none;
}

/* ── INDEX: COMMON TERMS LIST ────────────────────────────────────────────────
   The "Common kitchen cabinet terms" block on the index.

   Everything is keyed to .kck-terms rather than .post__entry ul on purpose.
   The 282-term A-Z directory is also a ul inside .post__entry, so a generic
   list selector would restyle the whole index. Verified after building this:
   the directory rows are still grid, still list-style none, still ink links.

   The links in this block were computing to rgb(0, 0, 238), the browser's own
   default link blue, because no rule in any sheet on this install styles an
   anchor inside a list in .post__entry. That is the blue in the screenshot. */

.kck-terms {
  margin: var(--doc-space-10, 40px) 0 0;
  /* Matches the index intro paragraphs rather than the full 780px column. */
  max-width: var(--kck-measure);
}

/* 28px is not on the type scale. It is what .kck_faq__title carries in
   kck-header-footer.css, and this heading sits directly above that FAQ, so the
   two section headings matching is worth more than rounding one to 24 or 32.
   new-styles.css sets .post-primary .post__entry h2 to 34px in Nunito at
   0-2-1, so this rule carries the container classes to outrank it. */
.post-primary .post__entry .kck-terms__title {
  margin: 0 0 var(--doc-space-5);
  font-family: var(--doc-font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--doc-ink);
  text-align: left;
}

.kck-terms__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kck-terms__list > li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--doc-space-4) var(--doc-space-5);
  font-family: var(--doc-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--doc-charcoal);
}

.kck-terms__list > li:last-child {
  padding-bottom: 0;
}

/* A short red rule rather than a disc, echoing the 2px mark under the headings
   elsewhere on the page. */
.kck-terms__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 2px;
  background: var(--doc-red);
}

.kck-terms__list > li strong {
  font-weight: 700;
  color: var(--doc-ink);
}

.kck-terms__list > li a {
  color: var(--doc-red);
  text-decoration: none;
}

.kck-terms__list > li a:hover,
.kck-terms__list > li a:focus {
  color: var(--doc-red-hover);
  text-decoration: underline;
}

.kck-terms__list > li a:focus-visible {
  outline: 2px solid var(--doc-ink);
  outline-offset: 2px;
}

/* ── FAQ, QUIET VARIANT ──────────────────────────────────────────────────────
   kck-header-footer.css already carries the whole .kck_faq component on this
   install, in its card form. Only the --quiet overrides belong here, matching
   the variant used on /slim-shaker-kitchen-cabinets: no cards, one hairline
   between rows, the toggle flush right. Native <details>, no JavaScript.

   Two notes on what had to be worked around:
     new-styles.css sets .post-primary .post__entry h2 { font-size: 34px } at
     0-2-1, which outranks .kck_faq__title at 0-1-0, so the title rule below
     carries the container classes.
     The chrome sheet sizes .kck_faq with --kck-container-xs, which is not a
     token on this install, so the width is set here instead. */

.post__entry .kck_faq {
  max-width: 720px;
  margin: var(--doc-space-10, 40px) 0 0;
}

/* 28px is not on the type scale, but it is what .kck_faq__title carries in
   kck-header-footer.css, and matching the shared component is worth more here
   than rounding to 24 or 32 for this one page. The mobile step down to 24px is
   restored in the 767 block, because this selector outranks the component's. */
.post-primary .post__entry .kck_faq__title {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 var(--doc-space-6);
}

.kck_faq--quiet .kck_faq__title {
  text-align: left;
}

.kck_faq--quiet .kck_faq__items {
  border-top: 1px solid var(--doc-line);
}

.kck_faq--quiet .kck_faq__item {
  border: 0;
  border-bottom: 1px solid var(--doc-line);
  border-radius: 0;
  margin-bottom: 0;
  background: none;
  box-shadow: none;
}

.kck_faq--quiet .kck_faq__item:hover,
.kck_faq--quiet .kck_faq__item[open] {
  border-color: var(--doc-line);
  box-shadow: none;
}

.kck_faq--quiet .kck_faq__question {
  padding: var(--doc-space-5) 0;
}

/* The chrome sheet washes the whole row red on hover, which suits a card and
   not a hairline row. */
.kck_faq--quiet .kck_faq__question:hover {
  background-color: transparent;
  color: var(--doc-red);
}

/* The item already carries a bottom rule, so the divider under an open
   question would double it. */
.kck_faq--quiet .kck_faq__item[open] .kck_faq__question {
  border-bottom: 0;
}

.kck_faq--quiet .kck_faq__answer {
  padding: 0 var(--doc-space-10, 40px) var(--doc-space-5) 0;
}

.kck_faq--quiet .kck_faq__answer p {
  max-width: none;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* The figure only floats where there is room beside it. kck-header-footer.css
   re-floats the sidebar at 25% from 986px up, which drops the content column
   from 933px to 701px at that one pixel, so the space left beside a 400px image
   collapses to under 300px between 986 and roughly 1134. Rather than shrink the
   image back down in that band, the figure stacks below 1280 and the copy runs
   the full column, which is the same arrangement these pages shipped with last
   round. 1279 is the sanctioned breakpoint nearest that cliff. */
@media (max-width: 1279px) {
  .kck-gloss-lead {
    float: none;
    margin: 0 0 var(--doc-space-5);
  }
}

@media (max-width: 1023px) {
  .list-order .list__body ol {
    columns: 2;
  }
}

@media (max-width: 767px) {
  /* The component drops its title to 24px here, and the desktop rule above
     outranks it, so the step down has to be repeated at the same specificity. */
  .post-primary .post__entry .kck_faq__title {
    font-size: 24px;
  }

  /* The inline max-width the plugin writes is the file's real width, which can
     exceed the viewport once the gutters are taken off, so the figure is capped
     to the column here and the inline value becomes the ceiling, not the floor. */
  .kck-gloss-figure {
    max-width: 100%;
  }

  /* ── STICKY LETTER ROW ─────────────────────────────────────────────────────
     27 letters wrap onto about five rows on a phone, which pushes the first
     term below the fold. One swipeable row instead, and it pins to the top of
     the viewport once the page scrolls past it, so a visitor deep in the S
     block can jump without scrolling back up.

     No markup change and no second nav, so there is nothing extra for Google to
     read. The row is the same <ul> the desktop layout uses.

     The header is not a fixed height: 88px on desktop, 68px on mobile, 56px
     once it compacts, and it slides fully out of view on a downward scroll. So
     the offset cannot be a literal. kck-glossary-totop.js measures the header's
     bottom edge and publishes it as --kck-gloss-head; the 68px fallback here is
     the mobile header height, so the row still works with the script blocked.

     z-index sits under the header's 100, so the header always wins. */
  .list-order .list__head {
    position: sticky;
    top: var(--kck-gloss-head, 68px);
    z-index: 40;
    margin-left: calc(var(--doc-space-4) * -1);
    margin-right: calc(var(--doc-space-4) * -1);
    padding: var(--doc-space-2) var(--doc-space-4);
    background: #fff;
  }

  .list-order .list__head ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Momentum scrolling on iOS without the scrollbar sitting over the letters. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .list-order .list__head ul::-webkit-scrollbar {
    display: none;
  }

  .list-order .list__head li {
    flex: none;
    scroll-snap-align: start;
  }

  /* Any image the plugin did not lift, for example an aligncenter one the
     editor placed on purpose mid definition. */
  .post-main .post__entry img.alignright,
  .post-main .post__entry img.alignleft {
    float: none;
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 0 var(--doc-space-5);
  }

  /* The landing offset now has to clear the header and the sticky row above it,
     not the header alone. The row is 52px including its padding and rules. */
  .list-order .list__body > ul > li[data-id] {
    grid-template-columns: 48px 1fr;
    gap: var(--doc-space-4);
    padding: var(--doc-space-5) 0;
    scroll-margin-top: calc(var(--kck-gloss-head, 68px) + 52px);
  }
}

@media (max-width: 600px) {
  .list-order .list__head a {
    min-width: 44px;
    min-height: 44px;
  }

  /* The sticky row has a shadow only once it has left its place in the flow,
     which is what separates it from the terms scrolling under it. */
  .list-order .list__head {
    box-shadow: var(--doc-shadow-sm);
  }

  .list-order .list__body ol {
    columns: 1;
  }
}

@media (max-width: 480px) {
  .list-order .list__body > ul > li[data-id] {
    grid-template-columns: 1fr;
    gap: var(--doc-space-2);
  }
}