/* Self-hosted variable fonts, woff2 only, latin and latin-ext subsets.
   Files come from the @fontsource-variable packages (OFL licensed):
   Albert Sans (weight axis, upright and italic), Bricolage Grotesque
   (weight and optical size axes), Spline Sans Mono (weight axis, upright and
   italic). Nothing here is fetched from the internet, so the type does not
   change under a page when a CDN does. Regenerate by copying the latin files
   out of the packages and rewriting the family names and paths. */

/* albert-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* albert-sans-latin-wght-normal */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* albert-sans-latin-ext-wght-italic */
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* albert-sans-latin-wght-italic */
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* bricolage-grotesque-latin-ext-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/user/themes/kahuna-site/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* bricolage-grotesque-latin-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/user/themes/kahuna-site/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* spline-sans-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* spline-sans-mono-latin-wght-normal */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* spline-sans-mono-latin-ext-wght-italic */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* spline-sans-mono-latin-wght-italic */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* YetiSearch Simple Modal CSS
   Lightweight typeahead with grouped results
   Uses shared theme variables from yetisearch-pro-theme.css
*/

/* Modal container */
.ys-simple-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.ys-simple-modal[aria-hidden="true"] {
  display: none;
}

/* Backdrop */
.ys-simple-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ys-overlay-bg);
  backdrop-filter: var(--ys-overlay-blur);
  -webkit-backdrop-filter: var(--ys-overlay-blur);
}

/* Dialog */
.ys-simple-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 16px;
  background: var(--ys-panel-bg);
  border: 1px solid var(--ys-border);
  border-radius: 12px;
  box-shadow: var(--ys-dialog-shadow);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}

/* Input wrapper */
.ys-simple-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ys-border);
  flex-shrink: 0;
}

.ys-simple-search-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
}

.ys-simple-input-wrapper input {
  flex: 1;
  background: var(--ys-input-bg);
  border: 1px solid var(--ys-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ys-input-text);
  outline: none;
}
.ys-simple-input-wrapper input:focus {
  border-color: var(--ys-accent, var(--ys-border));
}

.ys-simple-input-wrapper input::placeholder {
  color: var(--ys-input-placeholder);
}

.ys-simple-shortcut {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ys-simple-shortcut kbd,
.ys-simple-command kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--ys-kbd-bg);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--ys-kbd-text);
}

/* Results area */
.ys-simple-results {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ys-scrollbar-thumb) var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar {
  width: 8px;
}

.ys-simple-results::-webkit-scrollbar-track {
  background: var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar-thumb {
  background: var(--ys-scrollbar-thumb);
  border-radius: 4px;
}

.ys-simple-results::-webkit-scrollbar-thumb:hover {
  background: var(--ys-scrollbar-thumb-hover);
}

/* Results header */
.ys-simple-results-header {
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--ys-text-secondary);
  border-bottom: 1px solid var(--ys-border);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Loading state */
.ys-simple-loading {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
}

.ys-simple-spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto 12px;
  animation: ys-simple-spin 1s linear infinite;
  color: var(--ys-accent);
}

.ys-simple-spinner-track {
  opacity: 0.25;
}

.ys-simple-spinner-head {
  opacity: 0.75;
}

@keyframes ys-simple-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Empty state */
.ys-simple-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

.ys-simple-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ys-text-muted);
}

.ys-simple-empty-hint {
  font-size: 0.875rem;
  margin-top: 4px;
}

.ys-suggestion-link {
  color: var(--ys-accent);
  text-decoration: underline;
  cursor: pointer;
}

.ys-suggestion-link:hover {
  color: var(--ys-accent-hover);
}

/* Type more */
.ys-simple-type-more {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Results list */
.ys-simple-results-list {
  padding: 8px 0;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Group */
.ys-simple-group {
  margin-bottom: 8px;
}

.ys-simple-group:last-child {
  margin-bottom: 0;
}

.ys-simple-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ys-text-secondary);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ys-simple-group-icon {
  width: 16px;
  height: 16px;
}

/* Result item */
.ys-simple-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ys-simple-result:hover {
  background: var(--ys-result-hover);
}

.ys-simple-result.selected {
  background: var(--ys-result-selected-bg);
  box-shadow: inset 0 0 0 1px var(--ys-result-selected-ring);
}

.ys-simple-result-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.ys-simple-result-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ys-simple-result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ys-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-title mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-breadcrumb {
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-distance {
  align-self: flex-start;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--ys-kbd-bg);
  color: var(--ys-kbd-text);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
}

.ys-simple-result-snippet {
  font-size: 0.75rem;
  color: var(--ys-text-muted);
  margin-top: 2px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ys-simple-result-snippet mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-arrow {
  width: 16px;
  height: 16px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ys-simple-result:hover .ys-simple-result-arrow,
.ys-simple-result.selected .ys-simple-result-arrow {
  opacity: 1;
}

/* Footer */
.ys-simple-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ys-border);
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  flex-shrink: 0;
}

.ys-simple-commands {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ys-simple-command {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ys-simple-command kbd + kbd {
  margin-left: 2px;
}

.ys-simple-powered-by a {
  color: var(--ys-accent);
  text-decoration: none;
}

.ys-simple-powered-by a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .ys-simple-modal {
    padding-top: 5vh;
  }

  .ys-simple-dialog {
    margin: 0 8px;
    max-height: 90vh;
  }

  .ys-simple-footer {
    flex-direction: column;
    gap: 8px;
  }

  .ys-simple-commands {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: Inter;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: OpenSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/open-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: Geom;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/geom-variable.woff2') format('woff2');
}
@font-face {
  font-family: NunitoSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/nunito-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: UbuntuSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/ubuntu-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: WorkSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/work-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: PublicSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/public-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: Quicksand;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/quicksand-variable.woff2') format('woff2');
}
@font-face {
  font-family: JetBrainsMono;
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/jetbrains-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: FiraCode;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/fireacode-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: IntelOneMono;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/intelone-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: AtkinsonHyperlegibleMono;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/atkins-hyper-legible-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: Inconsolata;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/inconsolata-variable.woff2') format('woff2');
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6);
}
.dark * {
  scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
}
.dark *::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.5);
}
.dark *::-webkit-scrollbar-thumb:hover {
  background: rgba(75, 85, 99, 0.7);
}
.prose {
  max-width: none;
  font-size: var(--text-base);
  h1, h2, h3, h4, h5, h6 {
    position: relative;
    scroll-margin-top: calc(var(--spacing) * 24);
    .anchor-link {
      position: absolute;
      left: calc(var(--spacing) * -6);
      color: var(--color-gray-400);
      text-decoration-line: none;
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary);
        }
      }
    }
    &:hover .anchor-link {
      opacity: 100%;
    }
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h3 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h4 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  a {
    color: var(--color-primary);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary-hover);
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-primary-dark);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-dark-hover);
        }
      }
    }
  }
  ul {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: disc;
    padding-left: calc(var(--spacing) * 6);
  }
  ol {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: decimal;
    padding-left: calc(var(--spacing) * 6);
  }
  li {
    margin-block: calc(var(--spacing) * 1);
  }
  blockquote:not(:has(.md-alert)) {
    margin-block: calc(var(--spacing) * 4);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-primary);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-style: italic;
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .md-alert {
    margin-block: calc(var(--spacing) * 4);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-style: normal;
  }
  .md-alert--note {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }
  .md-alert--tip {
    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }
  .md-alert--important {
    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
  }
  .md-alert--warning {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .md-alert--caution {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }
  .md-alert-title {
    margin-top: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    svg {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
    }
  }
  .md-alert-body {
    > *:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
    > *:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  table {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  thead {
    background-color: var(--color-gray-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  td {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .table-striped tr:nth-child(even) {
    background-color: var(--color-gray-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
      }
    }
  }
  .table-compact th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .table-compact td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  :not(pre) > code {
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    color: var(--color-accent);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-accent-dark);
    }
    font-size: var(--helios-code-size, var(--text-sm));
  }
  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: inherit !important;
  }
  pre, pre code, pre[class*="language-"], code[class*="language-"] {
    font-family: var(--font-mono) !important;
    font-size: var(--helios-code-size, var(--text-sm)) !important;
  }
  hr {
    margin-block: calc(var(--spacing) * 8);
    border-color: var(--color-gray-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  img {
    border-radius: var(--radius-lg);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.prose-lg {
  font-size: var(--text-lg);
}
.dark body {
  color: var(--color-gray-300);
}
.sidebar-nav {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }
  .nav-item {
    display: block;
    .nav-link {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 2);
      border-radius: var(--radius-md);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      color: var(--color-gray-700);
      &:where(.dark, .dark *) {
        color: var(--color-gray-300);
      }
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-800);
          }
        }
      }
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--color-white);
          }
        }
      }
    }
    .nav-link.active {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-icon {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--color-gray-400);
      &:where(.dark, .dark *) {
        color: var(--color-gray-500);
      }
    }
    .nav-link.active .nav-icon {
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-icon svg {
      height: 100%;
      width: 100%;
    }
    .nav-link-container {
      display: flex;
      align-items: center;
      border-radius: var(--radius-md);
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-800);
          }
        }
      }
    }
    .nav-link-container.active {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
    }
    .nav-link-container .nav-link {
      flex: 1;
      &:hover {
        @media (hover: hover) {
          background-color: transparent;
        }
      }
    }
    .nav-link-container.active .nav-link {
      background-color: transparent;
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-toggle-btn {
      display: flex;
      height: calc(var(--spacing) * 8);
      width: calc(var(--spacing) * 8);
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-700);
          }
        }
      }
    }
    .nav-toggle {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      color: var(--color-gray-400);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    .nav-toggle.expanded {
      rotate: 90deg;
    }
  }
  .nav-children {
    margin-top: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--color-gray-200);
    padding-left: calc(var(--spacing) * 2);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .nav-section {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
}
.mobile-nav-overlay {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 40;
  background-color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.mobile-nav-panel {
  position: fixed;
  top: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: calc(var(--spacing) * 80);
  max-width: 85vw;
  background-color: var(--color-white);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
  }
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.mobile-nav-panel.closed {
  --tw-translate-x: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  a {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-dark);
        }
      }
    }
  }
  .separator {
    color: var(--color-gray-400);
    &:where(.dark, .dark *) {
      color: var(--color-gray-600);
    }
  }
  .current {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
}
.prev-next-nav {
  margin-top: calc(var(--spacing) * 12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  padding-top: calc(var(--spacing) * 8);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  .nav-button {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-primary-dark);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    .label {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      color: var(--color-gray-500);
      text-transform: uppercase;
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
  }
  .nav-button.prev {
    text-align: left;
  }
  .nav-button.next {
    margin-left: auto;
    text-align: right;
  }
}
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 1);
  background-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
}
.theme-toggle-indicator {
  position: absolute;
  top: calc(var(--spacing) * 1);
  left: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-500);
  }
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  z-index: 0;
}
.theme-toggle-btn {
  position: relative;
  z-index: 10;
  display: flex;
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.theme-toggle-btn:hover {
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
}
.theme-toggle-btn-active {
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.toc-nav {
  .toc-link {
    padding-left: calc(var(--spacing) * 3);
    margin-left: -1px;
    &[data-active="true"] {
      border-color: var(--color-primary);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
    }
  }
  ul ul .toc-link {
    padding-left: calc(var(--spacing) * 6);
  }
  ul ul ul .toc-link {
    padding-left: calc(var(--spacing) * 9);
  }
  ul ul ul ul .toc-link {
    padding-left: calc(var(--spacing) * 12);
  }
}
.htmx-indicator {
  opacity: 0%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.htmx-request .htmx-indicator {
  opacity: 100%;
}
.htmx-request.htmx-indicator {
  opacity: 100%;
}
.callout {
  margin-block: calc(var(--spacing) * 6);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  padding-left: calc(var(--spacing) * 4);
  .callout-header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    .callout-icon {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
    }
    .callout-title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
  }
  .callout-content {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    p:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
    code {
      background-color: color-mix(in srgb, #fff 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
        }
      }
    }
  }
  &.callout-note {
    border-color: var(--color-blue-500);
    .callout-header {
      color: var(--color-blue-700);
      &:where(.dark, .dark *) {
        color: var(--color-blue-400);
      }
    }
  }
  &.callout-tip {
    border-color: var(--color-green-500);
    .callout-header {
      color: var(--color-green-700);
      &:where(.dark, .dark *) {
        color: var(--color-green-400);
      }
    }
  }
  &.callout-warning {
    border-color: var(--color-amber-500);
    .callout-header {
      color: var(--color-amber-700);
      &:where(.dark, .dark *) {
        color: var(--color-amber-400);
      }
    }
  }
  &.callout-danger {
    border-color: var(--color-red-500);
    .callout-header {
      color: var(--color-red-700);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
  }
  &.callout-caution {
    border-color: var(--color-red-500);
    .callout-header {
      color: var(--color-red-700);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
  }
  &.callout-info {
    border-color: var(--color-purple-500);
    .callout-header {
      color: var(--color-purple-700);
      &:where(.dark, .dark *) {
        color: var(--color-purple-400);
      }
    }
  }
  &.callout-important {
    border-color: var(--color-purple-500);
    .callout-header {
      color: var(--color-purple-700);
      &:where(.dark, .dark *) {
        color: var(--color-purple-400);
      }
    }
  }
}
.callout-collapsible {
  cursor: pointer;
  .callout-header {
    -webkit-user-select: none;
    user-select: none;
    .expand-icon {
      margin-left: auto;
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  &[open] .expand-icon {
    rotate: 90deg;
  }
  .callout-content {
    padding-top: calc(var(--spacing) * 2);
  }
}
.api-method {
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  &.method-get {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-green-300);
    }
  }
  &.method-post {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-blue-300);
    }
  }
  &.method-put {
    background-color: var(--color-amber-100);
    color: var(--color-amber-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  &.method-patch {
    background-color: var(--color-orange-100);
    color: var(--color-orange-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-orange-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-orange-300);
    }
  }
  &.method-delete {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
}
.api-endpoint-card {
  margin-block: calc(var(--spacing) * 8);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  .endpoint-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
    .endpoint-path {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      .path-param {
        color: var(--color-primary);
      }
    }
  }
  .endpoint-description {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
  .endpoint-body {
    padding: calc(var(--spacing) * 4);
  }
}
.api-params {
  margin-block: calc(var(--spacing) * 4);
  .params-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .params-table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    th {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      text-align: left;
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      background-color: var(--color-gray-50);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-800);
      }
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    td {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--color-gray-200);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 3);
      vertical-align: top;
      &:where(.dark, .dark *) {
        border-color: var(--color-gray-700);
      }
    }
    .param-name {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    .param-type {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .param-required {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-red-600);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
    .param-optional {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-400);
      &:where(.dark, .dark *) {
        color: var(--color-gray-500);
      }
    }
    .param-description {
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .param-default {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      code {
        border-radius: 0.25rem;
        background-color: var(--color-gray-100);
        padding-inline: calc(var(--spacing) * 1);
        &:where(.dark, .dark *) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
}
.api-examples {
  margin-block: calc(var(--spacing) * 6);
  .examples-tabs {
    display: flex;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    button {
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
      border-color: transparent;
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--color-gray-300);
          }
        }
      }
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &.active {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
    }
  }
  .example-panel {
    display: none;
    padding-top: calc(var(--spacing) * 4);
    &.active {
      display: block;
    }
  }
}
.api-responses {
  margin-block: calc(var(--spacing) * 4);
  .responses-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .response-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-block: calc(var(--spacing) * 2);
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    .response-code {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      &.code-2xx {
        color: var(--color-green-600);
        &:where(.dark, .dark *) {
          color: var(--color-green-400);
        }
      }
      &.code-4xx {
        color: var(--color-amber-600);
        &:where(.dark, .dark *) {
          color: var(--color-amber-400);
        }
      }
      &.code-5xx {
        color: var(--color-red-600);
        &:where(.dark, .dark *) {
          color: var(--color-red-400);
        }
      }
    }
    .response-description {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
  }
}
.api-nav-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  .api-method {
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
  }
}
.api-collection-sections section {
  scroll-margin-top: 5rem;
}
.api-collection-section > h2:first-child {
  margin-top: calc(var(--spacing) * 0);
}
kbd {
  font-family: var(--font-sans);
}
.search-modal {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  @media (width >= 40rem) {
    padding-top: 15vh;
  }
  background-color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.search-dialog {
  margin-inline: calc(var(--spacing) * 4);
  width: 100%;
  max-width: var(--container-2xl);
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  display: flex;
  max-height: 80vh;
  flex-direction: column;
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  flex-shrink: 0;
  .search-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--color-gray-400);
  }
  input {
    flex: 1;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &::placeholder {
      color: var(--color-gray-400);
    }
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--color-gray-500);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .search-shortcut {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    kbd {
      border-radius: 0.25rem;
      background-color: var(--color-gray-100);
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      font-family: var(--font-mono);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-800);
      }
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
  }
}
.search-results {
  min-height: calc(var(--spacing) * 0);
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    &:hover {
      background: rgba(156, 163, 175, 0.5);
    }
  }
  .dark & {
    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
    &::-webkit-scrollbar-thumb {
      background: rgba(75, 85, 99, 0.5);
      &:hover {
        background: rgba(75, 85, 99, 0.7);
      }
    }
  }
  .search-results-header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-800);
    }
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 10;
    background-color: var(--color-white);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
    .search-query-text {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
      &:where(.dark, .dark *) {
        color: var(--color-gray-300);
      }
    }
  }
  .search-empty {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    .empty-icon {
      margin-inline: auto;
      margin-bottom: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 12);
      width: calc(var(--spacing) * 12);
      color: var(--color-gray-300);
      &:where(.dark, .dark *) {
        color: var(--color-gray-600);
      }
    }
    .suggestion-link {
      cursor: pointer;
      color: var(--color-primary);
      text-decoration-line: underline;
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-hover);
        }
      }
    }
  }
  .search-loading {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    .spinner {
      margin-inline: auto;
      margin-bottom: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 6);
      width: calc(var(--spacing) * 6);
      animation: var(--animate-spin);
      color: var(--color-primary);
    }
  }
  .search-results-list {
    padding-block: calc(var(--spacing) * 2);
  }
  .search-group {
    margin-bottom: calc(var(--spacing) * 2);
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .search-group-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 5;
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 95%, transparent);
      }
    }
    .group-icon {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
    }
  }
  .search-result {
    margin-inline: calc(var(--spacing) * 2);
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
          }
        }
      }
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &.selected {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
        }
      }
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
      }
    }
    .result-icon {
      margin-top: calc(var(--spacing) * 0.5);
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--color-gray-400);
    }
    .result-content {
      display: flex;
      min-width: calc(var(--spacing) * 0);
      flex: 1;
      flex-direction: column;
      gap: calc(var(--spacing) * 0.5);
    }
    .result-title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      mark {
        border-radius: 0.25rem;
        background-color: var(--color-yellow-200);
        padding-inline: calc(var(--spacing) * 0.5);
        color: inherit;
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
          }
        }
      }
    }
    .result-breadcrumb {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .result-snippet {
      margin-top: calc(var(--spacing) * 0.5);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      --tw-leading: var(--leading-relaxed);
      line-height: var(--leading-relaxed);
      mark {
        border-radius: 0.25rem;
        background-color: var(--color-yellow-200);
        padding-inline: calc(var(--spacing) * 0.5);
        color: inherit;
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
          }
        }
      }
    }
    .result-arrow {
      margin-top: calc(var(--spacing) * 0.5);
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      flex-shrink: 0;
      color: var(--color-gray-400);
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 150ms;
      transition-duration: 150ms;
    }
    &:hover .result-arrow, &.selected .result-arrow {
      opacity: 100%;
    }
  }
}
.search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  .search-commands {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    .command {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 1.5);
      kbd {
        border-radius: 0.25rem;
        background-color: var(--color-gray-100);
        padding-inline: calc(var(--spacing) * 1.5);
        padding-block: calc(var(--spacing) * 0.5);
        font-family: var(--font-mono);
        &:where(.dark, .dark *) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .search-powered-by {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    a {
      color: var(--color-primary);
      &:hover {
        @media (hover: hover) {
          text-decoration-line: underline;
        }
      }
    }
  }
}
.search-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  background-color: var(--color-gray-100);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  .search-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .search-placeholder {
    display: none;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 40rem) {
      display: block;
    }
  }
  .search-kbd {
    display: none;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    @media (width >= 40rem) {
      display: flex;
    }
    kbd {
      border-radius: 0.25rem;
      background-color: var(--color-white);
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      font-family: var(--font-sans);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-900);
      }
    }
  }
}
.doc-card {
  margin-bottom: calc(var(--spacing) * 4);
  display: block;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  padding: calc(var(--spacing) * 6);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-card:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-card[href] {
  cursor: pointer;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-primary);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
}
.prose a.doc-card:hover {
  text-decoration-line: none;
}
.doc-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
  padding: calc(var(--spacing) * 2);
  color: var(--color-primary);
}
.doc-grid {
  margin-block: calc(var(--spacing) * 6);
}
.doc-grid > .doc-card {
  margin-bottom: calc(var(--spacing) * 0);
  height: 100%;
}
ol.doc-steps {
  position: relative;
  margin-block: calc(var(--spacing) * 6);
  margin-left: calc(var(--spacing) * 4);
  list-style-type: none;
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
  border-color: var(--color-gray-200);
  padding-left: calc(var(--spacing) * 0);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-step {
  position: relative;
  padding-bottom: calc(var(--spacing) * 8);
  padding-left: calc(var(--spacing) * 8);
}
.doc-step:last-child {
  padding-bottom: calc(var(--spacing) * 0);
}
.doc-step-number {
  position: absolute;
  left: calc(var(--spacing) * -4);
  display: flex;
  height: calc(var(--spacing) * 8);
  width: calc(var(--spacing) * 8);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-primary);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}
.doc-step-content {
  padding-top: calc(var(--spacing) * 0.5);
}
.doc-step-content > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-step-content > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-tabs {
  margin-block: calc(var(--spacing) * 6);
}
.doc-tabs-nav {
  display: flex;
  gap: calc(var(--spacing) * 0);
  overflow-x: auto;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-tab-button {
  position: relative;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--color-gray-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      color: var(--color-gray-900);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-200);
      }
    }
  }
}
.doc-tab-button.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    color: var(--color-primary);
  }
}
.doc-tab-button:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.doc-tab-button:focus-visible {
  border-radius: 0.25rem;
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  &:where(.dark, .dark *) {
    --tw-ring-offset-color: var(--color-gray-900);
  }
}
.doc-tabs-content {
  margin-top: calc(var(--spacing) * 0);
}
.doc-tab-panel {
  display: none;
  padding-block: calc(var(--spacing) * 4);
}
.doc-tab-panel.active {
  display: block;
}
.doc-tab-panel > .prose > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-tab-panel > .prose > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-file-tree {
  margin-block: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
}
.doc-file-tree-list {
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
}
.doc-file-tree-list .doc-file-tree-list {
  margin: calc(var(--spacing) * 0);
  padding: calc(var(--spacing) * 0);
  padding-left: calc(var(--spacing) * 6);
}
.doc-file-tree-item {
  position: relative;
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
  padding-top: 2px;
  padding-bottom: 2px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item::before {
  content: '';
  position: absolute;
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  left: -12px;
  top: 0;
  bottom: -4px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item:first-child::before {
  top: 0;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item:last-child::before {
  bottom: auto;
  height: 15px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item::after {
  content: '';
  position: absolute;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  left: -12px;
  top: 13px;
  width: 10px;
}
.doc-file-tree-entry {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.doc-file-tree-icon {
  flex-shrink: 0;
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-file-tree-item.directory > .doc-file-tree-entry > .doc-file-tree-icon {
  color: var(--color-amber-500);
  &:where(.dark, .dark *) {
    color: var(--color-amber-400);
  }
}
.doc-file-tree-name {
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
}
.doc-file-tree-item.highlight > .doc-file-tree-entry > .doc-file-tree-name {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.doc-file-tree-comment {
  margin-left: calc(var(--spacing) * 2);
  font-family: var(--font-sans);
  color: var(--color-gray-500);
  font-style: italic;
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-file-tree-item.placeholder > .doc-file-tree-entry {
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-file-tree-dots {
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
}
.doc-accordion {
  margin-block: calc(var(--spacing) * 6);
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-700);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-accordion-item {
  position: relative;
}
.doc-accordion-trigger {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
        }
      }
    }
  }
}
.doc-accordion-trigger:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.doc-accordion-trigger:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-inset: inset;
}
.doc-accordion-title {
  flex: 1;
}
.doc-accordion-chevron {
  margin-left: calc(var(--spacing) * 2);
  flex-shrink: 0;
  color: var(--color-gray-500);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-accordion-item.open > .doc-accordion-trigger > .doc-accordion-chevron {
  rotate: 180deg;
}
.doc-accordion-content {
  overflow: hidden;
  transition-property: max-height;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
  max-height: 0;
}
.doc-accordion-body {
  padding-inline: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}
.doc-accordion-body > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-accordion-body > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-button {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.doc-button-sm {
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.doc-button:not(.doc-button-sm):not(.doc-button-lg):not(.doc-button-xl) {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.doc-button-lg {
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 2.5);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.doc-button-xl {
  padding-inline: calc(var(--spacing) * 7);
  padding-block: calc(var(--spacing) * 3.5);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.doc-button:not(.doc-button-bordered) {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}
.doc-button:not(.doc-button-bordered):hover {
  background-color: var(--color-primary-hover);
}
:is(.dark) .doc-button:not(.doc-button-bordered) {
  background-color: var(--color-primary-dark);
  color: var(--color-primary-dark-text);
}
:is(.dark) .doc-button:not(.doc-button-bordered):hover {
  background-color: var(--color-primary-dark-hover);
}
.doc-button:not(.doc-button-bordered).doc-button-blue {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-blue:hover {
  background-color: var(--color-blue-600);
}
.doc-button:not(.doc-button-bordered).doc-button-green {
  background-color: var(--color-green-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-green:hover {
  background-color: var(--color-green-600);
}
.doc-button:not(.doc-button-bordered).doc-button-yellow {
  background-color: var(--color-amber-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-yellow:hover {
  background-color: var(--color-amber-600);
}
.doc-button:not(.doc-button-bordered).doc-button-red {
  background-color: var(--color-red-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-red:hover {
  background-color: var(--color-red-600);
}
.doc-button:not(.doc-button-bordered).doc-button-purple {
  background-color: var(--color-purple-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-purple:hover {
  background-color: var(--color-purple-600);
}
.doc-button:not(.doc-button-bordered).doc-button-plain {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
}
.doc-button:not(.doc-button-bordered).doc-button-plain:hover {
  background-color: var(--color-gray-300);
}
:is(.dark) .doc-button:not(.doc-button-bordered).doc-button-plain {
  background-color: var(--color-gray-700);
  color: var(--color-gray-200);
}
:is(.dark) .doc-button:not(.doc-button-bordered).doc-button-plain:hover {
  background-color: var(--color-gray-600);
}
.doc-button-bordered {
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}
.doc-button-bordered:hover {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}
:is(.dark) .doc-button-bordered:hover {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 10%, transparent);
  }
}
.doc-button-bordered.doc-button-blue {
  border-color: var(--color-blue-500);
  color: var(--color-blue-700);
}
.doc-button-bordered.doc-button-blue:hover {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-blue {
  color: var(--color-blue-400);
}
.doc-button-bordered.doc-button-green {
  border-color: var(--color-green-500);
  color: var(--color-green-700);
}
.doc-button-bordered.doc-button-green:hover {
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-green {
  color: var(--color-green-400);
}
.doc-button-bordered.doc-button-yellow {
  border-color: var(--color-amber-500);
  color: var(--color-amber-700);
}
.doc-button-bordered.doc-button-yellow:hover {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-yellow {
  color: var(--color-amber-400);
}
.doc-button-bordered.doc-button-red {
  border-color: var(--color-red-500);
  color: var(--color-red-700);
}
.doc-button-bordered.doc-button-red:hover {
  background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-red {
  color: var(--color-red-400);
}
.doc-button-bordered.doc-button-purple {
  border-color: var(--color-purple-500);
  color: var(--color-purple-700);
}
.doc-button-bordered.doc-button-purple:hover {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-purple {
  color: var(--color-purple-400);
}
.doc-button-bordered.doc-button-plain {
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}
.doc-button-bordered.doc-button-plain:hover {
  background-color: var(--color-gray-100);
}
:is(.dark) .doc-button-bordered.doc-button-plain {
  border-color: var(--color-gray-600);
  color: var(--color-gray-300);
}
:is(.dark) .doc-button-bordered.doc-button-plain:hover {
  background-color: var(--color-gray-800);
}
.doc-button-center {
  margin-block: calc(var(--spacing) * 4);
  display: flex;
  justify-content: center;
}
.doc-button-icon {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  flex-shrink: 0;
}
.doc-button-lg .doc-button-icon {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.doc-button-xl .doc-button-icon {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.prose a.doc-button:hover {
  text-decoration-line: none;
}
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  vertical-align: baseline;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.doc-badge-sm {
  padding-inline: calc(var(--spacing) * 2);
  padding-block: 1px;
  font-size: 0.65rem;
}
.doc-badge-icon {
  height: calc(var(--spacing) * 3);
  width: calc(var(--spacing) * 3);
  flex-shrink: 0;
}
.doc-badge:not(.doc-badge-outline) {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
  color: var(--color-primary);
}
:is(.dark) .doc-badge:not(.doc-badge-outline) {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 20%, transparent);
  }
  color: var(--color-primary-dark);
}
.doc-badge:not(.doc-badge-outline).doc-badge-blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-blue {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  }
  color: var(--color-blue-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-green {
  background-color: var(--color-green-100);
  color: var(--color-green-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-green {
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  }
  color: var(--color-green-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-yellow {
  background-color: var(--color-amber-100);
  color: var(--color-amber-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-yellow {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
  }
  color: var(--color-amber-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-red {
  background-color: var(--color-red-100);
  color: var(--color-red-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-red {
  background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
  }
  color: var(--color-red-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-purple {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
  }
  color: var(--color-purple-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-plain {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-plain {
  background-color: var(--color-gray-700);
  color: var(--color-gray-300);
}
.doc-badge-outline {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: transparent;
}
.doc-badge-outline {
  border-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  }
  color: var(--color-primary);
}
:is(.dark) .doc-badge-outline {
  border-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary-dark) 40%, transparent);
  }
  color: var(--color-primary-dark);
}
.doc-badge-outline.doc-badge-blue {
  border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
  }
  color: var(--color-blue-700);
}
:is(.dark) .doc-badge-outline.doc-badge-blue {
  color: var(--color-blue-400);
}
.doc-badge-outline.doc-badge-green {
  border-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-green-400) 50%, transparent);
  }
  color: var(--color-green-700);
}
:is(.dark) .doc-badge-outline.doc-badge-green {
  color: var(--color-green-400);
}
.doc-badge-outline.doc-badge-yellow {
  border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
  }
  color: var(--color-amber-700);
}
:is(.dark) .doc-badge-outline.doc-badge-yellow {
  color: var(--color-amber-400);
}
.doc-badge-outline.doc-badge-red {
  border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
  }
  color: var(--color-red-700);
}
:is(.dark) .doc-badge-outline.doc-badge-red {
  color: var(--color-red-400);
}
.doc-badge-outline.doc-badge-purple {
  border-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-400) 50%, transparent);
  }
  color: var(--color-purple-700);
}
:is(.dark) .doc-badge-outline.doc-badge-purple {
  color: var(--color-purple-400);
}
.doc-badge-outline.doc-badge-plain {
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}
:is(.dark) .doc-badge-outline.doc-badge-plain {
  border-color: var(--color-gray-600);
  color: var(--color-gray-300);
}
.doc-tooltip {
  position: relative;
  display: inline-flex;
}
.doc-tooltip-underline {
  cursor: help;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  --tw-border-style: dashed;
  border-style: dashed;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
}
.doc-tooltip-highlight {
  cursor: help;
  border-radius: 0.25rem;
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  padding-inline: calc(var(--spacing) * 0.5);
}
:is(.dark) .doc-tooltip-highlight {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 15%, transparent);
  }
}
.doc-tooltip-plain {
  cursor: help;
}
.doc-tooltip-popup {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: calc(1/2 * 100%);
  z-index: 50;
  margin-bottom: calc(var(--spacing) * 2);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-900);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0%;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
:is(.dark) .doc-tooltip-popup {
  background-color: var(--color-gray-700);
}
.doc-tooltip-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(1/2 * 100%);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-helios-gray-900, var(--color-zinc-900)) transparent transparent transparent;
}
:is(.dark) .doc-tooltip-popup::after {
  border-top-color: var(--color-helios-gray-700, var(--color-zinc-700));
}
.doc-tooltip:hover .doc-tooltip-popup, .doc-tooltip:focus-within .doc-tooltip-popup {
  visibility: visible;
  opacity: 100%;
}
.doc-video {
  position: relative;
  margin-block: calc(var(--spacing) * 6);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-black);
}
.doc-video iframe, .doc-video video {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  height: 100%;
  width: 100%;
}
.doc-video-16x9 {
  padding-bottom: 56.25%;
}
.doc-video-4x3 {
  padding-bottom: 75%;
}
.doc-video-1x1 {
  padding-bottom: 100%;
}
.doc-video-9x16 {
  padding-bottom: 177.78%;
  margin-inline: auto;
  max-width: var(--container-sm);
}
.doc-image {
  margin-block: calc(var(--spacing) * 6);
  text-align: center;
}
.doc-image-lightbox {
  display: inline-block;
  cursor: zoom-in;
}
.prose a.doc-image-lightbox:hover {
  text-decoration-line: none;
}
.doc-image-img {
  margin-bottom: calc(var(--spacing) * 0) !important;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-lg);
}
.doc-image-border {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
}
:is(.dark) .doc-image-border {
  border-color: var(--color-gray-600);
}
.doc-image-shadow {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
:is(.dark) .doc-image-shadow {
  box-shadow: 0 0 20px -3px var(--color-primary-dark, color-mix(in oklab, oklch(62.3% 0.214 259.815) 3000%, transparent)), 0 0 8px -4px var(--color-primary-dark, color-mix(in oklab, oklch(62.3% 0.214 259.815) 2000%, transparent));
}
.doc-image-caption {
  margin-top: calc(var(--spacing) * 2);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-lightbox-overlay {
  visibility: hidden;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, #000 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
  }
  opacity: 0%;
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.doc-lightbox-overlay.active {
  visibility: visible;
  opacity: 100%;
}
.doc-lightbox-close {
  position: absolute;
  top: calc(var(--spacing) * 4);
  right: calc(var(--spacing) * 4);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 2);
  color: color-mix(in srgb, #fff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
}
.doc-lightbox-close svg {
  pointer-events: none;
}
.doc-lightbox-img {
  max-height: 90vh;
  max-width: 90vw;
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
  border-radius: var(--radius-lg);
  object-fit: contain;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.doc-lightbox-overlay.active .doc-lightbox-img {
  --tw-scale-x: 100%;
  --tw-scale-y: 100%;
  --tw-scale-z: 100%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.doc-link-card {
  margin-block: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  padding: calc(var(--spacing) * 4);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-primary);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
}
.prose a.doc-link-card:hover {
  text-decoration-line: none;
}
.doc-link-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-link-card-content {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  flex-direction: column;
}
.doc-link-card-title {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
}
.doc-link-card-description {
  margin-top: calc(var(--spacing) * 0.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-link-card-arrow {
  flex-shrink: 0;
  color: var(--color-gray-400);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-link-card:hover .doc-link-card-arrow {
  color: var(--color-primary);
}
.doc-details {
  margin-block: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-details-summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  -webkit-user-select: none;
  user-select: none;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
        }
      }
    }
  }
}
.doc-details-summary::-webkit-details-marker, .doc-details-summary::marker {
  display: none;
}
.doc-details-chevron {
  flex-shrink: 0;
  color: var(--color-gray-500);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-details[open] > .doc-details-summary > .doc-details-chevron {
  rotate: 90deg;
}
.doc-details-content {
  padding-inline: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}
.doc-details-content > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-details-content > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
}
.doc-kbd {
  display: inline-flex;
  min-width: 1.5em;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
  border-bottom-width: 2px;
}
.doc-kbd-separator {
  margin-inline: 1px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-copy {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  vertical-align: baseline;
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
}
.doc-copy-text {
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-800);
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
}
.doc-copy-btn {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  border-radius: 0.25rem;
  padding: calc(var(--spacing) * 0.5);
  color: var(--color-gray-400);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      color: var(--color-gray-700);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-300);
      }
    }
  }
}
.doc-copy-btn.copied {
  color: var(--color-green-500);
  &:where(.dark, .dark *) {
    color: var(--color-green-400);
  }
}
.contact-wrapper {
  display: grid;
  gap: calc(var(--spacing) * 12);
  @media (width >= 64rem) {
    gap: calc(var(--spacing) * 16);
  }
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contact-wrapper {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}
.contact-intro {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.intro-content h2 {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  @media (width >= 40rem) {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  margin-bottom: calc(var(--spacing) * 4);
  --tw-border-style: none !important;
  border-style: none !important;
  padding-bottom: calc(var(--spacing) * 0) !important;
}
.intro-content p {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.info-card {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4);
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.info-card:hover {
  border-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
    }
  }
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    color: var(--color-primary-dark);
  }
}
.info-icon svg {
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
}
.info-text {
  display: flex;
  flex-direction: column;
}
.info-label {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.info-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.contact-form-container {
  position: relative;
}
.contact-form {
  position: relative;
  padding: calc(var(--spacing) * 6);
  @media (width >= 40rem) {
    padding: calc(var(--spacing) * 8);
  }
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
    }
  }
  border-radius: var(--radius-2xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 5%, transparent) var(--tw-shadow-alpha), transparent);
  }
  &:where(.dark, .dark *) {
    --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  backdrop-filter: blur(20px);
}
.contact-form::before {
  content: '';
  position: absolute;
  inset-inline: calc(var(--spacing) * 0);
  top: calc(var(--spacing) * 0);
  height: calc(var(--spacing) * 1);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  background: linear-gradient(90deg, var(--helios-color-primary), var(--helios-color-accent, var(--helios-color-primary)));
}
.contact-form .form-field {
  margin-bottom: calc(var(--spacing) * 6);
}
.contact-form .form-field:last-of-type {
  margin-bottom: calc(var(--spacing) * 8);
}
.contact-form .form-label {
  margin-bottom: calc(var(--spacing) * 2);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
}
.contact-form .form-label.required::after {
  content: ' *';
  color: var(--color-red-500);
  &:where(.dark, .dark *) {
    color: var(--color-red-400);
  }
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form select, .contact-form textarea {
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  border-radius: var(--radius-xl);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  &::placeholder {
    color: var(--color-gray-400);
  }
  &:where(.dark, .dark *) {
    &::placeholder {
      color: var(--color-gray-500);
    }
  }
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus, .contact-form input[type="url"]:focus, .contact-form select:focus, .contact-form textarea:focus {
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
    }
  }
  border-color: var(--color-primary);
  &:where(.dark, .dark *) {
    border-color: var(--color-primary);
  }
  box-shadow: 0 0 0 3px rgba(var(--tw-ring-color), 0.1), 0 0 20px -5px rgba(var(--tw-ring-color), 0.15);
  --tw-ring-color: var(--helios-color-primary);
}
.contact-form input[type="text"]:hover:not(:focus), .contact-form input[type="email"]:hover:not(:focus), .contact-form input[type="tel"]:hover:not(:focus), .contact-form input[type="url"]:hover:not(:focus), .contact-form select:hover:not(:focus), .contact-form textarea:hover:not(:focus) {
  border-color: var(--color-gray-300);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }
}
.contact-form select {
  cursor: pointer;
  appearance: none;
  padding-right: calc(var(--spacing) * 10);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}
.dark .contact-form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form .form-field.checkboxes {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.contact-form input[type="checkbox"] {
  margin-top: calc(var(--spacing) * 0.5);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-gray-300);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  color: var(--color-primary);
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.contact-form input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.contact-form input[type="checkbox"]:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  }
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-outline-style: none;
  outline-style: none;
}
.contact-form .checkboxes label {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.contact-form .buttons {
  margin-top: calc(var(--spacing) * 8);
}
.contact-form .submit-btn, .contact-form button[type="submit"] {
  width: 100%;
  @media (width >= 40rem) {
    width: auto;
  }
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 3.5);
  background-color: var(--color-primary);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary-hover);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-dark-hover);
      }
    }
  }
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 0px;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:hover, .contact-form button[type="submit"]:hover {
  --tw-translate-y: calc(var(--spacing) * -0.5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:active, .contact-form button[type="submit"]:active {
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:focus, .contact-form button[type="submit"]:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-offset-color: var(--color-white);
  --tw-outline-style: none;
  outline-style: none;
  &:where(.dark, .dark *) {
    --tw-ring-offset-color: var(--color-gray-900);
  }
}
.notices {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-xl);
  padding: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.notices.success.green, .notices.green {
  background-color: var(--color-green-50);
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
    }
  }
  color: var(--color-green-800);
  &:where(.dark, .dark *) {
    color: var(--color-green-300);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, oklch(52.7% 0.154 150.069) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-green-700) 50%, transparent);
    }
  }
}
.notices.success.green p, .notices.green p {
  margin: calc(var(--spacing) * 0);
}
.notices.error.red, .notices.red {
  background-color: var(--color-red-50);
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }
  color: var(--color-red-800);
  &:where(.dark, .dark *) {
    color: var(--color-red-300);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-700) 50%, transparent);
    }
  }
}
.notices.error.red p, .notices.red p {
  margin: calc(var(--spacing) * 0);
}
.contact-form .form-field.has-error input, .contact-form .form-field.has-error select, .contact-form .form-field.has-error textarea {
  border-color: var(--color-red-500);
  &:where(.dark, .dark *) {
    border-color: var(--color-red-400);
  }
}
.contact-form .form-field .text-danger, .contact-form .form-field .error {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-red-600);
  &:where(.dark, .dark *) {
    color: var(--color-red-400);
  }
}
.contact-form .submit-btn.loading, .contact-form button[type="submit"].loading {
  pointer-events: none;
  opacity: 75%;
}
.contact-form .submit-btn.loading::after, .contact-form button[type="submit"].loading::after {
  content: '';
  margin-left: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: color-mix(in srgb, #fff 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
  }
  border-top-color: var(--color-white);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.contact-form .input-group {
  position: relative;
}
.contact-form .input-group .input-icon {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing) * 4);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
  pointer-events: none;
}
.contact-form .input-group input {
  padding-left: calc(var(--spacing) * 12);
}
.contact-form .form-field[data-grav-field="honeypot"] {
  position: absolute;
  left: calc(9999px * -1);
  height: calc(var(--spacing) * 0);
  overflow: hidden;
  opacity: 0%;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact-form {
  animation: fadeInUp 0.5s ease-out;
}
.contact-form .form-field {
  animation: fadeInUp 0.4s ease-out;
  animation-fill-mode: both;
}
.contact-form .form-field:nth-child(1) {
  animation-delay: 0.1s;
}
.contact-form .form-field:nth-child(2) {
  animation-delay: 0.15s;
}
.contact-form .form-field:nth-child(3) {
  animation-delay: 0.2s;
}
.contact-form .form-field:nth-child(4) {
  animation-delay: 0.25s;
}
.contact-form .form-field:nth-child(5) {
  animation-delay: 0.3s;
}
.contact-form .buttons {
  animation: fadeInUp 0.4s ease-out 0.35s both;
}
@media (max-width: 640px) {
  .contact-form {
    padding: calc(var(--spacing) * 5);
  }
  .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form select, .contact-form textarea {
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .contact-form .submit-btn, .contact-form button[type="submit"] {
    width: 100%;
    padding-block: calc(var(--spacing) * 4);
  }
}
.langswitcher-dropdown {
  position: relative;
}
.langswitcher-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
  }
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.langswitcher-trigger--open {
  background-color: var(--color-gray-100);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
}
.langswitcher-current {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}
.langswitcher-menu {
  position: absolute;
  top: 100%;
  right: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 2);
  min-width: 180px;
  padding-block: calc(var(--spacing) * 1);
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  border-radius: var(--radius-xl);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  z-index: 50;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.langswitcher-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  text-decoration-line: none;
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
        }
      }
    }
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.langswitcher-item--active {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary-dark) 10%, transparent);
    }
  }
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.langswitcher-item-code {
  display: inline-flex;
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 7);
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.langswitcher-item--active .langswitcher-item-code {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary-dark) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-primary-dark);
  }
}
.langswitcher-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--helios-font-body, Inter, sans-serif);
    --font-mono: var(--helios-font-code, JetBrainsMono, monospace);
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-gray-50: var(--color-helios-gray-50, var(--color-zinc-50));
    --color-gray-100: var(--color-helios-gray-100, var(--color-zinc-100));
    --color-gray-200: var(--color-helios-gray-200, var(--color-zinc-200));
    --color-gray-300: var(--color-helios-gray-300, var(--color-zinc-300));
    --color-gray-400: var(--color-helios-gray-400, var(--color-zinc-400));
    --color-gray-500: var(--color-helios-gray-500, var(--color-zinc-500));
    --color-gray-600: var(--color-helios-gray-600, var(--color-zinc-600));
    --color-gray-700: var(--color-helios-gray-700, var(--color-zinc-700));
    --color-gray-800: var(--color-helios-gray-800, var(--color-zinc-800));
    --color-gray-900: var(--color-helios-gray-900, var(--color-zinc-900));
    --color-gray-950: var(--color-helios-gray-950, var(--color-zinc-950));
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary: var(--helios-color-primary, #3B82F6);
    --color-primary-hover: var(--helios-color-primary-hover, #2563EB);
    --color-primary-text: var(--helios-color-primary-text, #ffffff);
    --color-primary-dark: var(--helios-color-primary-dark, #60A5FA);
    --color-primary-dark-hover: var(--helios-color-primary-dark-hover, #93C5FD);
    --color-primary-dark-text: var(--helios-color-primary-dark-text, #111827);
    --color-accent: var(--helios-color-accent, #8B5CF6);
    --color-accent-dark: var(--helios-color-accent-dark, #A78BFA);
    --spacing-sidebar: 280px;
    --spacing-toc: 240px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-50 {
    z-index: 50;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .order-none {
    order: 0;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: oklch(37.3% 0.034 259.733);
    --tw-prose-headings: oklch(21% 0.034 264.665);
    --tw-prose-lead: oklch(44.6% 0.03 256.802);
    --tw-prose-links: oklch(21% 0.034 264.665);
    --tw-prose-bold: oklch(21% 0.034 264.665);
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: oklch(21% 0.034 264.665);
    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-captions: oklch(55.1% 0.027 264.364);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: oklch(21% 0.034 264.665);
    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.2222222em;
      line-height: 1.4545455;
      margin-top: 1.0909091em;
      margin-bottom: 1.0909091em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      padding-inline-start: 1em;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 2.6666667em;
      margin-top: 0;
      margin-bottom: 0.8333333em;
      line-height: 1;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.6666667em;
      margin-top: 1.8666667em;
      margin-bottom: 1.0666667em;
      line-height: 1.3333333;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.3333333em;
      margin-top: 1.6666667em;
      margin-bottom: 0.6666667em;
      line-height: 1.5;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      border-radius: 0.3125rem;
      padding-top: 0.2222222em;
      padding-inline-end: 0.4444444em;
      padding-bottom: 0.2222222em;
      padding-inline-start: 0.4444444em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8666667em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.75;
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: 0.375rem;
      padding-top: 1em;
      padding-inline-end: 1.5em;
      padding-bottom: 1em;
      padding-inline-start: 1.5em;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      margin-bottom: 0.6666667em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      padding-inline-start: 1.5555556em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 3.1111111em;
      margin-bottom: 3.1111111em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.75em;
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
      margin-top: 1em;
    }
    :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .\!mt-3 {
    margin-top: calc(var(--spacing) * 3) !important;
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-full {
    height: 100%;
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-\[calc\(100vh-5rem\)\] {
    max-height: calc(100vh - 5rem);
  }
  .min-h-\[60vh\] {
    min-height: 60vh;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-\[var\(--helios-sidebar-width\)\] {
    width: var(--helios-sidebar-width);
  }
  .w-\[var\(--helios-toc-width\)\] {
    width: var(--helios-toc-width);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-\[calc\(var\(--helios-content-width\)-var\(--helios-toc-width\)-2rem\)\] {
    max-width: calc(var(--helios-content-width) - var(--helios-toc-width) - 2rem);
  }
  .max-w-\[var\(--helios-content-width\)\] {
    max-width: var(--helios-content-width);
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-none {
    max-width: none;
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-7 {
    --tw-translate-x: calc(var(--spacing) * 7);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-14 {
    --tw-translate-x: calc(var(--spacing) * 14);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary\/10 {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }
  .bg-primary\/15 {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
    }
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/50 {
    background-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .\!text-white {
    color: var(--color-white) !important;
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-primary {
    color: var(--color-primary);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-primary\/25 {
    --tw-shadow-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-black\/5 {
    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .prose {
    --tw-prose-body: inherit;
    --tw-prose-headings: inherit;
    --tw-prose-invert-body: inherit;
    --tw-prose-invert-headings: inherit;
    --tw-prose-bold: inherit;
    --tw-prose-pre-code: var(--color-gray-200);
    --tw-prose-pre-bg: var(--color-gray-900);
    --tw-prose-code: var(--color-accent);
  }
  .group-hover\:text-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:border-primary {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:text-gray-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:\!no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none !important;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-primary\/30 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }
  .focus\:top-4 {
    &:focus {
      top: calc(var(--spacing) * 4);
    }
  }
  .focus\:left-4 {
    &:focus {
      left: calc(var(--spacing) * 4);
    }
  }
  .focus\:z-50 {
    &:focus {
      z-index: 50;
    }
  }
  .focus\:rounded-lg {
    &:focus {
      border-radius: var(--radius-lg);
    }
  }
  .focus\:bg-primary {
    &:focus {
      background-color: var(--color-primary);
    }
  }
  .focus\:px-4 {
    &:focus {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .focus\:py-2 {
    &:focus {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .focus\:text-white {
    &:focus {
      color: var(--color-white);
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-16 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:pr-6 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-4xl {
    @media (width >= 40rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .lg\:fixed {
    @media (width >= 64rem) {
      position: fixed;
    }
  }
  .lg\:inset-y-0 {
    @media (width >= 64rem) {
      inset-block: calc(var(--spacing) * 0);
    }
  }
  .lg\:z-30 {
    @media (width >= 64rem) {
      z-index: 30;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:pl-\[var\(--helios-sidebar-width\)\] {
    @media (width >= 64rem) {
      padding-left: var(--helios-sidebar-width);
    }
  }
  .dark\:block {
    &:where(.dark, .dark *) {
      display: block;
    }
  }
  .dark\:hidden {
    &:where(.dark, .dark *) {
      display: none;
    }
  }
  .dark\:divide-gray-800 {
    &:where(.dark, .dark *) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-800);
      }
    }
  }
  .dark\:border-gray-600 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600);
    }
  }
  .dark\:border-gray-700 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:border-gray-800 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-800);
    }
  }
  .dark\:bg-amber-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-700 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-700\/50 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-800 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
  }
  .dark\:bg-gray-900\/50 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-950\/93 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-950) 93%, transparent);
      }
    }
  }
  .dark\:bg-green-900\/30 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
      }
    }
  }
  .dark\:bg-green-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-primary-dark {
    &:where(.dark, .dark *) {
      background-color: var(--color-primary-dark);
    }
  }
  .dark\:bg-primary\/15 {
    &:where(.dark, .dark *) {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
      }
    }
  }
  .dark\:bg-red-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
      }
    }
  }
  .dark\:text-amber-300 {
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  .dark\:text-gray-100 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-100);
    }
  }
  .dark\:text-gray-300 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-gray-400 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
  .dark\:text-green-300 {
    &:where(.dark, .dark *) {
      color: var(--color-green-300);
    }
  }
  .dark\:text-green-400 {
    &:where(.dark, .dark *) {
      color: var(--color-green-400);
    }
  }
  .dark\:text-primary-dark {
    &:where(.dark, .dark *) {
      color: var(--color-primary-dark);
    }
  }
  .dark\:text-red-300 {
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
  .dark\:text-white {
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .dark\:ring-white\/10 {
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .dark\:prose-invert {
    &:where(.dark, .dark *) {
      --tw-prose-body: var(--tw-prose-invert-body);
      --tw-prose-headings: var(--tw-prose-invert-headings);
      --tw-prose-lead: var(--tw-prose-invert-lead);
      --tw-prose-links: var(--tw-prose-invert-links);
      --tw-prose-bold: var(--tw-prose-invert-bold);
      --tw-prose-counters: var(--tw-prose-invert-counters);
      --tw-prose-bullets: var(--tw-prose-invert-bullets);
      --tw-prose-hr: var(--tw-prose-invert-hr);
      --tw-prose-quotes: var(--tw-prose-invert-quotes);
      --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
      --tw-prose-captions: var(--tw-prose-invert-captions);
      --tw-prose-kbd: var(--tw-prose-invert-kbd);
      --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
      --tw-prose-code: var(--tw-prose-invert-code);
      --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
      --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
      --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
      --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
    }
  }
  .dark\:hover\:border-primary {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-primary);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-700 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800\/50 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:text-white {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
}
[x-cloak] {
  display: none !important;
}
.error-code-gradient {
  font-size: clamp(10rem, 30vw, 16rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--helios-color-primary) 0%, var(--helios-color-accent) 50%, var(--helios-color-primary) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease-in-out infinite;
  user-select: none;
}
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@layer base {
  input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
    appearance: none;
    background-color: #fff;
    border-color: var(--color-helios-gray-500, var(--color-zinc-500));
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: oklch(54.6% 0.245 262.881);
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: oklch(54.6% 0.245 262.881);
    }
  }
  input::placeholder,textarea::placeholder {
    color: var(--color-helios-gray-500, var(--color-zinc-500));
    opacity: 1;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-date-and-time-value {
    min-height: 1.5em;
  }
  ::-webkit-date-and-time-value {
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }
  select:where([multiple]),select:where([size]:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
  input:where([type='checkbox']),input:where([type='radio']) {
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: oklch(54.6% 0.245 262.881);
    background-color: #fff;
    border-color: var(--color-helios-gray-500, var(--color-zinc-500));
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
  }
  input:where([type='checkbox']) {
    border-radius: 0px;
  }
  input:where([type='radio']) {
    border-radius: 100%;
  }
  input:where([type='checkbox']):focus,input:where([type='radio']):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: oklch(54.6% 0.245 262.881);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  input:where([type='checkbox']):checked,input:where([type='radio']):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  input:where([type='checkbox']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='radio']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='checkbox']):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='file']) {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }
  input:where([type='file']):focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-space-y-reverse: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-ease: initial;
      --tw-leading: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-divide-y-reverse: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}
/* YetiSearch Pro Theme Variables
   Shared color palette using Tailwind zinc scale
   Override these variables in your custom CSS for theming
*/

:root {
  /* ═══════════════════════════════════════════════════════════════
     LIGHT MODE (default)
     Using Tailwind zinc scale for neutral grays
     ═══════════════════════════════════════════════════════════════ */

  /* Core palette - Tailwind zinc */
  --ys-zinc-50: #fafafa;
  --ys-zinc-100: #f4f4f5;
  --ys-zinc-200: #e4e4e7;
  --ys-zinc-300: #d4d4d8;
  --ys-zinc-400: #a1a1aa;
  --ys-zinc-500: #71717a;
  --ys-zinc-600: #52525b;
  --ys-zinc-700: #3f3f46;
  --ys-zinc-800: #27272a;
  --ys-zinc-900: #18181b;
  --ys-zinc-950: #09090b;

  /* Accent color */
  --ys-accent: #3b82f6;
  --ys-accent-hover: #2563eb;
  --ys-accent-subtle: rgba(59, 130, 246, 0.1);
  --ys-accent-ring: rgba(59, 130, 246, 0.25);

  /* Semantic colors - Light mode */
  --ys-overlay-bg: rgba(0, 0, 0, 0.5);
  --ys-overlay-blur: blur(4px);

  --ys-dialog-bg: var(--ys-zinc-50);
  --ys-dialog-border: var(--ys-zinc-200);
  --ys-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --ys-panel-bg: #ffffff;
  --ys-panel-alt: var(--ys-zinc-100);

  --ys-text: var(--ys-zinc-900);
  --ys-text-secondary: var(--ys-zinc-600);
  --ys-text-muted: var(--ys-zinc-400);

  --ys-border: var(--ys-zinc-200);
  --ys-border-subtle: var(--ys-zinc-100);

  --ys-input-bg: transparent;
  --ys-input-text: var(--ys-zinc-900);
  --ys-input-placeholder: var(--ys-zinc-400);

  --ys-result-hover: var(--ys-zinc-100);
  --ys-result-selected-bg: var(--ys-accent-subtle);
  --ys-result-selected-ring: var(--ys-accent-ring);

  --ys-highlight-bg: #fef08a;
  --ys-highlight-text: inherit;

  --ys-kbd-bg: var(--ys-zinc-100);
  --ys-kbd-text: var(--ys-zinc-600);

  --ys-scrollbar-track: transparent;
  --ys-scrollbar-thumb: rgba(161, 161, 170, 0.3);
  --ys-scrollbar-thumb-hover: rgba(161, 161, 170, 0.5);

  /* Segment/toggle controls */
  --ys-segment-bg: transparent;
  --ys-segment-active-bg: var(--ys-zinc-800);
  --ys-segment-active-text: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Triggered by data-theme="dark", class="dark", or data-ys-theme="dark"
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.dark,
[data-ys-theme="dark"] {
  --ys-overlay-bg: rgba(0, 0, 0, 0.7);

  --ys-dialog-bg: var(--ys-zinc-900);
  --ys-dialog-border: var(--ys-zinc-700);

  --ys-panel-bg: var(--ys-zinc-900);
  --ys-panel-alt: var(--ys-zinc-800);

  --ys-text: var(--ys-zinc-100);
  --ys-text-secondary: var(--ys-zinc-400);
  --ys-text-muted: var(--ys-zinc-500);

  --ys-border: var(--ys-zinc-700);
  --ys-border-subtle: var(--ys-zinc-800);

  --ys-input-text: var(--ys-zinc-100);
  --ys-input-placeholder: var(--ys-zinc-500);

  --ys-result-hover: rgba(63, 63, 70, 0.5);
  --ys-result-selected-bg: rgba(59, 130, 246, 0.15);

  --ys-highlight-bg: rgba(234, 179, 8, 0.35);
  --ys-highlight-text: var(--ys-zinc-100);

  --ys-kbd-bg: var(--ys-zinc-800);
  --ys-kbd-text: var(--ys-zinc-400);

  --ys-scrollbar-thumb: rgba(82, 82, 91, 0.5);
  --ys-scrollbar-thumb-hover: rgba(82, 82, 91, 0.7);

  --ys-segment-active-bg: rgba(255, 255, 255, 0.12);
}
/* ==========================================================================
   KahunaCart brand layer
   --------------------------------------------------------------------------
   Loaded after Helios's compiled Tailwind bundle (build/css/site.css), so on
   equal specificity these rules win.

   Light-only by decision (2026-08-20). Palette taken from the logo SVG fills.

   Nothing here uses Tailwind utilities: Helios compiles Tailwind from its own
   source list, which does not scan this child theme, so any new utility class
   written in these templates would never make it into the bundle. Every style
   below is plain CSS on `kc-` prefixed classes.

   Classes are `kc-`. Custom properties are `--ks-`, and the two prefixes do
   not match on purpose: KahunaCart's own storefront stylesheet
   (plugin://kahunacart/assets/kahunacart.css) declares a `--kc-*` set on
   :root, and it loads after this file on every /shop route. When both used
   `--kc-`, its `--kc-card` and `--kc-mono` overwrote ours store-wide — cards
   went transparent and the mono face fell back to ui-monospace. Never
   introduce a `--kc-*` property here; the storefront owns that name.
   ========================================================================== */

:root {
    /* Brand palette */
    --ks-salt: #FCF6EA;         /* page ground */
    --ks-sand: #F6EAD7;         /* panels, surfaces */
    --ks-sand-soft: #F9F1E1;    /* half a step off Sand, for large tinted areas */
    --ks-sand-deep: #EFDFC4;
    --ks-koa: #2B1C0C;          /* text ink */
    --ks-koa-soft: #5C4A38;     /* secondary text */
    --ks-lagoon: #1A6F83;       /* brand primary, links */
    --ks-lagoon-deep: #14555F;
    --ks-lagoon-mist: #DDEAE8;
    --ks-board: #BC4C11;        /* action color: buttons and big display numbers only; cream text on it reads 4.7:1 */
    --ks-board-deep: #AC4610;
    --ks-amber: #9A6B00;        /* "partial" in the comparison matrix */
    --ks-line: #E4D5BC;
    --ks-card: #FFFCF4;

    /* Type */
    --ks-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
    --ks-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
    --ks-mono: "Spline Sans Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Logo art */
    --ks-bus: url("/user/themes/kahuna-site/images/logo.svg");
    --ks-bus-noshadow: url("/user/themes/kahuna-site/images/logo-noshadow.svg");

    /* Chrome metrics */
    --ks-nav-h: 76px;
    --ks-docs-gap: 40px;        /* breathing room above/below the docs columns */

    /* Re-point Helios's own font variables at the brand faces so inherited
       documentation pages pick them up without touching the parent theme. */
    --helios-font-body: var(--ks-body);
    --helios-font-code: var(--ks-mono);
}

/* --------------------------------------------------------------------------
   Global ground
   -------------------------------------------------------------------------- */

.kc-body {
    margin: 0;
    background: var(--ks-salt);
    color: var(--ks-koa);
    font-family: var(--ks-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* Content links are Lagoon. `:where()` keeps this at element specificity so any
   component class below (buttons, nav items, footer links) wins without a fight. */
:where(.kc-body) a { color: var(--ks-lagoon); }
.kc-body a:focus-visible,
.kc-body button:focus-visible,
.kc-body summary:focus-visible {
    outline: 3px solid var(--ks-lagoon);
    outline-offset: 2px;
}

.kc-body h1,
.kc-body h2,
.kc-body h3,
.kc-body h4 {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.kc-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.kc-mono { font-family: var(--ks-mono); }

.kc-h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.06;
    margin: 0 0 14px;
}

.kc-kicker {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 12px;
}

.kc-intro {
    color: var(--ks-koa-soft);
    font-size: 17px;
    max-width: 62ch;
    margin: 0 0 40px;
}

.kc-intro.kc-intro-tight { margin-bottom: 8px; }
.kc-intro.kc-intro-flush { margin-bottom: 0; }

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

.kc-btn {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-btn:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); }
.kc-btn-small { padding: 9px 18px; font-size: 14px; border-radius: 9px; }
.kc-btn-large { font-size: 16px; padding: 15px 30px; }
.kc-btn-ghost {
    background: transparent;
    color: var(--ks-koa);
    border: 1.5px solid var(--ks-koa);
}
.kc-btn-ghost:hover { background: var(--ks-sand); color: var(--ks-koa); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Early access ribbon
   -------------------------------------------------------------------------- */

.kc-ribbon {
    background: var(--ks-lagoon-deep);
    color: #F6EAD7;
    font-size: 13.5px;
    text-align: center;
    padding: 9px 16px;
}
.kc-ribbon b { color: #FFD9A8; font-weight: 700; }
.kc-ribbon a { color: #F6EAD7; font-weight: 600; }

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.kc-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(252, 246, 234, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ks-line);
}
.kc-nav-in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--ks-nav-h);
}
.kc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    text-decoration: none;
    color: var(--ks-koa);
}
.kc-brand i {
    width: 60px;
    height: 60px;
    background: var(--ks-bus) center / contain no-repeat;
    display: block;
    flex: none;
}
.kc-brand b {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.015em;
}
.kc-brand b em { font-style: normal; color: var(--ks-board); }

.kc-nav-item {
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}
.kc-nav-item:hover { color: var(--ks-lagoon); }

/* A nav item with a menu under it. Hover or keyboard focus opens the menu; the
   padded bridge under the item keeps it open while the pointer travels down. */
.kc-nav-drop { position: relative; }
/* One more item on the row must not fold the CTA onto two lines. */
.kc-nav-in > .kc-btn { white-space: nowrap; }
.kc-nav-drop > .kc-nav-item { display: inline-flex; align-items: center; gap: 4px; }
.kc-nav-drop > .kc-nav-item svg { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s; }
.kc-nav-drop:hover > .kc-nav-item svg,
.kc-nav-drop:focus-within > .kc-nav-item svg { transform: rotate(180deg); }
.kc-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    padding-top: 10px;
    z-index: 30;
    filter: drop-shadow(0 12px 24px rgba(43, 28, 12, 0.14));
}
.kc-nav-menu a {
    display: block;
    min-width: 190px;
    padding: 9px 14px;
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--ks-card);
    border-left: 1px solid var(--ks-line);
    border-right: 1px solid var(--ks-line);
}
.kc-nav-menu a:first-child { border-top: 1px solid var(--ks-line); border-radius: 12px 12px 0 0; padding-top: 12px; }
.kc-nav-menu a:last-child { border-bottom: 1px solid var(--ks-line); border-radius: 0 0 12px 12px; padding-bottom: 12px; }
.kc-nav-menu a:hover, .kc-nav-menu a:focus-visible { color: var(--ks-lagoon); background: var(--ks-sand-soft); }
.kc-nav-drop:hover .kc-nav-menu,
.kc-nav-drop:focus-within .kc-nav-menu { display: block; }

.kc-nav-burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-left: -8px;
    color: var(--ks-koa);
    cursor: pointer;
}
.kc-nav-burger svg { width: 24px; height: 24px; display: block; }

/* --------------------------------------------------------------------------
   Narrow-screen menu
   --------------------------------------------------------------------------
   Below 1024px the inline links leave the bar and a round menu button joins
   the search, cart and account controls at its right end. It drops a sheet
   from under the bar: every top-level item as a big row in the display face,
   the dropdown parents as accordions whose first row is the parent's own page.
   Markup in partials/kc/site-header.html.twig, behaviour in js/site-menu.js.

   The switch sits at 1023px, where the docs sidebar toggle joins the bar, so
   every page's bar changes at the same width and nothing moves between docs
   and the rest. The search icon and the storefront's cart and account
   controls share the row — see the header section of css/kahuna-shop.css,
   which tightens the gap and drops the cart's label to buy the inline links
   more runway before this breakpoint has to take over.
   -------------------------------------------------------------------------- */

/* Same round control as the search icon beside it; dark once open, with the
   three bars folded into an X. */
.kc-menu-toggle {
    display: none;
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    color: var(--ks-koa);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.kc-menu-toggle:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-menu-toggle[aria-expanded="true"] { background: var(--ks-koa); border-color: var(--ks-koa); color: var(--ks-salt); }
.kc-menu-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 140ms ease;
}
.kc-menu-toggle span:nth-child(1) { transform: translateY(-5px); }
.kc-menu-toggle span:nth-child(3) { transform: translateY(5px); }
.kc-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.kc-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.kc-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* The page behind the open sheet. Under the bar (z-index 50), so the bar's
   controls stay live and undimmed. */
.kc-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(43, 28, 12, 0.36);
}

/* The sheet hangs from the bar's bottom border and scrolls inside whatever
   viewport is left under it (--ks-menu-top is set on open). The clip-path
   end state reaches below the box so the shadow is not cut off. */
.kc-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 1px);
    max-height: calc(100vh - var(--ks-menu-top, 64px));
    max-height: calc(100dvh - var(--ks-menu-top, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ks-salt);
    border-bottom: 1px solid var(--ks-line);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 28px 48px -28px rgba(43, 28, 12, 0.45);
    clip-path: inset(0 0 -80px 0);
}
.kc-menu > .kc-wrap { padding-top: 6px; padding-bottom: 18px; }

.kc-menu-slide {
    transition: clip-path 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 200ms ease;
}
.kc-menu-off { clip-path: inset(0 0 100% 0); transform: translateY(-8px); opacity: 0; }
.kc-menu-fade { transition: opacity 220ms ease; }
.kc-menu-backdrop-off { opacity: 0; }

.kc-menu-list,
.kc-menu-sub ul { list-style: none; margin: 0; padding: 0; }
.kc-menu-list > li + li { border-top: 1px solid var(--ks-line); }

/* One row per top-level item, a link or (for a group) the button that opens it. */
.kc-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 0 2px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--ks-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ks-koa);
    text-decoration: none;
}
.kc-menu-row:hover { color: var(--ks-lagoon); }
/* The page being read, and the section it is in: a Board dot after the label. */
.kc-menu-row:is([aria-current], .kc-menu-here) > span { display: inline-flex; align-items: center; gap: 10px; }
.kc-menu-row:is([aria-current], .kc-menu-here) > span::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ks-board);
}

.kc-menu-chevron,
.kc-menu-out {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 999px;
    color: var(--ks-koa-soft);
    background: var(--ks-sand);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease;
}
.kc-menu-out { background: none; padding: 8px; }
.kc-menu-row:hover .kc-menu-chevron { background: var(--ks-sand-deep); }
.kc-open > .kc-menu-row .kc-menu-chevron { transform: rotate(180deg); }

/* A group opens in place: the grid row grows from 0fr to its content, and
   the closed list is hidden from keyboard and screen reader once it has
   finished closing. */
.kc-menu-sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 240ms;
}
.kc-open > .kc-menu-sub {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.kc-menu-sub > ul {
    min-height: 0;
    overflow: hidden;
    margin-left: 4px;
}
.kc-menu-sub li:last-child { padding-bottom: 12px; }
.kc-menu-sub a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px 0 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    text-decoration: none;
    border-left: 2px solid var(--ks-line);
    border-radius: 0 10px 10px 0;
}
.kc-menu-sub a:hover { color: var(--ks-lagoon); background: var(--ks-sand-soft); }
/* The rows' left rules make one line down the group; the page being read
   takes a Board stretch of it. */
.kc-menu-sub a[aria-current] { color: var(--ks-koa); border-left-color: var(--ks-board); }
/* The sheet scrolls, so a focus ring drawn outside a row would be clipped. */
.kc-body .kc-menu :focus-visible { outline-offset: -3px; border-radius: 10px; }

/* While open: the page underneath does not scroll, and the cookie consent
   plugin's floating button, which sits above everything, steps aside rather
   than cover the sheet's last row. Only <html> is locked: with <body> hidden
   too, the body becomes the sticky header's scroll container and the header
   scrolls away with the page. */
html.kc-menu-open { overflow: hidden; }
html.kc-menu-open .consent-root { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .kc-menu-slide { transition: opacity 120ms linear; }
    .kc-menu-off { clip-path: inset(0 0 -80px 0); transform: none; }
    .kc-menu-toggle span,
    .kc-menu-chevron,
    .kc-menu-sub,
    .kc-open > .kc-menu-sub { transition: none; }
}

@media (max-width: 1023px) {
    .kc-nav-item, .kc-nav-drop { display: none; }
    .kc-menu-toggle { display: inline-flex; }
}
/* Wide enough for the inline links: the sheet never shows, even for the frame
   before js/site-menu.js closes it on a resize. */
@media (min-width: 1024px) {
    .kc-menu,
    .kc-menu-backdrop { display: none !important; }
}
/* With the inline links showing, space them a little tighter than the rest of
   the bar and keep a clear run between the logo and the first link. Just
   above the breakpoint the brand also steps down a size. */
@media (min-width: 1024px) {
    .kc-nav-in { gap: 22px; }
    .kc-brand { padding-right: 32px; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
    .kc-nav-in { gap: 18px; }
    .kc-brand { padding-right: 20px; }
    .kc-brand i { width: 52px; height: 52px; }
    .kc-brand b { font-size: 23px; }
}
@media (max-width: 900px) {
    .kc-brand i { width: 46px; height: 46px; }
    .kc-brand b { font-size: 21px; }
    .kc-nav-in { height: 64px; gap: 14px; }
}

/* Docs pages keep Helios's mobile sidebar trigger inside the brand bar. */
.kc-nav-docs .kc-nav-burger { display: none; }
@media (max-width: 1023px) {
    .kc-nav-docs .kc-nav-burger { display: block; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kc-hero { position: relative; overflow: hidden; padding: 72px 0 84px; }
.kc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}
/* Pre-launch pill above the headline. The dot pulses so it reads as a live
   status rather than a label. */
.kc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px 14px 6px 11px;
    border: 1.5px solid var(--ks-board);
    border-radius: 999px;
    background: rgba(202, 84, 21, 0.08);
    color: var(--ks-board-deep);
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.kc-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ks-board);
    animation: kc-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes kc-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .kc-badge-dot { animation: none; }
}

.kc-hero h1 {
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.0;
    margin: 0 0 20px;
    max-width: 14ch;
}
.kc-hero h1 em { font-style: normal; color: var(--ks-lagoon); }
.kc-hero-sub { font-size: 18px; color: var(--ks-koa-soft); max-width: 46ch; margin: 0 0 30px; }
.kc-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kc-ctas-center { justify-content: center; margin-top: 26px; }
.kc-trust {
    margin-top: 34px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
    letter-spacing: 0.03em;
}
.kc-trust b { color: var(--ks-koa); font-weight: 700; }
.kc-hero-art { position: relative; min-height: 340px; }

/* The bus on the beach. .kc-hero-3d is much bigger than the picture's own
   column so the dunes have somewhere to go, and a mask feathers every edge
   into the page: there is no frame to see. It is a fixed size because the
   stills in images/hero/ are pictures of exactly this box: the still is all
   most visits get, and when src/hero-3d runs, its canvas starts on the same
   frame, fades in over the still and then hides it. The box ignores the
   pointer itself, so the headline and buttons it reaches under stay
   clickable; the script listens on .kc-hero-art for the press and on the
   whole hero for the pointer. */
.kc-hero-grid > :first-child { position: relative; z-index: 1; }
.kc-hero-3d {
    position: absolute;
    left: calc(50% - 456px);
    top: calc(50% - 313px);
    width: 960px;
    height: 640px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 44% 64% at 58% 50%, #000 52%, transparent 100%), linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 44% 64% at 58% 50%, #000 52%, transparent 100%), linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    mask-composite: intersect;
}
.kc-hero-poster,
.kc-hero-3d canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The fade is FADE_MS in src/hero-3d/main.js: the bus holds still for it. */
.kc-hero-3d canvas { opacity: 0; transition: opacity 400ms ease; }
.kc-hero-3d-on { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kc-hero-3d-on canvas { opacity: 1; }
.kc-hero-3d-on .kc-hero-poster { visibility: hidden; transition: visibility 0s linear 400ms; }

@media (max-width: 880px) {
    .kc-hero-grid { grid-template-columns: 1fr; }
    .kc-hero-art { min-height: 300px; }
    .kc-hero-3d {
        left: calc(50% - 320px);
        top: calc(50% - 187px);
        width: 640px;
        height: 440px;
        -webkit-mask-image: radial-gradient(ellipse 50% 62% at 50% 50%, #000 56%, transparent 100%), linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
        mask-image: radial-gradient(ellipse 50% 62% at 50% 50%, #000 56%, transparent 100%), linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
    }
}

/* --------------------------------------------------------------------------
   Page hero (standalone pages such as /add-ons)
   -------------------------------------------------------------------------- */

.kc-page-hero { padding: 64px 0 28px; text-align: center; }
.kc-page-hero h1 {
    font-size: clamp(34px, 5.2vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 16px;
}
.kc-page-hero h1 em { font-style: normal; color: var(--ks-lagoon); }
.kc-page-hero .kc-kicker { text-align: center; }
.kc-page-hero .kc-intro { margin: 0 auto; text-align: center; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .kc-hero h1,
    .kc-hero .kc-hero-sub,
    .kc-hero .kc-ctas,
    .kc-hero .kc-release-line,
    .kc-hero .kc-trust { animation: kc-rise 600ms ease both; }
    .kc-hero .kc-hero-sub { animation-delay: 80ms; }
    .kc-hero .kc-ctas { animation-delay: 160ms; }
    .kc-hero .kc-release-line { animation-delay: 200ms; }
    .kc-hero .kc-trust { animation-delay: 240ms; }

    @keyframes kc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    .kc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
    .kc-reveal.kc-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */

.kc-stats { background: var(--ks-lagoon-deep); color: #F6EAD7; }
.kc-stats-in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 34px 0;
    text-align: center;
}
@media (max-width: 720px) { .kc-stats-in { grid-template-columns: repeat(2, 1fr); } }
.kc-stat .kc-num {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kc-stat .kc-lbl {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.kc-block { padding: 88px 0; }
.kc-block.kc-tight { padding-top: 64px; }

/* Anchor targets clear the sticky brand bar. */
.kc-body [id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Plain content page (default template in the site shell)
   -------------------------------------------------------------------------- */

.kc-page .kc-wrap { max-width: 800px; }
.kc-page-head { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--ks-line); }
.kc-page-head h1 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 800; line-height: 1.05; margin: 0 0 14px; }
.kc-page-head .kc-intro { margin-bottom: 0; }

.kc-prose { font-size: 16.5px; color: var(--ks-koa); }
.kc-prose h2 { font-size: 28px; font-weight: 800; margin: 40px 0 12px; }
.kc-prose h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; }
.kc-prose p { margin: 0 0 18px; }
.kc-prose ul,
.kc-prose ol { margin: 0 0 18px; padding-left: 22px; }
.kc-prose li { margin-bottom: 8px; }
/* The reset strips list markers; plain lists in prose get theirs back (a list with a class of its own keeps whatever it sets). */
.kc-prose ul:not([class]) { list-style: disc; }
.kc-prose ol:not([class]) { list-style: decimal; }
.kc-prose ul:not([class]) ul:not([class]) { list-style: circle; }
.kc-prose li::marker { color: var(--ks-lagoon); }
.kc-prose code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }
.kc-prose pre { background: var(--ks-koa); color: #E8DECF; border-radius: 12px; padding: 18px 20px; overflow-x: auto; }
.kc-prose pre code { background: none; padding: 0; color: inherit; }
.kc-prose blockquote { border-left: 3px solid var(--ks-board); margin: 0 0 18px; padding-left: 18px; color: var(--ks-koa-soft); }
/* A wide markdown table inside prose scrolls in its own box rather than pushing
   the page sideways. `display: block` is what makes overflow apply to a table. */
.kc-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 18px; }
.kc-prose th,
.kc-prose td { border-bottom: 1px solid var(--ks-line); padding: 10px 12px; text-align: left; }
.kc-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Feature / audience cards
   -------------------------------------------------------------------------- */

.kc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kc-feat-grid.kc-pushed { margin-top: 36px; }
@media (max-width: 960px) { .kc-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-feat-grid { grid-template-columns: 1fr; } }

.kc-feat {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-feat .kc-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.kc-feat .kc-ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--ks-lagoon-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-feat h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 8px; }
.kc-feat p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Platform split
   -------------------------------------------------------------------------- */

.kc-platform {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .kc-plat-grid { grid-template-columns: 1fr; } }

.kc-plat-points { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.kc-ppoint { display: flex; gap: 14px; }
.kc-ppoint .kc-dot {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kc-ppoint .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-ppoint b { display: block; font-size: 15.5px; }
.kc-ppoint span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-plat-card {
    background: var(--ks-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 34px 32px;
    position: relative;
    overflow: hidden;
}
.kc-plat-card .kc-waves2 { position: absolute; right: -30px; bottom: -20px; width: 340px; opacity: 0.35; pointer-events: none; }
.kc-plat-card h3 { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 10px; position: relative; }
.kc-plat-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 18px; position: relative; }
.kc-plat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.kc-pstat {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(246, 234, 215, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
}
.kc-pstat .kc-n { font-family: var(--ks-display); font-weight: 800; font-size: 22px; color: #fff; }
.kc-pstat .kc-l {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 3px;
}
.kc-plat-card .kc-gravlink {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    color: #FFD9A8;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.kc-plat-card .kc-gravlink:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Admin mockup
   -------------------------------------------------------------------------- */

.kc-admin-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .kc-admin-grid { grid-template-columns: 1fr; } }

.kc-admin-mock {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
    font-size: 12px;
}
.kc-am-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-am-top i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kc-am-top i:nth-child(1) { background: #CA5415; }
.kc-am-top i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-am-top i:nth-child(3) { background: #1A6F83; }
.kc-am-top .kc-url {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    color: var(--ks-koa-soft);
    background: var(--ks-salt);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: 6px;
}
.kc-am-body { display: grid; grid-template-columns: 132px 1fr; min-height: 300px; }
.kc-am-side { background: var(--ks-lagoon-deep); color: #BAD3D2; padding: 14px 0; }
.kc-am-side .kc-it { padding: 7px 16px; font-size: 11.5px; font-weight: 600; }
.kc-am-side .kc-it.kc-on {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-left: 3px solid var(--ks-board);
    padding-left: 13px;
}
.kc-am-main { padding: 16px 18px; }
.kc-am-h { font-family: var(--ks-display); font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.kc-am-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kc-am-tile { background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 10px; padding: 10px 12px; }
.kc-am-tile .kc-v { font-family: var(--ks-mono); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.kc-am-tile .kc-k { font-size: 10px; color: var(--ks-koa-soft); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.kc-am-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 11.5px;
}
.kc-am-row:last-child { border-bottom: 0; }
.kc-am-row .kc-id { font-family: var(--ks-mono); color: var(--ks-koa-soft); }
.kc-am-row .kc-who { font-weight: 600; }
.kc-am-row .kc-amt { font-family: var(--ks-mono); margin-left: auto; font-variant-numeric: tabular-nums; }

.kc-pill { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.03em; }
.kc-pill-paid { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-pill-ship { background: #F3DEC9; color: #8A4A12; }
.kc-pill-refund { background: var(--ks-sand-deep); color: var(--ks-koa-soft); }

.kc-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-checks li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-checks li::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; flex: none; }

/* --------------------------------------------------------------------------
   Payment providers
   -------------------------------------------------------------------------- */

.kc-prov-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 800px) { .kc-prov-lanes { grid-template-columns: 1fr; } }

.kc-lane { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 22px; }
.kc-lane h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.kc-lane .kc-lane-sub { font-size: 13.5px; color: var(--ks-koa-soft); margin: 0 0 16px; }

.kc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.kc-chip {
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    border: 1px solid transparent;
}
.kc-chip.kc-addon { background: var(--ks-sand); color: var(--ks-koa); border-color: var(--ks-line); }
.kc-chip small { font-weight: 600; opacity: 0.75; margin-left: 5px; font-size: 11px; }

.kc-prov-note { font-size: 14px; color: var(--ks-koa-soft); max-width: 72ch; }
.kc-prov-note b { color: var(--ks-koa); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.kc-pricing {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-price-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: stretch; }
@media (max-width: 840px) { .kc-price-grid { grid-template-columns: 1fr; } }

.kc-price-card {
    background: var(--ks-card);
    border: 2px solid var(--ks-koa);
    border-radius: 20px;
    padding: 32px;
    position: relative;
}
.kc-ea-flag {
    position: absolute;
    top: -14px;
    left: 28px;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 5px 14px;
    border-radius: 999px;
}
.kc-price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.kc-price-now {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 58px;
    letter-spacing: -0.03em;
    color: var(--ks-board);
    line-height: 1;
}
.kc-price-was { font-family: var(--ks-mono); font-size: 20px; color: var(--ks-koa-soft); text-decoration: line-through; }
.kc-price-per { font-size: 14px; color: var(--ks-koa-soft); }
.kc-price-card ul { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-price-card ul li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-price-card ul li::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; flex: none; }

.kc-renew-card {
    background: var(--ks-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.kc-renew-card h3 { color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 12px; }
.kc-renew-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 14px; }
.kc-renew-card p b { color: #fff; }
.kc-renew-card p.kc-first { margin-top: 10px; }
.kc-renew-num { font-family: var(--ks-display); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -0.02em; }
.kc-renew-num small { font-size: 15px; font-weight: 600; color: #A8CBCC; letter-spacing: 0; }
.kc-always {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(246, 234, 215, 0.22);
    font-size: 13.5px;
    color: #FFD9A8;
    font-weight: 600;
}
.kc-addon-note { margin-top: 18px; font-size: 14.5px; color: var(--ks-koa-soft); max-width: 78ch; }
.kc-addon-note b { color: var(--ks-koa); }

/* --------------------------------------------------------------------------
   Try it right now
   --------------------------------------------------------------------------
   One centered callout built like a browser window, with the live demo
   address in the title bar so the URL is the first thing read.
   -------------------------------------------------------------------------- */

.kc-demo-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
}

.kc-demo-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-demo-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.kc-demo-bar i:nth-child(1) { background: #CA5415; }
.kc-demo-bar i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-demo-bar i:nth-child(3) { background: #1A6F83; }

.kc-demo-url {
    flex: 1;
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ks-lagoon);
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 5px 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 140ms ease, color 140ms ease;
}
.kc-demo-url:hover { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); }

.kc-demo-in { padding: 40px 40px 36px; }
@media (max-width: 640px) { .kc-demo-in { padding: 30px 22px 28px; } }
.kc-demo-in .kc-kicker { margin-bottom: 10px; }
.kc-demo-intro { max-width: 68ch; }

.kc-demo-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 30px 0 34px;
}
@media (max-width: 820px) { .kc-demo-facts { grid-template-columns: 1fr; gap: 20px; } }

.kc-demo-fact .kc-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.kc-demo-fact .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-demo-fact b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.kc-demo-fact span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-demo-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kc-demo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-demo-note svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--ks-board);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.kc-faq { max-width: 780px; }
.kc-faq.kc-pushed { margin-top: 34px; }
.kc-faq details {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 13px;
    padding: 0 22px;
    margin-bottom: 10px;
}
.kc-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15.5px;
    padding: 17px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.kc-faq summary::-webkit-details-marker { display: none; }
.kc-faq summary::after { content: "+"; font-family: var(--ks-mono); color: var(--ks-lagoon); font-size: 19px; }
.kc-faq details[open] summary::after { content: "\2013"; }
.kc-faq details p { margin: 0 0 18px; font-size: 14.5px; color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.kc-cta-final { text-align: center; padding: 96px 0 100px; position: relative; overflow: hidden; }
.kc-cta-final h2 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 14px; }
.kc-cta-final .kc-cta-sub { color: var(--ks-koa-soft); font-size: 17px; max-width: 52ch; margin: 0 auto 30px; }
.kc-cta-final .kc-waves3 { position: absolute; left: -80px; bottom: -30px; width: 480px; opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Newsletter band
   --------------------------------------------------------------------------
   Two columns on a sand ground: copy on the left, the inline email row on the
   right. The whole band is bracketed by hairlines so it reads as its own strip
   between the closing CTA and the footer.
   -------------------------------------------------------------------------- */

.kc-news {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    padding: 64px 0;
}
.kc-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.kc-news-grid .kc-h2 { font-size: clamp(26px, 3.4vw, 36px); }
.kc-news-grid .kc-intro { font-size: 16px; max-width: 44ch; }

.kc-news-side { display: flex; flex-direction: column; justify-content: center; }

.kc-news-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}
.kc-news-input {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: var(--ks-card);
    border: 1.5px solid var(--ks-line);
    border-radius: 11px;
    padding: 13px 16px;
}
.kc-news-input::placeholder { color: #A08A6E; }
.kc-news-input:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.16);
}
.kc-news-btn { flex: none; white-space: nowrap; }
.kc-news-btn[disabled] { opacity: 0.7; cursor: default; transform: none; }

.kc-news-promise {
    margin: 14px 0 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: var(--ks-koa-soft);
}

.kc-news-msg {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
}
.kc-news-msg span { font-family: var(--ks-mono); }
.kc-news-msg-error { color: #A32E12; }

/* Visually hidden, still read out. */
.kc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .kc-news { padding: 52px 0; }
    .kc-news-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.kc-footer {
    background: var(--ks-koa);
    color: #C9B9A4;
    border-top: 5px solid var(--ks-board);
}
/* Brand column plus one track per link column in the theme config (four).
   The brand takes the widest track; the link columns share the rest equally.
   Under 1100px the brand sits on its own row above the four columns, under
   840px the columns pair up, and under 520px they stack. */
.kc-foot-in { display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; padding-top: 56px; padding-bottom: 40px; }
@media (max-width: 1100px) {
    .kc-foot-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kc-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 840px) { .kc-foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-foot-in { grid-template-columns: 1fr; } }

.kc-foot-brand i {
    width: 88px;
    height: 88px;
    background: var(--ks-bus-noshadow) center / contain no-repeat;
    display: block;
    margin-bottom: 12px;
}
.kc-foot-brand b { font-family: var(--ks-display); font-weight: 800; font-size: 19px; color: #F6EAD7; display: block; }
.kc-foot-brand p { font-size: 13.5px; margin: 8px 0 0; max-width: 30ch; }
.kc-foot-logo { display: block; width: 260px; max-width: 100%; margin-bottom: 16px; }
.kc-foot-logo img { display: block; width: 100%; height: auto; }

.kc-footer h3 {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A08B74;
    margin: 6px 0 14px;
}
.kc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kc-footer ul a { color: #E8DECF; text-decoration: none; font-size: 14px; }
.kc-footer ul a:hover { color: #fff; text-decoration: underline; }

.kc-foot-base {
    border-top: 1px solid rgba(246, 234, 215, 0.14);
    padding-top: 20px;
    padding-bottom: 28px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}
.kc-foot-base b { color: #E8DECF; font-weight: 600; }

/* --------------------------------------------------------------------------
   Documentation pages (Helios layout, KahunaCart skin)
   -------------------------------------------------------------------------- */

/* The branded bar above already carries the logo lockup, so the docs sidebar's
   own logo row is redundant. Helios's sidebar partial renders it as the first
   child of the sidebar root. */
.kc-docs-aside > div > div:first-child,
.kc-docs-mobile-panel > div > div:first-child { display: none; }

/* Helios pins the sidebar with `lg:fixed lg:inset-y-0`, which would run it under
   the brand bar and straight over the site footer. Make it a sticky flex child
   instead: it starts below the header and stops at the footer. */
.kc-docs-aside {
    background: var(--ks-salt);
    border-right-color: var(--ks-line);
}
@media (min-width: 1024px) {
    .kc-docs-aside {
        position: sticky;
        top: var(--ks-nav-h);
        height: calc(100vh - var(--ks-nav-h));
        align-self: flex-start;
        z-index: 20;
    }
    /* The content column no longer needs to clear a fixed sidebar. */
    .kc-docs-content { padding-left: 0; }
}

.kc-docs-shell {
    background: var(--ks-card);
    min-height: calc(100vh - var(--ks-nav-h));
}

/* The mobile sidebar drawer has to sit above the sticky brand bar (both are
   z-50 in Helios, and the bar renders later in the DOM). */
.mobile-nav-overlay { z-index: 55; }
.kc-docs-mobile-panel {
    z-index: 60;
    background: var(--ks-salt);
    padding-top: 12px;
}

/* Search icon in the site header, on every page. A round icon button the same
   size as the account control beside it, and it shrinks with it on phones
   (see the header section of css/kahuna-shop.css). */
.kc-nav-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    color: var(--ks-koa);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-nav-search:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-nav-search svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 600px) { .kc-nav-search, .kc-menu-toggle { width: 34px; height: 34px; } }
/* Helios gives the search modal z-50, the same as the sticky brand bar, and the
   bar comes later in the page, so it drew over the modal's backdrop and on a
   phone hid the search box under its link row. Lift the modal above it. */
.search-modal { z-index: 60; }

/* Helios sets the article column's vertical rhythm and pins the TOC rail with
   Tailwind utilities (`py-10`, `top-24`, `max-h-[calc(100vh-7rem)]`) that never
   reach the browser: Tailwind compiles from Helios's own source list, which does
   not scan this child theme. So the column rendered flush against the header and
   the footer, and the TOC's `position: sticky` sat at `top: auto` and never
   stuck. Both are set here in plain CSS instead. */
.kc-docs-main {
    color: var(--ks-koa);
    padding-top: var(--ks-docs-gap);
    padding-bottom: var(--ks-docs-gap);
}

.kc-docs-toc-rail {
    position: sticky;
    top: calc(var(--ks-nav-h) + var(--ks-docs-gap));
    max-height: calc(100vh - var(--ks-nav-h) - (var(--ks-docs-gap) * 2));
    overflow-y: auto;
}

/* The TOC panel carries its own 32px of top padding, which would push "ON THIS
   PAGE" below the breadcrumbs. Drop it and let both columns start on the gap. */
.kc-docs-toc-rail > div { padding-top: 0; }

.kc-docs-main h1,
.kc-docs-main h2,
.kc-docs-main h3,
.kc-docs-main h4,
.kc-docs-main h5,
.kc-docs-main h6 {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    color: var(--ks-koa);
}
.kc-docs-main .prose a { color: var(--ks-lagoon); }
.kc-docs-main .prose a:hover { color: var(--ks-lagoon-deep); }
.kc-docs-main .prose code { color: var(--ks-lagoon-deep); }
.kc-docs-main .prose blockquote { border-left-color: var(--ks-board); }
.kc-docs-main .prose thead { border-bottom-color: var(--ks-line); }
.kc-docs-main .prose tbody tr { border-bottom-color: var(--ks-line); }

/* Inline code in the docs.
   ---------------------------------------------------------------------------
   @tailwindcss/typography draws a literal backtick either side of every inline
   `<code>` inside `.prose`, through `content: "`"` on ::before and ::after. On
   this site that reads as a typo: the code chip already has its own ground and
   its own face, so the quotes are noise the author never typed. The plugin's
   own selector is `:where(code):not(:where([class~="not-prose"], ...))`, which
   scores zero specificity, so one plain rule turns both off everywhere `.prose`
   is used: every docs page, and the plain `default` template too. */
.prose code::before,
.prose code::after { content: none; }

/* Tables in the docs.
   ---------------------------------------------------------------------------
   Reference tables carry a `<code>` route or permission in the first columns
   and a sentence in the last. `<code>` has no break opportunity in it, so auto
   table layout hands those columns their whole unbroken width and the prose
   column collapses to a few characters, with the rest of the table scrolled off
   the side. Letting code wrap inside a cell is the whole fix: auto table layout
   can then share the width out in proportion to what each column holds, which
   gives the sentences the room and wraps the routes.

   Helios already makes the table its own horizontal scroll container
   (`display: block; overflow-x: auto` in css/custom/typography.css), so a table
   that is genuinely too wide scrolls inside itself and never pushes the page
   sideways. These rules make that the last resort rather than the first. */
.kc-docs-main .prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
.kc-docs-main .prose table code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Reference cards: the events page and the Twig page.
   ---------------------------------------------------------------------------
   Both are a long list of entries — 130-odd events, 45 Twig functions and
   filters — and each entry is a long identifier, a word or two of kind, and a
   sentence, with the events carrying a payload key list on top. That was four
   table columns each, and four columns do not fit the article column: the
   sentence scrolled off the side and `onKahunaCartRegisterCarrierRateProviders`
   came apart into five-character shreds. A card gives the name a line of its
   own and everything else the full width, and it reads the same at any window
   size.

   Written by gen-dev-reference.py's `reference_card()`, which is why these are
   raw HTML inside a markdown page. The look is the API endpoint card's. */
.kc-docs-main .kc-refs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 28px;
}
.kc-docs-main .kc-ref {
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    background: var(--ks-card);
    padding: 12px 16px 14px;
}
/* Inline flow rather than a flex row: a flex item will not shrink below the
   width of the unbroken name, so the longest of them — 39 characters of
   `onKahunaCartDeclareFeatureCompatibility` — pushed the card sideways on a
   phone. Laid out as text, the tags drop to a second line first, and only a
   name that still cannot fit breaks, at the one point it has to. */
.kc-docs-main .kc-ref-head {
    margin-bottom: 6px;
    line-height: 1.5;
}
.kc-docs-main .kc-ref-name {
    font-family: var(--ks-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.kc-docs-main .kc-ref-tag {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-left: 7px;
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
}
/* Tinted: the event a plugin raises, and the smaller of the two Twig kinds.
   Everything else — listens, handler method, function — stays neutral, so one
   tinted tag in a run of cards is the one worth stopping on. */
.kc-docs-main .kc-ref-tag--fires,
.kc-docs-main .kc-ref-tag--filter {
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-docs-main .kc-ref-what,
.kc-docs-main .kc-ref-detail {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-docs-main .kc-ref-detail {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--ks-line);
    font-size: 14px;
}
.kc-docs-main .kc-ref-label {
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin-right: 6px;
}
.kc-docs-main .kc-ref code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    /* A payload runs to a couple of dozen keys, so the line wraps between them
       and a key longer than the line breaks at a word boundary, never mid-word. */
    overflow-wrap: break-word;
    word-break: normal;
}
/* The description is prose, so a key named in it keeps the chip every other
   page gives it. The payload is a list of two dozen names read in one go, and
   a chip either side of every comma leaves the commas floating in the gaps —
   so the keys there are the mono face and the link colour and nothing else. */
.kc-docs-main .kc-ref-detail code {
    background: none;
    padding: 0;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   API reference (api-collection and api-endpoint pages)
   --------------------------------------------------------------------------
   Helios styles these in css/custom/api.css with Tailwind utilities over its
   own gray ramp. That file is compiled into build/css/site.css, so the layout
   arrives, but the colours are Helios's, and the child theme cannot add
   utilities of its own (see the note at the top of this file). Everything
   below is plain CSS over the brand tokens, loaded after the bundle, and it
   re-skins rather than re-builds: the structure stays Helios's.
   -------------------------------------------------------------------------- */

/* Method badges. Used in three places at three sizes: the endpoint card header,
   the docs sidebar, and the on-this-page TOC. */
.kc-body .api-method {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kc-body .api-method.method-get,
.kc-body .api-method.method-head {
    background: var(--ks-lagoon-mist);
    border-color: #B9D4D2;
    color: var(--ks-lagoon-deep);
}
.kc-body .api-method.method-post {
    background: #E4EFD9;
    border-color: #C6DDB4;
    color: #3F6B24;
}
.kc-body .api-method.method-put,
.kc-body .api-method.method-patch {
    background: #F7E7C6;
    border-color: #E8CE9B;
    color: #7A5400;
}
.kc-body .api-method.method-delete {
    background: #F7DCCB;
    border-color: #EABE9F;
    color: var(--ks-board-deep);
}

/* The endpoint card */
.kc-body .api-endpoint-card {
    margin: 18px 0 28px;
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    background: var(--ks-card);
    overflow: hidden;
}
.kc-body .api-endpoint-card .endpoint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
}
.kc-body .api-endpoint-card .endpoint-path {
    font-family: var(--ks-mono);
    font-size: 13.5px;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.kc-body .api-endpoint-card .endpoint-path .path-param { color: var(--ks-board); }
.kc-body .api-endpoint-card .endpoint-permission {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ks-body);
    font-size: 12px;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}
.kc-body .api-endpoint-card .endpoint-permission code {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa);
    border-radius: 5px;
    padding: 2px 6px;
}
.kc-body .api-endpoint-card .endpoint-permission.is-public code {
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-body .api-endpoint-card .endpoint-description {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .endpoint-description > *:first-child { margin-top: 0; }
.kc-body .api-endpoint-card .endpoint-description > *:last-child { margin-bottom: 0; }
.kc-body .api-endpoint-card .endpoint-description code,
.kc-body .api-endpoint-card .endpoint-response code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    color: var(--ks-koa);
    border-radius: 5px;
    padding: 1px 5px;
}
.kc-body .api-endpoint-card .endpoint-body { padding: 4px 16px 16px; }
/* The description is the last thing in a card with no parameters, so it keeps
   no rule under it. */
.kc-body .api-endpoint-card .endpoint-description:last-child { border-bottom: 0; }

/* Parameter table */
.kc-body .api-endpoint-card .params-title,
.kc-body .api-endpoint-card .responses-title,
.kc-body .api-endpoint-card .response-title {
    margin: 16px 0 8px;
    font-family: var(--ks-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
/* The card clips its own overflow, so the scroll container is the wrapper and
   the table itself stays a table: a `display: block` table shrink-to-fits and
   leaves the header ground stopping short of the card's edge. */
.kc-body .api-endpoint-card .api-params { overflow-x: auto; }
.kc-body .api-endpoint-card .params-table {
    /* The docs-table rule above turns every table in the article column into
       its own scroll container. This one is inside a `not-prose` card and does
       not want that, so it says so. */
    display: table;
    width: 100%;
    min-width: 26rem;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}
.kc-body .api-endpoint-card .params-table th {
    padding: 8px 10px;
    text-align: left;
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .params-table td {
    padding: 10px;
    border-top: 1px solid var(--ks-line);
    vertical-align: top;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .params-table td:first-child { min-width: 8rem; }
.kc-body .api-endpoint-card .params-table td:last-child { width: 62%; }
.kc-body .api-endpoint-card .param-name {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa);
    overflow-wrap: anywhere;
}
.kc-body .api-endpoint-card .param-type {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .param-required,
.kc-body .api-endpoint-card .param-optional {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.kc-body .api-endpoint-card .param-required { color: var(--ks-board-deep); }
.kc-body .api-endpoint-card .param-optional { color: #A08E78; }
.kc-body .api-endpoint-card .param-description { color: var(--ks-koa-soft); }
.kc-body .api-endpoint-card .param-description code,
.kc-body .api-endpoint-card .param-default code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    color: var(--ks-koa);
    border-radius: 4px;
    padding: 1px 5px;
}
.kc-body .api-endpoint-card .param-default,
.kc-body .api-endpoint-card .param-enum {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ks-koa-soft);
}

/* Response note */
.kc-body .api-endpoint-card .endpoint-response {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-lagoon);
    border-radius: 0 10px 10px 0;
    background: var(--ks-sand-soft);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .endpoint-response > *:first-child { margin-top: 0; }
.kc-body .api-endpoint-card .endpoint-response > *:last-child { margin-bottom: 0; }

/* Collection page: one section per endpoint, and the closing prose. */
.kc-docs-main .api-collection-section {
    /* Anchor jumps clear the sticky brand bar. Helios's own `mb-16 pb-12`
       leaves a hundred-odd pixels between one endpoint and the next, which is
       more air than these cards want. */
    scroll-margin-top: calc(var(--ks-nav-h) + 16px);
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom-color: var(--ks-line);
}
.kc-docs-main .api-collection-section:last-child { margin-bottom: 0; padding-bottom: 0; }
.kc-docs-main .api-collection-section h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 22px;
    margin: 0 0 4px;
}
.kc-docs-main .api-collection-outro { margin-top: 36px; }

/* On-this-page TOC: the endpoint rows carry a method badge, so they need the
   badge to sit on its own line above a long title rather than squashing it. */
.kc-docs-toc .toc-link { display: flex; align-items: baseline; gap: 7px; }
.kc-docs-toc .toc-link .api-method {
    flex: none;
    padding: 1px 5px;
    font-size: 9.5px;
}

/* Docs sidebar: same badge, one size down again. */
.kc-docs-aside .nav-link .api-method,
.kc-docs-mobile-panel .nav-link .api-method {
    margin-right: 6px;
    padding: 1px 5px;
    font-size: 9.5px;
}

/* --------------------------------------------------------------------------
   Code blocks (codesh plugin)
   --------------------------------------------------------------------------
   codesh ships a cool Tailwind-gray chrome (#f3f4f6 surround, gray-300 chips)
   that reads cold against the warm grounds. Its stylesheet loads after this
   one, so every rule here is scoped under `.kc-body` to win on specificity
   rather than order. Syntax token colours are left to the phiki theme.
   -------------------------------------------------------------------------- */

.kc-body .codesh-block {
    background-color: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    box-shadow: 0 4px 10px -2px rgba(43, 28, 12, 0.06);
}

/* phiki writes the code body's background as an inline style, so the pure white
   from its light theme needs `!important` to warm up. Token colours are left to
   the phiki theme. */
.kc-body .codesh-block pre.phiki { background-color: var(--ks-card) !important; }

.kc-body .codesh-block .codesh-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ks-line);
}

.kc-body .codesh-block .codesh-lang {
    color: var(--ks-koa-soft);
    background-color: var(--ks-sand-deep);
}

.kc-body .codesh-block .codesh-title { color: var(--ks-koa); }

.kc-body .codesh-block .codesh-copy,
.kc-body .codesh-group .codesh-copy {
    color: var(--ks-koa-soft);
    background-color: var(--ks-card);
    border-color: var(--ks-line);
}

.kc-body .codesh-block .codesh-copy:hover,
.kc-body .codesh-group .codesh-copy:hover {
    color: var(--ks-lagoon);
    background-color: var(--ks-card);
    border-color: var(--ks-lagoon);
}

/* Sidebar navigation links */
.kc-docs-shell .nav-link { font-family: var(--ks-body); }
.kc-docs-shell .nav-link.active { color: var(--ks-lagoon); }

/* Line the nested group's vertical rule up with the centre of its parent's
   icon: the row's 12px of left padding plus half the 20px icon. Helios's own
   `ml-4` left it 6px short. */
.kc-docs-shell .nav-children,
.kc-docs-mobile-panel .nav-children { margin-left: 22px; }

/* Helios's search trigger and kbd chips */
.kc-body .search-trigger { border-color: var(--ks-line); background: var(--ks-card); color: var(--ks-koa-soft); }
.kc-body .search-trigger:hover { border-color: var(--ks-lagoon); }
.kc-body kbd { border-color: var(--ks-line); background: var(--ks-sand); color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Light-only guarantees
   --------------------------------------------------------------------------
   Helios ships a dark variant driven by a `dark` class on <html>. This site
   never uses it: the templates hardcode light and js/kahuna.js strips the class
   if a stale localStorage value from another Helios site puts it back. These
   rules are the belt-and-braces so nothing dark can flash through.
   -------------------------------------------------------------------------- */

html.dark .kc-body { background: var(--ks-salt); color: var(--ks-koa); }
html.dark .kc-docs-shell { background: var(--ks-card); color: var(--ks-koa); }
html.dark .kc-docs-aside { background: var(--ks-salt); }

/* --------------------------------------------------------------------------
   Compare pages
   --------------------------------------------------------------------------
   Everything under /compare: the parity matrix (compare-matrix), the index
   cards (compare-cards), hand-written tables (compare-table), long-form prose
   (prose), the verdict pair (compare-verdict), onward links (related) and the
   slim breadcrumb (compare-crumb).

   Plain CSS on `kc-` classes over `--ks-` tokens, hairline borders, 10px
   radii, no shadows and no gradients — the same rules as the rest of the file.

   The one thing worth knowing before editing: a feature row's note lives in a
   SEPARATE <tr> underneath it, not inside the feature cell, so it can run the
   full width of the table. The toggle is a <details> in the feature cell and
   the reveal is `tr:has(.kc-note[open]) + tr.kc-cmp-note` — pure CSS, so the
   notes work with JavaScript off, and a browser without `:has()` simply shows
   every note instead of hiding them.
   -------------------------------------------------------------------------- */

/* ---- token colours -------------------------------------------------------
   One source for the six cell tokens. Glyphs are mono so ✓ / + / ~ / ✗ all
   occupy the same advance and the columns read as columns. */

.kc-cell,
.kc-cmp-legend b {
    font-family: var(--ks-mono);
    font-variant-ligatures: none;
}

/* Cell icons. The text glyph stays in the markup for copy-paste and readers
   without CSS; on screen each token is a 20px disc whose fill says how much of
   the feature is there, with a check or cross masked in front of it. The two
   masks are defined once here as data URIs — nothing is inlined per cell. */
:root {
    --ks-no: #B3412E;
    /* "Official add-on" is available and working, just not in the box, so it
       belongs to the same blue family as "in core" one step lighter — not to
       the warm end of the palette, where it sat next to --ks-no and read at a
       glance as another kind of no. */
    --ks-addon: #3E8FA3;
    --kc-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.6-1.6 3 3 8.8-8.8L20 6.2z'/%3E%3C/svg%3E");
    --kc-mask-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 7.8 13.4 12l4.2 4.2-1.4 1.4-4.2-4.2-4.2 4.2-1.4-1.4L10.6 12 6.4 7.8l1.4-1.4 4.2 4.2 4.2-4.2z'/%3E%3C/svg%3E");
}

.kc-cell[data-token="core"],        .kc-cmp-legend b[data-token="core"]        { color: var(--ks-lagoon); }
.kc-cell[data-token="addon"],       .kc-cmp-legend b[data-token="addon"]       { color: var(--ks-addon); }
.kc-cell[data-token="third_party"], .kc-cmp-legend b[data-token="third_party"] { color: var(--ks-koa-soft); }
.kc-cell[data-token="partial"],     .kc-cmp-legend b[data-token="partial"]     { color: var(--ks-amber); }
.kc-cell[data-token="none"],        .kc-cmp-legend b[data-token="none"]        { color: var(--ks-no); }
.kc-cell[data-token="unknown"],     .kc-cmp-legend b[data-token="unknown"]     { color: var(--ks-koa-soft); }

/* A faint wash of the same colour across the cell, so a column reads at a
   glance even before the icons resolve. Layered as an image so the KahunaCart
   column's own background stays underneath. */
.kc-cell[data-token]        { background-image: linear-gradient(var(--kc-cell-tint, transparent), var(--kc-cell-tint, transparent)); }
.kc-cell[data-token="core"]        { --kc-cell-tint: color-mix(in srgb, var(--ks-lagoon) 11%, transparent); }
.kc-cell[data-token="addon"]       { --kc-cell-tint: color-mix(in srgb, var(--ks-addon) 9%, transparent); }
.kc-cell[data-token="third_party"] { --kc-cell-tint: color-mix(in srgb, var(--ks-koa-soft) 7%, transparent); }
.kc-cell[data-token="partial"]     { --kc-cell-tint: color-mix(in srgb, var(--ks-amber) 10%, transparent); }
.kc-cell[data-token="none"]        { --kc-cell-tint: color-mix(in srgb, var(--ks-no) 5%, transparent); }
.kc-cell[data-token="unknown"]     { --kc-cell-tint: transparent; }

.kc-cell > span[aria-hidden],
.kc-cmp-legend b[data-token] {
    --kc-i-mask: none;
    --kc-i-ink: currentColor;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 0;
    line-height: 16px;
    text-align: center;
}
.kc-cell > span[aria-hidden]::before,
.kc-cmp-legend b[data-token]::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--kc-i-ink);
    -webkit-mask: var(--kc-i-mask) center / contain no-repeat;
    mask: var(--kc-i-mask) center / contain no-repeat;
}

/* In the box: a solid disc with the check knocked out of it. */
.kc-cell[data-token="core"] > span, .kc-cmp-legend b[data-token="core"] {
    background: currentColor; --kc-i-mask: var(--kc-mask-check); --kc-i-ink: var(--ks-card);
}
/* Official add-on: an open ring with a check — there, but not in the box. */
.kc-cell[data-token="addon"] > span, .kc-cmp-legend b[data-token="addon"] {
    --kc-i-mask: var(--kc-mask-check);
}
/* Third-party: the same, dashed, because somebody else maintains it. */
.kc-cell[data-token="third_party"] > span, .kc-cmp-legend b[data-token="third_party"] {
    border-style: dashed; --kc-i-mask: var(--kc-mask-check);
}
/* Partial: half a disc. */
.kc-cell[data-token="partial"] > span, .kc-cmp-legend b[data-token="partial"] {
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.kc-cell[data-token="partial"] > span::before, .kc-cmp-legend b[data-token="partial"]::before { content: none; }
/* Not available: a cross on a faint tint, no ring — absence should not shout. */
.kc-cell[data-token="none"] > span, .kc-cmp-legend b[data-token="none"] {
    border-color: transparent;
    background: color-mix(in srgb, var(--ks-no) 14%, transparent);
    --kc-i-mask: var(--kc-mask-cross);
}
.kc-cell[data-token="none"] > span::before, .kc-cmp-legend b[data-token="none"]::before { inset: -1px; }
/* Unverified: a dotted ring around the question mark itself. */
.kc-cell[data-token="unknown"] > span, .kc-cmp-legend b[data-token="unknown"] {
    border-style: dotted; font-size: 12px; font-weight: 700; font-family: var(--ks-mono);
}
.kc-cell[data-token="unknown"] > span::before, .kc-cmp-legend b[data-token="unknown"]::before { content: none; }

/* ---- legend -------------------------------------------------------------- */

.kc-cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0 0 24px;
    padding: 14px 18px;
    list-style: none;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

.kc-cmp-legend li { display: flex; align-items: center; gap: 8px; }
.kc-cmp-legend b { min-width: 1.5em; text-align: center; font-size: 14px; }

/* ---- expand / collapse --------------------------------------------------- */

.kc-cmp-tools {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
}

.kc-cmp-tool {
    font-family: var(--ks-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 7px 14px;
    cursor: pointer;
}

.kc-cmp-tool:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

/* ---- platform index (compare-index) --------------------------------------
   The row of "vs" links under the hub's hero: eight pages, one line. */

.kc-cmp-index-block { padding-top: 0; }

.kc-cmp-index {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kc-cmp-index-label {
    font-family: var(--ks-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin-inline-end: 4px;
}

.kc-cmp-index-link {
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa);
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 7px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.kc-cmp-index-link small {
    font-size: 12px;
    font-weight: 500;
    color: var(--ks-koa-soft);
}

.kc-cmp-index-link:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

/* ---- groups -------------------------------------------------------------- */

.kc-cmp-groups { display: flex; flex-direction: column; gap: 12px; }

.kc-cmp-group {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-cmp-group > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    list-style: none;
    background: var(--ks-sand-soft);
}

.kc-cmp-group > summary::-webkit-details-marker { display: none; }

.kc-cmp-group > summary::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid var(--ks-lagoon);
    border-bottom: 2px solid var(--ks-lagoon);
    transform: rotate(-45deg);
    transition: transform 160ms ease;
}

.kc-cmp-group[open] > summary::before { transform: rotate(45deg); }
.kc-cmp-group > summary:hover { background: var(--ks-sand); }
.kc-cmp-gname { flex: 1 1 auto; }

.kc-cmp-gcount {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

/* ---- the scroller -------------------------------------------------------- */

.kc-cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.kc-cmp-scroll:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: -3px; }

/* ---- the matrix table ---------------------------------------------------- */

/* `separate` rather than `collapse`: a sticky cell in a collapsed table loses
   its borders in WebKit, so every rule is drawn on the cell itself. */
.kc-cmp {
    --kc-cmp-platform-width: 120px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

/* Platform cells form a fixed-width block against the right edge. The feature
   column takes the remaining room, keeping every group aligned even when its
   longest label is much shorter than the group above or below it. */
.kc-cmp:not(.kc-cmp-wide) th.kc-cmp-plat,
.kc-cmp:not(.kc-cmp-wide) td.kc-cell {
    box-sizing: border-box;
    width: var(--kc-cmp-platform-width);
    min-width: var(--kc-cmp-platform-width);
}

.kc-cmp th,
.kc-cmp td {
    border-bottom: 1px solid var(--ks-line);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.kc-cmp tbody tr:last-child > th,
.kc-cmp tbody tr:last-child > td { border-bottom: 0; }

.kc-cmp thead th {
    background: var(--ks-sand);
    font-family: var(--ks-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ks-koa);
    white-space: nowrap;
    /* Sticky against the scroller. `overflow-x: auto` makes .kc-cmp-scroll the
       scroll container on both axes, so this only bites where the table itself
       scrolls vertically — groups are short enough that it rarely has to. */
    position: sticky;
    top: 0;
    z-index: 3;
}

.kc-cmp thead th abbr { text-decoration: none; border-bottom: 1px dotted var(--ks-line); cursor: help; }
.kc-cmp thead th.kc-cmp-plat { text-align: center; }

/* The feature column rides along on horizontal scroll. A sticky cell needs an
   opaque background of its own — `inherit` resolves to transparent here. */
.kc-cmp th.kc-cmp-feat {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 210px;
    max-width: 340px;
    font-weight: 500;
    color: var(--ks-koa);
    background: var(--ks-card);
    border-right: 1px solid var(--ks-line);
}

.kc-cmp thead th.kc-cmp-feat { z-index: 4; background: var(--ks-sand); }
.kc-cmp tbody tr.kc-cmp-alt > th.kc-cmp-feat { background: var(--ks-sand-soft); }
.kc-cmp tbody tr.kc-cmp-alt > td { background: var(--ks-sand-soft); }

/* Ours: a ruled frame down the whole column rather than a fill, so the
   per-token tints read the same in our column as in everybody else's. Drawn
   with inset shadows so it survives either table border model and never
   changes the cell size; the header takes the top edge, the last row the
   bottom one. */
.kc-cmp th.kc-cmp-ours,
.kc-cmp td.kc-cmp-ours {
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon);
}
.kc-cmp thead th.kc-cmp-ours {
    color: var(--ks-lagoon-deep);
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon), inset 0 2px 0 var(--ks-lagoon);
}
/* The last feature row, not :last-child — a collapsed note row can follow it. */
.kc-cmp tbody tr.kc-cmp-row-last > td.kc-cmp-ours {
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon), inset 0 -2px 0 var(--ks-lagoon);
}

.kc-cell,
.kc-cmp td.kc-cell {
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ---- notes --------------------------------------------------------------- */

.kc-note { display: block; }
.kc-note > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}
.kc-note > summary::-webkit-details-marker { display: none; }

.kc-note > summary::after {
    content: "i";
    flex: none;
    order: 2;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    font-family: var(--ks-mono);
    font-size: 10px;
    font-style: normal;
    line-height: 15px;
    text-align: center;
    color: var(--ks-lagoon);
    border: 1px solid var(--ks-lagoon);
    border-radius: 50%;
}

.kc-note[open] > summary::after { background: var(--ks-lagoon); color: var(--ks-salt); }
.kc-note > summary:hover span { color: var(--ks-lagoon); }

/* The note row is in the DOM on every render; `:has()` reveals it. */
.kc-cmp tr.kc-cmp-note { display: none; }
.kc-cmp tbody tr:has(.kc-note[open]) + tr.kc-cmp-note,
.kc-cmp tr.kc-cmp-note:target { display: table-row; }

@supports not selector(:has(*)) {
    .kc-cmp tr.kc-cmp-note { display: table-row; }
}

.kc-cmp tr.kc-cmp-note > td {
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    padding: 12px 16px;
}

.kc-cmp tr.kc-cmp-note code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 5px;
    padding: 1px 5px;
}

.kc-cmp tr.kc-cmp-note strong { color: var(--ks-koa); }

/* ---- the matrix on a phone ---------------------------------------------- */

/* Below 720px a twelve-column table cannot work, sticky column or not. The
   table stops being a table: each feature row becomes a card with the label on
   top and one chip per platform underneath (platform name over its mark, from
   the cell's data-plat), KahunaCart first with its lagoon frame. Nothing
   scrolls sideways, and the note toggle in the label keeps working. */
@media (max-width: 720px) {
    /* Only the matrix scroller; compare-table.html.twig shares the class and
       still needs to scroll sideways. */
    .kc-cmp-group > .kc-cmp-scroll { overflow: visible; }
    .kc-cmp,
    .kc-cmp tbody,
    .kc-cmp tr,
    .kc-cmp th,
    .kc-cmp td { display: block; width: auto; min-width: 0; max-width: none; }
    .kc-cmp thead { display: none; }

    .kc-cmp tbody tr.kc-cmp-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 6px;
        padding: 12px 14px 14px;
        border-bottom: 1px solid var(--ks-line);
    }
    .kc-cmp tbody tr.kc-cmp-row-last { border-bottom: 0; }
    .kc-cmp tbody tr.kc-cmp-alt { background: var(--ks-sand-soft); }

    .kc-cmp th.kc-cmp-feat,
    .kc-cmp tbody tr.kc-cmp-alt > th.kc-cmp-feat {
        grid-column: 1 / -1;
        position: static;
        padding: 0 0 6px;
        border: 0;
        background: transparent;
        font-weight: 600;
        font-size: 14px;
    }

    .kc-cmp td.kc-cell,
    .kc-cmp tbody tr.kc-cmp-alt > td.kc-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 7px 4px 6px;
        border: 1px solid var(--ks-line);
        border-radius: 8px;
        background-color: var(--ks-card);
        white-space: normal;
    }
    .kc-cmp td.kc-cell::before {
        content: attr(data-plat);
        order: -1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--ks-mono);
        font-size: 10.5px;
        letter-spacing: 0.02em;
        color: var(--ks-koa-soft);
    }
    .kc-cmp td.kc-cmp-ours,
    .kc-cmp tbody tr.kc-cmp-row-last > td.kc-cmp-ours { box-shadow: inset 0 0 0 2px var(--ks-lagoon); }
    .kc-cmp td.kc-cmp-ours::before { color: var(--ks-lagoon-deep); font-weight: 700; }

    .kc-cmp tbody tr:has(.kc-note[open]) + tr.kc-cmp-note,
    .kc-cmp tr.kc-cmp-note:target { display: block; }
    .kc-cmp tr.kc-cmp-note > td { padding: 10px 14px 12px; }
}

/* ---- footnotes ----------------------------------------------------------- */

.kc-cmp-foot { margin-top: 40px; }
.kc-cmp-foot h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; }

.kc-cmp-notes {
    margin: 0;
    padding-left: 24px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-cmp-notes li { margin-bottom: 12px; }
.kc-cmp-notes code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 5px; padding: 1px 5px; }
.kc-cmp-notes strong { color: var(--ks-koa); }

.kc-cmp-fnref {
    display: block;
    font-weight: 600;
    color: var(--ks-koa);
    text-decoration: none;
}

.kc-cmp-fnref:hover { color: var(--ks-lagoon); }

.kc-cmp-verified {
    margin: 22px 0 0;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

/* ---- comparison cards ---------------------------------------------------- */

.kc-cmp-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.kc-cmp-cards.kc-pushed { margin-top: 36px; }

@media (min-width: 640px)  { .kc-cmp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kc-cmp-cards { grid-template-columns: repeat(3, 1fr); } }

.kc-cmp-card {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 22px 22px 20px;
}

.kc-cmp-card-ours { background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon); }

.kc-cmp-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.kc-cmp-card h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-cmp-card h3 a:hover { color: var(--ks-lagoon); }

.kc-cmp-card-tag {
    margin: 0 0 16px;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

.kc-cmp-bar {
    display: flex;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ks-sand-deep);
}

.kc-cmp-bar span { display: block; height: 100%; }
.kc-cmp-bar span[data-token="core"]        { background: var(--ks-lagoon); }
.kc-cmp-bar span[data-token="addon"]       { background: var(--ks-addon); }
.kc-cmp-bar span[data-token="third_party"] { background: var(--ks-koa-soft); }
.kc-cmp-bar span[data-token="partial"]     { background: var(--ks-amber); }
.kc-cmp-bar span[data-token="none"]        { background: var(--ks-sand-deep); }

.kc-cmp-count {
    margin: 9px 0 14px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

.kc-cmp-verdict { margin: 0 0 16px; font-size: 14.5px; color: var(--ks-koa); }

.kc-cmp-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
    text-decoration: none;
}

.kc-cmp-more:hover { text-decoration: underline; }

/* ---- hand-written table (compare-table) ---------------------------------- */

.kc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-cmp-scroll.kc-pushed { margin-top: 36px; }

.kc-table th,
.kc-table td {
    border-bottom: 1px solid var(--ks-line);
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.kc-table thead th {
    background: var(--ks-sand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.kc-table tbody th { font-weight: 600; color: var(--ks-koa); }
.kc-table tbody tr:last-child > th,
.kc-table tbody tr:last-child > td { border-bottom: 0; }
.kc-table .kc-col-ours { background: var(--ks-lagoon-mist); }
.kc-table thead th.kc-col-ours { color: var(--ks-lagoon-deep); }

.kc-table-note {
    margin: 14px 0 0;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
    max-width: 72ch;
}

/* ---- prose module -------------------------------------------------------- */

.kc-prose.kc-pushed { margin-top: 30px; }
.kc-prose-narrow { max-width: 72ch; }
.kc-prose-wide { max-width: none; }

.kc-prose a { color: var(--ks-lagoon); }
.kc-prose strong { font-weight: 700; color: var(--ks-koa); }
.kc-prose h3:first-child { margin-top: 0; }

/* Two columns for the long "here is everything you give up" bullet lists. */
/* A prose block with a `photo:` (the bio on the About page): the photo sits
   above the text on a phone and beside it, top-aligned, from tablet width up. */
.kc-bio { display: grid; gap: 22px; align-items: start; }
.kc-bio.kc-pushed { margin-top: 30px; }
.kc-bio-photo { display: block; width: 160px; height: auto; border-radius: 12px; }
.kc-bio > .kc-prose > :first-child { margin-top: 0; }
@media (min-width: 640px) {
    .kc-bio { grid-template-columns: 160px minmax(0, 1fr); gap: 36px; }
}
.kc-prose-2col { columns: 2; column-gap: 48px; }
.kc-prose-2col > * { break-inside: avoid; }
.kc-prose-2col h3 { break-after: avoid; }

@media (max-width: 760px) {
    .kc-prose-2col { columns: 1; }
}

/* ---- verdict pair -------------------------------------------------------- */

.kc-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kc-verdict.kc-pushed { margin-top: 36px; }

@media (max-width: 760px) {
    .kc-verdict { grid-template-columns: 1fr; }
}

.kc-verdict-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 24px 26px;
}

.kc-verdict-ours { background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon); }
.kc-verdict-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; }
.kc-verdict-card ul { list-style: none; margin: 0; padding: 0; }

.kc-verdict-card li {
    display: flex;
    gap: 11px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa);
}

.kc-verdict-card li:last-child { margin-bottom: 0; }

.kc-verdict-mark {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 13px;
    line-height: 1.75;
    color: var(--ks-lagoon);
}

.kc-verdict-ours .kc-verdict-mark { color: var(--ks-lagoon-deep); }

/* ---- related links ------------------------------------------------------- */

.kc-block.kc-tight.kc-tighter { padding: 40px 0 56px; }
.kc-h2-small { font-size: clamp(22px, 2.6vw, 28px); }

.kc-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.kc-related-card {
    display: block;
    position: relative;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 16px 40px 16px 18px;
    text-decoration: none;
    color: var(--ks-koa);
}

.kc-related-card:hover { border-color: var(--ks-lagoon); }
.kc-related-card b { display: block; font-size: 15px; font-weight: 700; }
.kc-related-card span { display: block; margin-top: 4px; font-size: 13px; color: var(--ks-koa-soft); }

.kc-related-card em {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--ks-mono);
    font-style: normal;
    color: var(--ks-lagoon);
}

/* ---- ranking ------------------------------------------------------------- */

.kc-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 820px;
    border-top: 1px solid var(--ks-line);
}

.kc-rank.kc-pushed { margin-top: 34px; }

.kc-rank-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 20px 18px 20px 4px;
    border-bottom: 1px solid var(--ks-line);
}

.kc-rank-ours {
    background: var(--ks-lagoon-mist);
    border-radius: 10px;
    padding-left: 18px;
}

/* The place, and it is load-bearing: it comes from the frontmatter, not a
   counter, so a tie or a gap in the ranking still renders honestly. */
.kc-rank-num {
    flex: none;
    width: 2ch;
    font-family: var(--ks-mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: var(--ks-lagoon);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.kc-rank-ours .kc-rank-num { color: var(--ks-board); }

.kc-rank-body { flex: 1 1 auto; min-width: 0; }
.kc-rank-body h3 { font-size: 19px; font-weight: 700; margin: 0 0 5px; letter-spacing: -0.01em; }
.kc-rank-body h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-rank-body h3 a:hover { color: var(--ks-lagoon); }
.kc-rank-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ks-koa-soft); }
.kc-rank-ours .kc-rank-body p { color: var(--ks-koa); }

.kc-rank-lens {
    max-width: 820px;
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

/* ---- compare breadcrumb -------------------------------------------------- */

.kc-crumb {
    padding: 26px 0 0;
    font-size: 13px;
    color: var(--ks-koa-soft);
}

.kc-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kc-crumb a { color: var(--ks-koa-soft); text-decoration: none; }
.kc-crumb a:hover { color: var(--ks-lagoon); text-decoration: underline; }
.kc-crumb-sep { color: var(--ks-line); }
.kc-crumb [aria-current="page"] { color: var(--ks-koa); font-weight: 600; }

/* The crumb sits directly above the page hero, so that hero loses its top pad. */
.kc-crumb + .kc-block,
.kc-crumb + .kc-page-hero { padding-top: 22px; }

/* ==========================================================================
   Benchmarks (/benchmarks)
   --------------------------------------------------------------------------
   Everything here reads `config/benchmarks.yaml`, which the harness writes.
   Light-only like the rest of this file — the site sets `helios-theme` to
   light before first paint and strips any dark class, so there is no second
   palette to keep in step. Every figure is `tabular-nums` so a column of
   milliseconds lines up on the decimal point and a reader can scan it.
   ========================================================================== */

.kc-bench-num,
.kc-bench-table td,
.kc-bench-table th { font-variant-numeric: tabular-nums; }

/* ---- hero ---------------------------------------------------------------- */

.kc-bench-stamp {
    max-width: 62ch;
    margin: 22px auto 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-bench-stamp code {
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 0.94em;
}

.kc-bench-stamp b { color: var(--ks-board-deep); }

.kc-bench-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    max-width: 820px;
    margin: 26px auto 0;
    text-align: left;
}

.kc-bench-figure {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 18px 20px 16px;
}

.kc-bench-figure-name {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-lagoon-deep);
}

.kc-bench-figure-num {
    font-family: var(--ks-mono);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
}

.kc-bench-figure-num em {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--ks-body);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-bench-figure-sub {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

.kc-bench-figure-sub b { color: var(--ks-koa); font-weight: 700; }
.kc-bench-figure-sub span { color: var(--ks-line); }

.kc-bench-figure-ver {
    margin: 6px 0 0;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    color: var(--ks-koa-soft);
}

.kc-bench-note {
    max-width: 62ch;
    margin: 22px auto 0;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

/* ---- store size ---------------------------------------------------------- */

.kc-bench-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.kc-bench-stat {
    background: var(--ks-lagoon-mist);
    border: 1px solid var(--ks-lagoon);
    border-radius: 10px;
    padding: 18px 20px;
}

.kc-bench-stat-num {
    font-family: var(--ks-mono);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--ks-lagoon-deep);
    font-variant-numeric: tabular-nums;
}

.kc-bench-stat-lbl {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-bench-substore { margin-top: 34px; }

.kc-bench-substore h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.kc-bench-substore > p {
    margin: 0;
    max-width: 72ch;
    font-size: 14.5px;
    color: var(--ks-koa-soft);
}

.kc-bench-substore code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
}

.kc-bench-rows th[scope="row"] { font-family: var(--ks-mono); font-size: 13.5px; font-weight: 500; }

/* ---- a caveat that must not be missed ------------------------------------ */

.kc-bench-warn {
    margin: 22px 0 0;
    padding: 14px 18px;
    max-width: 82ch;
    background: var(--ks-sand);
    border-left: 4px solid var(--ks-amber);
    border-radius: 0 8px 8px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ks-koa);
}

.kc-bench-warn b { color: var(--ks-koa); }

.kc-bench-warn code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-card);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---- one target ---------------------------------------------------------- */

.kc-bench-target + .kc-bench-target { margin-top: 60px; padding-top: 48px; border-top: 1px solid var(--ks-line); }
.kc-bench .kc-bench-target:first-of-type { margin-top: 30px; }

.kc-bench-target-head h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kc-bench-target-head > p {
    margin: 0 0 8px;
    max-width: 78ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-bench-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}

.kc-bench-badge-live { background: var(--ks-lagoon); color: #FCF6EA; }

.kc-bench-meta {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

.kc-bench-meta code {
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---- the environment block ----------------------------------------------- */

.kc-bench-env {
    margin: 18px 0 0;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-bench-env > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
}

.kc-bench-env > summary::-webkit-details-marker { display: none; }

.kc-bench-env > summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ks-lagoon);
    border-bottom: 2px solid var(--ks-lagoon);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.kc-bench-env[open] > summary::before { transform: rotate(45deg); }
.kc-bench-env > summary:hover { background: var(--ks-sand); }
.kc-bench-env .kc-table { border: 0; border-radius: 0; border-top: 1px solid var(--ks-line); }
.kc-bench-env .kc-table td { font-size: 13.5px; color: var(--ks-koa-soft); }

/* ---- a group of routes --------------------------------------------------- */

.kc-bench-group { margin-top: 32px; }

.kc-bench-group h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kc-bench-group-note {
    margin: 0 0 14px;
    max-width: 78ch;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

/* ---- the results table --------------------------------------------------- */

.kc-bench-table thead th { vertical-align: bottom; }
.kc-bench-table th.kc-bench-right,
.kc-bench-table td.kc-bench-right { text-align: right; }

.kc-bench-unit {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ks-koa-soft);
}

.kc-bench-table tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }
.kc-bench-script { vertical-align: top; background: var(--ks-sand-soft); }

.kc-bench-cell {
    text-align: right;
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

.kc-bench-p95 {
    display: block;
    font-family: var(--ks-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ks-koa);
    font-variant-numeric: tabular-nums;
}

.kc-bench-spread {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 11px;
    line-height: 1.3;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

/* The lowest p95 in the row. The tint alone would be the only signal for a
   reader who cannot see it, so the cell also carries a bar on its left edge. */
.kc-bench-fastest {
    background: var(--ks-lagoon-mist);
    box-shadow: inset 3px 0 0 var(--ks-lagoon);
}

.kc-bench-fastest .kc-bench-p95 { color: var(--ks-lagoon-deep); font-weight: 700; }
.kc-bench-missing { background: var(--ks-sand-soft); }
.kc-bench-none { color: var(--ks-koa-soft); opacity: 0.5; font-family: var(--ks-mono); }

/* ---- reproduce recipe ---------------------------------------------------- */

.kc-bench-repro {
    max-width: 72ch;
    margin: 38px 0 0;
    padding: 26px 28px 22px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
}

.kc-bench-repro h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.kc-bench-repro > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa-soft); }

.kc-bench-recipe {
    counter-reset: kc-bench-step;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.kc-bench-recipe li {
    position: relative;
    padding: 0 0 14px 30px;
    border-left: 2px solid var(--ks-line);
    margin-left: 9px;
}

.kc-bench-recipe li:last-child { padding-bottom: 0; border-left-color: transparent; }

.kc-bench-recipe li::before {
    counter-increment: kc-bench-step;
    content: counter(kc-bench-step);
    position: absolute;
    left: -10px;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #FCF6EA;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    line-height: 18px;
    text-align: center;
}

.kc-bench-recipe code {
    display: block;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    color: var(--ks-koa);
    word-break: break-word;
}

.kc-bench-recipe span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-bench-repo-link { margin: 0; font-size: 14px; color: var(--ks-koa-soft); }
.kc-bench-repo-link a { font-family: var(--ks-mono); font-size: 0.95em; }

/* ---- history ------------------------------------------------------------- */

.kc-bench-history { font-size: 13.5px; }
.kc-bench-history th,
.kc-bench-history td { padding: 10px 13px; white-space: nowrap; }
.kc-bench-history code { font-family: var(--ks-mono); font-size: 0.92em; color: var(--ks-koa-soft); }
.kc-bench-history .kc-bench-badge { font-size: 10.5px; padding: 2px 8px; }

.kc-bench-build { font-size: 12.5px; color: var(--ks-koa-soft); }

/* ---- capacity ------------------------------------------------------------ */

.kc-bench-cap-peak {
    margin: 0 0 12px;
    font-size: 14.5px;
    color: var(--ks-koa);
}

.kc-bench-cap-peak b {
    font-family: var(--ks-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ks-lagoon-deep);
}

.kc-bench-capacity tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }

.kc-bench-nocap {
    background: var(--ks-sand-soft);
    color: var(--ks-koa-soft);
    font-size: 13.5px;
}

/* ---- narrow screens ------------------------------------------------------
   The page itself never scrolls sideways: the matrix does, inside its own box. */

@media (max-width: 760px) {
    .kc-compare .kc-cmp-legend { font-size: 12.5px; gap: 6px 16px; }
    .kc-cmp { --kc-cmp-platform-width: 104px; font-size: 13px; }
    .kc-cmp th,
    .kc-cmp td { padding: 8px 10px; }
    .kc-cmp th.kc-cmp-feat { min-width: 168px; max-width: 200px; }
    .kc-cmp-group > summary { font-size: 15.5px; padding: 13px 15px; }
    .kc-cmp-card { padding: 18px 18px 16px; }
    .kc-rank-row { gap: 14px; padding: 16px 12px 16px 4px; }
    .kc-rank-num { font-size: 24px; }
    .kc-bench-table { font-size: 13px; }
    .kc-bench-table th,
    .kc-bench-table td { padding: 9px 11px; }
    .kc-bench-table tbody th[scope="row"] { white-space: normal; min-width: 130px; }
    .kc-bench-p95 { font-size: 14px; }
    .kc-bench-figure-num { font-size: 28px; }
    .kc-bench-target-head h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .kc-cmp-group > summary::before,
    .kc-bench-env > summary::before { transition: none; }
}

/* --------------------------------------------------------------------------
   Consent banner
   --------------------------------------------------------------------------
   grav-plugin-consent ships a neutral palette and inherits the body font, so
   it is already legible here — this block is what makes it look like it
   belongs to KahunaCart rather than merely sitting on top of it.

   Only custom properties. The plugin declares its own defaults inside
   `:where()`, which carries zero specificity, so a plain `.consent-root`
   selector wins no matter which stylesheet the browser loaded last. Nothing
   below touches a plugin class name, so a plugin update cannot break it.

   Note the prefix: `--consent-*` is the plugin's, `--ks-*` is ours, and the
   storefront owns `--kc-*`. Three namespaces, no collisions — which is the
   whole reason the comment at the top of this file exists.
   -------------------------------------------------------------------------- */

.consent-root {
    /* Type — Bricolage for the headings, Albert Sans for everything else,
       matching the rest of the site rather than the browser default. */
    --consent-font: var(--ks-body);
    --consent-font-heading: var(--ks-display);
    --consent-font-mono: var(--ks-mono);

    /* Surfaces. Card over Salt, so the banner reads as paper on the warm
       ground rather than a white rectangle punched through it. */
    --consent-bg: var(--ks-card);
    --consent-bg-sunken: var(--ks-sand-soft);
    --consent-fg: var(--ks-koa);
    --consent-muted: var(--ks-koa-soft);
    --consent-border: var(--ks-line);
    --consent-track: var(--ks-sand-deep);

    /* Board is the action colour everywhere else on the site — the same
       orange as "Notify me at launch" — so Accept and Reject wear it too. */
    --consent-accent: var(--ks-board);
    --consent-accent-hover: var(--ks-board-deep);
    --consent-accent-fg: #FFF6EA;

    /* Lagoon for focus, matching links rather than the button fill. */
    --consent-focus: color-mix(in oklab, var(--ks-lagoon) 55%, transparent);
    --consent-backdrop: color-mix(in oklab, var(--ks-koa) 55%, transparent);

    /* Shape. 11px is the .kc-btn radius; 10px is the panel radius used most
       often across the theme. */
    --consent-radius: 10px;
    --consent-radius-sm: 8px;
    --consent-btn-radius: 11px;
    --consent-shadow:
        0 1px 2px color-mix(in oklab, var(--ks-koa) 8%, transparent),
        0 14px 34px -10px color-mix(in oklab, var(--ks-koa) 26%, transparent);

    --consent-max-width: 1180px;
}

/* ── Contact page ─────────────────────────────────────────────────────── */
.kc-contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 36px; align-items: start; margin-top: 8px; }
.kc-contact-side { display: grid; gap: 14px; }
.kc-contact-card { background: var(--ks-card); border: 1.5px solid var(--ks-line); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.kc-contact-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--ks-sand); color: var(--ks-lagoon); display: inline-flex; align-items: center; justify-content: center; }
.kc-contact-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kc-contact-text { display: grid; gap: 3px; min-width: 0; }
.kc-contact-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #A08A6E; }
.kc-contact-value { font-size: 15px; font-weight: 600; color: var(--ks-koa); text-decoration: none; word-break: break-word; }
a.kc-contact-value:hover { color: var(--ks-lagoon); }
.kc-contact-hint { font-size: 14px; color: #6E5A44; line-height: 1.55; margin: 6px 2px 0; }
.kc-contact-form .kc-news-msg { margin: 0 0 18px; }
.kc-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.kc-contact-field { display: grid; gap: 6px; }
.kc-contact-field--wide { grid-column: 1 / -1; }
.kc-contact-field label { font-size: 14px; font-weight: 600; color: var(--ks-koa); }
.kc-contact-field .kc-news-input { flex: none; width: 100%; box-sizing: border-box; }
.kc-contact-field textarea.kc-news-input { resize: vertical; min-height: 150px; line-height: 1.5; }
.kc-contact-field select.kc-news-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ks-koa) 50%), linear-gradient(135deg, var(--ks-koa) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.kc-contact-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 0; }
.kc-contact-note { font-size: 13px; color: #6E5A44; }
@media (max-width: 760px) {
    .kc-contact { grid-template-columns: 1fr; gap: 26px; }
    .kc-contact-grid { grid-template-columns: 1fr; }
}

/* ── Help center: the other ways to get help (templates/helpdesk.html.twig) ── */
.kc-support-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 40px; }
.kc-support-card { background: var(--ks-card); border: 1.5px solid var(--ks-line); border-radius: 14px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.kc-support-card:hover { border-color: var(--ks-lagoon); transform: translateY(-2px); }
.kc-support-card .kc-contact-icon { margin-top: 2px; }
.kc-support-text { display: grid; gap: 4px; min-width: 0; }
.kc-support-note { font-size: 13px; color: #6E5A44; line-height: 1.5; }
@media (max-width: 560px) { .kc-support-cards { grid-template-columns: 1fr; } }

/* ── Shop landing, laid out like a pricing page ───────────────────────── */
.kc-shop-plan { margin: 8px 0 12px; }
.kc-shop-plan-name { font-size: 22px; margin: 6px 0 12px; }
.kc-shop-plan-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.kc-shop-plan-actions form.kahunacart-buy.kc-shop-plan-buy { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.kc-shop-plan-more { font-weight: 600; color: var(--ks-lagoon); text-decoration: none; }
.kc-shop-plan-more:hover { text-decoration: underline; }
.kc-renew-link { margin-top: 14px; font-weight: 600; }
.kc-renew-card .kc-renew-link a { color: #fff; text-decoration: none; }
.kc-renew-card .kc-renew-link a:hover { text-decoration: underline; }
.kc-shop-section { margin-top: 56px; }
.kc-shop-section .kc-intro { max-width: 720px; margin-bottom: 22px; }
.kc-shop-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; }
.kc-shop-chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--ks-sand); color: var(--ks-koa); }
.kc-shop-chip::before { content: "\2713\00a0"; color: var(--ks-lagoon); }
.kc-shop-faq .kc-faq { max-width: 820px; }
.kc-shop-cta { text-align: center; padding: 40px 0 8px; }
.kc-shop-cta .kc-intro { margin-left: auto; margin-right: auto; }
.kc-shop-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 0; }
@media (max-width: 760px) { .kc-shop-section { margin-top: 40px; } }

/* ── Docs readability fixes from the launch Lighthouse pass (12 Sept 2026) ──
   Alert titles and the previous/next labels were under 4.5:1, and links in
   running text had nothing but colour to tell them apart. */
.md-alert--note > .md-alert-title { color: #24559E; fill: #24559E; }
.md-alert--warning > .md-alert-title { color: #7F5700; fill: #7F5700; }
.md-alert--tip > .md-alert-title { color: #1E6B3A; fill: #1E6B3A; }
.md-alert--important > .md-alert-title { color: #6B3FA0; fill: #6B3FA0; }
.md-alert--caution > .md-alert-title { color: #A83A2A; fill: #A83A2A; }
.prev-next-nav .nav-button .label { color: var(--ks-koa-soft); }
#htmx-article p a:not(.kc-btn):not(.nav-button), #htmx-article li a:not(.kc-btn), #htmx-article td a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
#htmx-article p a:hover, #htmx-article li a:hover, #htmx-article td a:hover { text-decoration-color: currentColor; }

/* The newsroom's own paragraphs, under the hero intro. */
.kc-newsroom-copy { max-width: 760px; margin: 18px auto 0; }
.kc-newsroom-copy p { font-size: 15.5px; line-height: 1.6; color: var(--ks-koa-soft); margin: 0 0 12px; }
.kc-newsroom-copy a { color: var(--ks-lagoon); }

/* ── printing ───────────────────────────────────────────────────────────────
   A printed page is its content. The early-access ribbon, the site header and
   its menu, the footer and the skip link are left off; the page is black on
   white and uses the sheet's whole width rather than the screen's column.
   The shop's own parts are in kahuna-shop.css, and KahunaCart's stylesheet
   leaves its buttons and forms off by itself. */
@media print {
    .kc-ribbon,
    .kc-nav,
    .kc-menu-backdrop,
    .kc-footer,
    .kc-body > a[href="#main-content"] {
        display: none !important;
    }
    html, .kc-body {
        background: #fff !important;
        color: #000 !important;
    }
    .kc-wrap,
    .kc-page .kc-wrap {
        max-width: none;
        padding: 0;
    }
    .kc-body a {
        color: inherit;
        text-decoration: none;
    }
}
/* ==========================================================================
   KahunaCart interior pages: shared pieces
   --------------------------------------------------------------------------
   Loaded on every page after kahuna.css. Holds the framed screenshot used by
   templates/modular/shot.html.twig and shot-grid.html.twig, so the four
   interior pages (platform, features, developers, performance) show a
   picture the same way. Page-specific rules live in kahuna-page-*.css.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

/* Browser frame around a screenshot. Bar matches the admin mock-up on the
   homepage (.kc-am-top) so the two read as the same object. */
.kc-frame {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(43, 28, 12, 0.10), 0 2px 6px rgba(43, 28, 12, 0.06);
}
.kc-frame-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-frame-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kc-frame-bar i:nth-child(1) { background: #CA5415; }
.kc-frame-bar i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-frame-bar i:nth-child(3) { background: #1A6F83; }
.kc-frame-url {
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.kc-frame-img { display: block; width: 100%; height: auto; }
.kc-frame-empty { aspect-ratio: 16 / 10; background: var(--ks-sand-soft); }
.kc-frame-pending { display: grid; place-items: center; padding: 24px; box-sizing: border-box; text-align: center; }
.kc-frame-pending span { font-size: 14px; opacity: .65; }

/* Screenshot feature: copy beside a frame. */
.kc-shot-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: center;
}
.kc-shot-flip .kc-shot-grid { grid-template-columns: 1.15fr 0.85fr; }
.kc-shot-flip .kc-shot-copy { order: 2; }
.kc-shot-flip .kc-shot-fig { order: 1; }
.kc-shot-fig { margin: 0; min-width: 0; }
.kc-shot-caption {
    margin-top: 12px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
    text-align: center;
}
.kc-shot-link { margin: 22px 0 0; font-weight: 600; }
.kc-shot-link a { text-decoration: none; }
.kc-shot-link a:hover { text-decoration: underline; }
.kc-h2-small { font-size: clamp(26px, 3.4vw, 36px); }
@media (max-width: 880px) {
    .kc-shot-grid,
    .kc-shot-flip .kc-shot-grid { grid-template-columns: 1fr; gap: 28px; }
    .kc-shot-flip .kc-shot-copy { order: 1; }
    .kc-shot-flip .kc-shot-fig { order: 2; }
}

/* Screenshot gallery. */
.kc-shots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 22px; margin-top: 8px; }
.kc-shots-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.kc-shots-item { margin: 0; min-width: 0; }
.kc-shots-item figcaption { margin-top: 12px; }
.kc-shots-item figcaption b { display: block; font-family: var(--ks-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.kc-shots-item figcaption b a { color: inherit; text-decoration: none; }
.kc-shots-item figcaption b a:hover { color: var(--ks-lagoon); }
.kc-shots-item figcaption span { display: block; font-size: 14.5px; color: var(--ks-koa-soft); margin-top: 3px; }
@media (max-width: 880px) {
    .kc-shots-grid,
    .kc-shots-grid[data-columns="3"] { grid-template-columns: 1fr; }
}

/* A checklist bullet inside a screenshot section may contain inline <code>.
   kahuna.css lays .kc-checks li out as a flex row, which turns every text
   node into its own flex item and breaks the line around the code; here the
   tick is positioned instead so the bullet flows as one line of text. */
.kc-shot .kc-checks li { display: block; position: relative; padding-left: 24px; }
.kc-shot .kc-checks li::before { position: absolute; left: 0; top: 0; }
.kc-shot .kc-checks li code { font-family: var(--ks-mono); font-size: 0.9em; background: var(--ks-sand); border-radius: 5px; padding: 1px 6px; }

/* Screenshot zoom (js/kahuna-pages.js). The framed picture is clickable; the
   overlay dims the page and the figure grows out of the frame into the middle
   of the screen. Reduced motion: no transition, the picture just appears. */
.kc-zoomable { cursor: zoom-in; }
.kc-zoomable:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: 3px; }
.kc-zoom-source { visibility: hidden; }
html.kc-zoom-open { overflow: hidden; }
.kc-zoom {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(43, 28, 12, 0);
    cursor: zoom-out;
    transition: background 320ms ease;
}
.kc-zoom.kc-zoom-in { background: rgba(43, 28, 12, 0.82); }
.kc-zoom-fig {
    margin: 0;
    max-width: min(1600px, 92vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform-origin: center center;
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
    .kc-zoom-fig { transition: transform 380ms cubic-bezier(0.22, 0.9, 0.36, 1), opacity 240ms ease; }
}
.kc-zoom-img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 40px);
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
    background: var(--ks-card);
}
.kc-zoom-cap {
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: #E8DECF;
    text-align: center;
}
.kc-zoom-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(246, 234, 215, 0.14);
    color: #F6EAD7;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
}
.kc-zoom-close:hover { background: rgba(246, 234, 215, 0.28); }
.kc-zoom-close:focus-visible { outline: 3px solid #FFD9A8; outline-offset: 2px; }

/* ==========================================================================
   Add-on cards (templates/modular/addons-cards.html.twig)
   --------------------------------------------------------------------------
   The /add-ons index: three cards, each an icon, a name that links, a pitch,
   three points and an arrow link. Same card metrics as .kc-cmp-card so the
   two grids read as one family.
   ========================================================================== */

.kc-addon-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.kc-addon-cards.kc-pushed { margin-top: 36px; }

@media (min-width: 720px)  { .kc-addon-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .kc-addon-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .kc-addon-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }

.kc-addon-card {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 24px 22px 20px;
}

.kc-addon-art {
    display: grid;
    place-items: center;
    background: var(--ks-salt);
    border-radius: 7px;
    margin-bottom: 22px;
    padding: 8px;
}
.kc-addon-art img { display: block; width: 180px; max-width: 100%; height: auto; }

.kc-page-hero-art img { display: block; width: 200px; height: auto; margin: 0 auto 24px; }
.kc-page-hero-copy { min-width: 0; }
.kc-page-hero-note { margin: 18px auto 0; max-width: 60ch; font-size: 14px; color: var(--ks-koa-soft); }

@media (min-width: 800px) {
    .kc-page-hero--art .kc-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
        align-items: center;
        gap: 48px;
    }
    .kc-page-hero--art .kc-page-hero-copy { grid-column: 1; grid-row: 1; }
    .kc-page-hero-art { grid-column: 2; grid-row: 1; }
    .kc-page-hero-art img { width: 100%; margin: 0; }
    .kc-page-hero--art,
    .kc-page-hero--art .kc-kicker,
    .kc-page-hero--art .kc-intro { text-align: left; }
    .kc-page-hero--art .kc-intro { margin: 0; }
    .kc-page-hero--art .kc-ctas { justify-content: flex-start; }
    .kc-page-hero--art .kc-page-hero-note { margin-left: 0; text-align: left; }
}

.kc-addon-card .kc-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.kc-addon-card .kc-ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--ks-lagoon-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kc-addon-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.kc-addon-card h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-addon-card h3 a:hover { color: var(--ks-lagoon); }

.kc-addon-soon { margin: -2px 0 10px; }
.kc-addon-badge {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border: 1px solid var(--ks-lagoon-mist);
}

.kc-addon-pitch { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--ks-koa); }

.kc-addon-points {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ks-line);
}

.kc-addon-points li {
    position: relative;
    padding: 10px 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-addon-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--ks-lagoon);
}

.kc-addon-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
    text-decoration: none;
}

.kc-addon-more:hover { text-decoration: underline; }

.kc-addon-note {
    margin: 22px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-addon-note a { color: var(--ks-lagoon); }

@media (max-width: 640px) {
    .kc-addon-card { padding: 20px 18px 18px; }
}

/* ---- /affiliates: the program block -------------------------------------
   The KahunaCart Affiliates add-on's program block, from the theme's copy of
   its partial (partials/kahunacart-affiliates/program.html.twig), drawn as a
   fact card: the terms as label and value rows in the /features facts style,
   then the Apply button. The terms list is the add-on's own markup (a <ul> of
   <li><strong>label</strong><span>value</span></li>), so these rules name its
   classes. The add-on's stylesheet is not loaded on this page. */

.kc-aff-program-wrap.kc-pushed { margin-top: 36px; }
.kc-aff-program-wrap { max-width: 880px; }

.kc-aff-program {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 26px 30px 24px;
}
.kc-aff-program .kahunacart-affiliates-terms {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kc-aff-program .kahunacart-affiliates-terms > li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    align-items: baseline;
    margin: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-aff-program .kahunacart-affiliates-terms > li:first-child { padding-top: 0; }
.kc-aff-program .kahunacart-affiliates-terms > li > strong {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    line-height: 1.5;
}
.kc-aff-program .kahunacart-affiliates-terms > li > span {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-aff-program-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 22px 0 0;
}
.kc-aff-program-actions span,
.kc-aff-program-closed {
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-aff-program-closed { margin: 18px 0 0; }
.kc-aff-program-wrap .kc-aff-program-terms { border-top: 0; padding-top: 0; margin-top: 16px; }

@media (max-width: 640px) {
    .kc-aff-program { padding: 20px 20px 18px; }
    .kc-aff-program .kahunacart-affiliates-terms > li { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
}
/* ==========================================================================
   KahunaCart /platform page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css. Everything here is scoped to
   the two templates only this page uses, templates/modular/plat-compare and
   plat-stack, under .kc-plat-compare and .kc-plat-stack. The homepage's
   platform split already owns .kc-plat-grid, .kc-plat-points, .kc-plat-card
   and .kc-plat-stats in kahuna.css, so nothing here reuses those names.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

.kc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Hosted cart vs KahunaCart on Grav
   --------------------------------------------------------------------------
   A three-column grid drawn as a table: the item, the hosted answer, ours.
   Our column sits on a Lagoon mist tint so the eye lands there. Below 760px
   each row stacks and every cell repeats its column heading from data-col.
   -------------------------------------------------------------------------- */

.kc-plat-compare-table {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(43, 28, 12, 0.04);
}
.kc-plat-compare-table.kc-pushed { margin-top: 36px; }

.kc-plat-compare-head,
.kc-plat-compare-row {
    display: grid;
    grid-template-columns: 200px 1fr 1.15fr;
}
.kc-plat-compare-row { border-top: 1px solid var(--ks-line); }
.kc-plat-compare-row:hover { background: var(--ks-sand-soft); }

.kc-plat-compare-cell {
    padding: 18px 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    min-width: 0;
}
.kc-plat-compare-head .kc-plat-compare-cell {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px 22px;
    background: var(--ks-sand);
}
.kc-plat-compare-head .kc-plat-compare-hosted { color: var(--ks-koa-soft); }
.kc-plat-compare-head .kc-plat-compare-ours { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); }

.kc-plat-compare-row .kc-plat-compare-label {
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    line-height: 1.3;
}
.kc-plat-compare-row .kc-plat-compare-ours {
    color: var(--ks-koa);
    background: rgba(221, 234, 232, 0.35);
    border-left: 1px solid var(--ks-line);
}
.kc-plat-compare-row:hover .kc-plat-compare-ours { background: rgba(221, 234, 232, 0.6); }
.kc-plat-compare-cell code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
}

.kc-plat-compare-note {
    margin: 16px 4px 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
    max-width: 78ch;
}

@media (max-width: 960px) {
    .kc-plat-compare-head,
    .kc-plat-compare-row { grid-template-columns: 160px 1fr 1.15fr; }
    .kc-plat-compare-cell { padding: 16px 18px; font-size: 14.5px; }
}

@media (max-width: 760px) {
    .kc-plat-compare-head { display: none; }
    .kc-plat-compare-row { grid-template-columns: 1fr; }
    .kc-plat-compare-row .kc-plat-compare-label {
        padding: 18px 20px 4px;
        font-size: 17px;
    }
    .kc-plat-compare-row .kc-plat-compare-hosted,
    .kc-plat-compare-row .kc-plat-compare-ours {
        padding: 10px 20px 16px;
        border-left: 0;
    }
    .kc-plat-compare-row .kc-plat-compare-ours {
        background: rgba(221, 234, 232, 0.35);
        border-top: 1px solid var(--ks-line);
    }
    .kc-plat-compare-row [data-col]::before {
        content: attr(data-col);
        display: block;
        font-family: var(--ks-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ks-koa-soft);
        margin-bottom: 6px;
        padding-top: 8px;
    }
    .kc-plat-compare-row .kc-plat-compare-ours::before { color: var(--ks-lagoon-deep); }
}

/* --------------------------------------------------------------------------
   The stack
   --------------------------------------------------------------------------
   The homepage draws this diagram small inside a dark card. Here it is the
   section: a Sand band with the layers at full width on a light ground, the
   theme in Koa ink on top, content in a plain card beside commerce in Lagoon,
   the admin on mist, the API on a dashed outline.
   -------------------------------------------------------------------------- */

.kc-plat-stack {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}

.kc-plat-stack-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 860px;
    margin: 0 auto;
}
.kc-plat-stack-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.kc-plat-layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid var(--ks-line);
    background: var(--ks-card);
    color: var(--ks-koa);
    text-align: center;
}
.kc-plat-layer b {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kc-plat-layer span {
    font-family: var(--ks-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-plat-layer-theme { background: var(--ks-koa); border-color: var(--ks-koa); color: #FFF6EA; }
.kc-plat-layer-theme span { color: #D8C8B2; }
.kc-plat-layer-grav { padding-top: 22px; padding-bottom: 22px; }
.kc-plat-layer-store { background: var(--ks-lagoon); border-color: var(--ks-lagoon); color: #fff; padding-top: 22px; padding-bottom: 22px; }
.kc-plat-layer-store span { color: #CFE3E1; }
.kc-plat-layer-admin { background: var(--ks-lagoon-mist); border-color: #C9DDDA; }
.kc-plat-layer-admin span { color: var(--ks-lagoon-deep); }
.kc-plat-layer-api { background: transparent; border-style: dashed; border-color: var(--ks-koa-soft); }

/* What lives where. */
.kc-plat-stack-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 860px;
    margin: 40px auto 0;
}
.kc-plat-stack-list {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 26px 22px;
}
.kc-plat-stack-list h3 {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-plat-stack-files h3 { color: var(--ks-koa-soft); }
.kc-plat-stack-db h3 { color: var(--ks-lagoon-deep); }
.kc-plat-stack-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kc-plat-stack-list li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-plat-stack-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ks-sand-deep);
    border: 1px solid var(--ks-line);
}
.kc-plat-stack-db li::before { background: var(--ks-lagoon); border-color: var(--ks-lagoon); }
.kc-plat-stack-list code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
}

.kc-plat-stack-note {
    max-width: 860px;
    margin: 18px auto 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-plat-stack-note code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 6px;
    padding: 1px 6px;
}

@media (max-width: 640px) {
    .kc-plat-stack-split { grid-template-columns: 1fr; }
    .kc-plat-stack-lists { grid-template-columns: 1fr; margin-top: 32px; }
    .kc-plat-layer { padding: 16px 18px; min-height: 60px; }
    .kc-plat-layer b { font-size: 16.5px; }
}
/* ==========================================================================
   KahunaCart /features page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css, so everything here sits under
   a `kc-featp-*` class. The shot sections and the hero come from the shared
   templates; this file adds the jump bar, the fact lists, the add-on tag and
   the honest-gaps grid. kc- classes, --ks- properties, light-only.
   ========================================================================== */

/* ---- jump bar ------------------------------------------------------------ */

.kc-featp-nav {
    position: sticky;
    top: var(--ks-featp-top, var(--ks-nav-h));
    z-index: 40;
    margin-top: 36px;
    background: rgba(252, 246, 234, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    transition: transform 240ms ease, opacity 240ms ease;
}
.kc-featp-nav-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}
.kc-featp-nav-in {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 9px;
    padding-bottom: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kc-featp-nav-in::-webkit-scrollbar { display: none; }
.kc-featp-nav-label {
    flex: none;
    margin-right: 10px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-featp-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--ks-koa-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.kc-featp-nav a svg {
    flex: none;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-featp-nav a:hover { color: var(--ks-koa); background: var(--ks-sand); }
.kc-featp-nav a.kc-featp-on {
    color: #FCF6EA;
    background: var(--ks-lagoon);
    border-color: var(--ks-lagoon);
}

/* Anchor targets after the bar clear both the brand bar and the jump bar. */
.kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, var(--ks-nav-h)) + 52px); }

/* Fallbacks for the brand bar's second row of links when the script has not
   measured it: 76 + 43 down to 1000px, 64 + 43 below 900px. */
@media (max-width: 1000px) {
    .kc-featp-nav { top: var(--ks-featp-top, 119px); }
    .kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, 119px) + 44px); }
}
@media (max-width: 900px) {
    .kc-featp-nav { top: var(--ks-featp-top, 108px); margin-top: 28px; }
    .kc-featp-nav-label { display: none; }
    .kc-featp-nav-in { gap: 4px; padding-top: 8px; padding-bottom: 8px; }
    .kc-featp-nav a { padding: 7px 12px; font-size: 13.5px; }
    .kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, 108px) + 44px); }
}

/* ---- fact list ----------------------------------------------------------- */

.kc-featp-facts { padding: 0 0 88px; }
.kc-shot + .kc-featp-facts { margin-top: -44px; }

.kc-featp-facts-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 26px 30px 24px;
}
.kc-featp-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 44px;
    margin: 0;
}
.kc-featp-facts-grid > div {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-featp-facts-grid > div:first-child,
.kc-featp-facts-grid > div:nth-child(2) { padding-top: 0; }
.kc-featp-facts-grid > div:last-child,
.kc-featp-facts-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
.kc-featp-facts-grid dt {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    line-height: 1.5;
}
.kc-featp-facts-grid dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-featp-facts-note {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-featp-facts-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 22px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ks-line);
    font-size: 14.5px;
    font-weight: 600;
}
.kc-featp-facts-links span {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-featp-facts-links a { text-decoration: none; }
.kc-featp-facts-links a:hover { text-decoration: underline; }
.kc-featp-facts-links em { font-style: normal; font-family: var(--ks-mono); }

@media (max-width: 880px) {
    .kc-featp-facts { padding-bottom: 72px; }
    .kc-shot + .kc-featp-facts { margin-top: -40px; }
    .kc-featp-facts-card { padding: 20px 20px 18px; }
    .kc-featp-facts-grid { grid-template-columns: 1fr; gap: 0; }
    .kc-featp-facts-grid > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
    .kc-featp-facts-grid > div:nth-child(2) { padding-top: 12px; }
    .kc-featp-facts-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ks-line); padding-bottom: 12px; }
}

/* ---- add-on tag inside a checklist bullet -------------------------------- */

.kc-featp-addon {
    display: inline-block;
    vertical-align: 2px;
    margin: 0 2px;
    padding: 1px 8px;
    border: 1px solid var(--ks-amber);
    border-radius: 999px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-amber);
    line-height: 1.5;
}

/* ---- honest gaps --------------------------------------------------------- */

.kc-featp-gaps {
    background: var(--ks-sand-soft);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-featp-gaps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.kc-featp-gap {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    padding: 22px 22px 20px;
}
.kc-featp-gap h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.kc-featp-gap p {
    flex: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
}
.kc-featp-gap-tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: 16px;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-amber);
}

@media (max-width: 960px) { .kc-featp-gaps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-featp-gaps-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
   KahunaCart /developers page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css, so every rule here is scoped
   under a `kc-devp-*` class. Same rules as kahuna.css: `kc-` classes, `--ks-`
   properties, light-only, no Tailwind utilities.

   The dark code blocks copy the homepage terminal's palette (kahuna-home.css
   `.kc-term*`) under their own names, so this page does not depend on the
   homepage stylesheet being present. Syntax colours come from the codesh
   plugin's kahuna-koa theme, not from rules here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: dark code blocks
   -------------------------------------------------------------------------- */

.kc-devp-term {
    background: var(--ks-koa);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.18);
}
.kc-devp-term-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: #3A281A;
    border-bottom: 1px solid rgba(246, 234, 215, 0.12);
}
.kc-devp-term-top i { width: 9px; height: 9px; border-radius: 50%; display: block; background: rgba(246, 234, 215, 0.25); }
.kc-devp-term-top i:first-child { background: var(--ks-board); }
.kc-devp-term-top span {
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 11px;
    color: #C9B9A4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The code itself is rendered by the codesh plugin (Phiki, kahuna-koa theme
   from user/data/codesh/themes), one `.codesh-block` per sample. These three
   frames own the ground and the padding, so the block's own chrome is turned
   off. Selectors start with `.kc-body` to beat the docs-page codesh rules in
   kahuna.css on specificity. Long lines scroll inside the block. */
.kc-devp-term-body,
.kc-devp-mini,
.kc-devp-json {
    display: grid;
    gap: 12px;
    margin: 0;
    min-width: 0;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    line-height: 1.6;
    color: #E8DECF;
}
.kc-devp-term-body { padding: 16px 0 18px; }
.kc-devp-mini,
.kc-devp-json {
    background: var(--ks-koa);
    border-radius: 12px;
    padding: 12px 0 14px;
    font-size: 12.5px;
}
.kc-devp-mini { margin-top: 14px; }

.kc-body .kc-devp-term .codesh-block,
.kc-body .kc-devp-mini .codesh-block,
.kc-body .kc-devp-json .codesh-block {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
}
.kc-body .kc-devp-term .codesh-block pre.phiki,
.kc-body .kc-devp-mini .codesh-block pre.phiki,
.kc-body .kc-devp-json .codesh-block pre.phiki {
    background-color: transparent !important;
    margin: 0;
    padding: 0 20px;
    font-family: var(--ks-mono);
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}
.kc-body .kc-devp-mini .codesh-block pre.phiki,
.kc-body .kc-devp-json .codesh-block pre.phiki { padding: 0 16px; }
/* The API cards are narrow, and their samples are short JSON objects and one
   long error sentence, so those wrap instead of scrolling. */
.kc-body .kc-devp-json .codesh-block pre.phiki { white-space: pre-wrap; }

/* Lines that are not code: the doctor's status rows, a summary, a comment. */
.kc-devp-lines {
    padding: 0 20px;
    white-space: pre;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.kc-devp-mini .kc-devp-lines,
.kc-devp-json .kc-devp-lines { padding: 0 16px; }
.kc-devp-line { display: block; min-height: 1.6em; }
.kc-devp-l-out { color: #C9B9A4; }
.kc-devp-note { color: #A89880; }
.kc-devp-tag { color: #7CC4B8; font-weight: 700; margin-right: 8px; }
.kc-devp-tag-warn { color: #FFD9A8; }

/* Links under a card or a panel. */
.kc-devp-link { margin: 18px 0 0; font-weight: 600; font-size: 15px; }
.kc-devp-link a { text-decoration: none; }
.kc-devp-link a:hover { text-decoration: underline; }

/* Inline code on the sand ground. */
.kc-devp-apis code:not(pre code),
.kc-devp-addons code:not(pre code),
.kc-devp-code .kc-devp-caption code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   Two APIs
   -------------------------------------------------------------------------- */

.kc-devp-apis-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    align-items: stretch;
}
.kc-devp-api {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 28px 28px 26px;
    min-width: 0;
}
.kc-devp-api > * { flex: none; }
.kc-devp-api h3 { font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.kc-devp-api h4 {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 26px 0 10px;
}
.kc-devp-api-text { font-size: 15px; color: var(--ks-koa-soft); margin: 0; }
.kc-devp-api-note { font-size: 14px; color: var(--ks-koa-soft); margin: 12px 0 0; }

.kc-devp-badge {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border-radius: 999px;
    padding: 4px 12px;
    margin: 0 0 14px;
}
.kc-devp-badge-admin { color: #8A4A12; background: #F3DEC9; }

/* Endpoint table: scrolls inside its own box below 560px. */
.kc-devp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kc-devp-endpoints {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 440px;
}
.kc-devp-endpoints th {
    text-align: left;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-devp-endpoints td {
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--ks-line);
    vertical-align: top;
    color: var(--ks-koa-soft);
}
.kc-devp-endpoints tr:last-child td { border-bottom: 0; }
.kc-devp-apis .kc-devp-endpoints td code:not(pre code) {
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    white-space: nowrap;
}
.kc-devp-method {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 2px 7px;
    min-width: 54px;
    text-align: center;
}
.kc-devp-method-get { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-devp-method-post { background: #F3DEC9; color: #8A4A12; }
.kc-devp-method-patch { background: #F1E7C8; color: #7A5600; }
.kc-devp-method-delete { background: #F5D9D2; color: #8E2E1A; }

/* Admin card pieces. */
.kc-devp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 22px 0 0;
}
.kc-devp-stats div {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    padding: 12px 12px 10px;
    text-align: center;
}
.kc-devp-stats dt {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--ks-board);
    line-height: 1;
}
.kc-devp-stats dd {
    margin: 4px 0 0;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-devp-families {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kc-devp-families li {
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa);
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 5px 12px;
}
.kc-devp-points { margin-top: 24px; }
.kc-devp-points li { font-size: 14.5px; color: var(--ks-koa-soft); }

/* Pinned to the foot of the admin card, so the two cards end together. */
.kc-devp-callout {
    margin: 26px 0 0;
    padding: 14px 18px;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-left: 4px solid var(--ks-board);
    border-radius: 12px;
    font-size: 14.5px;
    color: var(--ks-koa-soft);
}
.kc-devp-api .kc-devp-callout { margin-top: auto; padding-top: 14px; }
.kc-devp-api .kc-devp-link + .kc-devp-callout { margin-top: auto; }
.kc-devp-api .kc-devp-link { margin-bottom: 26px; }
.kc-devp-api .kc-devp-link:last-child { margin-bottom: 0; }
.kc-devp-callout b { color: var(--ks-koa); }

@media (max-width: 960px) {
    .kc-devp-apis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-devp-api { padding: 22px 18px 20px; }
    .kc-devp-stats { grid-template-columns: repeat(2, 1fr); }

    /* The endpoint table becomes a list: method and path on one line, the
       answer under them, so nothing has to scroll sideways on a phone. */
    .kc-devp-endpoints { min-width: 0; }
    .kc-devp-endpoints thead { display: none; }
    .kc-devp-endpoints,
    .kc-devp-endpoints tbody,
    .kc-devp-endpoints tr { display: block; }
    .kc-devp-endpoints tr { padding: 9px 0; border-bottom: 1px solid var(--ks-line); }
    .kc-devp-endpoints tr:last-child { border-bottom: 0; }
    .kc-devp-endpoints td { display: inline; padding: 0; border: 0; }
    .kc-devp-endpoints td:nth-child(2) { margin-left: 8px; }
    .kc-devp-endpoints td:nth-child(3) { display: block; padding-top: 4px; font-size: 13px; }
    .kc-devp-apis .kc-devp-endpoints td code:not(pre code) { white-space: normal; overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Code samples: tabs
   -------------------------------------------------------------------------- */

.kc-devp-tabs { margin-top: 4px; }
.kc-devp-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 5px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    width: fit-content;
    max-width: 100%;
}
.kc-devp-tablist [role="tab"] {
    appearance: none;
    border: 0;
    background: none;
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
}
.kc-devp-tablist [role="tab"]:hover { color: var(--ks-koa); }
.kc-devp-tablist [role="tab"][aria-selected="true"] {
    background: var(--ks-card);
    color: var(--ks-koa);
    box-shadow: 0 1px 3px rgba(43, 28, 12, 0.10);
}

/* Without the script every panel stacks, each with its own title. With it,
   the strip carries the names, so the per-panel title goes away. */
.kc-devp-panel + .kc-devp-panel { margin-top: 44px; }
.kc-devp-tabs-js .kc-devp-panel + .kc-devp-panel { margin-top: 0; }
.kc-devp-panel-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.kc-devp-tabs-js .kc-devp-panel-title { display: none; }
.kc-devp-caption { font-size: 15px; color: var(--ks-koa-soft); max-width: 78ch; margin: 0 0 18px; }
.kc-devp-panel { min-width: 0; }
.kc-devp-panel:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 560px) {
    .kc-devp-tablist { width: 100%; gap: 4px; }
    .kc-devp-tablist [role="tab"] { padding: 8px 12px; font-size: 13.5px; flex: 1 1 auto; }
    .kc-devp-term-body { font-size: 12px; padding: 14px 0 16px; }
    .kc-body .kc-devp-term .codesh-block pre.phiki,
    .kc-devp-term .kc-devp-lines { padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   Build an add-on
   -------------------------------------------------------------------------- */

.kc-devp-addons-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 20px;
    align-items: start;
}
.kc-devp-can {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 26px 28px;
    min-width: 0;
}
.kc-devp-can h3 { font-size: 19px; font-weight: 800; margin: 0 0 16px; }
.kc-devp-can ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kc-devp-can li {
    display: grid;
    gap: 2px;
    padding: 11px 0;
    border-top: 1px solid var(--ks-line);
}
.kc-devp-can li:first-child { border-top: 0; padding-top: 0; }
.kc-devp-can li b { font-size: 15px; }
.kc-devp-can li span { font-size: 13.5px; color: var(--ks-koa-soft); }

.kc-devp-steps { display: grid; gap: 14px; min-width: 0; }
.kc-devp-step {
    position: relative;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 24px 26px 24px 70px;
    min-width: 0;
}
.kc-devp-step-num {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 14px;
}
.kc-devp-step h3 { font-size: 18px; font-weight: 700; margin: 2px 0 8px; }
.kc-devp-step p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0; }

.kc-devp-contract {
    margin-top: 20px;
    background: var(--ks-lagoon-deep);
    color: #F6EAD7;
    border-radius: 18px;
    padding: 30px 32px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: center;
}
.kc-devp-contract .kc-kicker { color: #A8CBCC; margin-bottom: 8px; }
.kc-devp-contract h3 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.kc-devp-contract p { font-size: 15px; color: #BAD3D2; margin: 0; }
.kc-devp-contract-links { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.kc-devp-contract-links a { color: #F6EAD7; font-weight: 600; text-decoration: none; }
.kc-devp-contract-links a:hover { color: #fff; text-decoration: underline; }
.kc-devp-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kc-devp-chips li {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(246, 234, 215, 0.12);
    border: 1px solid rgba(246, 234, 215, 0.22);
    border-radius: 999px;
    padding: 6px 13px;
}

@media (max-width: 960px) {
    .kc-devp-addons-grid,
    .kc-devp-contract { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-devp-can { padding: 22px 18px; }
    .kc-devp-step { padding: 22px 18px 22px 60px; }
    .kc-devp-step-num { left: 16px; top: 22px; }
    .kc-devp-contract { padding: 24px 20px; }
}
/* ==========================================================================
   KahunaCart /performance page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css; every rule here is scoped under
   a `kc-perfp-` class so nothing leaks. Same rules as kahuna.css: `kc-`
   classes, `--ks-` properties, light-only.

   Chart conventions follow the homepage: Lagoon for the current build,
   Sand-deep with Amber figures for "before", axes from zero, every value
   printed, tabular numerals. The chart rules are copied here rather than
   shared with kahuna-home.css, which only the homepage loads.
   ========================================================================== */

/* ---- headline figures ----------------------------------------------------- */

.kc-perfp-head {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    margin-top: 36px;
    padding: 36px 0 30px;
}
.kc-perfp-head-in {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}
.kc-perfp-fig {
    display: block;
    padding: 6px 18px;
    color: inherit;
    text-decoration: none;
    border-left: 1px solid var(--ks-line);
}
.kc-perfp-fig:first-child { border-left: 0; }
.kc-perfp-fig-num {
    display: block;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(40px, 5.6vw, 64px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ks-lagoon-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kc-perfp-fig-num small {
    font-family: var(--ks-mono);
    font-size: 0.34em;
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 0.18em;
    color: var(--ks-lagoon);
    vertical-align: 0.12em;
}
.kc-perfp-fig-lbl {
    display: block;
    margin-top: 10px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.45;
    color: var(--ks-koa-soft);
}
a.kc-perfp-fig:hover .kc-perfp-fig-num { color: var(--ks-board); }
a.kc-perfp-fig:hover .kc-perfp-fig-lbl { color: var(--ks-koa); }
.kc-perfp-head-foot {
    margin: 24px auto 0;
    max-width: 78ch;
    text-align: center;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-perfp-head-foot code { font-family: inherit; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 5px; padding: 0 5px; }
.kc-perfp-head-foot a { color: var(--ks-lagoon); }

@media (max-width: 720px) {
    .kc-perfp-head { padding: 26px 0 22px; }
    .kc-perfp-head-in { grid-template-columns: 1fr; row-gap: 22px; }
    .kc-perfp-fig { border-left: 0; padding: 0 8px; }
    .kc-perfp-fig-num { font-size: 48px; }
    .kc-perfp-head-foot { text-align: left; }
}

/* ---- why it is fast ------------------------------------------------------- */

.kc-perfp-why-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 44px;
}
.kc-perfp-why-list.kc-perfp-pushed { margin-top: 34px; }
.kc-perfp-why-item { display: flex; gap: 16px; align-items: flex-start; }
.kc-perfp-why-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    display: grid;
    place-items: center;
}
.kc-perfp-why-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kc-perfp-why-item h3 {
    margin: 6px 0 6px;
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kc-perfp-why-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ks-koa-soft); }

@media (max-width: 760px) {
    .kc-perfp-why-list { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- the route table ------------------------------------------------------ */

/* The table scrolls inside .kc-cmp-scroll (kahuna.css) on a phone; the
   min-width keeps the four columns readable instead of crushing them. */
.kc-perfp-table { min-width: 560px; }
.kc-perfp-table thead th { vertical-align: bottom; }
.kc-perfp-table tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }
.kc-perfp-num { text-align: right; }
.kc-perfp-table th.kc-perfp-num,
.kc-perfp-table td.kc-perfp-num { text-align: right; }
.kc-perfp-table td.kc-perfp-num {
    font-family: var(--ks-mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 11px;
    padding-bottom: 11px;
}
.kc-perfp-unit {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ks-koa-soft);
}
.kc-perfp-table .kc-perfp-group th {
    background: var(--ks-sand-soft);
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 400;
}
.kc-perfp-table .kc-perfp-group b { display: block; font-family: var(--ks-display); font-size: 15px; font-weight: 700; color: var(--ks-koa); }
.kc-perfp-table .kc-perfp-group span { display: block; margin-top: 2px; font-size: 13px; color: var(--ks-koa-soft); white-space: normal; }
/* The lowest p95 in the row. The tint would be the only signal for someone
   who cannot see it, so the cell also carries a bar and a hidden word. */
.kc-perfp-table td.kc-perfp-fast {
    background: var(--ks-lagoon-mist);
    box-shadow: inset 3px 0 0 var(--ks-lagoon);
    color: var(--ks-lagoon-deep);
    font-weight: 700;
}
.kc-perfp-table td.kc-perfp-none { color: var(--ks-koa-soft); font-size: 12.5px; font-family: var(--ks-body); }
.kc-perfp-meta {
    margin: 14px 0 0;
    max-width: 78ch;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-perfp-meta code { font-family: inherit; background: var(--ks-sand); border-radius: 5px; padding: 0 5px; }
.kc-perfp-meta a { color: var(--ks-lagoon); }
.kc-perfp-note {
    margin: 22px 0 0;
    max-width: 72ch;
    padding: 14px 18px;
    border-left: 3px solid var(--ks-amber);
    background: var(--ks-sand-soft);
    border-radius: 0 10px 10px 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa);
}
.kc-perfp-note-wide { max-width: none; }

@media (max-width: 760px) {
    .kc-perfp-table { font-size: 13.5px; }
    .kc-perfp-table th,
    .kc-perfp-table td { padding: 9px 11px; }
    .kc-perfp-table td.kc-perfp-num { font-size: 14px; }
}

/* ---- charts (before/after and capacity) ----------------------------------- */

.kc-perfp-before-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.kc-perfp-p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ks-koa-soft); max-width: 58ch; }

.kc-perfp-chart {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 26px 22px;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.08);
}
.kc-perfp-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; }
.kc-perfp-chart-head b { font-family: var(--ks-display); font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
.kc-perfp-chart-head span { font-size: 13px; color: var(--ks-koa-soft); }
.kc-perfp-chart-head-2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ks-line); }
.kc-perfp-chart-head-2 b { font-size: 14px; color: var(--ks-koa-soft); font-weight: 700; }

.kc-perfp-bars { --kc-perfp-lbl: 92px; --kc-perfp-val: 84px; }
.kc-perfp-bar { display: grid; grid-template-columns: var(--kc-perfp-lbl) 1fr var(--kc-perfp-val); align-items: center; gap: 12px; margin-bottom: 10px; }
.kc-perfp-bar-lbl { font-family: var(--ks-mono); font-size: 12.5px; font-weight: 600; color: var(--ks-koa); }
.kc-perfp-track { position: relative; display: block; height: 28px; background: var(--ks-sand); border-radius: 6px; overflow: hidden; }
.kc-perfp-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--ks-lagoon); border-radius: 6px; transform-origin: left center; }
.kc-perfp-now { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--ks-lagoon-deep); box-shadow: 0 0 0 1.5px var(--ks-salt); } /* outlined so it reads on the amber fill as well as the track */
.kc-perfp-val { font-family: var(--ks-mono); font-size: 13.5px; font-weight: 700; color: var(--ks-koa); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.kc-perfp-val small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ks-lagoon); letter-spacing: 0.02em; }
.kc-perfp-axis {
    position: relative;
    height: 20px;
    margin: 4px var(--kc-perfp-val) 0 var(--kc-perfp-lbl);
    border-top: 1px solid var(--ks-line);
    font-family: var(--ks-mono);
    font-size: 10.5px;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}
.kc-perfp-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.kc-perfp-axis span:first-child { transform: none; }
.kc-perfp-axis span:last-child { transform: translateX(-100%); }

/* "Before": thinner bars in Sand-deep, Amber figures. */
.kc-perfp-bars-before .kc-perfp-track { height: 16px; }
/* The slow "before" build in amber, the colour its figures are printed in: sand-deep on the sand track was about 1.1:1. */
.kc-perfp-bars-before .kc-perfp-fill { background: var(--ks-amber); }
.kc-perfp-bars-before .kc-perfp-val { color: var(--ks-amber); font-size: 12.5px; }

.kc-perfp-foot { margin: 14px 4px 0; font-family: var(--ks-mono); font-size: 11.5px; line-height: 1.6; color: var(--ks-koa-soft); }
.kc-perfp-foot a { color: var(--ks-lagoon); }

/* Capacity cards: two side by side, smaller bars, a wider value column for the
   rung line under each figure. */
.kc-perfp-cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.kc-perfp-cap-card { padding: 22px 22px 18px; }
.kc-perfp-cap-bars { --kc-perfp-lbl: 120px; --kc-perfp-val: 156px; }
.kc-perfp-cap-bars .kc-perfp-track { height: 22px; }
.kc-perfp-cap-bars .kc-perfp-bar { margin-bottom: 12px; }
.kc-perfp-cap-bars .kc-perfp-val small { color: var(--ks-koa-soft); font-weight: 500; }
/* The route that cleared nothing: no bar, the miss in words, the zero in Amber. */
.kc-perfp-track-miss { background: repeating-linear-gradient(135deg, var(--ks-sand-soft) 0 6px, var(--ks-sand) 6px 12px); }
.kc-perfp-val-miss { color: var(--ks-amber); white-space: normal; }
.kc-perfp-cap-bars .kc-perfp-val-miss small { color: var(--ks-amber); white-space: normal; line-height: 1.3; }

@media (max-width: 880px) {
    .kc-perfp-before-grid { grid-template-columns: 1fr; gap: 34px; }
    .kc-perfp-cap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-perfp-chart { padding: 18px 16px 16px; }
    .kc-perfp-bars { --kc-perfp-lbl: 74px; --kc-perfp-val: 70px; }
    .kc-perfp-bar { gap: 8px; }
    .kc-perfp-bar-lbl { font-size: 11.5px; }
    .kc-perfp-val { font-size: 12.5px; }
    .kc-perfp-bars-before .kc-perfp-axis span:nth-child(3) { display: none; }
    .kc-perfp-cap-card { padding: 18px 14px 14px; }
    .kc-perfp-cap-bars { --kc-perfp-lbl: 68px; --kc-perfp-val: 128px; }
    .kc-perfp-cap-bars .kc-perfp-bar { gap: 8px; }
    .kc-perfp-cap-bars .kc-perfp-bar-lbl { font-size: 11px; }
    .kc-perfp-cap-bars .kc-perfp-val { font-size: 12.5px; }
    .kc-perfp-cap-bars .kc-perfp-val small { font-size: 9.5px; }
    .kc-perfp-cap-bars .kc-perfp-axis span:nth-child(even) { display: none; }
}

/* ---- motion ----------------------------------------------------------------
   Bars grow from the axis the first time a card scrolls into view
   (templates/modular/perfp-motion.html.twig). Fills are absolutely positioned
   and only their transform changes, so nothing around them moves. Without the
   script, or with reduced motion, the finished chart is simply there. */

@media (prefers-reduced-motion: no-preference) {
    .kc-perfp-fill { transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
    .kc-perfp-now { transition: opacity 400ms ease; transition-delay: calc(900ms + var(--i, 0) * 120ms); }
    .kc-perfp-js [data-kc-perfp]:not(.kc-perfp-go) .kc-perfp-fill { transform: scaleX(0); }
    .kc-perfp-js [data-kc-perfp]:not(.kc-perfp-go) .kc-perfp-now { opacity: 0; }
}
/* ==========================================================================
   KahunaCart site: the Themes section (/add-ons/themes and its nine pages,
   plus the themes band on /add-ons). Direction B, "Showroom": a dark koa
   stage holds the screenshots, big browser frames with a phone laid over the
   corner, a gallery with tabs on each theme page and a row of price cards.

   Templates: modular/themes-band, themes-hero, themes-included, themes-rows,
   themes-allsix, themes-facts, theme-stage, theme-what, theme-crops and
   theme-plans. Pictures come through partials/kc/themes.html.twig.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

:root {
    --ks-stage: #2B1C0C;
    --ks-stage-2: #3A2814;
    --ks-stage-on: #F6EAD7;
    --ks-stage-soft: #C9B9A4;
    --ks-stage-line: rgba(246, 234, 215, 0.16);
    --ks-stage-kick: #8FCFDC;
}

/* ---------- the stage: a dark band that holds pictures ---------- */
.kc-stage { background: var(--ks-stage); color: var(--ks-stage-on); position: relative; overflow: hidden; }
.kc-stage .kc-kicker { color: var(--ks-stage-kick); }
.kc-stage h1, .kc-stage h2, .kc-stage h3 { color: #FFF6EA; }
.kc-stage h1 em, .kc-stage h2 em { font-style: normal; color: var(--ks-stage-kick); }
.kc-stage .kc-intro, .kc-stage p { color: var(--ks-stage-soft); }
.kc-stage .kc-btn-ghost { color: var(--ks-stage-on); border-color: var(--ks-stage-on); }
.kc-stage .kc-btn-ghost:hover { background: var(--ks-stage-2); color: #fff; }
.kc-stage .kc-frame { border-color: var(--ks-stage-line); }
.kc-stage a:not(.kc-btn) { color: var(--ks-stage-kick); }
.kc-stage-glow::before {
    content: ""; position: absolute; inset: auto -20% -60% -20%; height: 90%;
    background: radial-gradient(ellipse at center, rgba(188, 76, 17, 0.35), transparent 60%);
    pointer-events: none;
}
.kc-stage > .kc-wrap { position: relative; }

/* ---------- small shared pieces ---------- */
.kc-th-crop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.kc-th-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ks-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; white-space: nowrap; text-decoration: none;
    padding: 4px 9px; border-radius: 999px;
    color: var(--ks-koa-soft); background: var(--ks-sand); border: 1px solid var(--ks-line);
}
a.kc-th-chip { color: var(--ks-koa); }
a.kc-th-chip:hover { border-color: var(--ks-koa); }
.kc-th-chip--free { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon-mist); }
.kc-stage .kc-th-chip { color: var(--ks-stage-on); background: var(--ks-stage-2); border-color: var(--ks-stage-line); }
.kc-stage .kc-th-chip--free { color: #10333A; background: var(--ks-stage-kick); border-color: var(--ks-stage-kick); }
.kc-th-price { font-family: var(--ks-display); font-weight: 800; letter-spacing: -0.02em; color: var(--ks-koa); }
.kc-th-small { font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-th-phone {
    border-radius: 26px; border: 6px solid #1B130B; overflow: hidden; background: #1B130B;
    box-shadow: 0 20px 40px -18px rgba(43, 28, 12, 0.45);
}
.kc-th-phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }

/* ---------- 1 · the band on /add-ons ---------- */
.kc-th-band { padding: 80px 0 72px; }
.kc-th-band-head { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; margin-bottom: 36px; }
.kc-th-band-head .kc-intro { margin: 0; }
.kc-th-prices { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.kc-th-prices li { color: var(--ks-stage-on); line-height: 1.6; }
.kc-th-prices .kc-th-chip { margin-right: 6px; vertical-align: 1px; }
.kc-th-band h2 em { display: block; }
.kc-th-prices b { font-family: var(--ks-display); font-size: 19px; }
.kc-th-band-cta { margin: 18px 0 0; }
.kc-th-rail {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 22%); gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 18px; scrollbar-width: thin;
}
.kc-th-rail > a { scroll-snap-align: start; text-decoration: none; color: inherit; display: block; min-width: 0; }
.kc-th-rail .kc-frame-bar { padding: 7px 10px; }
.kc-th-rail .kc-frame-bar i { width: 7px; height: 7px; }
.kc-stage .kc-th-tile-name { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-family: var(--ks-display); font-weight: 700; font-size: 18px; color: #FFF6EA; }
.kc-th-tile-name .kc-addon-badge { font-size: 9px; }
.kc-stage .kc-th-tile-sub { font-size: 13.5px; color: var(--ks-stage-soft); margin: 0; }
.kc-th-tile-sub b { color: var(--ks-stage-on); }

/* ---------- 2 · the overview ---------- */
.kc-th-hero { padding: 72px 0 0; text-align: center; }
.kc-th-hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; line-height: 1.02; margin: 0 0 16px; letter-spacing: -0.03em; }
.kc-th-hero .kc-intro { margin: 0 auto 28px; }
.kc-th-collage { position: relative; max-width: 1040px; margin: 56px auto 0; height: 430px; }
.kc-th-collage .kc-frame { position: absolute; width: 56%; }
.kc-th-collage .kc-th-c1 { left: 0; top: 60px; transform: rotate(-3deg); }
.kc-th-collage .kc-th-c2 { left: 22%; top: 0; z-index: 2; }
.kc-th-collage .kc-th-c3 { right: 0; top: 70px; transform: rotate(3deg); }
.kc-th-collage .kc-th-phone { position: absolute; right: 6%; top: 150px; width: 150px; z-index: 3; border-color: #000; }

.kc-th-free { padding: 72px 0 24px; }
.kc-th-free-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kc-th-free-grid figure { margin: 0; min-width: 0; }
.kc-th-free-grid figure > a { display: block; }
.kc-th-free-grid figcaption { margin-top: 12px; }
.kc-th-free-grid h3 { margin: 0 0 4px; font-size: 20px; display: flex; gap: 8px; align-items: center; }
.kc-th-free-grid h3 a { color: inherit; text-decoration: none; }
.kc-th-free-grid h3 a:hover { color: var(--ks-lagoon); }
.kc-th-free-grid p { margin: 0; font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-th-rows-head { padding-bottom: 0; }
.kc-th-row { padding: 64px 0; }
.kc-th-row + .kc-th-row { border-top: 1px solid var(--ks-line); }
.kc-th-row-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
.kc-th-row--flip .kc-th-row-grid { grid-template-columns: 0.75fr 1.25fr; }
.kc-th-row--flip .kc-th-show { order: 2; }
.kc-th-show { position: relative; padding-right: 96px; padding-bottom: 44px; min-width: 0; }
.kc-th-row--flip .kc-th-show { padding-right: 0; padding-left: 96px; }
.kc-th-show > a { display: block; }
.kc-th-show .kc-th-phone { position: absolute; right: 0; bottom: 0; width: 22%; }
.kc-th-row--flip .kc-th-show .kc-th-phone { right: auto; left: 0; }
.kc-th-copy { min-width: 0; }
.kc-th-copy h2 { font-size: clamp(34px, 4vw, 48px); font-weight: 800; margin: 0 0 10px; line-height: 1; }
.kc-th-copy h2 a { color: inherit; text-decoration: none; }
.kc-th-copy h2 a:hover { color: var(--ks-lagoon); }
.kc-th-copy .kc-intro { margin-bottom: 16px; font-size: 16px; }
.kc-th-copy ul { margin: 0 0 18px; padding: 0; list-style: none; }
.kc-th-copy li { position: relative; padding: 7px 0 7px 22px; font-size: 14.5px; color: var(--ks-koa-soft); border-top: 1px solid var(--ks-line); }
.kc-th-copy li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; border-radius: 2px; background: var(--ks-lagoon); }
.kc-th-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.kc-th-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kc-th-buy .kc-th-price { font-size: 30px; margin-right: 6px; }
.kc-th-bundle-line { margin: 14px 0 0; font-size: 13.5px; color: var(--ks-koa-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kc-th-bundle-line strong { color: var(--ks-koa); }

.kc-th-allsix { padding: 64px 0; }
.kc-th-allsix-in { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.kc-th-six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kc-th-six img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--ks-stage-line); display: block; }
.kc-stage .kc-th-allsix-price { color: #FFF6EA; font-size: 56px; display: block; line-height: 1; margin: 6px 0 12px; }
.kc-th-allsix-cta { margin: 20px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.kc-th-facts-block { padding-bottom: 64px; }
.kc-th-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.kc-th-fact { border: 1px solid var(--ks-line); background: var(--ks-card); border-radius: 10px; padding: 18px; }
.kc-th-fact b { display: block; font-size: 15px; margin-bottom: 6px; }
.kc-th-fact span { font-size: 14px; color: var(--ks-koa-soft); }

/* ---------- 3 · a theme page ---------- */
.kc-th-stage { padding: 64px 0 72px; text-align: center; }
.kc-th-stage h1 { font-size: clamp(54px, 9vw, 104px); line-height: 0.95; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.04em; }
.kc-stage .kc-th-sub { font-family: var(--ks-display); font-size: clamp(20px, 2.6vw, 28px); color: var(--ks-stage-on); margin: 0 auto 14px; max-width: 30ch; font-weight: 600; }
.kc-th-stage .kc-intro { margin: 0 auto 26px; }
.kc-th-stage .kc-ctas { justify-content: center; }
.kc-stage .kc-th-state { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; margin: 0 0 16px; color: var(--ks-stage-on); }
.kc-stage .kc-th-meta { margin: 22px 0 0; font-family: var(--ks-mono); font-size: 12.5px; color: var(--ks-stage-soft); }

.kc-th-gallery { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 22px; align-items: end; text-align: left; }
.kc-th-gallery--solo { grid-template-columns: minmax(0, 1fr); }
.kc-th-tabs { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; justify-content: center; scrollbar-width: none; }
.kc-th-tabs button {
    font: 600 14px var(--ks-body); white-space: nowrap; cursor: pointer;
    color: var(--ks-stage-soft); background: transparent; border: 1px solid var(--ks-stage-line); border-radius: 999px; padding: 8px 14px;
}
.kc-th-tabs button:hover { color: var(--ks-stage-on); border-color: var(--ks-stage-soft); }
.kc-th-tabs button[aria-pressed="true"] { background: var(--ks-stage-on); color: var(--ks-stage); border-color: var(--ks-stage-on); }
.kc-th-tabs button:focus-visible { outline: 2px solid var(--ks-stage-kick); outline-offset: 2px; }
.kc-th-gallery .kc-frame { min-width: 0; }
.kc-th-gallery .kc-frame-img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.kc-th-what { padding: 80px 0 40px; }
.kc-th-what-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: kc-th-what; }
.kc-th-what-grid > div { counter-increment: kc-th-what; border-top: 2px solid var(--ks-koa); padding-top: 14px; }
.kc-th-what-grid > div::before { content: counter(kc-th-what, decimal-leading-zero); font-family: var(--ks-mono); font-size: 12px; color: var(--ks-lagoon); display: block; margin-bottom: 6px; letter-spacing: 0.1em; }
.kc-th-what-grid b { display: block; font-family: var(--ks-display); font-size: 19px; margin-bottom: 6px; }
.kc-th-what-grid span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-th-crops-block { padding: 0 0 40px; }
.kc-th-crops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kc-th-crops figure { margin: 0; min-width: 0; }
.kc-th-crops img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 12px; border: 1px solid var(--ks-line); display: block; }
.kc-th-crops figcaption { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); margin-top: 8px; }
.kc-th-crops-note { margin: 22px 0 0; max-width: 72ch; }

.kc-th-plans { padding: 56px 0 80px; }
.kc-th-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-top: 28px; }
.kc-th-plan { display: flex; flex-direction: column; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 14px; padding: 26px 24px; position: relative; min-width: 0; }
.kc-th-plan--pick { border: 2px solid var(--ks-koa); }
.kc-th-plan-flag { position: absolute; top: -12px; left: 22px; background: var(--ks-koa); color: var(--ks-salt); font: 700 10.5px var(--ks-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.kc-th-plan h3 { margin: 0 0 6px; font-size: 19px; }
.kc-th-plan .kc-th-price { font-size: 40px; display: block; margin: 6px 0 4px; line-height: 1.1; }
.kc-th-plan-was { font-family: var(--ks-mono); font-size: 13px; color: var(--ks-koa-soft); margin: 0 0 10px; }
.kc-th-plan p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0 0 14px; }
.kc-th-plan ul { margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; color: var(--ks-koa-soft); }
.kc-th-plan li { padding: 6px 0; border-top: 1px solid var(--ks-line); }
.kc-th-plan .kc-btn, .kc-th-plan .kc-addon-badge { margin-top: auto; align-self: flex-start; }
.kc-th-plans-note { margin: 22px auto 0; text-align: center; max-width: 70ch; }

@media (max-width: 899px) {
    .kc-th-band-head { grid-template-columns: 1fr; }
    .kc-th-rail { grid-auto-columns: 72%; }
    .kc-th-collage { height: 300px; }
    .kc-th-collage .kc-frame { width: 70%; }
    .kc-th-collage .kc-th-c2 { left: 15%; }
    .kc-th-collage .kc-th-phone { width: 96px; top: 110px; right: 2%; }
    .kc-th-free-grid, .kc-th-what-grid, .kc-th-crops, .kc-th-plans-grid { grid-template-columns: 1fr; }
    .kc-th-plans-grid { gap: 26px; }
    .kc-th-row-grid, .kc-th-row--flip .kc-th-row-grid { grid-template-columns: 1fr; gap: 28px; }
    .kc-th-row--flip .kc-th-show { order: 0; padding-left: 0; padding-right: 44px; }
    .kc-th-row--flip .kc-th-show .kc-th-phone { left: auto; right: 0; }
    .kc-th-show { padding-right: 44px; padding-bottom: 30px; }
    .kc-th-allsix-in { grid-template-columns: 1fr; }
    .kc-th-facts { grid-template-columns: 1fr 1fr; }
    .kc-th-gallery { grid-template-columns: minmax(0, 1fr); }
    .kc-th-gallery .kc-th-phone { display: none; }
    .kc-th-tabs { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .kc-th-collage { height: 220px; margin-top: 36px; }
    .kc-th-collage .kc-th-phone { width: 72px; top: 80px; border-width: 4px; border-radius: 16px; }
    .kc-th-facts { grid-template-columns: 1fr; }
    .kc-th-row { padding: 44px 0; }
    .kc-th-show .kc-th-phone { border-width: 4px; border-radius: 16px; }
    .kc-th-stage { padding-top: 48px; }
}
/* ==========================================================================
   KahunaCart releases
   --------------------------------------------------------------------------
   Styles for /releases (templates/releases.html.twig), plus the small version
   lines the add-on heroes, the add-on cards and the product page show.
   Loaded everywhere at priority 88, after kahuna.css, reading the same
   `--ks-*` tokens. `.kc-ver` (the version pill) comes from kahuna-news.css's
   look and is repeated here so the page does not depend on that file.

   House rules as kahuna.css: plain CSS on `kc-` classes, custom properties
   only ever `--ks-*`, light-only.
   ========================================================================== */

.kc-ver {
    display: inline-flex;
    align-items: center;
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 5px 9px;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kc-releases-hero { padding-bottom: 8px; }
.kc-releases-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 22px 0 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--ks-koa-soft);
}
.kc-releases-meta a { color: var(--ks-koa-soft); text-decoration: none; border-bottom: 1px solid var(--ks-line); padding-bottom: 1px; }
.kc-releases-meta a:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

.kc-releases.kc-block.kc-tight { padding-top: 36px; }
.kc-releases-empty { text-align: center; color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Groups and the table
   -------------------------------------------------------------------------- */

.kc-rel-group + .kc-rel-group { margin-top: 56px; }

.kc-rel-group-head { margin-bottom: 14px; }
.kc-rel-group-head h2 {
    margin: 0;
    font-family: var(--ks-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}
.kc-rel-group-head p { margin: 4px 0 0; font-size: 15px; color: var(--ks-koa-soft); }

/* One grid for the column labels and every summary row, so they line up. */
.kc-rel-cols,
.kc-rel-row > summary {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) 96px 120px minmax(0, 2.4fr) 18px;
    align-items: center;
    column-gap: 20px;
}

.kc-rel-cols {
    padding: 0 18px 8px;
    border-bottom: 1px solid var(--ks-line);
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}

.kc-rel-row { border-bottom: 1px solid var(--ks-line); }
.kc-rel-row,
.kc-rel-version-notes { scroll-margin-top: calc(var(--ks-nav-h) + 16px); }
.kc-rel-row > summary {
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: 10px;
    transition: background-color 120ms ease;
}
.kc-rel-row > summary::-webkit-details-marker { display: none; }
.kc-rel-row > summary:hover { background: var(--ks-sand-soft); }
.kc-rel-row > summary:focus-visible { outline: 2px solid var(--ks-lagoon); outline-offset: -2px; }
.kc-rel-row[open] > summary { background: var(--ks-sand-soft); border-radius: 10px 10px 0 0; }

.kc-rel-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kc-rel-name img,
.kc-rel-noicon { flex: none; width: 36px; height: 36px; }
.kc-rel-name strong { font-size: 16px; font-weight: 650; color: var(--ks-koa); }

.kc-rel-date {
    font-family: var(--ks-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}

.kc-rel-latest { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kc-rel-headline { font-size: 15px; color: var(--ks-koa); }
.kc-rel-counts { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); }

.kc-rel-chevron { color: var(--ks-koa-soft); transition: transform 160ms ease; }
.kc-rel-row[open] .kc-rel-chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   The open row: facts on the left, notes on the right
   -------------------------------------------------------------------------- */

.kc-rel-panel {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr);
    gap: 32px;
    padding: 20px 18px 28px;
    background: var(--ks-sand-soft);
    border-radius: 0 0 10px 10px;
}

.kc-rel-facts { font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-rel-facts p { margin: 0 0 12px; }
.kc-rel-requires span {
    display: block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kc-rel-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kc-rel-links a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-rel-links a:hover { color: var(--ks-lagoon-deep); text-decoration: underline; text-underline-offset: 3px; }

.kc-rel-notes { min-width: 0; }
.kc-rel-version-notes + .kc-rel-version-notes { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--ks-line); }
.kc-rel-version-notes h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 14px;
}
.kc-rel-version-notes h3 time { font-family: var(--ks-mono); font-size: 13px; font-weight: 500; color: var(--ks-koa-soft); }

.kc-rel-section {
    margin: 14px 0 6px;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-rel-section-new { color: var(--ks-lagoon-deep); }
.kc-rel-section-bugfix { color: var(--ks-board-deep); }

.kc-rel-version-notes ul { margin: 0; padding-left: 18px; }
.kc-rel-version-notes li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa); }
.kc-rel-version-notes li strong { font-weight: 650; }
.kc-rel-version-notes li code {
    font-family: var(--ks-mono);
    font-size: 0.86em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ks-sand);
    overflow-wrap: anywhere;
}
.kc-rel-version-notes li a { color: var(--ks-lagoon); }

.kc-rel-older { margin-top: 24px; }
.kc-rel-older > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
}
.kc-rel-older > summary:hover { color: var(--ks-lagoon-deep); }
.kc-rel-older[open] > summary { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Narrow screens: the row stacks, the column labels go
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .kc-rel-cols { display: none; }
    .kc-rel-row > summary {
        grid-template-columns: auto auto 1fr 18px;
        row-gap: 8px;
        column-gap: 12px;
        padding: 14px 4px;
    }
    .kc-rel-name { grid-column: 1 / 4; }
    .kc-rel-chevron { grid-column: 4; grid-row: 1; }
    .kc-rel-version { grid-column: 1; grid-row: 2; }
    .kc-rel-date { grid-column: 2 / 4; grid-row: 2; }
    .kc-rel-latest { grid-column: 1 / -1; grid-row: 3; }
    .kc-rel-panel { grid-template-columns: 1fr; gap: 20px; padding: 16px 4px 24px; }
}

/* --------------------------------------------------------------------------
   Version lines elsewhere: add-on hero, add-on cards, product page
   -------------------------------------------------------------------------- */

.kc-release-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
}
.kc-release-line a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ks-line); padding-bottom: 1px; }
.kc-release-line a:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }
.kc-page-hero .kc-release-line { margin-top: 18px; }
.kc-hero .kc-release-line { margin-top: 18px; }
.kc-hero .kc-release-line + .kc-trust { margin-top: 22px; }
.kc-addon-card .kc-release-line { margin: 0 0 12px; }
.kc-product-info .kc-release-line { margin: -4px 0 14px; }

/* Footer base line: "KahunaCart 1.5.0 · Powered by Grav". */
.kc-foot-version { color: #E8DECF; font-weight: 600; text-decoration: none; }
.kc-foot-version:hover { text-decoration: underline; text-underline-offset: 3px; }
.md-alert {
  padding: 8px 16px;
  border-left: 3.5px solid #333333;
  margin-bottom: 16px;
}

.md-alert-body > *:last-child {
  margin-bottom: 0;
}

.md-alert-title {
  display: flex;
  font-weight: bold;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 0;

  & > svg {
    margin-right: 8px;
  }
}

.md-alert--note {
  border-color: var(--gh-alert-note-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-note-title-color);
    fill: var(--gh-alert-note-title-color);
  }
}

.md-alert--tip {
  border-color: var(--gh-alert-tip-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-tip-title-color);
    fill: var(--gh-alert-tip-title-color);
  }
}

.md-alert--important {
  border-color: var(--gh-alert-important-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-important-title-color);
    fill: var(--gh-alert-important-title-color);
  }
}

.md-alert--warning {
  border-color: var(--gh-alert-warning-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-warning-title-color);
    fill: var(--gh-alert-warning-title-color);
  }
}

.md-alert--caution {
  border-color: var(--gh-alert-caution-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-caution-title-color);
    fill: var(--gh-alert-caution-title-color);
  }
}
/* KahunaCart Affiliates: the Affiliate tab in the customer's account and the
   public program page.

   Like every add-on stylesheet, this paints nothing of its own. Every colour,
   radius and font reads a --kc-* token from the base plugin's stylesheet,
   which resolves a site's --kahunacart-* override, then the theme's design
   tokens, then a neutral. A theme that colours KahunaCart colours this tab
   for nothing, and with the base plugin's `builtin_css` switched off this
   file is not loaded either.

   Every rule is scoped to .kahunacart-affiliates, with :where() on the outer
   selector wherever it is not load-bearing, so a theme's own plain class
   selector wins on its own weight. */

.kahunacart-affiliates {
    display: grid;
    gap: 1.25rem;
    margin-block: 0.5rem 1.5rem;
}
.kahunacart-affiliates :where(h2) {
    margin: 0 0 0.6rem;
    font-size: 1.1em;
}
.kahunacart-affiliates :where(p) {
    margin-block: 0 0.5rem;
}

.kahunacart-affiliates-muted {
    color: var(--kc-muted);
    font-size: 0.92em;
}
.kahunacart-affiliates-label {
    margin: 0.75rem 0 0.35rem;
    color: var(--kc-subtle);
    font-size: 0.82em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── the tab's own navigation ───────────────────────────────────────────────
   A row of pills under the account navigation. Wraps on a phone rather than
   scrolling sideways, because seven short words fit in two rows and a hidden
   overflow hides the page a partner is looking for. */

.kahunacart-affiliates-nav :where(ul) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kahunacart-affiliates-nav :where(li) {
    margin: 0;
    padding: 0;
}
.kahunacart-affiliates-nav :where(a) {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--kc-border);
    border-radius: 999px;
    color: inherit;
    font-size: 0.92em;
    text-decoration: none;
    transition: border-color var(--kc-dur) var(--kc-ease), background var(--kc-dur) var(--kc-ease);
}
.kahunacart-affiliates-nav :where(a:hover) {
    border-color: var(--kc-border-strong);
}
.kahunacart-affiliates-nav :where(a[aria-current="page"]) {
    border-color: var(--kc-fg);
    background: var(--kc-fg);
    color: var(--kc-bg);
    font-weight: 500;
}

/* ── cards and notices ────────────────────────────────────────────────────── */

.kahunacart-affiliates-card,
.kahunacart-affiliates-notice {
    padding: 1rem 1.15rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-affiliates-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A line about the partner's standing (paused, closed, a tax form to fill
   in). Tinted, never alarming: none of these is an error. */
.kahunacart-affiliates-status {
    margin: 0;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-surface-2);
}
.kahunacart-affiliates-status--paused,
.kahunacart-affiliates-status--warn {
    border-color: color-mix(in srgb, var(--kc-warning) 45%, transparent);
    background: color-mix(in srgb, var(--kc-warning) 9%, transparent);
}

/* ── money ──────────────────────────────────────────────────────────────────
   Four figures, biggest first: what can be paid now. Two columns on a phone,
   four from a tablet up. */

.kahunacart-affiliates-money-currency {
    margin-block-end: 0.4rem;
    color: var(--kc-subtle);
    font-size: 0.85em;
    letter-spacing: 0.06em;
}
.kahunacart-affiliates-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}
@media (min-width: 720px) {
    .kahunacart-affiliates-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.kahunacart-affiliates-stat {
    padding: 0.85rem 1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-affiliates-stat :where(dt) {
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kahunacart-affiliates-stat :where(dd) {
    margin: 0.2rem 0 0;
    font-size: 1.35em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kahunacart-affiliates-stat :where(dd.kahunacart-affiliates-stat-note) {
    margin-block-start: 0.25rem;
    color: var(--kc-muted);
    font-size: 0.82em;
    font-weight: 400;
}
.kahunacart-affiliates-stat--balance {
    border-color: color-mix(in srgb, var(--kc-success) 45%, var(--kc-border));
}
.kahunacart-affiliates-traffic,
.kahunacart-affiliates-next :where(p) {
    margin: 0;
}
.kahunacart-affiliates-next {
    display: grid;
    gap: 0.6rem;
}

/* ── copy fields ────────────────────────────────────────────────────────────
   The value fills the row and the button sits beside it; on a narrow phone
   the button drops under the value instead of squeezing a link into a few
   characters. */

.kahunacart-affiliates-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-block: 0.25rem 0.5rem;
}
.kahunacart-affiliates-copy-value {
    flex: 1 1 16rem;
    min-inline-size: 0;
    font-family: var(--kc-mono);
    font-size: 0.9em;
}
.kahunacart-affiliates-copy:has(textarea) {
    align-items: flex-start;
}
.kahunacart-affiliates-copy :where(textarea) {
    resize: vertical;
}
.kahunacart-affiliates-code {
    padding: 0.15rem 0.5rem;
    border: 1px dashed var(--kc-border-strong);
    border-radius: var(--kc-radius);
    font-family: var(--kc-mono);
    font-size: 1.05em;
    letter-spacing: 0.04em;
}
.kahunacart-affiliates-coupon-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}
.kahunacart-affiliates-coupon--off {
    opacity: 0.7;
}

/* ── forms ──────────────────────────────────────────────────────────────── */

.kahunacart-affiliates-form {
    display: grid;
    gap: 0.9rem;
    max-inline-size: 40rem;
}
.kahunacart-affiliates-field {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    border: 0;
}
.kahunacart-affiliates-field > :where(span, legend) {
    font-weight: 500;
}
.kahunacart-affiliates-field > :where(legend) {
    padding: 0;
}
.kahunacart-affiliates-field :where(small) {
    color: var(--kc-muted);
}
.kahunacart-affiliates-field :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    inline-size: 100%;
}
/* A theme's fieldset frame is for a form of its own; here a fieldset is
   only a group of radios with a legend, and reads as one field. */
.kahunacart-affiliates fieldset.kahunacart-affiliates-field {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
/* The box, then its words. The words are one span in the templates: as loose
   text and a link they would be separate flex items, and the full stop after
   "program terms" would wrap away from it. */
.kahunacart-affiliates :where(.kahunacart-checkbox) {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.kahunacart-affiliates :where(.kahunacart-checkbox) > :where(span) {
    flex: 1 1 auto;
    min-inline-size: 0;
}
.kahunacart-affiliates-choices {
    gap: 0.4rem;
}
.kahunacart-affiliates-choices > :where(legend) {
    margin-block-end: 0.3rem;
    padding: 0;
}
.kahunacart-affiliates-address {
    gap: 0.6rem;
}
.kahunacart-affiliates-address > :where(label) {
    display: grid;
    gap: 0.25rem;
}
.kahunacart-affiliates-treaty > :where(summary) {
    cursor: pointer;
    font-weight: 500;
}
.kahunacart-affiliates-treaty[open] {
    gap: 0.6rem;
}
.kahunacart-affiliates-treaty > :where(label) {
    display: grid;
    gap: 0.25rem;
}
.kahunacart-affiliates-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kahunacart-affiliates-inline > :where(input) {
    flex: 1 1 16rem;
    inline-size: auto;
}
.kahunacart-affiliates-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0.25rem 0 0;
}
.kahunacart-affiliates .kahunacart-affiliates-primary {
    background: var(--kc-accent-strong);
    border-color: transparent;
    color: var(--kc-on-accent-strong);
    font-weight: 600;
}
.kahunacart-affiliates .kahunacart-affiliates-primary:hover {
    background: color-mix(in srgb, var(--kc-accent-strong) 85%, var(--kc-fg));
    border-color: transparent;
}
.kahunacart-affiliates-error {
    color: var(--kc-danger);
    font-size: 0.9em;
}
.kahunacart-affiliates :where([aria-invalid="true"]) {
    border-color: var(--kc-danger);
}
.kahunacart-affiliates :where([hidden]) {
    display: none !important;
}

/* ── terms list ─────────────────────────────────────────────────────────── */

.kahunacart-affiliates .kahunacart-affiliates-terms {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}
.kahunacart-affiliates .kahunacart-affiliates-terms > li {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.75rem;
}
@media (max-width: 30rem) {
    .kahunacart-affiliates .kahunacart-affiliates-terms > li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }
}

/* ── lists of money ─────────────────────────────────────────────────────────
   The account's own order table, reused, inside a box that scrolls on its
   own on a narrow phone rather than pushing the page sideways. */

.kahunacart-affiliates-table-wrap {
    overflow-x: auto;
}
.kahunacart-affiliates-num,
.kahunacart-affiliates-table .kahunacart-affiliates-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kahunacart-affiliates-pill--approved,
.kahunacart-affiliates-pill--paid {
    border-color: color-mix(in srgb, var(--kc-success) 45%, transparent);
    background: color-mix(in srgb, var(--kc-success) 9%, transparent);
}
.kahunacart-affiliates-pill--pending,
.kahunacart-affiliates-pill--unclaimed {
    border-color: color-mix(in srgb, var(--kc-warning) 45%, transparent);
    background: color-mix(in srgb, var(--kc-warning) 9%, transparent);
}
.kahunacart-affiliates-pill--rejected,
.kahunacart-affiliates-pill--reversed,
.kahunacart-affiliates-pill--failed,
.kahunacart-affiliates-pill--returned {
    border-color: color-mix(in srgb, var(--kc-danger) 45%, transparent);
    background: color-mix(in srgb, var(--kc-danger) 9%, transparent);
}
.kahunacart-affiliates-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

/* ── facts (the tax form on file) ───────────────────────────────────────── */

.kahunacart-affiliates-facts {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
}
.kahunacart-affiliates-facts > :where(div) {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.75rem;
}
.kahunacart-affiliates-facts :where(dt) {
    color: var(--kc-muted);
}
.kahunacart-affiliates-facts :where(dd) {
    margin: 0;
}
@media (max-width: 480px) {
    .kahunacart-affiliates-facts > :where(div) {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* ── creatives ──────────────────────────────────────────────────────────── */

.kahunacart-affiliates-creative-preview :where(img) {
    display: block;
    max-inline-size: 100%;
    height: auto;
    border-radius: var(--kc-radius);
}

/* ── the public program page ────────────────────────────────────────────── */

.kahunacart-affiliates-program {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-affiliates-program .kahunacart-affiliates-terms {
    margin: 0;
}

/* ── The public application form ({base}/affiliate/apply) ── */

.kahunacart-affiliates-public {
    display: grid;
    gap: 1.25rem;
    max-inline-size: 42rem;
    margin-inline: auto;
}
.kahunacart-affiliates-public :where(h1) {
    margin-block: 0 0.5rem;
}
/* Who is applying, on the signed-in form. */
.kahunacart-affiliates-applicant {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    margin: 0;
}
/* The honeypot: out of sight and out of the way, but still in the form for a
   script to fill in. Not display: none, which some scripts know to skip. */
.kahunacart-affiliates-trap {
    position: absolute;
    inset-inline-start: -10000px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

/* ── codes ──────────────────────────────────────────────────────────────── */

.kahunacart-affiliates-code-input {
    font-family: var(--kc-mono, ui-monospace, monospace);
}
.kahunacart-affiliates-field .kahunacart-affiliates-code-status:empty {
    display: none;
}
.kahunacart-affiliates-field .kahunacart-affiliates-code-status.is-free {
    color: var(--kc-success);
}
.kahunacart-affiliates-field .kahunacart-affiliates-code-status.is-taken {
    color: var(--kc-danger);
}
.kahunacart-affiliates-code > :where(p) {
    margin: 0 0 0.5rem;
}
.kahunacart-affiliates-change-code > :where(summary) {
    cursor: pointer;
    font-weight: 500;
}
.kahunacart-affiliates-change-code[open] > :where(summary) {
    margin-block-end: 0.75rem;
}
/* KahunaCart Licenses — the storefront's licence keys.

   This file styles nothing on its own. Every colour, radius and easing here
   reads a --kc-* token declared by the base plugin's stylesheet, which resolves
   --kahunacart-* (a site's override) → --grav-* (a theme's design tokens) →
   a neutral derived from --kahunacart-fg. See the base plugin's docs/theming.md
   for the full chain and the variable reference.

   Two consequences worth knowing. A theme that already colours KahunaCart
   colours the licence panels for nothing — there is no second set of variables
   to configure. And with the base plugin's `builtin_css` switched off this file
   is not enqueued either, because with the tokens gone it would paint licence
   panels in a palette nothing else on the page is using.

   Every rule is scoped to .kahunacart-license or .kahunacart-licenses, and the
   outer selector is wrapped in :where() wherever it is not load-bearing, so a
   theme's own plain class selector wins on its own weight. Nothing in this file
   forces a value past a theme's, and nothing in it ever should. */

/* ── the panel ──────────────────────────────────────────────────────────────
   One wrapper, three destinations: the receipt, the account tab and the
   overview card. They differ in spacing and nothing else, so the shared rules
   live here and each modifier only says what it moves. */

.kahunacart-licenses {
    display: grid;
    /* One column that may shrink. Left to size itself, the column took the
       width of the widest card, and on a phone the key and the instructions
       pushed the receipt past the edge of the screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.kahunacart-licenses--order {
    margin-block: 1rem;
}
.kahunacart-licenses--account {
    margin-block: 1.5rem;
}

/* Merchant-written Markdown, so it may be a paragraph or five. Its first and
   last margins are collapsed away to keep the block's own spacing honest. */
.kahunacart-licenses-intro :where(> :first-child) {
    margin-block-start: 0;
}
.kahunacart-licenses-intro :where(> :last-child) {
    margin-block-end: 0;
}

/* Keys not issued yet. Deliberately quiet: this state lasts seconds, and a
   warning-coloured box for something that is going fine reads as a problem. */
.kahunacart-licenses-pending {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--kc-border-strong);
    border-radius: var(--kc-radius);
    color: var(--kc-muted);
}

/* ── one licence ────────────────────────────────────────────────────────────
   A card rather than a table row. A key carries five or six facts of very
   different lengths — a product name, a monospace key, a seat count, two dates
   and a paragraph of instructions — and a table that fits all of them on a
   phone does not exist. */

.kahunacart-license {
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-license + .kahunacart-license {
    margin-block-start: 0.75rem;
}

/* A revoked or suspended key is still shown — the customer needs to know it
   exists and why it is not working — but it is faded so the working keys above
   it are the ones the eye lands on. */
.kahunacart-license--revoked,
.kahunacart-license--suspended {
    opacity: 0.75;
}

.kahunacart-license-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
}
.kahunacart-license-product {
    margin: 0;
    font-size: 1.05em;
}
.kahunacart-license-variant {
    color: var(--kc-muted);
    font-weight: 400;
}

/* ── status pill ────────────────────────────────────────────────────────────
   Tinted from the same token the rest of the storefront uses for that meaning,
   at low alpha so the pill reads as a label rather than as an alert. Expired
   and suspended share the warning tint on purpose: both mean "this needs your
   attention", and only revoked means "this is over". */

.kahunacart-license-status {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: 999px;
    color: var(--kc-muted);
    font-size: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.kahunacart-license-status--active {
    border-color: color-mix(in srgb, var(--kc-success) 45%, transparent);
    background: color-mix(in srgb, var(--kc-success) 10%, transparent);
    color: var(--kc-success);
}
.kahunacart-license-status--expired,
.kahunacart-license-status--suspended {
    border-color: color-mix(in srgb, var(--kc-warning) 45%, transparent);
    background: color-mix(in srgb, var(--kc-warning) 10%, transparent);
    color: var(--kc-warning);
}
.kahunacart-license-status--revoked {
    border-color: color-mix(in srgb, var(--kc-danger) 45%, transparent);
    background: color-mix(in srgb, var(--kc-danger) 8%, transparent);
    color: var(--kc-danger);
}

.kahunacart-license-note {
    margin: 0.5rem 0 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}

/* ── the key itself ─────────────────────────────────────────────────────────
   The one thing on the page the customer came for, so it is the one thing set
   in a monospace face at full contrast, and it wraps rather than overflowing:
   a long key inside a narrow card must not push the page sideways.  */

.kahunacart-license-keyline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-block: 0.75rem 0.5rem;
}
.kahunacart-license-keylabel {
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-key {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    color: var(--kc-fg);
    font-family: var(--kc-mono);
    font-size: 1.02em;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    user-select: all;
}
.kahunacart-license-copy {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.85em;
    transition: border-color var(--kc-dur) var(--kc-ease), color var(--kc-dur) var(--kc-ease);
}
.kahunacart-license-copy:hover {
    border-color: var(--kc-accent);
    color: var(--kc-accent);
}

/* ── terms ──────────────────────────────────────────────────────────────────
   Seats, expiry and updates: three short facts that belong on one line on a
   desktop and stack on a phone. Tabular figures so a column of counts and
   dates lines up down a list of keys. */

.kahunacart-license-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--kc-muted);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

/* ── what the key covers ────────────────────────────────────────────────────
   Slugs, as pills, directly under the key. A customer with an add-on or two
   reads the row and knows what the key unlocks without opening anything; a
   customer with one product reads one pill and moves on. */

.kahunacart-license-covers {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.5rem;
    margin-block: 0.5rem 0;
}
.kahunacart-license-coverslabel {
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-packages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kahunacart-license-package {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--kc-border);
    border-radius: 999px;
    background: var(--kc-bg);
    color: var(--kc-muted);
    font-family: var(--kc-mono);
    font-size: 0.82em;
    white-space: nowrap;
}

/* ── the licence files ──────────────────────────────────────────────────────
   One button per file, right under what the key covers. These were a list at
   the foot of the card, which is the last place anybody looks for the file
   that unlocks the thing they just bought. */

.kahunacart-license-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-start: 0.7rem;
}
.kahunacart-license-file-button,
.kahunacart-license-download-button {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    color: inherit;
    font-size: 0.9em;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.kahunacart-license-file-button:hover,
.kahunacart-license-download-button:hover {
    border-color: currentColor;
}

/* ── ready-to-run packages ──────────────────────────────────────────────────
   The builds the same order bought. A row per file: the name reads first and
   the button sits at the far edge, so a column of them lines up whatever the
   names are. */

.kahunacart-license-downloads {
    display: grid;
    gap: 0.4rem;
}
.kahunacart-license-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
}
.kahunacart-license-download-name {
    overflow-wrap: anywhere;
}
.kahunacart-license-download-button {
    margin-inline-start: auto;
}

/* ── instructions, downloads and files ──────────────────────────────────────
   All merchant-configured and all optional, so each carries its own heading
   rather than relying on position to explain itself. */

.kahunacart-license-instructions,
.kahunacart-license-downloads,
.kahunacart-license-files,
.kahunacart-license-activations {
    margin-block-start: 0.9rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--kc-border);
}
.kahunacart-license :where(h4) {
    margin: 0 0 0.5rem;
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-instructions :where(> :last-child) {
    margin-block-end: 0;
}
/* The instructions are the merchant's Markdown, and a path or a command in
   them has no space to break at: on a phone `user/plugins/…/hardening.md`
   ran off the screen. Code may break anywhere, a long link too. */
.kahunacart-license-instructions :where(code, a) {
    overflow-wrap: anywhere;
}

/* ── the receipt's short cards ──────────────────────────────────────────────
   On the receipt each key is short and the instructions come once, under all
   of them (order-license and order-instructions). The terms are one muted
   line, the key's own page is a quiet link at the far end of the files row,
   and the instructions carry the card's heading style outside any card. */

.kahunacart-license-terms-line {
    margin: 0.5rem 0 0;
    color: var(--kc-muted);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}
.kahunacart-license-page-link {
    align-self: center;
    margin-inline-start: auto;
    font-size: 0.9em;
    white-space: nowrap;
}
.kahunacart-license-instructions--order {
    margin-block-start: 1.2rem;
}
.kahunacart-license-instructions--order :where(h4) {
    margin: 0 0 0.5rem;
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-instructions--order :where(h4:not(:first-child)) {
    margin-block-start: 1rem;
}

/* One install option, collapsed. Every `### heading` a merchant wrote becomes
   one of these, so a card with three ways to install takes three lines until
   somebody opens one. */
.kahunacart-license-option {
    border-block-start: 1px solid var(--kc-border);
}
.kahunacart-license-option:first-of-type {
    border-block-start: 0;
}
.kahunacart-license-option > summary {
    padding-block: 0.45rem;
    cursor: pointer;
    font-weight: 600;
}
.kahunacart-license-option[open] > summary {
    margin-block-end: 0.35rem;
}
.kahunacart-license-option :where(> :last-child) {
    margin-block-end: 0.5rem;
}
.kahunacart-license-filelist,
.kahunacart-license-seatlist {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── seats ──────────────────────────────────────────────────────────────────
   Each live activation with the control that frees it. The form is inline and
   pushed to the far edge, so the machine name reads first and the destructive
   control is the last thing reached — by pointer and by keyboard alike. */

.kahunacart-license-seat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
}
.kahunacart-license-instance {
    font-family: var(--kc-mono);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}
.kahunacart-license-seatmeta {
    color: var(--kc-muted);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}
.kahunacart-license-deactivate {
    margin: 0;
    margin-inline-start: auto;
}
.kahunacart-license-deactivate :where(button) {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: transparent;
    color: var(--kc-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.85em;
    transition: border-color var(--kc-dur) var(--kc-ease), color var(--kc-dur) var(--kc-ease);
}
.kahunacart-license-deactivate :where(button):hover {
    border-color: color-mix(in srgb, var(--kc-danger) 55%, transparent);
    color: var(--kc-danger);
}
.kahunacart-license-empty {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}

/* ── overview card ──────────────────────────────────────────────────────────
   One line on the account overview. The counts sit on the accent ink so the
   number is what registers; the qualifiers stay muted. */

.kahunacart-licenses--card {
    gap: 0.35rem;
}
.kahunacart-licenses-count {
    margin: 0;
    font-size: 1.05em;
}
.kahunacart-licenses-expiring,
.kahunacart-licenses-expired {
    display: inline-block;
    margin-inline-start: 0.5rem;
    color: var(--kc-warning);
    font-size: 0.88em;
}
.kahunacart-licenses-cardlink,
.kahunacart-licenses-manage {
    margin: 0;
    font-size: 0.92em;
}

/* Focus rings are the base stylesheet's job everywhere else; these two controls
   are ours, and a checkout is exactly where losing your keyboard position costs
   a sale. */
.kahunacart-license-copy:focus-visible,
.kahunacart-license-deactivate :where(button):focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kahunacart-license-copy,
    .kahunacart-license-deactivate :where(button) {
        transition: none;
    }
}

/* Renewals: the key field on a renewal product's buy form, and the Renew link
   beside a key in the account tab. Inherits the theme's form controls and
   only sets the spacing and the secondary-text tones. */
.kahunacart-license-renewal {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
}

.kahunacart-license-renewal-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--kc-muted);
}

.kahunacart-license-renewal-select,
.kahunacart-license-renewal-key {
    max-width: 28rem;
    font-family: var(--kc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.kahunacart-license-renewal-help {
    margin: 0;
    font-size: 0.85em;
    color: var(--kc-muted);
}

.kahunacart-license-renew {
    margin: 0.5rem 0 0;
    font-size: 0.92em;
}

.kahunacart-license-renew-link:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

/* Projects: the name a customer gives a key, and the picker that asks which of
   their projects an add-on is for. The name leads the key line, so it is set at
   full contrast and the key keeps its monospace box beside it. */
.kahunacart-license-project {
    font-weight: 600;
    color: var(--kc-fg);
}

.kahunacart-license-project-sep {
    color: var(--kc-subtle);
}

.kahunacart-license-rename {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0 0 0.5rem;
}

.kahunacart-license-rename-label {
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.kahunacart-license-rename-input {
    flex: 1 1 14rem;
    max-width: 22rem;
}

.kahunacart-license-rename-help {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.85em;
    color: var(--kc-muted);
}

/* The add-on picker on a buy form. Same shape as the renewal field's, this is
   the same question asked about a different kind of line, with one addition:
   the no-licence state, which says there is nothing to attach to yet and
   offers the ways to get one instead of an empty key box. */
.kahunacart-license-addon {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
}

.kahunacart-license-addon-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--kc-muted);
}

.kahunacart-license-addon-select,
.kahunacart-license-addon-key {
    max-width: 28rem;
}

.kahunacart-license-addon-key {
    font-family: var(--kc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.kahunacart-license-addon-help,
.kahunacart-license-addon-none {
    margin: 0;
    font-size: 0.85em;
    color: var(--kc-muted);
}

.kahunacart-license-addon-none {
    color: var(--kc-fg);
}

.kahunacart-license-addon-ways {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.15rem 0 0;
}

/* The one thing a first-time buyer should press: add the licensed product to
   the cart. Drawn as a solid button so it reads as the way forward, next to
   the two quieter text links. */
.kahunacart-license-addon-add {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--kc-accent);
    border-radius: 0.375rem;
    background: var(--kc-accent);
    color: var(--kc-accent-fg, #fff);
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
}

.kahunacart-license-addon-add:hover {
    filter: brightness(1.05);
}

.kahunacart-license-addon-signin,
.kahunacart-license-addon-reveal {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85em;
    color: var(--kc-muted);
    text-decoration: underline;
    cursor: pointer;
}

.kahunacart-license-addon-add:focus-visible,
.kahunacart-license-addon-signin:focus-visible,
.kahunacart-license-addon-reveal:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

/* No licence to attach to yet: the field is the next step, not a footnote, so
   it is drawn as a callout, and Add to cart below it reads as unavailable
   until a key is typed. A press on the button anyway brings the box back into
   view with a short pulse. */
.kahunacart-license-addon--needed {
    gap: 0.5rem;
    margin: 1rem 0 0.5rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--kc-accent);
    border-left-width: 4px;
    border-radius: var(--kc-radius, 0.5rem);
    background: var(--kc-surface, transparent);
    background: color-mix(in srgb, var(--kc-accent) 7%, var(--kc-surface, transparent));
}

.kahunacart-license-addon--needed .kahunacart-license-addon-label {
    font-size: 1em;
    color: var(--kc-fg);
}

.kahunacart-license-addon--needed.is-nudged {
    animation: kahunacart-license-addon-nudge 0.9s var(--kc-ease, ease-out);
}

@keyframes kahunacart-license-addon-nudge {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-accent) 35%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .kahunacart-license-addon--needed.is-nudged { animation: none; }
}

.kahunacart-license-addon-blocked,
.kahunacart-license-addon-blocked:hover {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* ── the Licenses list ──────────────────────────────────────────────────────
   One card per key: the product and its status on the first line, the key in
   a full-width box under them, the day it was bought and a Details button
   under that. The title and the button open the key's own page; the rest of
   the card is plain, so the key can be selected. */

.kahunacart-licenses-listhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.kahunacart-licenses-count {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.92em;
}
.kahunacart-licenses-downloadall,
.kahunacart-license-detail-button {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    color: inherit;
    font-size: 0.9em;
    line-height: 1.3;
    text-decoration: none;
}
.kahunacart-licenses-downloadall:hover {
    border-color: currentColor;
}
.kahunacart-licenses-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kahunacart-licenses-item {
    display: grid;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-licenses-item--revoked,
.kahunacart-licenses-item--suspended {
    opacity: 0.75;
}
.kahunacart-licenses-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
}
.kahunacart-licenses-item-title {
    margin: 0;
    font-size: 1.05em;
    overflow-wrap: anywhere;
}
:where(.kahunacart-licenses-item-link) {
    color: inherit;
    text-decoration: none;
}
.kahunacart-licenses-item-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kahunacart-licenses-item-project {
    margin-inline-start: 0.35rem;
    color: var(--kc-muted);
    font-size: 0.85em;
    font-weight: 400;
}
.kahunacart-licenses-item-key,
.kahunacart-license-keybox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.8rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
}
.kahunacart-licenses-item-key .kahunacart-license-key,
.kahunacart-license-keybox .kahunacart-license-key {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
}
.kahunacart-licenses-item-key .kahunacart-license-copy {
    flex: none;
}
.kahunacart-licenses-item-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.kahunacart-licenses-item-details {
    white-space: nowrap;
}
.kahunacart-licenses-item-date {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.88em;
    font-variant-numeric: tabular-nums;
}

/* ── one key's own page ─────────────────────────────────────────────────────
   Cards in the order a customer needs them: the key and its files, the
   downloads, how to install it, and last and quietest, what they can manage
   about it. */

.kahunacart-licenses--detail {
    gap: 1.25rem;
}
.kahunacart-license-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}
.kahunacart-license-detail-title {
    margin: 0;
    overflow-wrap: anywhere;
}
.kahunacart-license-detail-email {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}
.kahunacart-license-card {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-license-card :where(h3) {
    margin: 0 0 0.35rem;
    font-size: 1.05em;
}
.kahunacart-license-card :where(h4) {
    margin: 0 0 0.5rem;
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-card--quiet {
    border-style: dashed;
    background: transparent;
}
.kahunacart-license-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-block-end: 1rem;
}
.kahunacart-license-issued,
.kahunacart-license-card-lead {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-license-card-lead {
    margin-block-end: 0.75rem;
}
.kahunacart-license-fieldlabel {
    margin: 1rem 0 0.4rem;
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-card-head + .kahunacart-license-fieldlabel {
    margin-block-start: 0;
}
.kahunacart-license-keybox .kahunacart-license-key {
    font-size: 1.1em;
}
.kahunacart-license-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1.1rem;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--kc-border);
}
.kahunacart-license-detail-button:not(.kahunacart-license-detail-button--secondary) {
    border-color: var(--kc-accent-strong);
    background: var(--kc-accent-strong);
    color: var(--kc-on-accent-strong);
    font-weight: 600;
}
.kahunacart-license-detail-button--secondary:hover {
    border-color: currentColor;
}
.kahunacart-license-detail-downloads {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kahunacart-license-download-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}
.kahunacart-license-detail-downloads .kahunacart-license-download-name {
    font-weight: 600;
}
.kahunacart-license-download-description {
    color: var(--kc-muted);
    font-size: 0.88em;
    overflow-wrap: anywhere;
}
.kahunacart-license-detail-downloads .kahunacart-license-download {
    padding: 0.75rem 0.9rem;
}
.kahunacart-license-detail-downloads .kahunacart-license-detail-button {
    margin-inline-start: auto;
    white-space: nowrap;
}
.kahunacart-license-card--instructions :where(> :last-child) {
    margin-block-end: 0;
}
.kahunacart-license-card--quiet .kahunacart-license-terms {
    margin-block-end: 0.75rem;
}
.kahunacart-license-card--quiet .kahunacart-license-rename {
    margin-block-start: 0.75rem;
}
.kahunacart-license-back {
    margin: 0.5rem 0 0;
    text-align: center;
}
.kahunacart-license-back--top {
    margin: 0 0 1rem;
    text-align: start;
}
.kahunacart-license-missing {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--kc-border-strong);
    border-radius: var(--kc-radius-lg);
    color: var(--kc-muted);
}
.kahunacart-licenses-downloadall:focus-visible,
.kahunacart-license-detail-button:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .kahunacart-license-card {
        padding: 0.9rem 0.95rem;
    }
    .kahunacart-licenses-item-key .kahunacart-license-key,
    .kahunacart-license-keybox .kahunacart-license-key {
        font-size: 0.92em;
    }
    .kahunacart-license-detail-button {
        flex: 1 1 100%;
        text-align: center;
    }
}
/* KahunaCart — self-contained, theme-agnostic storefront styles.

   Token resolution: --kahunacart-* (site override) → --grav-* (theme design
   system, e.g. event-horizon) → --theme-accent (generic hook any theme or
   plugin can publish) → neutral fallback. On a token-publishing theme the
   storefront picks up the full design language (elevated cards, the theme's
   own accent, its radii); anywhere else it stays a clean neutral that follows
   the page's own palette. Never couple to a specific theme — extend, don't
   stomp.

   The neutral layer (borders, muted text, faint fills) is derived from a
   single --kc-fg anchor rather than repeating CanvasText/Canvas literally at
   every rule, so a theme or site can retarget the whole neutral ramp with one
   --kahunacart-fg. The anchor stays an *absolute* colour on purpose:
   currentColor would track the page's real text colour, but it re-resolves at
   every descendant, so muted-inside-muted would compound (0.68 × 0.68 ≈ 35%
   alpha) and a download's expiry line would fade away inside an already-muted
   row. See the colour-scheme sync below for how the system-colour fallback is
   kept pointing at the mode the page renders.

   Component rules are wrapped in :where() wherever the outer selector is ours
   and not load-bearing, so a theme's own rule at plain class weight wins
   without anyone reaching for !important. */

/* Also on :root: a theme may render the storefront inside a wrapper that sits
   outside .kahunacart (a sticky cart summary, a mini-cart in the header), and
   those still need the palette. */
:root {
    --kc-fg: var(--kahunacart-fg, var(--grav-fg, CanvasText));
    --kc-bg: var(--kahunacart-bg, var(--grav-bg, Canvas));
    --kc-border: var(--kahunacart-border, var(--grav-border, color-mix(in srgb, var(--kc-fg) 13%, transparent)));
    --kc-border-strong: var(--kahunacart-border-strong, var(--grav-border-strong, color-mix(in srgb, var(--kc-fg) 24%, transparent)));
    --kc-muted: var(--kahunacart-muted, var(--grav-fg-muted, color-mix(in srgb, var(--kc-fg) 68%, transparent)));
    --kc-subtle: var(--kahunacart-subtle, var(--grav-fg-subtle, color-mix(in srgb, var(--kc-fg) 60%, transparent)));
    --kc-accent: var(--kahunacart-accent, var(--grav-purple-bright, var(--theme-accent, light-dark(#0b57d0, #7cacf8))));
    --kc-accent-strong: var(--kahunacart-accent-strong, var(--grav-purple, var(--theme-accent, light-dark(#0b57d0, #2563eb))));
    /* The accent used as *text* on the page background — a shade deeper than
       --kc-accent where the theme offers one, but never --kc-accent-strong's
       fallback, which is tuned to carry white and reads too dark for a price. */
    --kc-accent-ink: var(--kahunacart-accent-ink, var(--grav-purple, var(--kc-accent)));
    --kc-surface: var(--kahunacart-surface, var(--grav-bg-elevated, color-mix(in srgb, var(--kc-fg) 3.5%, transparent)));
    --kc-surface-2: var(--kahunacart-surface-2, var(--grav-bg-subtle, var(--kc-surface)));
    /* Cards default to transparent rather than the faint fill: a product grid
       is a lot of rectangles at once, and on a theme with a patterned or
       gradient page background a stack of near-invisible grey panels reads as
       dirt. The border does the separating; a theme that wants filled cards
       sets --kahunacart-card. */
    --kc-card: var(--kahunacart-card, var(--grav-bg-elevated, transparent));
    --kc-input: var(--kahunacart-input, var(--grav-bg-subtle, transparent));
    --kc-radius: var(--kahunacart-radius, var(--grav-radius-md, 8px));
    --kc-radius-lg: var(--kahunacart-radius-lg, var(--grav-radius-lg, 12px));
    --kc-mono: var(--kahunacart-font-mono, var(--grav-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace));
    --kc-ease: var(--kahunacart-ease, var(--grav-ease, ease));
    --kc-dur: var(--kahunacart-duration, var(--grav-duration-2, 160ms));
    --kc-success: var(--kahunacart-success, var(--grav-success, #1d9d61));
    --kc-warning: var(--kahunacart-warning, var(--grav-warning, #b8860b));
    --kc-danger: var(--kahunacart-danger, var(--grav-danger, #c0392b));
    /* Depth, spacing and the focus ring. A card has no shadow and the grids
       keep their 1.25rem until a theme says otherwise. */
    --kc-shadow: var(--kahunacart-shadow, none);
    --kc-gap: var(--kahunacart-gap, 1.25rem);
    --kc-focus: var(--kahunacart-focus, var(--kc-accent-strong));
}

/* ── on-accent pairing ──────────────────────────────────────────────────────
   The two accents are split by job: --kc-accent is ink and borders (prices,
   link hover, the outline of a chosen shipping row), --kc-accent-strong is
   the only one that ever fills a box behind a label — the active category
   chip, the checkout and place-order buttons. Only the filling one needs a
   paired label colour, and the failure mode there is a pale accent still
   being handed white text.

   So pick the label colour from how light the fill actually resolves rather
   than assuming white. The channel maths is BT.709 luma against a mid
   threshold; multiplying by 1000 drives the result past the channel range and
   the clamp lands it on a flat 0 or 255 — black or white, never a grey in
   between. Sites can pin the token outright. Browsers without relative colour
   syntax keep plain white. */
:root {
    --kc-on-accent-strong: var(--kahunacart-on-accent-strong, #fff);
}
@supports (color: rgb(from red r g b)) {
    :root {
        --kc-on-accent-strong: var(--kahunacart-on-accent-strong, rgb(from var(--kc-accent-strong)
            clamp(0, (128 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 255)
            clamp(0, (128 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 255)
            clamp(0, (128 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 255)));
    }
}

/* ── colour-scheme sync ─────────────────────────────────────────────────────
   `Canvas`/`CanvasText` — like `light-dark()` — follow the used
   `color-scheme`, which plenty of themes never update when they flip dark
   mode, leaving a light-mode neutral ramp on a dark page. These rules
   translate the common dark-mode conventions into the one property that
   matters, scoped to storefront elements only, so the host page's own
   controls are left alone. Themes publishing --grav-* or --kahunacart-* never
   reach a system colour at all. */
:where(html[data-theme="dark"], html[data-bs-theme="dark"], html.dark, body[data-theme="dark"], body.dark) .kahunacart {
    color-scheme: dark;
}
:where(html[data-theme="light"], html[data-bs-theme="light"], html.light, body[data-theme="light"], body.light) .kahunacart {
    color-scheme: light;
}

/* ── page wrapper ───────────────────────────────────────────────────────────
   The tokens are restated on the wrapper as well as :root so a theme can
   retarget the storefront alone — `.kahunacart { --kahunacart-accent: … }` in
   theme CSS is the obvious thing to write, and it only works if our own
   resolution happens at this level too. */
.kahunacart {
    --kc-fg: var(--kahunacart-fg, var(--grav-fg, CanvasText));
    --kc-bg: var(--kahunacart-bg, var(--grav-bg, Canvas));
    --kc-border: var(--kahunacart-border, var(--grav-border, color-mix(in srgb, var(--kc-fg) 13%, transparent)));
    --kc-border-strong: var(--kahunacart-border-strong, var(--grav-border-strong, color-mix(in srgb, var(--kc-fg) 24%, transparent)));
    --kc-muted: var(--kahunacart-muted, var(--grav-fg-muted, color-mix(in srgb, var(--kc-fg) 68%, transparent)));
    --kc-subtle: var(--kahunacart-subtle, var(--grav-fg-subtle, color-mix(in srgb, var(--kc-fg) 60%, transparent)));
    --kc-accent: var(--kahunacart-accent, var(--grav-purple-bright, var(--theme-accent, light-dark(#0b57d0, #7cacf8))));
    --kc-accent-strong: var(--kahunacart-accent-strong, var(--grav-purple, var(--theme-accent, light-dark(#0b57d0, #2563eb))));
    --kc-accent-ink: var(--kahunacart-accent-ink, var(--grav-purple, var(--kc-accent)));
    --kc-surface: var(--kahunacart-surface, var(--grav-bg-elevated, color-mix(in srgb, var(--kc-fg) 3.5%, transparent)));
    --kc-surface-2: var(--kahunacart-surface-2, var(--grav-bg-subtle, var(--kc-surface)));
    --kc-card: var(--kahunacart-card, var(--grav-bg-elevated, transparent));
    --kc-input: var(--kahunacart-input, var(--grav-bg-subtle, transparent));
    --kc-radius: var(--kahunacart-radius, var(--grav-radius-md, 8px));
    --kc-radius-lg: var(--kahunacart-radius-lg, var(--grav-radius-lg, 12px));
    --kc-mono: var(--kahunacart-font-mono, var(--grav-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace));
    --kc-ease: var(--kahunacart-ease, var(--grav-ease, ease));
    --kc-dur: var(--kahunacart-duration, var(--grav-duration-2, 160ms));
    --kc-success: var(--kahunacart-success, var(--grav-success, #1d9d61));
    --kc-warning: var(--kahunacart-warning, var(--grav-warning, #b8860b));
    --kc-danger: var(--kahunacart-danger, var(--grav-danger, #c0392b));
    /* Depth, spacing and the focus ring. A card has no shadow and the grids
       keep their 1.25rem until a theme says otherwise. */
    --kc-shadow: var(--kahunacart-shadow, none);
    --kc-gap: var(--kahunacart-gap, 1.25rem);
    --kc-focus: var(--kahunacart-focus, var(--kc-accent-strong));
    --kc-on-accent-strong: var(--kahunacart-on-accent-strong, #fff);

    line-height: 1.55;
    /* The storefront's type. Without --kahunacart-font the page's own font is
       inherited, as it always was. */
    font-family: var(--kahunacart-font);
}
/* Headings in the display face when a theme names one. At no weight at all, so
   a theme's own heading rule wins, and without the token they inherit. */
:where(.kahunacart h1, .kahunacart h2, .kahunacart h3) {
    font-family: var(--kahunacart-font-display);
}
@supports (color: rgb(from red r g b)) {
    .kahunacart {
        --kc-on-accent-strong: var(--kahunacart-on-accent-strong, rgb(from var(--kc-accent-strong)
            clamp(0, (128 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 255)
            clamp(0, (128 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 255)
            clamp(0, (128 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 255)));
    }
}

/* ── focus ──────────────────────────────────────────────────────────────────
   One visible ring for everything focusable in the storefront, stated once at
   :focus-visible so pointer clicks stay quiet. Themes that suppress outlines
   on their own controls (a common reset) leave keyboard users with nothing to
   follow through a five-field checkout, which is exactly where losing your
   place costs a sale. */
.kahunacart :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--kc-focus);
    outline-offset: 2px;
}

/* ── lists ──────────────────────────────────────────────────────────────────
   A list the plugin draws decides its own markers, and its items follow it.
   Some themes put the marker on every item instead (Pico, under Quark2, says
   `ul li { list-style: square }`), which a `list-style: none` on the list
   never reaches, so the address cards, gallery thumbnails and tag chips grew
   bullets. Lists in merchant text carry no class of ours and keep whatever
   the theme gives them. */
:where(ul, ol)[class*="kahunacart-"] > li {
    list-style: inherit;
}

/* ── money ──────────────────────────────────────────────────────────────────
   Every amount, wherever it renders — cart cells, the totals block, a variant
   option in the buy form. Tabular figures keep the decimal points of a column
   in one line; without them a proportional font staggers them by a fraction
   of an em per row and a receipt stops reading as arithmetic. */
.kahunacart :is(.kahunacart-price, .kahunacart-cart-table td, .kahunacart-totals td, .kahunacart-order-items td) {
    font-variant-numeric: tabular-nums;
}
.kahunacart-price {
    font-weight: 600;
    color: var(--kc-accent-ink);
}

/* ── buttons ────────────────────────────────────────────────────────────────
   The templates use the bare `.button` class every Grav theme is expected to
   define, so this is a *fallback*, not a claim: `.kahunacart :where(.button)`
   resolves at (0,1,0) — the specificity of `.kahunacart` alone, since
   :where() contributes nothing — which a theme's own `.button` at (0,1,0)
   beats on source order once its stylesheet loads after ours, and any
   theme-scoped selector beats outright. On a theme with no button styling at
   all this is what keeps "Add to cart" from rendering as a browser default. */
.kahunacart :where(.button) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    padding: 0.5rem 1.1rem;
    background: var(--kc-surface);
    color: inherit; /* themes paint buttons for light backgrounds; follow the page instead */
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--kc-dur) var(--kc-ease), background var(--kc-dur) var(--kc-ease);
}
.kahunacart :where(.button):hover {
    border-color: var(--kc-accent);
    text-decoration: none;
}

/* The two buttons that end a flow are the ones worth filling: everything else
   on the page is a step, these are the step. Stated at (0,2,0) so they still
   read as primary on a theme that supplies its own flat .button. */
.kahunacart .kahunacart-place-order,
.kahunacart .kahunacart-checkout-link,
.kahunacart .kahunacart-signin-submit {
    background: var(--kc-accent-strong);
    border-color: transparent;
    color: var(--kc-on-accent-strong);
    font-weight: 600;
}
.kahunacart .kahunacart-place-order:hover,
.kahunacart .kahunacart-checkout-link:hover,
.kahunacart .kahunacart-signin-submit:hover {
    background: color-mix(in srgb, var(--kc-accent-strong) 85%, var(--kc-fg));
    border-color: transparent;
}
.kahunacart-place-order {
    margin-block-start: 1.25rem;
}

/* The step buttons: one under each part of the checkout, and one of them is
   Place order, which keeps the primary treatment above. Left at :where()
   weight so a theme's own .button rules win without a fight. */
.kahunacart :where(.kahunacart-step-actions) {
    margin-block: 1.25rem 2rem;
}
.kahunacart :where(.kahunacart-place-order-actions) {
    margin-block-end: 0;
}
/* Greyed out while the step above it is unfinished. Only ever set by
   assets/kahunacart-checkout.js, so a browser with no scripting never meets
   it: `disabled` is the real state and the attribute is the styling hook. */
.kahunacart :where(.kahunacart-step-actions button[disabled]) {
    opacity: 0.55;
    cursor: not-allowed;
}
/* The line under a greyed-out button, saying what it is waiting for. Written
   by assets/kahunacart-checkout.js and empty — and `hidden` — until there is
   something to say, so a browser with no scripting never meets it either. */
.kahunacart :where(.kahunacart-step-missing) {
    margin-block: 0.5rem 2rem;
    font-size: 0.9em;
    color: var(--kc-muted);
}
/* Under the button rather than a line below it: the actions paragraph already
   carries 2rem beneath it, and the line's own top margin collapses into that. */
.kahunacart :where(.kahunacart-step-actions + .kahunacart-step-missing) {
    margin-block-start: -1.25rem;
}

/* How a browser filling the form in silence is caught.
   Autofill fires no event a page can listen for, but it does start an
   animation, because the yellow background it paints is a style change. This
   is that animation: it changes nothing, it lasts a millisecond, and the
   checkout script listens for it starting to read the fields again. Inside
   :where() so a browser that has never heard of the pseudo-class drops the
   selector rather than the rule. */
@keyframes kahunacart-autofill {
    from { opacity: 1; }
    to { opacity: 1; }
}
.kahunacart :where(input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill,
                   input:autofill, select:autofill, textarea:autofill) {
    animation-name: kahunacart-autofill;
    animation-duration: 1ms;
}

/* While the delivery options are on their way, and while a delivery method the
   shopper has just picked is being stored and the order repriced. The summary
   is in the list because the total is one of the things about to change, and a
   figure that fades for a moment is a figure nobody reads as final. */
.kahunacart :where([data-kc-step][aria-busy="true"], #kahunacart-checkout-summary[aria-busy="true"]) {
    opacity: 0.6;
    transition: opacity 120ms ease-out;
}
/* A Continue redirects to the next step's own anchor, and the browser jumps
   there by itself — so a theme with a header stuck to the top of the window
   would park it over the step's first line. The margin is the browser's own
   answer to that, honoured by the anchor jump and by the script's scroll
   alike; a theme with a taller header (or none) sets --kahunacart-sticky-offset
   once and every landing follows it. */
.kahunacart :where([data-kc-step]) {
    scroll-margin-top: var(--kahunacart-sticky-offset, 5rem);
}
/* The down chevron on a Continue: the step it goes to is the one below. Sized
   from the button's own type so it tracks a theme's button, and it takes its
   colour from the caption beside it. */
.kahunacart :where(.kahunacart-step-chevron) {
    inline-size: 1em;
    block-size: 1em;
    margin-inline-start: 0.4em;
    vertical-align: -0.125em;
}

/* ── inputs ─────────────────────────────────────────────────────────────────
   Scoped to the storefront and left at :where() weight so a theme's form
   styling takes over without a fight. `font: inherit` is the load-bearing
   part: form controls do not inherit type by default, and a checkout in the
   browser's 13px system font inside a theme's own typography is the single
   most obvious tell that a plugin dropped markup into a page. */
.kahunacart :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    /* Stated rather than assumed: most themes set border-box globally, but the
       ones that do not leave the notes textarea — the only control we give a
       literal width: 100% — hanging past the fieldset that contains it. */
    box-sizing: border-box;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    padding: 0.5rem 0.65rem;
    background: var(--kc-input);
    color: inherit;
    font: inherit;
    max-width: 100%;
    transition: border-color var(--kc-dur) var(--kc-ease), box-shadow var(--kc-dur) var(--kc-ease);
}
.kahunacart :where(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
    border-color: var(--kc-accent-strong);
}
.kahunacart :where(textarea) {
    width: 100%;
    resize: vertical;
}
/* A <select> is the one control that must not be see-through: several engines
   paint the open option list on the control's own background, and --kc-input
   resolves to `transparent` on a theme publishing no tokens — which renders
   the variant list as text over whatever is behind it. --kc-bg is the page's
   own ground, so the list stays opaque and still follows the theme. */
.kahunacart :where(select) {
    background-color: var(--kc-bg);
}
.kahunacart :where(fieldset) {
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    padding: 1rem 1.15rem 1.15rem;
    margin-block: 1.25rem;
    min-inline-size: 0; /* a fieldset defaults to min-content width and will not shrink inside a grid without this */
}
.kahunacart :where(legend) {
    padding-inline: 0.4rem;
    font-weight: 600;
    font-size: 0.95em;
}

/* ── flash messages ─────────────────────────────────────────────────────────
   Scopes come from Grav's own message queue (error, warning, info, success),
   so the modifier set is fixed by the platform rather than by us. Each is
   tinted from its semantic token instead of a literal, which keeps a theme's
   own idea of "danger" in force. */
.kahunacart-messages {
    display: grid;
    gap: 0.5rem;
    margin-block: 1rem;
}
.kahunacart-message {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--kc-border);
    border-inline-start: 3px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
}
.kahunacart-message--error {
    border-inline-start-color: var(--kc-danger);
    background: color-mix(in srgb, var(--kc-danger) 9%, transparent);
}
.kahunacart-message--warning {
    border-inline-start-color: var(--kc-warning);
    background: color-mix(in srgb, var(--kc-warning) 9%, transparent);
}
.kahunacart-message--success {
    border-inline-start-color: var(--kc-success);
    background: color-mix(in srgb, var(--kc-success) 9%, transparent);
}
.kahunacart-message--info {
    border-inline-start-color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 9%, transparent);
}

/* ── category nav ───────────────────────────────────────────────────────────
   The chips are a flat wrapped row on purpose — the partial renders children
   inline after their parent, so there is no nesting to express here even
   though the data is a tree. */
.kahunacart-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-block: 1.1rem 1.6rem;
}
.kahunacart-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--kc-border);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.92em;
    transition: border-color var(--kc-dur) var(--kc-ease), color var(--kc-dur) var(--kc-ease);
}
.kahunacart-category-chip:hover {
    border-color: var(--kc-accent);
    color: var(--kc-accent-ink);
    text-decoration: none;
}
.kahunacart-category-chip.is-active {
    background: var(--kc-accent-strong);
    border-color: transparent;
    color: var(--kc-on-accent-strong);
}
/* The count rides inside a filled chip as often as an outlined one, so it
   tints whatever colour the chip is already painting its text in rather than
   picking a neutral that would vanish against the accent. */
.kahunacart-category-count {
    font-family: var(--kc-mono);
    font-size: 0.8em;
    padding: 0.05em 0.45em;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 15%, transparent);
}
.kahunacart-category-description {
    color: var(--kc-muted);
    max-width: 65ch;
    margin-block-end: 1.5rem;
}

/* ── product grid ───────────────────────────────────────────────────────────
   auto-fill + minmax does the whole responsive job: the track count follows
   the container, not a guess at the viewport, so the grid also behaves in a
   theme's narrow sidebar or inside a two-column page layout where a
   viewport-width media query would be reading the wrong number. min(15rem,
   100%) keeps the single-column case from overflowing on a 320px phone. */
.kahunacart-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: var(--kc-gap);
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.kahunacart-product-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-card);
    box-shadow: var(--kc-shadow);
    transition: border-color var(--kc-dur) var(--kc-ease), transform var(--kc-dur) var(--kc-ease);
}
.kahunacart-product-card:hover {
    border-color: var(--kc-border-strong);
}
.kahunacart-product-card h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.kahunacart-product-card > a {
    color: inherit;
    text-decoration: none;
}
.kahunacart-product-card > a:hover h3 {
    color: var(--kc-accent-ink);
}
.kahunacart-product-card p {
    margin: 0;
    color: var(--kc-muted);
}
.kahunacart-product-card .kahunacart-price {
    color: var(--kc-accent-ink);
}
/* The card's own button is the last child and the cards in a row are not the
   same height, so push it to the bottom rather than letting it float
   mid-card on the short ones. */
.kahunacart-product-card > .button {
    margin-block-start: auto;
    align-self: flex-start;
}

/* ── card media ─────────────────────────────────────────────────────────────
   The picture bleeds to the card's edges rather than sitting inside its
   padding: a photograph inset by an even margin on three sides and butted
   against text on the fourth is the thing that makes a card look like a
   document instead of a product.

   Every card image is cropped to the same ratio server-side, so aspect-ratio
   here is describing what the file already is rather than distorting it — it
   is present so the row does not jump while the images load on a browser that
   ignores the width and height attributes. object-fit covers the remaining
   case: a store that turned resized copies off and is serving originals at
   whatever proportions it uploaded. */
:where(.kahunacart) {
    --kc-card-ratio: var(--kahunacart-card-ratio, 4 / 3);
}
.kahunacart-card-media {
    margin: -1.1rem -1.1rem 0.1rem;
    overflow: hidden;
    border-radius: calc(var(--kc-radius-lg) - 1px) calc(var(--kc-radius-lg) - 1px) 0 0;
    background: var(--kc-surface);
}
/* The badges over a picture (partials/kahunacart-badges.html.twig): one
   markup in every theme, so a theme restyles these classes rather than
   drawing its own. The tones are names a theme can repaint. */
.kahunacart-card-media {
    position: relative;
}
.kahunacart-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.5rem;
}
.kahunacart-badges--over {
    position: absolute;
    inset: 0.6rem auto auto 0.6rem;
    margin: 0;
    pointer-events: none;
}
.kahunacart-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: var(--kc-radius);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--kc-on-accent-strong);
    background: var(--kc-accent-strong);
}
.kahunacart-badge--sale,
.kahunacart-badge--tone-red {
    color: #fff;
    background: var(--kc-danger);
}
.kahunacart-badge--sold-out,
.kahunacart-badge--tone-dark {
    color: #fff;
    background: #1f2937;
}
.kahunacart-badge--digital {
    color: var(--kc-fg);
    background: var(--kc-surface);
    box-shadow: inset 0 0 0 1px var(--kc-border);
}
.kahunacart-badge--tone-green {
    color: #fff;
    background: var(--kc-success);
}
.kahunacart-badge--tone-amber {
    color: #1f2937;
    background: var(--kc-warning);
}
.kahunacart-badge--tone-blue {
    color: #fff;
    background: #1d4ed8;
}
.kahunacart-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--kc-card-ratio);
    object-fit: cover;
}
/* The whole media-plus-title block is one link, so the underline the theme
   would put on it has to come off the picture as well as the heading. */
.kahunacart-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.kahunacart-card-link:hover h3 {
    color: var(--kc-accent-ink);
}

/* ── sectioned listings ─────────────────────────────────────────────────────
   A shop page that a store has declared `catalog.sections` for: a hero, some
   named rows, and the rest. Three layouts, one wrapper class, and the column
   count arrives as a custom property on that wrapper rather than as a class,
   so a merchant changing a number in config does not need a stylesheet to have
   anticipated it.

   Every grid below is `repeat(auto-fill, minmax(..., 1fr))` bounded by the
   configured count rather than a bare `repeat(var(--kc-section-columns), 1fr)`.
   That is the whole responsive story: the track floor is a real width, so the
   browser drops to fewer columns when the container cannot hold them, and the
   ceiling means a two-column section stays two columns on a wide screen
   instead of spreading to five. No media query decides any of it, which
   matters because these sections also render inside the catalog column beside
   a sidebar, where the viewport is the wrong number to be reading.

   `auto-fill` rather than `auto-fit`, which is the same choice the flat
   product grid above makes and matters most in the commonest hero of all: one
   product. `auto-fit` collapses the empty track, and a single hero card then
   stretches across the width of two with its text ending halfway. */
.kahunacart-section {
    /* Set on the element itself from the section's config, through the public
       hook rather than the internal token, so what a merchant typed into the
       Columns field and what a theme could override are the same property. The
       3 is only reached by a theme that renders sections itself out of
       kahunacart_sections() and writes no attribute. */
    --kc-section-columns: var(--kahunacart-section-columns, 3);
    margin-block-end: 2.5rem;
}
.kahunacart-section:last-child {
    margin-block-end: 0;
}
.kahunacart-section-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    line-height: 1.25;
    /* A rule under the heading, the width of the section, so a row of products
       reads as belonging to the words above it rather than floating between
       two headings. */
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--kc-border);
}

/* The hero. One large card per product, picture beside the text, at most two
   across because the third one is a grid. */
.kahunacart-hero-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: var(--kc-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    max-inline-size: calc(var(--kc-section-columns) * 34rem);
}
.kahunacart-hero-card {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-card);
    box-shadow: var(--kc-shadow);
    transition: border-color var(--kc-dur) var(--kc-ease);
}
.kahunacart-hero-card:hover {
    border-color: var(--kc-border-strong);
}

/* A hero holding one product is the store's headline and takes the whole row,
   with a larger picture and title. The two-across ceiling is for heroes with
   two products. */
.kahunacart-hero-list:has(> .kahunacart-hero-card:only-child) {
    grid-template-columns: 1fr;
    max-inline-size: none;
}
.kahunacart-hero-card:only-child { padding: 1.75rem; gap: 2rem; }
.kahunacart-hero-card:only-child .kahunacart-hero-media { flex: 1 1 18rem; max-inline-size: 24rem; }
.kahunacart-hero-card:only-child .kahunacart-hero-body { flex: 2 1 22rem; }
.kahunacart-hero-card:only-child .kahunacart-hero-title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
/* The picture takes a third and stops shrinking at 9rem, at which width the
   row is about to wrap anyway and a thinner column would be a stripe. */
.kahunacart-hero-media {
    flex: 1 1 9rem;
    min-inline-size: 9rem;
    max-inline-size: 16rem;
    display: block;
    overflow: hidden;
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
}
.kahunacart-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--kc-card-ratio);
    object-fit: cover;
}
.kahunacart-hero-body {
    flex: 3 1 14rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}
.kahunacart-hero-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}
.kahunacart-hero-title a {
    color: inherit;
    text-decoration: none;
}
.kahunacart-hero-title a:hover {
    color: var(--kc-accent-ink);
}
.kahunacart-hero-summary {
    margin: 0;
    color: var(--kc-muted);
    max-width: 55ch;
}
.kahunacart-hero-card .kahunacart-price {
    margin: 0;
    font-size: 1.1rem;
    color: var(--kc-accent-ink);
}
.kahunacart-hero-card .kahunacart-sale-badge {
    margin: 0;
}
/* The action sits on the baseline of the card whatever length the summary
   came out, so two heroes side by side do not have their buttons at two
   different heights. */
.kahunacart-hero-action {
    margin-block-start: auto;
}

/* The grid layout. The cards are the listing's own, so all this does is bound
   the track count to what the section asked for.

   `:where()` keeps the whole selector at the weight of a single class, which
   is the same weight the unsectioned `.kahunacart-product-grid` rule above
   carries. A theme that has taken the grid over has one rule for it, written
   against its own class, and that rule has to keep winning inside a section
   too, or a store would get the theme's cards in the theme's columns on a flat
   listing and in the plugin's columns as soon as sections were switched on. */
.kahunacart-section--grid :where(.kahunacart-product-grid) {
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    max-inline-size: calc(var(--kc-section-columns) * 22rem);
    margin-block-end: 0;
}

/* The compact layout. Rows rather than cards: a thumbnail, a title, a price,
   and the whole row is the link. */
.kahunacart-compact-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: 0.4rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-inline-size: calc(var(--kc-section-columns) * 26rem);
}
.kahunacart-compact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--kc-radius);
    color: inherit;
    text-decoration: none;
    transition: background var(--kc-dur) var(--kc-ease);
}
.kahunacart-compact-link:hover {
    background: var(--kc-surface);
}
.kahunacart-compact-link:hover .kahunacart-compact-title {
    color: var(--kc-accent-ink);
}
.kahunacart-compact-media {
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    overflow: hidden;
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
}
.kahunacart-compact-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The title takes the slack and the price is pushed to the end, so a column of
   rows has its prices aligned however long the names are. */
.kahunacart-compact-title {
    flex: 1 1 auto;
    min-inline-size: 0;
}
.kahunacart-compact-price {
    flex: none;
    color: var(--kc-accent-ink);
    font-variant-numeric: tabular-nums;
}
.kahunacart-compact-price .kahunacart-compare-price {
    margin-inline-end: 0.35rem;
    color: var(--kc-muted);
}

/* ── product gallery ────────────────────────────────────────────────────────
   A scroll-snapping row of full-size images with thumbnails that link to them
   by id. No JavaScript is involved: the thumbnails are ordinary in-page links,
   so the gallery works with a click, a swipe, a keyboard and with scripting
   off, and there is no plugin script for a theme's bundler to argue with.

   A product with one image gets a row of one, which reads as a plain image —
   which is the point: nothing about a single-picture product should look like
   a carousel someone forgot to fill. */
.kahunacart-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block: 1.25rem;
}
.kahunacart-gallery-main {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* The strip is focusable so a keyboard can scroll it; without this the
       only way to the second image would be the thumbnail link. */
    scrollbar-width: thin;
}
.kahunacart-gallery-slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
}
.kahunacart-gallery-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kahunacart-gallery-thumbs a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    transition: border-color var(--kc-dur) var(--kc-ease);
}
.kahunacart-gallery-thumbs a:hover,
.kahunacart-gallery-thumbs a:focus-visible {
    border-color: var(--kc-accent);
}
.kahunacart-gallery-thumbs img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
}
/* The thumbnail the large image is currently on. Written by the option picker
   when a selection swaps the gallery, and never on a page with no script: the
   thumbnails are in-page links first and a state indicator second, so nothing
   depends on this rule being there. */
.kahunacart-gallery-thumbs a.is-active {
    border-color: var(--kc-accent);
    box-shadow: inset 0 0 0 1px var(--kc-accent);
}

/* ── product media ──────────────────────────────────────────────────────────
   A gallery slide that is not a picture: a clip, or a placeholder standing in
   for a third-party player. Both fill the same box a picture would, so the
   carousel does not jump as a shopper scrolls past one, and both keep the
   picture's rounded corner and surface so a mixed gallery reads as one strip.

   The embed placeholder is a button on purpose. Pressing it does something on
   this page — kahunacart-media.js swaps it for the iframe — rather than going
   somewhere, and until somebody presses it there is no iframe, no third-party
   script and no request to the video host in the page at all. */
.kahunacart-gallery-slide video,
.kahunacart-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface-2);
}
.kahunacart-embed {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    min-block-size: 12rem;
    padding: 0;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface-2);
    color: var(--kc-fg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--kc-dur) var(--kc-ease);
}
.kahunacart-embed:hover,
.kahunacart-embed:focus-visible {
    border-color: var(--kc-accent);
}
.kahunacart-embed img {
    grid-area: 1 / 1;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
/* The play glyph sits over the poster; on a placeholder with no poster it is
   the only thing in the box, and the grid keeps it centred either way. */
.kahunacart-embed-play {
    grid-area: 1 / 1;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--kc-bg) 82%, transparent);
    box-shadow: 0 0 0 1px var(--kc-border-strong);
    font-size: 1.4rem;
    line-height: 1;
}
.kahunacart-embed-note {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 0.4rem 0.6rem;
    background: color-mix(in srgb, var(--kc-bg) 82%, transparent);
    color: var(--kc-muted);
    font-size: 0.82rem;
    text-align: start;
}
.kahunacart-embed-frame {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--kc-radius-lg);
}
/* A clip with no poster still needs something aimable in the thumbnail strip. */
.kahunacart-thumb-tile {
    display: grid;
    place-items: center;
    inline-size: 60px;
    block-size: 60px;
    background: var(--kc-surface-2);
    color: var(--kc-muted);
}

/* ── the Preview block ──────────────────────────────────────────────────────
   Public samples, under the description. Deliberately not styled like the
   downloads list in an account: a sample is something to press play on before
   buying, and a downloadable is something a purchase unlocks, so the two
   should not look like the same list in two places. */
.kahunacart-samples {
    margin-block: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-samples-title {
    margin: 0;
    font-size: 1.05rem;
}
.kahunacart-samples-note {
    margin-block: 0.35rem 0.9rem;
    color: var(--kc-muted);
    font-size: 0.88rem;
}
.kahunacart-sample-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kahunacart-sample-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-block: 0 0.4rem;
}
.kahunacart-sample-kind {
    font-weight: 600;
}
.kahunacart-sample-name {
    color: var(--kc-fg);
}
.kahunacart-sample-duration {
    color: var(--kc-muted);
    font-family: var(--kc-mono);
    font-size: 0.82rem;
}
.kahunacart-audio {
    inline-size: 100%;
}
/* Tall enough to read a first page in, and scrollable inside itself, so a
   sample chapter never pushes the buy button off the screen. */
.kahunacart-document {
    inline-size: 100%;
    block-size: min(70vh, 34rem);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface-2);
}
.kahunacart-sample-link {
    font-size: 0.9rem;
}

/* ── search ─────────────────────────────────────────────────────────────────
   One row that collapses to two: the field takes whatever is left after the
   button, and on a narrow screen the button drops beneath it rather than
   squeezing the field down to nothing. */
/* <search> is block in every current engine; stated for the ones that
   still treat it as an unknown inline element. */
.kahunacart-search-landmark {
    display: block;
}
.kahunacart-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
}
.kahunacart-search-field {
    flex: 1 1 14rem;
    margin: 0;
}
.kahunacart-search-field input {
    width: 100%;
    margin: 0;
}
/* The button sits beside the field at its own width, however the theme sizes
   a form's submit button (Pico makes every one full width). */
.kahunacart-search > button {
    flex: none;
    width: auto;
    margin: 0;
}
.kahunacart-search-summary {
    color: var(--kc-muted);
}
.kahunacart-search-more {
    color: var(--kc-muted);
    font-size: 0.95em;
}

/* Text that exists for screen readers and nothing else. The clip-path pair is
   the modern form; the clip/1px box is what older engines still read. */
.kahunacart-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── product detail ─────────────────────────────────────────────────────── */

.kahunacart-summary {
    font-size: 1.1em;
    color: var(--kc-muted);
    max-width: 65ch;
}
.kahunacart-description {
    max-width: 70ch;
    margin-block: 1.25rem;
}
.kahunacart-description :where(img) {
    max-width: 100%;
    height: auto;
}

/* The buy form is a single row of controls that wraps: variant select (only
   when there is more than one), price, quantity, submit. flex-wrap rather
   than a grid because which of those exist changes per product.

   This is the one panel on the storefront that has to be found without being
   looked for, so it takes the deeper of the two fills — a theme that
   distinguishes --grav-bg-subtle from --grav-bg-elevated separates it from
   the download rows and message strips that use the lighter one. */
.kahunacart-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    margin-block: 1.5rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface-2);
}
/* A sold-out product with one variant: the button says why and cannot be
   pressed. See partials/kahunacart-buy-button.html.twig. */
.kahunacart-buy :where(.button.kahunacart-sold-out[disabled]) {
    opacity: 0.55;
    cursor: not-allowed;
}
.kahunacart-buy .kahunacart-price {
    font-size: 1.25rem;
}
/* Both labels in the buy form wrap their control and carry no text of their
   own, so they are pure layout — no reason to let them stack. */
.kahunacart-buy :where(label) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.kahunacart-qty input {
    width: 5rem;
}
/* ── set-variants ── A set's parts the shopper picks: a row of their own above
   the quantity, one labelled select per part, the part's name kept on one
   line. See partials/kahunacart-kit.html.twig. */
.kahunacart-kit-picks {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.kahunacart-kit-pick-name {
    white-space: nowrap;
}
/* The sentence beside the box: "Sold in packs of 6", "Limit 2 per order". Quiet
   on purpose — it is a rule read in passing rather than a warning, and the
   refusal it exists to prevent is the loud half. Hidden until the resolver has
   something to write, which is why it is `hidden` rather than absent. */
.kahunacart-qty-hint {
    display: block;
    font-size: 0.85em;
    opacity: 0.75;
}
.kahunacart-qty-hint[hidden] {
    display: none;
}

/* ── pay what you want ── the price box a shopper names their price in. */
.kahunacart-pwyw {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.75rem 0;
}
.kahunacart-pwyw-label {
    font-weight: 600;
}
.kahunacart-pwyw-input {
    max-width: 10rem;
}
.kahunacart-pwyw-hint {
    font-size: 0.85em;
    opacity: 0.75;
}

/* ── option picker ────────────────────────────────────────────────────────
   Size / Colour / Material, drawn as a dropdown, a row of pills, or colour
   swatches. The whole block ships hidden and is revealed by
   assets/kahunacart-options.js, so a browser with no JavaScript sees only the
   plain variant <select> the form actually posts — which is why `hidden` here
   is honoured rather than overridden by the flex display below.

   The axes stack and the form's own flex row is broken before them, because a
   picker sitting inline between a price and a quantity box reads as a toolbar
   rather than as the choice it is. */
.kahunacart-options[hidden] {
    display: none;
}
.kahunacart-options {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex-basis: 100%;
}
.kahunacart-option {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.kahunacart-option-name {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--kc-muted);
}
.kahunacart-option-select {
    max-width: 18rem;
}
.kahunacart-option-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* One button style for both widgets; the swatch adds a colour dot and drops
   the border weight, because the colour is the label there and a heavy chrome
   around it changes what the colour looks like. */
.kahunacart-option-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    color: inherit;
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--kc-dur) var(--kc-ease), box-shadow var(--kc-dur) var(--kc-ease);
}
.kahunacart-option-choice:hover:not([data-kc-unavailable]) {
    border-color: var(--kc-accent);
}
.kahunacart-option-choice.is-selected {
    border-color: var(--kc-accent);
    /* An inset ring rather than a thicker border: growing the border by a pixel
       moves every sibling pill when one is picked. */
    box-shadow: inset 0 0 0 1px var(--kc-accent);
}

/* Unselectable — no variant left in the current selection wears it. Faded and
   struck through, not removed: a customer who picked Large should be able to
   see that Navy exists in other sizes rather than watch it vanish. */
.kahunacart-option-choice.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}
/* A real combination that has run out. Still clickable, so the price and the
   sold-out message can be shown for it. */
.kahunacart-option-choice.is-sold-out {
    border-style: dashed;
    color: var(--kc-muted);
}

.kahunacart-option-swatch {
    /* Declared on the button, where the inline --kc-swatch from the stored
       colour overrides it, and read by the dot inside. It used to be declared
       on the dot itself, which beat the colour the button passed down, so
       every swatch drew this fallback rather than its colour. */
    --kc-swatch: var(--kahunacart-swatch, color-mix(in srgb, var(--kc-fg) 12%, transparent));
    padding-inline-start: 0.45rem;
}
.kahunacart-option-dot {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    border-radius: 50%;
    background: var(--kc-swatch);
    /* The ring is the fg colour at low alpha rather than a fixed grey so a
       white swatch stays visible in light mode and a black one in dark. */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc-fg) 22%, transparent);
    flex: none;
}

/* A value with a picture of its own. The thumbnail sits where the colour dot
   would, at the same size plus a little, and the label stays beside it rather
   than being replaced by it: a row of unlabelled photographs is a guessing
   game for anyone who cannot see the difference between two navies, and the
   `title` alone never reaches a keyboard or a screen reader. */
.kahunacart-option-image {
    padding-inline-start: 0.35rem;
}
.kahunacart-option-thumb {
    display: block;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    object-fit: cover;
    border-radius: calc(var(--kc-radius) - 2px);
    background: var(--kc-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc-fg) 12%, transparent);
    flex: none;
}

.kahunacart-option-status {
    margin: 0;
    font-size: 0.85rem;
    color: var(--kc-muted);
    min-block-size: 1.2em; /* reserved, so resolving a variant does not jump the form */
}
/* On backorder: it can still be bought, so this is a note rather than a
   refusal, beside the button or on the picker's status line. See
   Stock\BackorderWording. */
.kahunacart-backorder-note,
.kahunacart-option-status.is-backorder,
.kahunacart-line-backorder {
    color: color-mix(in oklab, var(--kc-warning) 70%, var(--kc-fg));
}
.kahunacart-backorder-note {
    margin: 0;
    font-size: 0.85rem;
    flex-basis: 100%;
}
.kahunacart-line-backorder {
    display: block;
    margin-block-start: 0.2rem;
    font-size: 0.82em;
    line-height: 1.35;
}

/* ── preorders ── "Out Friday, November 13" beside the buy button, and
   "Pre-order · out Nov 13" under a receipt line; "Soon · Nov 13" where a held
   download's link would be. See Catalog\PreOrder. */
.kahunacart-preorder-note {
    margin: 0;
    font-size: 0.85rem;
    flex-basis: 100%;
    color: var(--kc-muted);
}
.kahunacart-line-preorder {
    display: block;
    margin-block-start: 0.2rem;
    font-size: 0.82em;
    line-height: 1.35;
    color: var(--kc-muted);
}
.kahunacart-download-soon {
    font-weight: 600;
    color: var(--kc-muted);
}
/* ── end preorders ── */

/* ── stock-alerts ────────────────────────────────────────────────────────────
   "Notify me when it's back", under the buy form for a variant that cannot be
   bought. Its own form, so its own box, in the lighter fill: it is the second
   thing on the panel, never the first. [hidden] is restated because the
   display below would otherwise beat the attribute, and the script hides and
   shows this block as the shopper changes variant. See
   partials/kahunacart-stock-alert-offer.html.twig and docs/stock-alerts.md. */
.kahunacart-stock-alert {
    margin-block: -0.75rem 1.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-stock-alert[hidden],
.kahunacart-stock-alert :where([hidden]) {
    display: none;
}
.kahunacart-stock-alert :where(.kahunacart-stock-alert-form) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.75rem;
    margin: 0;
}
.kahunacart-stock-alert :where(.kahunacart-stock-alert-off, .kahunacart-stock-alert-on, .kahunacart-stock-alert-guest) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
}
.kahunacart-stock-alert :where(label) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.kahunacart-stock-alert :where(.kahunacart-stock-alert-email input) {
    min-inline-size: 14rem;
}
.kahunacart-stock-alert :where(.kahunacart-stock-alert-watching) {
    color: var(--kc-success);
    font-weight: 600;
}
.kahunacart-stock-alert :where(.kahunacart-stock-alert-note, .kahunacart-stock-alert-status) {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.85rem;
    color: var(--kc-muted);
}
/* Empty, it takes no room, but stays on the page (not display: none) so a
   screen reader is already listening when the answer is written into it. */
.kahunacart-stock-alert :where(.kahunacart-stock-alert-status:empty) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.kahunacart-stock-alert :where(.kahunacart-stock-alert-signin) {
    margin: 0;
}

/* ── sign-in page ───────────────────────────────────────────────────────────
   {base}/signin in each of its states (partials/kahunacart-signin-card): one
   centred card, the label above a full-width field and a full-width button.
   Left at :where() weight so a theme restyles it without a fight. */
.kahunacart-signin :where(.kahunacart-signin-card) {
    box-sizing: border-box;
    max-inline-size: 28rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-card);
    text-align: center;
}
.kahunacart-signin :where(.kahunacart-signin-mark) {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    color: var(--kc-accent-ink);
    background: color-mix(in srgb, var(--kc-accent) 14%, transparent);
}
.kahunacart-signin :where(.kahunacart-signin-mark--expired) {
    color: var(--kc-warning);
    background: color-mix(in srgb, var(--kc-warning) 14%, transparent);
}
.kahunacart-signin :where(.kahunacart-signin-spinner) {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 999px;
    animation: kahunacart-signin-spin 0.8s linear infinite;
}
@keyframes kahunacart-signin-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .kahunacart-signin :where(.kahunacart-signin-spinner) { animation-duration: 2.4s; }
}
/* Nothing is on its way while the page waits for the button to be pressed. */
@media (scripting: none) {
    .kahunacart-signin :where(.kahunacart-signin-spinner) { animation: none; }
}
.kahunacart-signin--manual :where(.kahunacart-signin-spinner) {
    animation: none;
}
/* Sized here because the card is the whole page: a theme that resets
   headings to the body size (Tailwind's preflight does) would otherwise
   print the page's only heading as body text. */
.kahunacart-signin :where(.kahunacart-signin-title) {
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}
.kahunacart-signin :where(.kahunacart-signin-intro) {
    margin: 0 0 1.5rem;
    color: var(--kc-muted);
}
.kahunacart-signin :where(.kahunacart-signin-address) {
    color: var(--kc-fg);
    overflow-wrap: anywhere;
}
/* The link page's form is empty while the script posts it; only the
   no-script button fills it. */
.kahunacart-signin--link :where(.kahunacart-signin-intro) {
    margin-block-end: 0.5rem;
}
.kahunacart-signin--link :where(.kahunacart-signin-confirm) {
    margin-block-start: 1rem;
}
.kahunacart-signin :where(.kahunacart-signin-help) {
    margin: 0 0 1rem;
    font-size: 0.9em;
    color: var(--kc-muted);
}
.kahunacart-signin :where(.kahunacart-signin-form) {
    display: grid;
    gap: 1rem;
    margin: 0;
    text-align: start;
}
.kahunacart-signin :where(.kahunacart-signin-field) {
    display: grid;
    gap: 0.4rem;
}
.kahunacart-signin :where(.kahunacart-signin-field label) {
    font-size: 0.9em;
    font-weight: 500;
}
.kahunacart-signin :where(.kahunacart-signin-field input) {
    inline-size: 100%;
    padding: 0.7rem 0.8rem;
}
/* The password state: "Forgot your password?" on the label's line. */
.kahunacart-signin :where(.kahunacart-signin-labelrow) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}
.kahunacart-signin :where(.kahunacart-signin-forgot) {
    font-size: 0.85em;
    color: var(--kc-muted);
}
.kahunacart-signin :where(.kahunacart-signin-submit, .kahunacart-signin-resend) {
    justify-content: center;
    inline-size: 100%;
    padding-block: 0.75rem;
}
.kahunacart-signin :where(.kahunacart-signin-confirm) {
    margin: 0;
    color: var(--kc-muted);
    text-align: center;
}
.kahunacart-signin :where(.kahunacart-signin-alt) {
    margin: 1.25rem 0 0;
    font-size: 0.9em;
    color: var(--kc-muted);
}
.kahunacart-signin :where(.kahunacart-signin-alt a) {
    color: inherit;
}
/* Two ways out on one line (the reset states), kept apart by a dot. */
.kahunacart-signin :where(.kahunacart-signin-alt-sep) {
    margin-inline: 0.5rem;
    opacity: 0.6;
}
/* The reset state: the password rules under the two boxes. */
.kahunacart-signin :where(.kahunacart-signin-hint) {
    margin: -0.25rem 0 0;
    font-size: 0.85em;
    color: var(--kc-muted);
}
.kahunacart-signin :where(.kahunacart-signin-card > .kahunacart-messages) {
    margin-block-end: 1.25rem;
    text-align: start;
}

/* The confirm and cancel page, and the Stock alerts tab in the account. */
.kahunacart-stock-alert-page-form {
    margin-block: 1rem 1.5rem;
}
.kahunacart-stock-alert-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kahunacart-stock-alert-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
}
.kahunacart-stock-alert-item :where(.kahunacart-stock-alert-name) {
    flex: 1 1 14rem;
}
.kahunacart-stock-alert-item :where(.kahunacart-stock-alert-variant, .kahunacart-stock-alert-status) {
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-stock-alert-item :where(.kahunacart-stock-alert-remove) {
    display: inline;
    margin: 0;
}
/* ── end stock-alerts ── */
.kahunacart-compare-price {
    color: var(--kc-subtle);
}
/* "incl. VAT" under a price. Its own line, quieter than the price it
   qualifies, and never in the sale colour. See partials/kahunacart-tax-note. */
.kahunacart-tax-note {
    display: block;
    margin-block-start: 0.15rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--kc-muted);
}
.kahunacart-compare-price[hidden] {
    display: none;
}

/* ── mc-storefront ───────────────────────────────────────────────────────────
   Where a price would be, for a product with none in the visitor's currency:
   a plain sentence on the product page, a small muted line on a card, a row or
   a wishlist item. Quiet on purpose, in the tax note's own colour, because
   it explains an absence and is not a warning. See
   partials/kahunacart-unavailable-in-currency.html.twig. */
.kahunacart-unavailable {
    margin-block: 0.75rem;
    color: var(--kc-muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.kahunacart-unavailable--card {
    margin-block: 0.25rem;
    font-size: 0.85rem;
}
.kahunacart-unavailable-link {
    margin-inline-start: 0.35rem;
    white-space: nowrap;
}
/* ── end mc-storefront ── */

/* ── mc-4a ───────────────────────────────────────────────────────────────────
   The currency switcher (partials/kahunacart-currency-switcher.html.twig): a
   <details> menu that opens with no script. It is usually drawn in a theme's
   header, outside .kahunacart, so it reads the tokens off :root, and every
   rule is wrapped in :where() so a theme's own rule at plain class weight wins.
   The list opens under the summary and is as wide as its longest name; it stays
   inside the viewport at phone width because it is anchored to the summary's
   end edge and never wider than the viewport less a gutter. */
:where(.kahunacart-currency-switcher) {
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    color: var(--kc-fg);
}
:where(.kahunacart-currency-switcher-current) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
:where(.kahunacart-currency-switcher-current)::-webkit-details-marker {
    display: none;
}
:where(.kahunacart-currency-switcher-current)::after {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-0.1rem) rotate(45deg);
}
:where(.kahunacart-currency-switcher-current):focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}
:where(.kahunacart-currency-switcher-list) {
    position: absolute;
    inset-inline-end: 0;
    z-index: 30;
    box-sizing: border-box;
    min-inline-size: 11rem;
    max-inline-size: calc(100vw - 2rem);
    margin: 0.3rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--kc-bg);
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--kc-fg) 14%, transparent);
}
:where(.kahunacart-currency-switcher-item) {
    margin: 0;
}
:where(.kahunacart-currency-switcher-option) {
    display: block;
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    border-radius: calc(var(--kc-radius) - 2px);
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    overflow-wrap: anywhere;
}
:where(a.kahunacart-currency-switcher-option, button.kahunacart-currency-switcher-option):hover,
:where(a.kahunacart-currency-switcher-option, button.kahunacart-currency-switcher-option):focus-visible {
    background: var(--kc-surface);
    text-decoration: none;
}
:where(.kahunacart-currency-switcher-item.is-active .kahunacart-currency-switcher-option) {
    font-weight: 600;
    color: var(--kc-accent-ink);
}
:where(.kahunacart-currency-switcher-form) {
    margin: 0;
}
:where(button.kahunacart-currency-switcher-option) {
    border: 0;
    background: none;
    cursor: pointer;
}
/* The question before a cart is emptied. */
:where(.kahunacart-currency-confirm-lines) {
    margin-block: 0.5rem 1rem;
    padding-inline-start: 1.25rem;
}
:where(.kahunacart-currency-confirm-links) {
    margin-block-start: 1rem;
}
/* ── end mc-4a ── */

/* ── sales ──────────────────────────────────────────────────────────────────
   An automatic discount, on a card and in the buy form. Two elements and no
   layout of their own: the struck-through regular price is the same
   .kahunacart-compare-price the compare-at price has always used, and the badge
   is a small pill beside it. Nothing here is positioned absolutely over the
   picture — a corner flash is a design decision a theme should make, and one
   the plugin cannot make without knowing what the card looks like.

   --kc-danger is the accent because a sale is the one thing on a storefront
   that is meant to feel urgent, and it is the only token in the chain that
   already carries that meaning. A theme redefines --kahunacart-danger and the
   badge follows. */
.kahunacart-price.is-on-sale {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    color: var(--kc-danger);
}
.kahunacart-sale-badge {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 0.1rem 0.5rem;
    border-radius: var(--kc-radius);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--kc-danger);
    background: color-mix(in srgb, var(--kc-danger) 12%, transparent);
}
.kahunacart-sale-badge[hidden] {
    display: none;
}
/* On a card the badge is its own line under the price, so a long campaign name
   does not push the price out of the card's width. */
.kahunacart-product-card .kahunacart-sale-badge {
    align-self: flex-start;
}

/* The fallback select once the picker has taken over. Hidden from sight but
   not from the form: a `disabled` or removed control is not submitted, and it
   is still the field carrying variant_id. */
.kahunacart-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── the discount-code banner ──────────────────────────────────────────────
   Lives in kahunacart-coupon-notice.css, which is loaded on its own on every
   page the banner is drawn on. The banner follows a visitor off the shop and
   onto pages this sheet is not on, so its rules cannot live here. */

/* ── cart ─────────────────────────────────────────────────────────────────── */

.kahunacart-cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1.25rem;
}
.kahunacart-cart-table :where(th, td) {
    padding: 0.6rem 0.7rem;
    border-block-end: 1px solid var(--kc-border);
    text-align: start;
    vertical-align: middle;
}
.kahunacart-cart-table :where(thead th) {
    font-size: 0.78em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kc-subtle);
    font-weight: 600;
    white-space: nowrap;
}
/* Price, quantity and line total; the trailing remove cell is left alone so
   its × stays at the outside edge. */
.kahunacart-cart-table :where(td:nth-child(2), td:nth-child(3), td:nth-child(4)),
.kahunacart-cart-table :where(th:nth-child(2), th:nth-child(3), th:nth-child(4)) {
    text-align: end;
    white-space: nowrap;
}
.kahunacart-cart-table :where(td:last-child) {
    text-align: end;
    width: 1%;
}
.kahunacart-cart-table input[type="number"] {
    width: 4.5rem;
    text-align: end;
}

/* A line's picture beside its name. Small and square, because the name is
   what is read and the picture is what confirms it is the right one. */
.kahunacart-cart-product {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.kahunacart-cart-thumb {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--kc-radius);
    background: var(--kc-border);
}
.kahunacart-cart-name {
    min-width: 0;
}

/* A set a grouped product's button added: the set's own row reads as the
   line, and its parts sit under it, indented and quieter, with their prices
   greyed because the set's row is the total that matters. See CartSets. */
.kahunacart-cart-set .kahunacart-cart-name {
    font-weight: 600;
}
.kahunacart-cart-set:has(+ .kahunacart-cart-part) :where(td) {
    border-block-end-color: transparent;
}
.kahunacart-cart-part :where(td:first-child) {
    padding-inline-start: 1.75rem;
}
.kahunacart-cart-part .kahunacart-cart-thumb {
    width: 2.75rem;
    height: 2.75rem;
}
.kahunacart-cart-part :where(td:nth-child(2), td:nth-child(4)) {
    color: var(--kc-subtle);
}
.kahunacart-cart-part:has(+ .kahunacart-cart-part) :where(td) {
    border-block-end-style: dashed;
}

/* What a plugin needs said beside a line before it is bought — a free trial,
   most of all, where the price in the row is not what the card is charged
   today. Quiet and small: it is a qualification of the price above it, not a
   second thing to read. See CartLineNotes. */
.kahunacart-line-note {
    display: block;
    margin-block-start: 0.2rem;
    color: var(--kc-muted);
    font-size: 0.82em;
    line-height: 1.35;
    white-space: normal;
}
.kahunacart-line-notes {
    margin-block: 0.75rem 0;
    padding-inline-start: 1.1rem;
    color: var(--kc-muted);
    font-size: 0.88em;
}

/* Remove is destructive and unlabelled (the × carries an aria-label), so it
   stays quiet until pointed at rather than sitting red in every row. */
.kahunacart-remove {
    border: 1px solid transparent;
    border-radius: var(--kc-radius);
    background: none;
    color: var(--kc-subtle);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    transition: color var(--kc-dur) var(--kc-ease), border-color var(--kc-dur) var(--kc-ease);
}
.kahunacart-remove:hover {
    color: var(--kc-danger);
    border-color: color-mix(in srgb, var(--kc-danger) 40%, transparent);
}

/* The per-item remove forms are rendered after the main cart form and hold
   nothing but hidden inputs — each one still generates a block box, stacking
   empty margins under the table. `display: contents` removes the boxes
   without touching the controls, which are submitted by the buttons that
   reference them through `form=`. */
.kahunacart-cart > form[id^="kahunacart-remove-"] {
    display: contents;
}

/* Update and Checkout are siblings inside the cart form with no wrapper of
   their own, so the spacing has to hang off the table they follow. A theme
   that copied the cart before 1.3.6 still has them there. */
.kahunacart-cart-table ~ .button {
    margin-block-start: 0.25rem;
    margin-inline-end: 0.5rem;
}
.kahunacart-cart-actions {
    margin: 0.75rem 0 0;
}

/* The cart's summary: the discount area, the totals, the estimate box, the
   Checkout button and the express buttons, in one column at the end of the
   page the way the totals always sat. Full width on a phone. */
.kahunacart-cart-summary {
    width: min(24rem, 100%);
    margin-block: 1.75rem 0;
    margin-inline-start: auto;
}
.kahunacart-cart-summary .kahunacart-totals {
    width: 100%;
    min-width: 0;
    margin-block: 1rem;
}
/* "Goes well with your order" under the cart: one row per suggestion, its
   picture and name linking to the product, the price, then Add or View. */
.kahunacart-cart-cross-sells {
    margin-block: 2.5rem 0;
}
.kahunacart-cart-cross-sells-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}
.kahunacart-cart-cross-sell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.kahunacart-cart-cross-sell-link {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.kahunacart-cart-cross-sell-price {
    white-space: nowrap;
}
.kahunacart-cart-cross-sell form {
    margin: 0;
}

.kahunacart-cart-checkout {
    margin: 1.25rem 0 0;
}
.kahunacart-cart-checkout .kahunacart-checkout-link {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* The link to the account under it all, clear of the express buttons. */
.kahunacart-cart-account {
    margin-block-start: 2.5rem;
}

/* ── coupon ─────────────────────────────────────────────────────────────── */

/* Most shoppers have no code, so the field waits behind a quiet text link.
   The link is a <summary>, which opens the field with scripting off too. */
.kahunacart-coupon-toggle > summary {
    display: inline-block;
    color: var(--kc-accent-ink);
    font-size: 0.95em;
    cursor: pointer;
    list-style: none;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 0.2em;
    border-radius: 2px;
}
.kahunacart-coupon-toggle > summary::-webkit-details-marker {
    display: none;
}
.kahunacart-coupon-toggle > summary:hover {
    text-decoration-color: currentColor;
}
.kahunacart-coupon-toggle > summary:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}
.kahunacart-coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block: 0.6rem 0;
}
/* The link above already says what the field is for, so its label is kept
   for screen readers only. */
.kahunacart-coupon-toggle .kahunacart-coupon label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.kahunacart-coupon label {
    font-weight: 600;
    margin: 0;
}
.kahunacart-coupon input[type="text"] {
    flex: 1 1 8rem;
    min-width: 0;
    text-transform: uppercase;
    font-family: var(--kc-mono);
    letter-spacing: 0.04em;
}

/* A code on the cart: a small chip with what it took off and an × to take it
   off again. The undo, not the action, so it stays quiet until pointed at. */
.kahunacart-coupon-applied {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
}
.kahunacart-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.25rem 0.2rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--kc-success) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--kc-success) 10%, transparent);
    font-size: 0.88em;
    line-height: 1.4;
}
.kahunacart-coupon-applied-code {
    font-family: var(--kc-mono);
    letter-spacing: 0.03em;
}
.kahunacart-coupon-saving {
    color: var(--kc-success);
    font-weight: 600;
    white-space: nowrap;
}
.kahunacart-coupon-chip form {
    display: flex;
    margin: 0;
}
.kahunacart-coupon-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--kc-muted);
    cursor: pointer;
    transition: color var(--kc-dur) var(--kc-ease), background var(--kc-dur) var(--kc-ease);
}
.kahunacart-coupon-remove:hover {
    color: var(--kc-danger);
    background: color-mix(in srgb, var(--kc-danger) 12%, transparent);
}
.kahunacart-coupon-remove:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 1px;
}
.kahunacart-coupon-full {
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-coupon-active {
    color: var(--kc-success);
    font-weight: 600;
}

/* ── totals ─────────────────────────────────────────────────────────────────
   Right-aligned receipt block that sits at the end of the content column
   rather than stretching across it: totals read as a column of figures, and
   a full-width version puts a metre of whitespace between each label and its
   amount. */
.kahunacart-totals {
    margin-block: 1.5rem;
    margin-inline-start: auto;
    border-collapse: collapse;
    min-width: min(22rem, 100%);
}
.kahunacart-totals :where(th, td) {
    padding: 0.4rem 0.2rem;
    text-align: start;
    font-weight: 400;
}
.kahunacart-totals :where(td) {
    text-align: end;
    padding-inline-start: 2rem;
    white-space: nowrap;
}
.kahunacart-totals :where(th) {
    color: var(--kc-muted);
}
/* Adjustment types come from the calculator and are a closed set — discount,
   shipping, tax. Only discount gets a colour: it is the one line a customer
   looks for, and tinting shipping or tax would read as a warning about a
   charge that is simply part of the price. */
.kahunacart-adjustment--discount :where(th, td) {
    color: var(--kc-success);
}
.kahunacart-adjustment em {
    color: var(--kc-subtle);
    font-size: 0.9em;
    font-style: normal;
}
.kahunacart-total :where(th, td) {
    border-block-start: 2px solid var(--kc-border-strong);
    padding-block-start: 0.7rem;
    font-weight: 700;
    font-size: 1.08em;
    color: inherit;
}
/* An order paid in parts: what is paid today is the number the customer is
   about to be charged (or was), so it stands out from the rows around it, in
   a tinted band under the total, rather than reading like one more line. */
.kahunacart-totals tr:is(.kahunacart-due-today, .kahunacart-paid-so-far) > :is(th, td) {
    padding-block: 0.6rem;
    background: color-mix(in srgb, var(--kc-accent) 10%, transparent);
    color: inherit;
    font-weight: 700;
}
.kahunacart-totals tr:is(.kahunacart-due-today, .kahunacart-paid-so-far) > th {
    padding-inline-start: 0.7rem;
    border-start-start-radius: var(--kc-radius);
    border-end-start-radius: var(--kc-radius);
}
.kahunacart-totals tr:is(.kahunacart-due-today, .kahunacart-paid-so-far) > td {
    padding-inline-end: 0.7rem;
    border-start-end-radius: var(--kc-radius);
    border-end-end-radius: var(--kc-radius);
}

/* "Any tax is added when you pay." on a store whose every payment method
   works out its own tax: a note on the total, so it sits under it in the
   muted voice, lined up with the figures. */
.kahunacart-tax-at-payment {
    margin: -0.75rem 0 1rem;
    color: var(--kc-muted);
    font-size: 0.9em;
    text-align: end;
}

/* ── checkout ───────────────────────────────────────────────────────────── */

.kahunacart-checkout-form {
    max-width: 42rem;
}
/* Field labels wrap their input and carry the field name as a bare text node
   in front of it. As grid items that text node becomes its own row, which
   gives a stacked label-over-input pair without the markup having a
   <span> to hang it on. The three label kinds that put a control *first*
   (checkbox, provider, shipping method, payment method, collection point)
   are excluded — they are
   genuinely inline and stacking them would orphan the control above its own
   text. */
.kahunacart-checkout-form :where(fieldset > label:not(.kahunacart-checkbox, .kahunacart-provider, .kahunacart-shipping-method, .kahunacart-payment-method, .kahunacart-pickup-option)) {
    display: grid;
    gap: 0.3rem;
    margin-block-end: 0.85rem;
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-checkout-form :where(fieldset > label > input) {
    color: var(--kc-fg);
    font-size: 1rem;
}
.kahunacart-checkbox,
.kahunacart-provider,
.kahunacart-shipping-method {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block: 0.4rem;
    cursor: pointer;
}
/* The saved-address picker above each address section. Its label is a sibling
   of the select rather than wrapping it, since the select needs an id a theme
   can point its own label at, so the stacking rule above does not reach it. */
.kahunacart-address-picker {
    display: grid;
    gap: 0.3rem;
    margin-block-end: 1.1rem;
}
.kahunacart-address-picker > label {
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-address-picker > select {
    color: var(--kc-fg);
    font-size: 1rem;
}

/* The one line of explanation under a checkbox that needs one — what happens
   after the order completes if "create an account" is ticked. Sits under the
   control it belongs to, indented past the box. */
.kahunacart-hint {
    margin-block: 0 0.6rem;
    margin-inline-start: 1.6rem;
    color: var(--kc-muted);
    font-size: 0.85em;
}

/* Payment and shipping options are rows the customer picks between, so give
   them the outline of a control instead of leaving a bare radio floating in
   a fieldset. */
.kahunacart-provider,
.kahunacart-shipping-method {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    transition: border-color var(--kc-dur) var(--kc-ease), background var(--kc-dur) var(--kc-ease);
}
.kahunacart-provider:hover,
.kahunacart-shipping-method:hover {
    border-color: var(--kc-border-strong);
    background: var(--kc-surface);
}
/* :has() is the only way to reach the row from its own radio; where it is
   unsupported the rows simply stay uniform, which is a lesser look rather
   than a broken one. */
.kahunacart-provider:has(input:checked),
.kahunacart-shipping-method:has(input:checked) {
    border-color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 8%, transparent);
}
/* The method's price is pushed to the far edge so a column of options reads
   as a price list. */
.kahunacart-shipping-method .kahunacart-price {
    margin-inline-start: auto;
}
.kahunacart-shipping-hint,
.kahunacart-shipping-none {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.95em;
}
/* Payment methods and collection points are the same kind of choice as a
   provider or a delivery method, so they get the same card: the radio, the
   name, the price at the far edge, and what to know about it on its own line
   underneath. Without this a theme that sets its own label rules (Pico, under
   Quark2) puts the radio on one line and its name on the next. Only the row
   layout is at class weight; the card itself is in :where() so a theme that
   draws its own (Kahuna's k-choice) keeps it. */
.kahunacart-payment-method,
.kahunacart-pickup-option,
.kahunacart-pickup-choice {
    display: flex;
    align-items: center;
}
/* Full rows, however the theme sizes a label holding a radio (Pico makes it
   fit-content). */
label:is(.kahunacart-payment-method, .kahunacart-pickup-deliver) {
    width: auto;
}
:where(.kahunacart-payment-method, .kahunacart-pickup-option) {
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    margin-block: 0.4rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    transition: border-color var(--kc-dur) var(--kc-ease), background var(--kc-dur) var(--kc-ease);
}
:where(label.kahunacart-payment-method, .kahunacart-pickup-deliver, .kahunacart-pickup-choice) {
    cursor: pointer;
}
:where(.kahunacart-payment-method, .kahunacart-pickup-option, .kahunacart-pickup-choice) > input[type="radio"] {
    flex: none;
    margin: 0;
}
:where(label.kahunacart-payment-method, .kahunacart-pickup-option):hover {
    border-color: var(--kc-border-strong);
    background: var(--kc-surface);
}
:where(.kahunacart-payment-method, .kahunacart-pickup-option):has(input:checked) {
    border-color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 8%, transparent);
}
:where(.kahunacart-payment-method--unavailable) {
    opacity: 0.6;
}
:where(.kahunacart-payment-method-fee) {
    margin-inline-start: auto;
}
:where(.kahunacart-payment-method-description, .kahunacart-payment-method-reason) {
    flex-basis: 100%;
    color: var(--kc-muted);
    font-size: 0.85em;
}
:where(label.kahunacart-payment-method) > :where(.kahunacart-payment-method-description) {
    padding-inline-start: 1.75rem;
}
/* A collection point's label holds the radio, the name and the charge; the
   address and hours sit under it, lined up with the name. */
:where(.kahunacart-pickup-choice) {
    flex: 1;
    gap: 0.5rem;
    margin: 0;
}
:where(.kahunacart-pickup-choice) .kahunacart-price {
    margin-inline-start: auto;
}
:where(.kahunacart-pickup-option) > :where(.kahunacart-pickup-location) {
    flex-basis: 100%;
    padding-inline-start: 1.75rem;
    color: var(--kc-muted);
    font-size: 0.85em;
}

/* No route ships here means the order cannot proceed — worth saying in the
   colour the rest of the page uses for a blocked state. */
.kahunacart-shipping-none {
    color: var(--kc-danger);
}

/* ── collection point ───────────────────────────────────────────────────────
   One counter's address, hours and instruction, on the checkout picker and
   the receipt: the address a line per line, the week as a two-column table. */
.kahunacart-pickup-location :where(p, address, dl) {
    margin-block: 0.4rem;
    font-size: inherit;
}
.kahunacart-pickup-location address {
    font-style: normal;
}
.kahunacart-pickup-line {
    display: block;
}
.kahunacart-pickup-hours-title {
    margin-block-end: 0.15rem;
    font-weight: 600;
}
.kahunacart-pickup-hours dl {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 0 1rem;
}
.kahunacart-pickup-hours :where(dt, dd) {
    margin: 0;
}

/* ── address check ──────────────────────────────────────────────────────── */

/* Shown at most once per address, at the top of the checkout form, when a
   validation service has a correction to offer. It is a question, not an
   error: the accent border says "read this" without the red that would
   suggest the order has been refused — because it has not been, and either
   button carries on to payment. */
.kahunacart-address-check {
    margin-block-end: 1.4rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--kc-border);
    border-inline-start: 3px solid var(--kc-accent);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
/* An address the service could not find at all is the one case worth a
   warning colour — still not a refusal, still both buttons. */
.kahunacart-address-check-warning {
    border-inline-start-color: var(--kc-warning);
}
.kahunacart-address-check-title {
    margin-block: 0 0.3rem;
    font-size: 1.05em;
}
.kahunacart-address-check-lead {
    margin-block: 0 1rem;
    color: var(--kc-muted);
    font-size: 0.95em;
}
/* Side by side where there is room, stacked where there is not: comparing two
   addresses is the whole job, and two columns is how a comparison reads. */
.kahunacart-address-check-options {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kahunacart-address-check-option {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: start;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
}
.kahunacart-address-check-label {
    margin: 0;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-subtle);
}
.kahunacart-address-check-option .kahunacart-address {
    margin: 0;
    font-style: normal;
    line-height: 1.6;
}
/* The suggestion is the recommended answer, so it gets the filled button and
   the outlined card; keeping what you typed stays available and stays plain. */
.kahunacart-address-check-suggested {
    border-color: var(--kc-accent);
}
.kahunacart-address-check-keep {
    margin-block-start: auto;
}
.kahunacart-address-check-accept {
    margin-block-start: auto;
    border-color: var(--kc-accent-strong);
    background: var(--kc-accent-strong);
    color: var(--kc-on-accent-strong);
}

/* ── order confirmation ─────────────────────────────────────────────────── */

.kahunacart-order-meta {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
    line-height: 1.9;
}
.kahunacart-order-items {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1.5rem;
}
.kahunacart-order-items :where(th, td) {
    padding: 0.55rem 0.7rem;
    border-block-end: 1px solid var(--kc-border);
    text-align: start;
}
.kahunacart-order-items :where(thead th) {
    font-size: 0.78em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kc-subtle);
}
.kahunacart-order-items :where(th:not(:first-child), td:not(:first-child)) {
    text-align: end;
    white-space: nowrap;
}
/* Bank details, a reference to quote, a "we ship on Monday" note — merchant
   markdown, so it needs to read as an instruction panel and not as another
   receipt row. */
.kahunacart-offline-instructions {
    padding: 1rem 1.15rem;
    margin-block: 1.5rem;
    border: 1px solid var(--kc-warning);
    border-radius: var(--kc-radius-lg);
    background: color-mix(in srgb, var(--kc-warning) 8%, transparent);
}
.kahunacart-offline-instructions > :first-child { margin-block-start: 0; }
.kahunacart-offline-instructions > :last-child { margin-block-end: 0; }

/* The guest's account offer, under the receipt. An invitation rather than a
   step, so it borrows the surface treatment of the meta panel instead of the
   warning colour the offline instructions use — nothing here is a thing the
   customer has to do. The accent edge is the one signal that it is an offer and
   not another summary block. */
.kahunacart-account-offer {
    margin-block: 2rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--kc-border);
    border-inline-start: 3px solid var(--kc-accent);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-account-offer-title {
    margin-block: 0 0.35rem;
    font-size: 1.05em;
}
.kahunacart-account-offer-text {
    margin-block: 0 0.9rem;
    color: var(--kc-muted);
    font-size: 0.92em;
}
.kahunacart-account-offer-form {
    margin: 0;
}
/* The already-registered case is one line, not a panel: the customer has
   nothing to decide, so it reads like the order links it sits above. */
.kahunacart-account-offer-signin {
    margin-block: 1.5rem 0.5rem;
    font-size: 0.92em;
}

/* The receipt's closing links: invoice, PDF, your orders, back to the shop.
   A wrapping row with room between them, so four links never read as one
   sentence. A theme draws them as buttons through their classes
   (.kahunacart-order-link--invoice and so on). */
.kahunacart-order-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-block: 1.5rem 0.5rem;
}

/* ── downloads ──────────────────────────────────────────────────────────── */

.kahunacart-downloads {
    margin-block: 2rem;
}
.kahunacart-download-list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kahunacart-download {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
}
.kahunacart-download > a {
    font-weight: 600;
}
/* Remaining count and expiry date: the terms of the grant, not the file, so
   they sit at the far edge in the muted ramp. */
.kahunacart-download-meta {
    margin-inline-start: auto;
    color: var(--kc-muted);
    font-size: 0.88em;
    font-variant-numeric: tabular-nums;
}

/* ── releases ───────────────────────────────────────────────────────────────
   A block per version, holding that version's builds. The heading carries the
   weight and the block itself stays flat, so a customer scanning a long list
   of versions reads the numbers rather than a stack of boxes. */
.kahunacart-release {
    margin-block: 1.5rem;
}
.kahunacart-release-version {
    margin-block-end: 0.15rem;
}
.kahunacart-release-latest {
    padding: 0.1em 0.5em;
    border-radius: var(--kc-radius);
    border: 1px solid var(--kc-border);
    background: var(--kc-surface);
    color: var(--kc-muted);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}
.kahunacart-release-date {
    margin-block: 0 0.6rem;
    color: var(--kc-muted);
    font-size: 0.88em;
    font-variant-numeric: tabular-nums;
}
.kahunacart-release-changelog {
    margin-block-end: 0.8rem;
    font-size: 0.94em;
}
.kahunacart-release-changelog > :first-child {
    margin-block-start: 0;
}
.kahunacart-release-changelog > :last-child {
    margin-block-end: 0;
}

/* ── processing & denial ────────────────────────────────────────────────────
   Both are terminal single-message pages, so they get the same centred
   treatment and differ only in tone. The denied page also carries a
   --{reason} modifier (not_found, revoked, expired, exhausted,
   order_refunded, unreadable) that we deliberately leave unstyled: the
   distinction matters to a theme that wants to branch, not to a customer who
   just needs to know what to do next. */
.kahunacart-processing,
.kahunacart-denied {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    padding-block: 2rem;
}
.kahunacart-processing p {
    color: var(--kc-muted);
}
.kahunacart-denied-message {
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--kc-danger) 45%, transparent);
    border-radius: var(--kc-radius-lg);
    background: color-mix(in srgb, var(--kc-danger) 8%, transparent);
    font-size: 1.05em;
}
/* Refunded is a bookkeeping outcome rather than a failure — the file is gone
   because the money went back, which is not something to alarm anyone about. */
.kahunacart-denied--order_refunded .kahunacart-denied-message {
    border-color: var(--kc-border-strong);
    background: var(--kc-surface);
}

/* ── expired order link ─────────────────────────────────────────────────────
   The same centred single-message shape, but neutral rather than alarming:
   an order link running out is the system working, and the page's real job is
   the button under it. So the message reads as a notice and the form gets the
   emphasis. */
.kahunacart-expired {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    padding-block: 2rem;
}
.kahunacart-expired-message {
    padding: 1rem 1.15rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-link-request-form {
    margin-block: 1.5rem;
}
.kahunacart-link-request-help {
    color: var(--kc-muted);
    font-size: 0.92em;
    margin-block-end: 0.85rem;
}
.kahunacart-expired-links {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.95em;
}

/* ── account area ───────────────────────────────────────────────────────────
   Four pages sharing one nav and one panel rhythm. The nav is a plain list of
   links rather than tabs: it has to survive a theme that already styles nav
   elements, and a row of underlined links does that where a tab strip does
   not. The current item is a span, not a link, so it needs its own weight. */

.kahunacart-account-nav {
    margin-block: 1rem 2rem;
    border-block-end: 1px solid var(--kc-border);
}
.kahunacart-account-nav :where(ul) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kahunacart-account-nav :where(li) {
    padding-block-end: 0.5rem;
    margin-block-end: -1px;
}
/* Some themes style every <nav> list as a menu bar (Pico, under Quark2: a
   negative margin on the list, padding on each item, links padded out like
   buttons), which pushes the tabs and their underline off the text. Stated
   on `nav.` so it outweighs those element rules. */
nav.kahunacart-account-nav > ul {
    margin: 0;
}
nav.kahunacart-account-nav li {
    padding-inline: 0;
    padding-block-start: 0;
}
nav.kahunacart-account-nav li > :is(a, span) {
    display: inline;
    margin: 0;
    padding: 0;
}
.kahunacart-account-nav-item--current {
    border-block-end: 2px solid var(--kc-accent);
    font-weight: 600;
}
.kahunacart-account-nav-item--current > a {
    color: inherit;
    text-decoration: none;
}

.kahunacart-account-identity {
    color: var(--kc-muted);
}
/* The groups a customer is in, as quiet pills under their name. Accent
   rather than success or warning: membership is who they are, not a state. */
.kahunacart-account-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
}
.kahunacart-account-group {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 12%, transparent);
}
.kahunacart-account-profile-who .kahunacart-account-groups { margin: 0.5rem 0 0; }
.kahunacart-account-identity:has(+ .kahunacart-account-groups) { margin-block-end: 0.25rem; }
.kahunacart-account-panel {
    margin-block: 2rem;
}
.kahunacart-account-panel :where(h2) {
    margin-block-end: 0.75rem;
    font-size: 1.15em;
}
/* A protected demo login's profile form, drawn read-only: the fieldset only
   disables what is in it, so it draws no box of its own. */
.kahunacart-account-frozen-fields {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
/* No button to press on a form that cannot be sent. Weighted past a theme's
   own button rules, which are usually a class or two deep. */
.kahunacart-account-panel--frozen .kahunacart-account-frozen-fields .buttons,
.kahunacart-account-panel--frozen .kahunacart-account-frozen-fields button { display: none; }
.kahunacart-account-frozen-fields :where(input, select, textarea) { opacity: 0.75; }
/* Every "you have nothing here yet" line on the account pages. Muted rather
   than alarming: an empty account is the ordinary state of a new one. */
/* An empty section, and the notice a protected demo login gets in place of
   the credentials forms — both are a quiet sentence where a panel would be. */
.kahunacart-account-empty,
.kahunacart-account-frozen {
    color: var(--kc-muted);
    padding: 0.9rem 1.05rem;
    border: 1px dashed var(--kc-border);
    border-radius: var(--kc-radius);
}

.kahunacart-account-orders {
    inline-size: 100%;
    border-collapse: collapse;
}
.kahunacart-account-orders :where(th, td) {
    padding: 0.6rem 0.75rem;
    border-block-end: 1px solid var(--kc-border);
    text-align: start;
    vertical-align: top;
}
.kahunacart-account-orders :where(thead th) {
    border-block-end-color: var(--kc-border-strong);
    font-size: 0.85em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-subtle);
}
/* A plain table cell, not a flex box: a <td> set to flex drops out of the
   table, so its bottom border sat apart from the rest of the row's. The links
   run along one line and wrap; a refund request drops in underneath. */
.kahunacart-account-order-actions {
    font-size: 0.9em;
}
.kahunacart-account-order-actions > a {
    display: inline-block;
    margin: 0 0.9rem 0.25rem 0;
}
.kahunacart-account-order-actions > a:last-of-type {
    margin-inline-end: 0;
}

/* ── returns-storefront ──
   The return form and the states after it, inside the refund-request spot.
   One column at any width: the spot sits in a narrow table cell on the
   account history and in a sidebar on some themes, so each line stacks its
   title over its price and quantity rather than relying on a row of columns. */
.kahunacart-refund-request-error {
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--kc-danger) 45%, transparent);
    border-radius: var(--kc-radius);
    background: color-mix(in srgb, var(--kc-danger) 8%, transparent);
}
.kahunacart-return-lines,
.kahunacart-return-method {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}
.kahunacart-return-lines > legend,
.kahunacart-return-method > legend {
    margin-block-end: 0.4rem;
    padding: 0;
    font-weight: 600;
}
.kahunacart-return-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--kc-border);
}
.kahunacart-return-line-title {
    flex: 1 1 12rem;
    font-weight: 500;
}
.kahunacart-return-line-meta,
.kahunacart-return-line-max,
.kahunacart-return-line-reason,
.kahunacart-return-closes {
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-return-line-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.kahunacart-return-line-qty input[type="number"] {
    width: 4.5rem;
    text-align: end;
}
.kahunacart-return-not-returnable > ul,
.kahunacart-return-summary {
    margin-block: 0.25rem 1rem;
    padding-inline-start: 1.2rem;
}
.kahunacart-return-method-option {
    display: block;
    margin-block: 0.2rem;
}
.kahunacart-return-number-label {
    display: block;
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-return-number-value {
    font-family: var(--kc-mono);
    font-size: 1.5em;
    letter-spacing: 0.03em;
}
.kahunacart-return-heading {
    margin-block-end: 0.25rem;
    font-weight: 600;
}
.kahunacart-return-address > address {
    font-style: normal;
}
.kahunacart-return-instructions > :last-child {
    margin-block-end: 0;
}
.kahunacart-return-withdraw {
    margin-block-start: 0.5rem;
}
/* ── end returns-storefront ── */

/* The three status axes read as one line of small caps-ish chips. Each carries
   a --{value} modifier we leave unstyled on purpose: which statuses deserve a
   colour is a merchant's judgement, and a theme can branch on the modifier. */
.kahunacart-status {
    display: inline-block;
    margin-inline-end: 0.4rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    font-size: 0.82em;
    white-space: nowrap;
}
.kahunacart-status--paid {
    border-color: color-mix(in srgb, var(--kc-success) 45%, transparent);
    background: color-mix(in srgb, var(--kc-success) 9%, transparent);
}
.kahunacart-status--pending {
    border-color: color-mix(in srgb, var(--kc-warning) 45%, transparent);
    background: color-mix(in srgb, var(--kc-warning) 9%, transparent);
}
.kahunacart-status--preorder {
    border-color: color-mix(in srgb, var(--kc-accent) 45%, transparent);
    background: color-mix(in srgb, var(--kc-accent) 9%, transparent);
}
.kahunacart-status--failed,
.kahunacart-status--canceled {
    border-color: color-mix(in srgb, var(--kc-danger) 45%, transparent);
    background: color-mix(in srgb, var(--kc-danger) 9%, transparent);
}

/* The product a download came from, between the file name and the terms. */
.kahunacart-download-product {
    color: var(--kc-subtle);
    font-size: 0.9em;
}
/* A file's own description, such as what a starter site is for: on its own
   line under the name and the terms, with the merchant's line breaks kept. */
.kahunacart-download-description {
    flex-basis: 100%;
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.9em;
    white-space: pre-line;
}

/* ── address book ─────────────────────────────────────────────────────────── */

.kahunacart-address {
    font-style: normal;
    line-height: 1.5;
}
.kahunacart-address-grid,
.kahunacart-address-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* The addresses a street box suggests while somebody types
   (assets/kahunacart-address-lookup.js). The list hangs off the page body,
   placed under the box, so no theme's overflow or grid can clip it. */
.kahunacart-lookup {
    position: absolute;
    z-index: 1000;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    color: var(--kc-fg);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
    font-size: 0.95rem;
}
.kahunacart-lookup[hidden] {
    display: none;
}
.kahunacart-lookup-option {
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: calc(var(--kc-radius) - 2px);
    cursor: pointer;
}
.kahunacart-lookup-option:hover,
.kahunacart-lookup-option[aria-selected="true"] {
    background: var(--kc-surface-2);
}
.kahunacart-lookup-detail {
    color: var(--kc-muted);
    font-size: 0.85em;
}
.kahunacart-lookup-credit {
    padding: 0.3rem 0.65rem 0.1rem;
    color: var(--kc-muted);
    font-size: 0.72em;
    text-align: end;
}

/* The last order's addresses, offered to an empty book: the cards it would
   file, then the one button that files them. */
.kahunacart-address-from-order {
    display: grid;
    gap: 1rem;
    margin-block-end: 1.5rem;
}
.kahunacart-address-from-order > :where(p, form) {
    margin: 0;
}
.kahunacart-address-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-card);
    box-shadow: var(--kc-shadow);
}
.kahunacart-address-card--default {
    border-color: var(--kc-border-strong);
}
.kahunacart-address-card :where(h2, h3) {
    margin-block: 0 0.5rem;
    font-size: 1em;
}
.kahunacart-address-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-block: 0 0.6rem;
}
.kahunacart-address-flag {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--kc-accent);
    border-radius: var(--kc-radius);
    color: var(--kc-accent-ink);
    font-size: 0.78em;
}
.kahunacart-address-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin-block-start: 0.8rem;
}
.kahunacart-address-actions :where(form) {
    margin: 0;
}
/* A form control that has to read as a link: these actions are POSTs (they
   change data and carry a nonce), but "use for delivery" is not a button-sized
   decision and a row of grey rectangles would say it was. */
.kahunacart-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--kc-accent-ink);
    font: inherit;
    font-size: 0.9em;
    text-decoration: underline;
    cursor: pointer;
}
.kahunacart-link-button--danger {
    color: var(--kc-danger);
}
/* The add tile: a dashed card with a plus until it is opened, then a card the
   width of the row with the form inside. `summary` is the whole tile while
   closed so the click target is the tile, not the word. */
.kahunacart-address-card--add {
    padding: 0;
    border-style: dashed;
    background: transparent;
}
.kahunacart-address-add {
    block-size: 100%;
}
.kahunacart-address-add-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 9rem;
    block-size: 100%;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
    color: var(--kc-muted);
    text-align: center;
}
.kahunacart-address-add-summary::-webkit-details-marker {
    display: none;
}
/* The + is the marker; a theme's own disclosure chevron (Pico draws one in
   summary::after) would sit under the label as a stray third line. */
.kahunacart-address-add-summary::after {
    display: none;
}
.kahunacart-address-add-plus {
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 300;
    color: var(--kc-accent);
}
.kahunacart-address-add[open] {
    block-size: auto;
}
.kahunacart-address-card--add:has(.kahunacart-address-add[open]) {
    grid-column: 1 / -1;
    border-style: solid;
    background: var(--kc-card);
}
.kahunacart-address-add[open] > .kahunacart-address-add-summary {
    flex-direction: row;
    justify-content: flex-start;
    min-block-size: 0;
    padding: 1rem 1.1rem 0;
    color: inherit;
    font-weight: 600;
}
.kahunacart-address-add[open] > .kahunacart-address-add-summary .kahunacart-address-add-plus {
    font-size: 1.4rem;
}
.kahunacart-address-add-body {
    padding: 0.6rem 1.1rem 1.1rem;
}
.kahunacart-address-edit {
    margin-block-start: 0.9rem;
    font-size: 0.95em;
}
.kahunacart-address-edit :where(summary) {
    cursor: pointer;
    color: var(--kc-muted);
}
.kahunacart-address-form {
    display: grid;
    gap: 0.6rem;
    margin-block-start: 0.9rem;
    max-inline-size: 34rem;
}

/* ── invoice ────────────────────────────────────────────────────────────────
   A document rather than a page: fixed measure, its own header rule, and a
   toolbar that exists only on screen. */

.kahunacart-invoice {
    max-inline-size: 48rem;
    margin-inline: auto;
}
.kahunacart-invoice-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.kahunacart-invoice-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block-end: 1.25rem;
    margin-block-end: 1.5rem;
    border-block-end: 2px solid var(--kc-border-strong);
}
.kahunacart-invoice-store :where(h2) {
    margin-block: 0 0.4rem;
    font-size: 1.2em;
}
.kahunacart-invoice-meta {
    text-align: end;
}
.kahunacart-invoice-meta :where(h1) {
    margin-block: 0 0.5rem;
    font-size: 1.6em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Label above value, right-aligned, one pair per row — a definition list
   rather than a table so it reflows on a phone without a scroll port. */
.kahunacart-invoice-meta :where(dl) {
    margin: 0;
    font-size: 0.9em;
}
.kahunacart-invoice-meta :where(dt) {
    color: var(--kc-subtle);
    font-size: 0.85em;
}
.kahunacart-invoice-meta :where(dd) {
    margin: 0 0 0.4rem;
    font-variant-numeric: tabular-nums;
}
.kahunacart-invoice-tax-id {
    margin-block: 0.4rem 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}
/* The customer's VAT number and the reverse-charge sentence, under the totals. */
.kahunacart-customer-tax {
    margin-block: 1rem;
    font-size: 0.9em;
}
.kahunacart-customer-tax :where(p) {
    margin-block: 0.25rem;
}
.kahunacart-invoice-parties {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-block-end: 1.75rem;
}
.kahunacart-invoice-party :where(h3) {
    margin-block: 0 0.4rem;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-subtle);
}
.kahunacart-invoice-email {
    margin-block: 0.3rem 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-invoice-items {
    inline-size: 100%;
}
.kahunacart-invoice-footer {
    margin-block-start: 2.5rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--kc-border);
    color: var(--kc-muted);
    font-size: 0.9em;
}

/* ── printing ───────────────────────────────────────────────────────────────
   The invoice extends the theme like every other template, so printing it
   means suppressing the theme's chrome without knowing what the chrome is.

   visibility does that where display cannot: hiding the body outright would
   take the invoice inside it, whereas `visibility: hidden` is overridable per
   descendant, so the invoice paints and everything around it does not. What
   it leaves behind is the space the chrome occupied, which is why the invoice
   is then taken out of flow and pinned to the top of the sheet — otherwise a
   tall header prints as a blank first page.

   Anything the customer would not want on paper carries
   .kahunacart-no-print, which is display: none in both directions.

   The body is hidden only on a page that holds an invoice. This stylesheet
   loads on every shop page, and a bare `body` here printed the receipt, the
   cart and the catalog as blank sheets. */
@media print {
    body:has(.kahunacart-invoice) {
        visibility: hidden;
        background: none;
    }
    .kahunacart-invoice,
    .kahunacart-invoice * {
        visibility: visible;
    }
    .kahunacart-invoice {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        max-inline-size: none;
        padding: 0;
        margin: 0;
    }
    .kahunacart-no-print {
        display: none !important;
    }
    /* Print colour is expensive and unreliable; the document reads on its
       rules and its type instead. Rows must not break across sheets. */
    .kahunacart-invoice :where(table, tr, .kahunacart-invoice-header) {
        break-inside: avoid;
    }
    .kahunacart-invoice :where(a) {
        text-decoration: none;
        color: inherit;
    }

    /* Every other shop page prints as itself: the receipt, the cart, a
       product, the catalog, the account. The templates mark what is an action
       rather than content (buy buttons, quantity boxes, coupon and estimate
       forms, filters, pagination, the account nav, the receipt's link row and
       account offer) with .kahunacart-no-print above; what is left is drawn in
       black on white. No tinted panels and no shadows, because a printer
       either drops them or spends ink on them, and a pale grey card with
       white text in it prints as nothing. */
    .kahunacart,
    .kahunacart :where(*) {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    /* A link on paper is the words. A theme that prints each address after
       its link fills a receipt with signed URLs nobody can type. */
    .kahunacart :where(a) {
        text-decoration: none !important;
    }
    .kahunacart a[href]::after {
        content: none !important;
    }
    /* The one place a fill is the content: a review's bar of stars. */
    .kahunacart .kahunacart-review-bar-fill {
        background: #000 !important;
        print-color-adjust: exact;
    }
    /* The quantity in the cart is a number box on screen; on paper it is the
       number. */
    .kahunacart input[type="number"] {
        border: 0;
        padding: 0;
        inline-size: auto;
        appearance: textfield;
        -moz-appearance: textfield;
    }
    /* Tables repeat their header on every sheet and keep each row whole.
       A heading never ends a sheet with its section on the next one. */
    .kahunacart :where(thead) {
        display: table-header-group;
    }
    .kahunacart :where(tr, li, figure, .kahunacart-product-card, .kahunacart-totals) {
        break-inside: avoid;
    }
    .kahunacart :where(h1, h2, h3) {
        break-after: avoid;
    }
    /* The catalog loses its sidebar on paper, so the listing takes the
       whole width. Important because a theme that draws the two columns
       itself does so with a selector stronger than this one, and the listing
       would otherwise print in the sidebar's narrow track. */
    .kahunacart-catalog-layout {
        display: block !important;
    }
    /* A button is an action on paper too, whoever drew it: an add-on's
       panel on the receipt (a licence key's Copy) has no mark of its own.
       A video's poster is drawn as a button and stays. */
    .kahunacart :where(button:not(.kahunacart-embed), input[type="submit"], input[type="button"]) {
        display: none !important;
    }
    /* The buy form prints its price and what is said about the price, and
       nothing else: the fields an add-on draws into it (a licence to attach
       the purchase to, a date to book) are as much an action as the button. */
    .kahunacart-buy > :not(.kahunacart-price, .kahunacart-compare-price, .kahunacart-sale-badge, .kahunacart-tax-note, .kahunacart-labels, .kahunacart-sale-tier-badge, .kahunacart-sale-tiers, .kahunacart-backorder-note, .kahunacart-preorder-note) {
        display: none !important;
    }
    /* Wallet buttons a payment add-on mounts into the cart and the checkout. */
    .kahunacart-zone:where([data-zone$=".express"]) {
        display: none !important;
    }
}

/* ── narrow viewports ───────────────────────────────────────────────────────
   The grid, the chip row and every flex row already reflow on their own; what
   does not is the tables, and the checkout's fixed-width plumbing, which has
   to give up its fixed widths before a 320px screen. */
/* ── catalog layout: tree sidebar + listing ─────────────────────────────────
   Two columns, and only when there is a sidebar to put in the first one. The
   layout wrapper is not emitted at all on a store with no categories and no
   tags (see the templates), so a flat catalog gets exactly the single-column
   page it always had — this whole section is dead CSS there rather than a rule
   that has to be neutralised.

   grid-template-columns names the sidebar in `rem` and lets the listing take
   the rest: a product grid is auto-fill and will happily fill whatever it is
   given, while a facet panel has a width its content decides. minmax(0, 1fr)
   on the second track rather than a bare 1fr, because a bare 1fr floors at
   min-content and a wide product card would push the sidebar off the page. */
.kahunacart-catalog-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.kahunacart-catalog-main {
    min-width: 0; /* let the grid inside it shrink rather than overflow */
}

.kahunacart-catalog-nav {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    font-size: 0.95em;
}
.kahunacart-nav-title {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-subtle);
    margin: 0 0 0.6rem;
}

/* ── category tree ──────────────────────────────────────────────────────────
   Nested <ul>s with a <details> per branch. The indent is a padding on the
   inner list rather than a margin on the item, so the hover and current-page
   backgrounds still run the full width of the rail at every depth. */
.kahunacart-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kahunacart-cat-list .kahunacart-cat-list {
    padding-inline-start: 0.85rem;
    border-inline-start: 1px solid var(--kc-border);
    margin-inline-start: 0.35rem;
}
.kahunacart-cat-item {
    display: block;
}
.kahunacart-cat-link {
    display: inline-block;
    padding: 0.25rem 0.35rem;
    color: inherit;
    text-decoration: none;
    border-radius: calc(var(--kc-radius) / 1.5);
}
.kahunacart-cat-link:hover {
    color: var(--kc-accent-ink);
    text-decoration: none;
}
.kahunacart-cat-link.is-current {
    font-weight: 600;
    color: var(--kc-accent-ink);
}
.kahunacart-cat-item.is-ancestor > .kahunacart-cat-branch > .kahunacart-cat-summary > .kahunacart-cat-link {
    font-weight: 600;
}
.kahunacart-cat-count {
    font-family: var(--kc-mono);
    font-size: 0.78em;
    color: var(--kc-subtle);
}
/* A branch that holds nothing under the filters currently on. Still a link,
   because the tree is how somebody gets out of a corner they have filtered
   themselves into, but it says out loud that going there shows nothing.
   The row rather than the whole item: a dead branch's children are dead too
   and carry the class themselves, and two nested opacities multiply into
   something nobody can read. */
.kahunacart-cat-item.is-unavailable > .kahunacart-cat-link,
.kahunacart-cat-item.is-unavailable > .kahunacart-cat-count,
.kahunacart-cat-item.is-unavailable > .kahunacart-cat-branch > .kahunacart-cat-summary {
    opacity: 0.45;
}

/* The <summary> carries the disclosure marker and the link side by side.
   list-item display keeps the browser's own triangle — a hand-rolled one would
   have to be re-invented for every writing mode and would not rotate on open. */
.kahunacart-cat-summary {
    display: list-item;
    list-style-position: outside;
    cursor: pointer;
    padding-inline-start: 0.1rem;
}
.kahunacart-cat-summary::marker {
    color: var(--kc-subtle);
    font-size: 0.8em;
}
.kahunacart-cat-summary > .kahunacart-cat-link {
    cursor: pointer;
}

/* ── filter panel ───────────────────────────────────────────────────────── */
.kahunacart-filters {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.kahunacart-filters :where(.kahunacart-filter-group) {
    border: 0;
    border-block-start: 1px solid var(--kc-border);
    margin: 0;
    padding: 0.9rem 0 0;
}
.kahunacart-filters :where(legend) {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-subtle);
    padding: 0;
    margin-block-end: 0.5rem;
}
.kahunacart-filter-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* A long facet list is a scroll inside the panel rather than a rail that
       runs past the product grid. max-height in `em` so it tracks the font
       size a theme sets rather than a pixel guess. */
    max-height: 18em;
    overflow-y: auto;
}
.kahunacart-filter-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}
.kahunacart-filter-option > span:first-of-type {
    flex: 1 1 auto;
}
.kahunacart-filter-count {
    font-family: var(--kc-mono);
    font-size: 0.78em;
    color: var(--kc-subtle);
}

/* A value nothing reachable answers. The count beside it reads 0, the input is
   `disabled` so it cannot be ticked or focused, and this is what says so on
   screen. Dimmed rather than removed on purpose: the panel keeps its length
   and its order, so ticking one box does not make every other box jump under
   the cursor. `catalog.facets.empty: hide` is the setting for a store that
   would rather they went; nothing then reaches this rule.
   Never applied to a ticked value at any count, because a filter you cannot
   take off is worse than one that reads 0. */
.kahunacart-filter-option.is-disabled,
.kahunacart-filter-range.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.kahunacart-filter-option.is-disabled input {
    cursor: not-allowed;
}
/* Under a facet whose every value is out of reach. The heading stays, so the
   shopper can see the store has the facet and that their own filters are what
   emptied it. */
.kahunacart-filter-none {
    margin: 0;
    font-size: 0.9em;
    color: var(--kc-subtle);
}
.kahunacart-filter-range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.kahunacart-filter-field {
    flex: 1 1 0;
    min-width: 0;
}
.kahunacart-filter-field input {
    width: 100%;
}
.kahunacart-filter-dash {
    color: var(--kc-subtle);
}
.kahunacart-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.kahunacart-filter-clear {
    font-size: 0.9em;
    color: var(--kc-muted);
}

/* The rest of a facet the cap has shortened. A <details>, so opening it costs
   no request and no script, and the checkboxes inside it are in the same form
   as the ones above: ticking one submits exactly as ticking a visible one
   does. The list keeps its own scroll rather than pushing the panel down. */
.kahunacart-filter-more {
    margin-block-start: 0.35rem;
}
.kahunacart-filter-more-toggle {
    font-size: 0.9em;
    color: var(--kc-muted);
    cursor: pointer;
}
.kahunacart-filter-more-toggle:hover {
    color: var(--kc-fg);
}
.kahunacart-filter-more > .kahunacart-filter-options {
    margin-block-start: 0.35rem;
}

/* `hidden` means gone, including on a button this stylesheet has given a
   `display` of its own. The browser's `[hidden] { display: none }` sits at
   (0,1,0) and loses to `.kahunacart :where(.button)`, which is how a filter
   panel that applies itself ends up still painting an Apply button. Scoped to
   the wrapper so it says nothing about the rest of the page. */
.kahunacart [hidden] {
    display: none;
}

/* ── the results region, and the chip row above it ──────────────────────────
   The element a filter change replaces. It is a plain block on purpose: the
   two-column wrapper stays in the page template, so this region swaps whether
   or not there is a sidebar beside it. */
.kahunacart-catalog-results {
    /* The dim below is a fade rather than a spinner: a filtered listing comes
       back in a few tens of milliseconds on any catalog this plugin is built
       for, and a spinner that appears and vanishes inside one frame is a
       flicker. Opacity only, so nothing moves and nothing reflows. */
    transition: opacity var(--kc-dur) var(--kc-ease);
}
.kahunacart-catalog-results.is-loading {
    opacity: 0.55;
    /* The old results are on their way out; clicking one is a click on a
       product that may not be in the new set. */
    pointer-events: none;
}

/* What is narrowing this listing, said in words. A wrapped row of links, each
   of which removes one value, and Clear all at the end. Above the grid rather
   than in the sidebar, because a customer scrolling a phone has scrolled past
   the panel by the time they wonder what they asked for. */
.kahunacart-filter-chips {
    margin-block-end: 1rem;
}
.kahunacart-chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.kahunacart-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.85em;
    line-height: 1.6;
    color: var(--kc-fg);
    text-decoration: none;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: 999px;
    transition: border-color var(--kc-dur) var(--kc-ease), color var(--kc-dur) var(--kc-ease);
}
.kahunacart-chip:hover,
.kahunacart-chip:focus-visible {
    color: var(--kc-accent-ink);
    border-color: var(--kc-border-strong);
    text-decoration: none;
}
/* The cross is inside the link rather than beside it, so the whole chip is the
   target: a 12px glyph is not a tap target on a phone. */
.kahunacart-chip-remove {
    font-size: 1.1em;
    line-height: 1;
    color: var(--kc-subtle);
}
.kahunacart-chip:hover .kahunacart-chip-remove,
.kahunacart-chip:focus-visible .kahunacart-chip-remove {
    color: inherit;
}
.kahunacart-chip-clear {
    font-size: 0.85em;
    color: var(--kc-muted);
    padding-inline-start: 0.25rem;
}

/* Belt and braces for a theme that emits the catalog wrapper unconditionally:
   with `catalog.filters: off` and no category tree there is no aside to put in
   the first column, and a 15rem track holding nothing would push the grid off
   to one side. The shipped templates open the wrapper only when there is a
   sidebar, so on those this rule never matches. */
.kahunacart-catalog-layout:not(:has(.kahunacart-catalog-nav)) {
    grid-template-columns: minmax(0, 1fr);
}

/* ── breadcrumbs ────────────────────────────────────────────────────────── */
.kahunacart-breadcrumbs {
    margin-block-end: 0.75rem;
    font-size: 0.9em;
    color: var(--kc-muted);
}
.kahunacart-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* The separator is generated rather than written into the markup: it is
   decoration, and a screen reader reading "slash" between every crumb is
   noise. aria-hidden on a written-out separator would do the same job with
   more markup. */
.kahunacart-breadcrumb-item + .kahunacart-breadcrumb-item::before {
    content: "/";
    margin-inline-end: 0.4rem;
    color: var(--kc-border-strong);
}
.kahunacart-breadcrumb-item a {
    color: inherit;
}

/* ── subcategory cards (the department landing page) ────────────────────────
   The same auto-fill grid the product grid uses, at a slightly wider minimum:
   a department card carries a banner image and a name, and reads badly at
   product-card width. */
.kahunacart-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}
.kahunacart-subcategory-card {
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-card);
    box-shadow: var(--kc-shadow);
    overflow: hidden;
    transition: border-color var(--kc-dur) var(--kc-ease);
}
.kahunacart-subcategory-card:hover {
    border-color: var(--kc-accent);
}
.kahunacart-subcategory-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.kahunacart-subcategory-link:hover {
    text-decoration: none;
}
.kahunacart-subcategory-media {
    margin: 0;
    aspect-ratio: 16 / 9;
    background: var(--kc-surface);
}
.kahunacart-subcategory-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kahunacart-subcategory-title {
    margin: 0;
    padding: 0.9rem 1rem 0.2rem;
    font-size: 1.05em;
}
.kahunacart-subcategory-count {
    display: block;
    padding: 0 1rem 0.95rem;
    font-size: 0.85em;
    color: var(--kc-subtle);
}

/* ── category header image ──────────────────────────────────────────────── */
.kahunacart-category-media {
    margin: 0 0 1.25rem;
    border-radius: var(--kc-radius-lg);
    overflow: hidden;
}
.kahunacart-category-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── tags ───────────────────────────────────────────────────────────────────
   Deliberately not styled as the category chips are. A tag links into a
   filtered listing, not to a place in the catalog, and making the two look
   identical would be telling customers something untrue about where a click
   goes. */
.kahunacart-tags {
    margin-block: 1.75rem;
}
.kahunacart-tags-title {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-subtle);
    margin: 0 0 0.5rem;
}
.kahunacart-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kahunacart-tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: calc(var(--kc-radius) / 1.5);
    background: var(--kc-surface);
    color: var(--kc-muted);
    text-decoration: none;
    font-size: 0.85em;
}
.kahunacart-tag:hover {
    color: var(--kc-accent-ink);
    background: color-mix(in srgb, var(--kc-accent) 10%, transparent);
    text-decoration: none;
}

/* ── attributes: the specification table ────────────────────────────────────
   A two-column table of name and value, because that is what it is: a spec
   table is genuinely tabular data and a <dl> would say the same thing less
   usefully to a screen reader.

   The label column is a fixed width rather than sized to its content, because
   a grouped spec table is one <table> per group: sizing to content gives each
   group its own column width, and the values step left and right down the page
   as the headings change. One width for every group lines them up.

   Every colour and radius comes from the same --kc-* chain the rest of this
   stylesheet uses, so a theme that has set --kahunacart-accent and friends
   gets the spec table in its own colours with no extra work. */
.kahunacart-attributes {
    margin-block: 1.75rem;
}
.kahunacart-attributes-title {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-subtle);
    margin: 0 0 0.5rem;
}
.kahunacart-specs {
    width: 100%;
    /* Fixed, so the width below is the column rather than a suggestion an
       unusually long label in one group can talk the engine out of. */
    table-layout: fixed;
    border-collapse: collapse;
    margin-block: 0 1rem;
    font-size: 0.95em;
}
.kahunacart-specs:last-child {
    margin-bottom: 0;
}
/* The group heading. A caption rather than a heading element above the table,
   so the association between the two survives without markup that repeats. */
.kahunacart-specs-group {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    color: var(--kc-fg);
    padding-block: 0.5rem 0.35rem;
}
.kahunacart-spec > * {
    border-top: 1px solid var(--kc-border);
    padding: 0.5rem 0.75rem 0.5rem 0;
    vertical-align: baseline;
    text-align: left;
}
.kahunacart-spec:first-child > * {
    border-top: 0;
}
.kahunacart-spec-label {
    width: 12rem;
    font-weight: 500;
    color: var(--kc-muted);
    /* A label longer than the column is trimmed with an ellipsis rather than
       allowed to wrap: the label is the half that can be trusted to be short,
       and a merchant who writes an essay in one gets a tidy table and a hint
       to shorten it. The full text is in the DOM either way. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kahunacart-spec-value {
    padding-right: 0;
    color: var(--kc-fg);
    /* Fixed layout will not widen a column for an unbreakable string, so a
       long URL or SKU breaks rather than spilling out of the table. */
    overflow-wrap: anywhere;
}
/* Markdown inside a cell: the paragraphs a description would get, without the
   leading and trailing margin that would push the row open. */
.kahunacart-spec-prose > :first-child {
    margin-top: 0;
}
.kahunacart-spec-prose > :last-child {
    margin-bottom: 0;
}
.kahunacart-swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 3px;
    border: 1px solid var(--kc-border-strong);
    vertical-align: -0.1em;
    margin-right: 0.4rem;
}
.kahunacart-spec-hex {
    font-family: var(--kc-mono);
    font-size: 0.9em;
    color: var(--kc-muted);
}
/* A value that is also a place to go. Underlined on hover rather than always,
   because a spec table where every second cell is blue and underlined reads as
   a list of links rather than as a table of facts; the colour is what says it
   is one, and the underline confirms it under the pointer. */
.kahunacart-attribute-link {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px dotted var(--kc-border-strong);
}
.kahunacart-attribute-link:hover,
.kahunacart-attribute-link:focus-visible {
    color: var(--kc-accent);
    border-block-end-color: currentColor;
}

/* ── product-safety: the Product safety section ──────────────────────────────
   A closed <details> under the specification table: the manufacturer, the EU
   responsible person and the warnings are on the page for the shopper and the
   regulator who need them, and out of the way of everybody else. The parties
   sit side by side where there is room and stack on a phone. */
.kahunacart-product-safety {
    margin-block: 1.75rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
}
.kahunacart-product-safety-title {
    cursor: pointer;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--kc-fg);
}
.kahunacart-product-safety-title:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
    border-radius: var(--kc-radius);
}
.kahunacart-product-safety-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem 1.5rem;
    padding: 0 1rem 1rem;
}
.kahunacart-safety-info {
    grid-column: 1 / -1;
}
.kahunacart-safety-heading {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-subtle);
    margin: 0 0 0.4rem;
}
.kahunacart-safety-address {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-style: normal;
    color: var(--kc-fg);
    /* An email address or a long website breaks rather than widening the page. */
    overflow-wrap: anywhere;
}
.kahunacart-safety-trade-name,
.kahunacart-safety-contact {
    color: var(--kc-muted);
}
.kahunacart-safety-prose > :first-child {
    margin-top: 0;
}
.kahunacart-safety-prose > :last-child {
    margin-bottom: 0;
}
/* The colour swatch links as one piece with its hex, so the whole thing is the
   target rather than six characters of monospace. */
.kahunacart-attribute-link .kahunacart-spec-hex {
    color: inherit;
}

@media (max-width: 30rem) {
    /* A fixed 12rem is most of a phone's width, so the column becomes a share
       of the table instead, and the label wraps rather than being trimmed:
       there is no room to spare and two lines beat an ellipsis. */
    .kahunacart-spec-label {
        width: 40%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

.kahunacart-listing-more {
    color: var(--kc-muted);
    font-size: 0.92em;
}

/* ── pagination ─────────────────────────────────────────────────────────────

   The pager under a listing. Anchors in a list, because that is what it is
   with scripting off; the filter script only saves the page load.

   The current page is a <span> rather than a link, so it is styled by class
   rather than by :not(a) — a theme overriding the partial keeps whatever
   element it likes and the rule still finds it. */
.kahunacart-pagination {
    margin-block-start: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.kahunacart-pagination-summary {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.92em;
}
.kahunacart-pagination-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
:where(.kahunacart-pagination-list) a,
:where(.kahunacart-pagination-list) span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.25rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    /* Tabular figures so a row of page numbers does not jitter in width as the
       digits change, which is the same reason every money column uses them. */
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-decoration: none;
    color: inherit;
}
:where(.kahunacart-pagination-list) a:hover {
    border-color: var(--kc-border-strong);
    background: var(--kc-surface);
}
/* The page being read: filled, and not a link. */
:where(.kahunacart-pagination-current) span {
    border-color: var(--kc-accent-strong);
    background: var(--kc-accent-strong);
    color: var(--kc-on-accent-strong);
    font-weight: 600;
}
/* Each end of the pager keeps its Previous/Next word in place when there is
   nowhere to go, so the row does not shuffle sideways between pages. */
:where(.kahunacart-pagination-prev, .kahunacart-pagination-next) span {
    border-color: transparent;
    color: var(--kc-subtle);
}
.kahunacart-pagination-gap {
    color: var(--kc-subtle);
    padding-inline: 0.2rem;
}

/* ── sale tiers ─────────────────────────────────────────────────────────────

   A sale's quantity ladder, drawn under the buy button, in the cart, and as a
   one-line badge on a card. */
.kahunacart-sale-tiers {
    margin-block-start: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
}
.kahunacart-sale-tiers-heading {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.kahunacart-sale-tier-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    font-size: 0.9rem;
}
/* The rung in force. `aria-current` carries the same fact to a screen reader,
   so this is emphasis rather than the only signal. */
.kahunacart-sale-tier.is-current {
    font-weight: 600;
    color: var(--kc-accent-ink);
}
.kahunacart-sale-tiers-basis {
    margin: 0.35rem 0 0;
    color: var(--kc-subtle);
    font-size: 0.8rem;
}
/* The card's teaser, painted like the sale badge beside it because it is doing
   the badge's job on a product that has no lower price to show yet. */
.kahunacart-sale-tier-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0.25rem 0 0;
    padding: 0.1rem 0.5rem;
    border-radius: var(--kc-radius);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--kc-accent-ink);
    background: color-mix(in srgb, var(--kc-accent) 12%, transparent);
}
.kahunacart-sale-tier-state {
    margin-block: 1rem;
}
.kahunacart-sale-tier-current {
    margin: 0;
    font-weight: 600;
}
.kahunacart-sale-tier-next {
    margin: 0.2rem 0 0;
    color: var(--kc-accent-ink);
    font-size: 0.92em;
}

@media (max-width: 40rem) {
    /* A table is the one element on the page that cannot wrap, so five columns
       of product titles would push the whole document sideways. `display:
       block` turns the table element itself into the scroll port; the row
       groups inside it are consecutive, so the engine wraps them in a single
       anonymous table box that keeps header and body columns aligned and is
       free to be wider than the port. That box sizes to its content, which is
       why the treatment is confined to widths where the content is going to
       exceed the port anyway — at desktop width it would leave a table
       narrower than the column it sits in. */
    .kahunacart-cart-table,
    .kahunacart-account-orders,
    .kahunacart-order-items {
        display: block;
        max-inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
    .kahunacart-coupon input[type="text"] {
        width: 100%;
    }
    .kahunacart-coupon .button {
        flex: 1;
        justify-content: center;
    }
    .kahunacart-totals {
        min-width: 100%;
    }
    .kahunacart :where(fieldset) {
        padding-inline: 0.85rem;
    }
    .kahunacart-buy {
        align-items: stretch;
    }
    .kahunacart-buy .button {
        justify-content: center;
    }
    /* The invoice header is two blocks side by side at desktop width; on a
       phone the right-aligned meta column reads as a mistake. */
    .kahunacart-invoice-meta {
        text-align: start;
    }
    /* The sidebar stops being a sidebar. It stays *above* the listing rather
       than below it: a customer on a phone who has just tapped a department
       needs the subcategory links and the filters before the grid, not after
       fifty product cards. */
    .kahunacart-catalog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .kahunacart-filter-options {
        max-height: 14em;
    }
}

/* ── product labels ────────────────────────────────────────────────────────
   The EU energy label's class arrow and the other labels, near the price.
   The arrow is inline SVG sized in em, so it grows with the price beside it:
   the regulation asks for its letter to be "a font size equivalent to that
   of the price". A label image is held to the same height as the arrow. */
.kahunacart-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-block: 0.5rem;
}
.kahunacart-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.kahunacart-label[hidden] {
    display: none;
}
.kahunacart-label-open {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    border-radius: 3px;
    color: inherit;
}
.kahunacart-label-open:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}
.kahunacart-energy-arrow {
    display: block;
    width: 4.2em;
    height: 2em;
}
.kahunacart-label-image {
    display: block;
    width: auto;
    height: 2.4rem;
}
.kahunacart-label-sheet {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--kc-accent-ink);
}
.kahunacart-labels--compact {
    margin-block: 0.25rem 0;
    font-size: 0.85rem;
}

/* ── lightbox ──────────────────────────────────────────────────────────────
   A native <dialog>, filled by kahunacart-lightbox.js. The dialog is the
   whole viewport and the picture sits in the middle of it, so a click on the
   dark space around the picture is a click on the dialog, which closes it. */
.kahunacart-lightbox {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 3rem 3.5rem;
    border: 0;
    background: transparent;
    color: #fff;
}
.kahunacart-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: kahunacart-lightbox-in var(--kc-dur) var(--kc-ease);
}
.kahunacart-lightbox::backdrop {
    background: rgb(0 0 0 / 0.82);
}
.kahunacart-lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}
.kahunacart-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    border-radius: var(--kc-radius);
}
.kahunacart-lightbox-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1rem;
    font-size: 0.9rem;
    text-align: center;
}
.kahunacart-lightbox-counter {
    opacity: 0.75;
}
.kahunacart-lightbox-link {
    color: #fff;
    text-decoration: underline;
}
.kahunacart-lightbox-close,
.kahunacart-lightbox-prev,
.kahunacart-lightbox-next {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.kahunacart-lightbox-close:hover,
.kahunacart-lightbox-prev:hover,
.kahunacart-lightbox-next:hover,
.kahunacart-lightbox-close:focus-visible,
.kahunacart-lightbox-prev:focus-visible,
.kahunacart-lightbox-next:focus-visible {
    background: rgb(255 255 255 / 0.28);
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.kahunacart-lightbox-close { top: 0.6rem; right: 0.6rem; }
.kahunacart-lightbox-prev { left: 0.5rem; top: 50%; translate: 0 -50%; }
.kahunacart-lightbox-next { right: 0.5rem; top: 50%; translate: 0 -50%; }
.kahunacart-lightbox [hidden] {
    display: none;
}
.kahunacart-gallery-zoom {
    display: block;
    cursor: zoom-in;
}
@keyframes kahunacart-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 600px) {
    .kahunacart-lightbox {
        padding: 3.25rem 0.75rem 1rem;
    }
    .kahunacart-lightbox-prev,
    .kahunacart-lightbox-next {
        top: auto;
        bottom: 0.5rem;
        translate: none;
    }
}

/* ── motion preferences ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .kahunacart,
    .kahunacart *,
    .kahunacart *::before,
    .kahunacart *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    /* The lightbox is moved to the page's body, outside every .kahunacart. */
    .kahunacart-lightbox[open] {
        animation: none;
    }
}

/* The customer's picture on the credentials page. Round, because it is a
   portrait; sunk background so a transparent or slow image still reads as a
   frame rather than a hole. */
/* Picture beside name and address, one row, above the form. */
.kahunacart-account-profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
}
.kahunacart-account-profile-header .kahunacart-account-identity { margin: 0; }

.kahunacart-account-avatar {
    margin: 0;
    flex: none;
}

.kahunacart-account-avatar img {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--kahunacart-surface-sunk, rgba(127, 127, 127, .12));
}

/* ── w5-customers ── */

/* Wishlists. One card per list, with the housekeeping folded into <details>
   underneath so the page reads as the products it holds. */
.kahunacart-wishlist-list,
.kahunacart-wishlist-items,
.kahunacart-review-list,
.kahunacart-review-distribution {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kahunacart-wishlist-list {
    display: grid;
    gap: 1.1rem;
}
.kahunacart-wishlist-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-card);
}
.kahunacart-wishlist-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-block-end: 0.8rem;
}
.kahunacart-wishlist-header :where(h2) {
    margin: 0;
    font-size: 1.1em;
}
.kahunacart-wishlist-count,
.kahunacart-wishlist-panel-summary {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}

.kahunacart-wishlist-items {
    display: grid;
    gap: 0.85rem;
}
.kahunacart-wishlist-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.9rem;
    padding-block-end: 0.85rem;
    border-block-end: 1px solid var(--kc-border);
}
.kahunacart-wishlist-item:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}
/* Dimmed rather than removed: an unpublished product stays on the list so its
   owner can see what happened and take it off themselves. */
.kahunacart-wishlist-item--unavailable {
    opacity: 0.72;
}
.kahunacart-wishlist-media {
    margin: 0;
    flex: none;
}
.kahunacart-wishlist-media img {
    display: block;
    width: 5rem;
    height: auto;
    border-radius: var(--kc-radius);
}
.kahunacart-wishlist-title {
    margin: 0 0 0.2rem;
    font-size: 1em;
}
.kahunacart-wishlist-variant,
.kahunacart-wishlist-note,
.kahunacart-wishlist-unavailable {
    margin: 0.15rem 0 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}
.kahunacart-wishlist-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    text-align: end;
}
.kahunacart-wishlist-quantity {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85em;
}
.kahunacart-wishlist-quantity input[type="number"] {
    width: 4.5rem;
}

.kahunacart-wishlist-empty,
.kahunacart-reviews-empty,
.kahunacart-review-already,
.kahunacart-review-signin {
    color: var(--kc-muted);
}
.kahunacart-wishlist-move-all {
    margin-block-start: 0.9rem;
}
.kahunacart-wishlist-settings,
.kahunacart-wishlist-estimate {
    margin-block-start: 0.9rem;
    font-size: 0.95em;
}
.kahunacart-wishlist-settings :where(summary),
.kahunacart-wishlist-estimate :where(summary) {
    cursor: pointer;
    color: var(--kc-muted);
}
.kahunacart-wishlist-form {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    margin-block-start: 0.8rem;
}
.kahunacart-wishlist-share {
    margin-block-start: 0.8rem;
}
.kahunacart-wishlist-share input {
    width: 100%;
    font-family: var(--kc-mono);
    font-size: 0.85em;
}
.kahunacart-wishlist-share-hint {
    margin: 0.3rem 0 0;
    color: var(--kc-muted);
    font-size: 0.85em;
}
.kahunacart-wishlist-add {
    margin-block-start: 0.6rem;
}
.kahunacart-wishlist--shared .kahunacart-wishlist-name {
    margin-block-start: 0;
    color: var(--kc-muted);
}

/* Reviews. */
.kahunacart-reviews {
    margin-block-start: 2rem;
}
.kahunacart-review-summary {
    display: grid;
    gap: 0.35rem;
    margin-block-end: 1.2rem;
}
.kahunacart-review-average {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--kc-accent-ink);
}
.kahunacart-review-count {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}
/* The columns live on the list and each row takes them as a subgrid, so the
   labels are as wide as the longest one ("5 out of 5 stars" on one line,
   whatever the theme's font size or the language) and every bar starts at
   the same place. */
.kahunacart-review-distribution {
    display: grid;
    grid-template-columns: max-content minmax(4rem, 1fr) max-content;
    gap: 0.25rem 0.75rem;
    margin-block-start: 0.5rem;
    max-width: 26rem;
    font-size: 0.85em;
}
.kahunacart-review-bar-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}
.kahunacart-review-bar-label {
    white-space: nowrap;
}
.kahunacart-review-bar-label,
.kahunacart-review-bar-count {
    color: var(--kc-muted);
}
.kahunacart-review-bar-count {
    text-align: end;
}
.kahunacart-review-bar {
    display: block;
    height: 0.5rem;
    border-radius: var(--kc-radius);
    background: color-mix(in srgb, var(--kc-fg) 10%, transparent);
    overflow: hidden;
}
.kahunacart-review-bar-fill {
    display: block;
    height: 100%;
    background: var(--kc-accent);
}

.kahunacart-review-list {
    display: grid;
    gap: 1.1rem;
}
.kahunacart-review {
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--kc-border);
}
.kahunacart-review:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}
.kahunacart-review-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9em;
}
.kahunacart-review-author {
    font-weight: 600;
}
.kahunacart-review-verified {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--kc-success);
    border-radius: var(--kc-radius);
    color: var(--kc-success);
    font-size: 0.85em;
}
.kahunacart-review-stars {
    color: var(--kc-accent-ink);
    letter-spacing: 0.05em;
}
/* A product's stars on a card (partials/kahunacart-rating.html.twig): five
   faded stars with the lit row laid over them, cut to the average's width, so
   a 4.3 lights four stars and a third. The faded row is the lit color mixed
   down; the opacity is for a browser without color-mix(). */
.kahunacart-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0;
    font-size: 0.9em;
}
.kahunacart-rating-stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
}
.kahunacart-rating-stars > span:last-child {
    opacity: 0.3;
}
@supports (color: color-mix(in srgb, red, blue)) {
    .kahunacart-rating-stars > span:last-child {
        opacity: 1;
        color: color-mix(in srgb, currentColor 30%, transparent);
    }
}
.kahunacart-rating-stars-lit {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
}
.kahunacart-rating-count {
    color: var(--kc-muted);
}
.kahunacart-review-date {
    color: var(--kc-muted);
}
.kahunacart-review-title {
    margin: 0.4rem 0 0.25rem;
    font-size: 1em;
}
.kahunacart-review-body {
    margin: 0;
}

.kahunacart-review-form {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    margin-block-start: 1.5rem;
}
.kahunacart-review-form :where(input[type="text"], input[type="email"], textarea) {
    width: 100%;
    max-width: 32rem;
}
.kahunacart-review-rating {
    margin: 0;
    padding: 0;
    border: 0;
}
.kahunacart-review-rating legend {
    margin-block-end: 0.35rem;
    padding: 0;
}
/* The star picker. Each radio sits before its own label; the radios are
   hidden but still take the keyboard. Lit stars are the row's own color
   (`.kahunacart-review-stars`, which a theme may set), unlit ones the same
   color faded, so all five show on any background. In `color`, currentColor
   is the row's color; the border color is for a browser without color-mix(). */
.kahunacart-review-rating-stars {
    position: relative;
    display: flex;
    width: max-content;
    letter-spacing: 0;
}
.kahunacart-review-rating-input {
    /* Inside the row, so focusing it when a star is clicked never scrolls. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.kahunacart-review-rating-choice {
    display: inline-flex;
    padding: 0.15rem;
    border-radius: var(--kc-radius);
    color: var(--kc-border-strong);
    color: color-mix(in srgb, currentColor 30%, transparent);
    cursor: pointer;
    transition: color var(--kc-dur, 0.15s) var(--kc-ease, ease), transform var(--kc-dur, 0.15s) var(--kc-ease, ease);
}
.kahunacart-review-rating-choice svg {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
}
/* Picked: every star up to the checked one is lit. */
.kahunacart-review-rating-stars:has(.kahunacart-review-rating-input:checked) .kahunacart-review-rating-choice {
    color: inherit;
}
.kahunacart-review-rating-input:checked + .kahunacart-review-rating-choice ~ .kahunacart-review-rating-choice {
    color: var(--kc-border-strong);
    color: color-mix(in srgb, currentColor 30%, transparent);
}
/* Pointing: every star up to the one under the pointer, whatever is picked.
   One class heavier than the two rules above, so it wins over them. */
.kahunacart-review-rating .kahunacart-review-rating-stars:hover .kahunacart-review-rating-choice {
    color: inherit;
}
.kahunacart-review-rating .kahunacart-review-rating-stars .kahunacart-review-rating-choice:hover ~ .kahunacart-review-rating-choice {
    color: var(--kc-border-strong);
    color: color-mix(in srgb, currentColor 30%, transparent);
}
.kahunacart-review-rating-choice:hover {
    transform: scale(1.12);
}
.kahunacart-review-rating-input:focus-visible + .kahunacart-review-rating-choice {
    outline: 2px solid var(--kc-focus, var(--kc-accent));
    outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
    .kahunacart-review-rating-choice { transition: none; }
    .kahunacart-review-rating-choice:hover { transform: none; }
}
.kahunacart-review-help,
.kahunacart-review-moderation {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.85em;
}

@media (max-width: 40rem) {
    /* The actions stop being a third column and sit under the row they act on;
       three columns at phone width leaves the title two words wide. */
    .kahunacart-wishlist-item {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .kahunacart-wishlist-item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        text-align: start;
    }
}

/* ── end w5-customers ── */

/* ── w6-pay ── */

/* The express-pay region, at the top of the form: a caption in the same small
   muted voice the form uses for its own labels, the buttons in a row under it,
   then a divider with "or continue below" set into the line. The wrapper
   carries the merchant's style as custom properties; every button is drawn to
   them by its provider, and the layout here only sizes the slots.

   A slot is capped, because a lone wallet button stretched across the whole
   column reads as a banner rather than as one of two ways to pay. Two or three
   sit side by side at that cap and wrap when the column runs out. A theme that
   wants a different cap sets `--kahunacart-express-max-width`; the floor is the
   merchant's own `express.min_width`, and neither ever pushes past the column. */
.kahunacart-express {
    margin: 0 0 1.5rem;

    /* The colours a button drawn on the merchant's `auto` theme paints itself
       with, and the reason `auto` is the default. A wallet button is a solid
       slab, and a slab picked once in the settings is wrong half the time on a
       storefront that has a dark mode — black on black is a button that has
       disappeared. These follow the storefront's own ink and ground instead,
       so the button is dark with a light label on a light page and light with
       a dark label on a dark one, with nothing for the merchant to keep in
       step and no second setting to find.

       On a theme that publishes --kahunacart-fg and --kahunacart-bg this lands
       on the theme's own palette for free; anywhere else --kc-fg and --kc-bg
       fall through to CanvasText and Canvas, which follow the page's used
       colour-scheme like everything else here. A theme that wants its express
       buttons some other colour sets these three itself — on a selector that
       reaches .kahunacart-express, which its own scoping class already gives
       it. A merchant who picked dark or light outright gets that on both sides
       of the palette and never reads these.

       `outline` reads one of them. It has no fill to be wrong, but a black
       edge and a black label disappear on a dark page just as a black slab
       does, and picking "outlined" is a choice about the button's edge rather
       than a choice to be invisible — so its border and its text come from
       --kahunacart-express-auto-bg, which is the page's own ink, over nothing
       at all. */
    --kahunacart-express-auto-bg: var(--kc-fg);
    --kahunacart-express-auto-fg: var(--kc-bg);
    --kahunacart-express-auto-border: transparent;
}

.kahunacart-express-heading {
    margin: 0 0 0.5rem;
    color: var(--kc-muted);
    font-size: 0.9em;
    text-align: start;
}

.kahunacart-express-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
}

.kahunacart-express-button {
    flex: 1 1 var(--kahunacart-express-min-width, 200px);
    min-width: min(100%, var(--kahunacart-express-min-width, 200px));
    max-width: var(--kahunacart-express-max-width, 20rem);
    height: var(--kahunacart-express-height, 48px);
}

.kahunacart-express-button > * {
    width: 100%;
    height: 100%;
    border-radius: var(--kahunacart-express-radius, 6px);
}

/* "or continue below", set in the middle of a rule the way every checkout
   draws it. The two halves of the line are pseudo-elements, so the partial's
   markup stays one paragraph and a theme that already copied it still gets
   the divider. */
.kahunacart-express-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
    color: var(--kc-muted);
    font-size: 0.85em;
}

.kahunacart-express-or::before,
.kahunacart-express-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--kc-border);
}

/* On the cart the buttons come after Checkout, so the divider leads, set in
   the same rule, and just says "or". The buttons fill the summary column like
   Checkout does, and the page's own ink is softened a little, so a wallet
   button on a dark page is a light button rather than a white slab under
   the primary one. */
.kahunacart-express--after {
    margin: 1.25rem 0 0;
    --kahunacart-express-auto-bg: color-mix(in srgb, var(--kc-fg) 74%, var(--kc-bg));
}
.kahunacart-express--after .kahunacart-express-or {
    margin: 0 0 1rem;
}
.kahunacart-cart-summary .kahunacart-express-button {
    max-width: none;
}

/* Saved payment methods in the account area. */
.kahunacart-payment-method-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kahunacart-payment-method-card {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    opacity: 0.95;
}

.kahunacart-payment-method-card--expired {
    opacity: 0.6;
}

.kahunacart-payment-method-card .kahunacart-payment-method-form {
    display: inline;
    margin: 0;
}

.kahunacart-payment-method-default {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── end w6-pay ── */

/* ── bundle suggestions ──────────────────────────────────────────────────────
   "These are cheaper as a bundle", above the cart table and at the top of
   checkout. A notice rather than an error: nothing is wrong with the basket,
   there is just a cheaper way to buy it. The swap is the button worth filling;
   keeping them separate is a perfectly good answer and stays plain. */
.kahunacart :where(.kahunacart-bundle-suggestion) {
    margin-block: 0 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--kc-accent);
    border-radius: var(--kc-radius-lg);
    background: color-mix(in srgb, var(--kc-accent) 8%, var(--kc-surface));
}
.kahunacart :where(.kahunacart-bundle-suggestion) p {
    margin: 0 0 0.75rem;
}
.kahunacart :where(.kahunacart-bundle-suggestion-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kahunacart :where(.kahunacart-bundle-suggestion-actions) form {
    margin: 0;
}
.kahunacart .kahunacart-bundle-suggestion-actions .button:not(.kahunacart-button-secondary) {
    background: var(--kc-accent-strong);
    border-color: transparent;
    color: var(--kc-on-accent-strong);
    font-weight: 600;
}

/* ── articles with a teaser ─────────────────────────────────────────────────
   The subscribe panel under a paywalled article's teaser, the slim bar above
   an article opened on a free read, and the receipt's Continue reading link.

   Everything reads the storefront's own tokens, so the panel follows the
   theme's palette in light and dark and needs no rules of its own for either.
   Layout is flow and flex-wrap throughout: at phone width the plan rows stack
   and the button goes full width, and nothing depends on a width being there. */
.kahunacart-paywall-page {
    max-inline-size: 46rem;
    margin-inline: auto;
}
.kahunacart-paywall-teaser > :last-child {
    margin-block-end: 0;
}
.kahunacart-paywall-panel {
    margin-block: 1.5rem 2rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--kc-border);
    border-inline-start: 3px solid var(--kc-accent);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-paywall-heading {
    margin-block: 0 0.4rem;
    font-size: 1.2em;
    line-height: 1.3;
}
.kahunacart-paywall-copy {
    margin-block: 0 1rem;
    color: var(--kc-muted);
}
.kahunacart-paywall-register {
    margin-block: 0 1rem;
}
.kahunacart-paywall-offers {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.kahunacart-paywall-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-card);
}
.kahunacart-paywall-offer-label {
    flex: 1 1 12rem;
    font-weight: 600;
}
.kahunacart-paywall-offer-price {
    color: var(--kc-accent-ink);
    font-variant-numeric: tabular-nums;
}
.kahunacart-paywall-plans {
    margin-block: 0 1rem;
}
/* The buttons that take the visitor to a checkout are the ones worth filling,
   the same as the checkout's own. Stated at (0,2,0) so they still read as
   primary on a theme that supplies a flat .button. */
.kahunacart .kahunacart-paywall-subscribe,
.kahunacart .kahunacart-paywall-create,
.kahunacart .kahunacart-continue-reading-link {
    background: var(--kc-accent-strong);
    border-color: transparent;
    color: var(--kc-on-accent-strong);
    font-weight: 600;
}
.kahunacart .kahunacart-paywall-subscribe:hover,
.kahunacart .kahunacart-paywall-create:hover,
.kahunacart .kahunacart-continue-reading-link:hover {
    background: color-mix(in srgb, var(--kc-accent-strong) 85%, var(--kc-fg));
    border-color: transparent;
}
.kahunacart-paywall-signin {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.92em;
}
.kahunacart-paywall-signin a {
    color: var(--kc-accent-ink);
}
@media (max-width: 34rem) {
    .kahunacart-paywall-panel {
        padding: 1rem;
    }
    .kahunacart-paywall-offer .button,
    .kahunacart-paywall-register .button,
    .kahunacart-paywall-plans .button {
        justify-content: center;
        inline-size: 100%;
        box-sizing: border-box;
    }
}

/* The bar above an article on a free read: one line that wraps, with the
   links pushed to the far end when there is room. */
.kahunacart-paywall-meter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin-block: 0 1.25rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--kc-accent) 30%, transparent);
    border-radius: var(--kc-radius);
    background: color-mix(in srgb, var(--kc-accent) 9%, var(--kc-bg));
    font-size: 0.92rem;
}
.kahunacart-paywall-meter-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}
.kahunacart-paywall-meter a {
    color: var(--kc-accent-ink);
    font-weight: 600;
}

/* Continue reading, at the top of the receipt of someone who subscribed from an article. */
.kahunacart-continue-reading {
    margin-block: 0 1.25rem;
}

/* ── mc-fix-1 ────────────────────────────────────────────────────────────────
   Told to a shopper whose cart is in another currency than the link they
   followed (partials/kahunacart-currency-notice.html.twig), and the switch that
   stands in for "See it in USD" when a cart decides the currency. Same quiet
   look as the messages above it; every rule in :where() so a theme wins. */
:where(.kahunacart-currency-notice) {
    margin-block: 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    line-height: 1.45;
}
:where(.kahunacart-currency-notice-text) {
    margin: 0;
}
:where(.kahunacart-currency-notice-form) {
    margin: 0.6rem 0 0;
}
:where(.kahunacart-unavailable-switch) {
    margin: 0 0 0.75rem;
}
:where(button.kahunacart-unavailable-link) {
    margin-inline-start: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kc-accent-ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* ── end mc-fix-1 ── */
/* KahunaCart Subscriptions — the storefront.

   This file styles nothing on its own. Every colour, radius and easing here
   reads a --kc-* token declared by the base plugin's stylesheet, which resolves
   --kahunacart-* (a site's override) → --grav-* (a theme's design tokens) → a
   neutral derived from --kahunacart-fg. See the base plugin's docs/theming.md
   for the full chain and the variable reference.

   Two consequences worth knowing. A theme that already colours KahunaCart
   colours the subscription cards for nothing — there is no second set of
   variables to configure. And with the base plugin's `builtin_css` switched off
   this file is not enqueued either, because with the tokens gone it would paint
   subscription cards in a palette nothing else on the page is using.

   Every rule is scoped to .kahunacart-subscription or .kahunacart-subscriptions,
   and the outer selector is wrapped in :where() wherever it is not load-bearing,
   so a theme's own plain class selector wins on its own weight. Nothing in this
   file forces a value past a theme's, and nothing in it ever should. */

/* ── the list ───────────────────────────────────────────────────────────────
   One wrapper, three destinations: the account tab, the detail page and the
   receipt panel. They differ in spacing and nothing else. */

.kahunacart-subscriptions {
    display: grid;
    gap: 1rem;
}
.kahunacart-subscriptions--account {
    margin-block: 1.5rem;
}
.kahunacart-subscriptions--order {
    margin-block: 1rem;
}
.kahunacart-subscriptions--detail {
    margin-block: 1.5rem;
}

/* ── one subscription ───────────────────────────────────────────────────────
   A card rather than a table row. A subscription carries facts of very
   different lengths — a product name, a status, an interval, an amount and two
   dates — and a table that fits all of them on a phone does not exist. */

.kahunacart-subscription {
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-subscription + .kahunacart-subscription {
    margin-block-start: 0.75rem;
}

/* The same class wraps the buy button's terms, and on a mixed product — plan
   variants and plain one-off variants behind one button — that wrapper is
   hidden whenever the chosen variant sells no plan. The browser's own
   [hidden] rule carries no specificity at all, so any theme rule that gives
   .kahunacart-subscription a display value would leave an empty bordered box
   on the product page. This one is deliberately not wrapped in :where(): it is
   load-bearing, and it is the one place in this file where losing to a theme
   would be a bug rather than a courtesy. The descendant half covers the two
   sentences inside, which are hidden the same way. */
.kahunacart-subscription[hidden],
.kahunacart-subscription [hidden] {
    display: none;
}

/* ── billing options on the buy button ──────────────────────────────────────
   Monthly, Quarterly and Yearly on one membership, as a choice. The pills are
   the base plugin's own option pills, so choosing how often to pay looks
   exactly like choosing a size. What this adds is the fieldset reset and a real
   radio inside each pill: out of sight but not out of reach of the keyboard or
   a screen reader, which is what makes the arrow keys move between options
   without a line of script. */

/* Not wrapped in :where(): a theme's plain `fieldset` rule would otherwise
   win, and a second bordered box inside the terms box is a box too many. */
.kahunacart-subscription-choices {
    margin: 0 0 0.6rem;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}
:where(.kahunacart-subscription-choices) > legend {
    padding: 0;
    margin-block-end: 0.35rem;
}
.kahunacart-subscription-choice {
    position: relative;
}
/* The radio covers its own pill, so a click anywhere on the pill is a click on
   the radio and nothing needs a label-to-input id to find it. */
.kahunacart-subscription-choice input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
/* The picked pill wears the base plugin's selected ring whether or not the
   script has run to add `is-selected`, which it does for older browsers. */
.kahunacart-subscription-choice:has(input:checked) {
    border-color: var(--kc-accent);
    box-shadow: inset 0 0 0 1px var(--kc-accent);
}
.kahunacart-subscription-choice:has(input:focus-visible) {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

/* A cancelled or expired subscription is still shown — the customer needs to
   know it existed and when it ended — but faded, so the live ones above it are
   what the eye lands on. */
.kahunacart-subscription--cancelled,
.kahunacart-subscription--expired {
    opacity: 0.75;
}

.kahunacart-subscription-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-block-end: 0.6rem;
}

.kahunacart-subscription-plan {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.kahunacart-subscription-plan :where(a) {
    color: inherit;
}

/* ── the status chip ────────────────────────────────────────────────────────
   Four tones, not seven colours. A customer needs to know whether something is
   fine, needs attention, or is over; seven colours say none of that, and the
   exact status is spelled out in words inside the chip anyway.

   All four pair a *background* token with a *foreground* token, which sounds
   obvious and is the thing this block previously got wrong: --kc-subtle and
   --kc-muted are both ink, two points on the same neutral ramp, and a theme is
   perfectly entitled to resolve them to the same colour — Kahuna maps both onto
   its --k-muted — at which point the chip's text is invisible against its own
   fill. So the neutral chip now sits on --kc-surface-2 nudged one step away
   from the card it is on, and carries --kc-fg, the page's own ink.

   The three tonal chips had the milder version of the same problem: the tint is
   16–20% of a token that is already a mid-tone, and a mid-tone read at 12px bold
   against a 16% wash of itself lands around 2.4–3.9:1 in the base palette —
   under AA either way. Mixing the tone toward --kc-fg fixes it in both modes at
   once and without a media query: on a light page the ink is dark and the tone
   deepens, on a dark page the ink is light and the tone lifts, and the hue is
   still plainly green, amber or red. The plain `color` above each mix is what an
   engine without color-mix() falls back to. */

.kahunacart-subscription-chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--kc-surface-2, var(--kc-surface));
    background: color-mix(in srgb, var(--kc-fg) 10%, var(--kc-surface-2, var(--kc-surface)));
    color: var(--kc-fg);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.kahunacart-subscription-chip--ok {
    background: color-mix(in srgb, var(--kc-success) 16%, transparent);
    color: var(--kc-success);
    color: color-mix(in srgb, var(--kc-success) 65%, var(--kc-fg));
}
.kahunacart-subscription-chip--warn {
    background: color-mix(in srgb, var(--kc-warning) 20%, transparent);
    color: var(--kc-warning);
    color: color-mix(in srgb, var(--kc-warning) 65%, var(--kc-fg));
}
.kahunacart-subscription-chip--bad {
    background: color-mix(in srgb, var(--kc-danger) 16%, transparent);
    color: var(--kc-danger);
    color: color-mix(in srgb, var(--kc-danger) 65%, var(--kc-fg));
}
.kahunacart-subscription-chip + .kahunacart-subscription-chip {
    margin-inline-start: 0.35rem;
}

/* ── the facts ──────────────────────────────────────────────────────────────
   A definition list rather than a table: these are label/value pairs, they wrap
   independently, and a screen reader reads them as pairs for nothing. */

.kahunacart-subscription-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.6rem 1rem;
    margin: 0;
}
.kahunacart-subscription-facts > div {
    min-inline-size: 0;
}
.kahunacart-subscription-facts dt {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kahunacart-subscription-facts dd {
    margin: 0.1rem 0 0;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}
.kahunacart-subscription-interval {
    color: var(--kc-muted);
    font-size: 0.85rem;
}

.kahunacart-subscription-note,
.kahunacart-subscription-hint {
    margin-block: 0.5rem 0;
    color: var(--kc-muted);
    font-size: 0.85rem;
}

/* ── the actions ────────────────────────────────────────────────────────────
   Each button is its own form, so they are laid out as a row of forms rather
   than as a row of buttons. Wrapping is the point: on a phone each action gets
   its own line with its own explanation under it. */

.kahunacart-subscription-actions {
    display: grid;
    gap: 0.85rem;
    margin-block: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--kc-border);
}
.kahunacart-subscription-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0;
}
.kahunacart-subscription-action .kahunacart-subscription-hint {
    margin: 0;
}
.kahunacart-subscription-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.kahunacart-subscription-confirm input {
    margin-block-start: 0.25rem;
}

/* Ending a subscription is the one destructive thing on this page, so it reads
   as one — but quietly, because the customer chose to be here. */
:where(.kahunacart-subscription-cancel) {
    border-color: color-mix(in srgb, var(--kc-danger) 45%, var(--kc-border));
    color: var(--kc-danger);
}

/* ── the orders table ───────────────────────────────────────────────────────
   The one place a table earns its keep: four short, comparable columns that a
   customer scans down rather than reads across. It scrolls inside its own box
   so a narrow screen never scrolls the page sideways. */

.kahunacart-subscription-orders {
    overflow-x: auto;
    margin-block: 0.75rem 1.5rem;
}
.kahunacart-subscription-orders table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.kahunacart-subscription-orders th {
    text-align: start;
    padding: 0.4rem 0.55rem;
    border-block-end: 1px solid var(--kc-border);
    color: var(--kc-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.kahunacart-subscription-orders td {
    padding: 0.45rem 0.55rem;
    border-block-end: 1px solid color-mix(in srgb, var(--kc-border) 60%, transparent);
    vertical-align: middle;
}

/* ── the timeline ───────────────────────────────────────────────────────────
   An ordered list, newest first, because that is the order somebody reading a
   support ticket wants and the markup should say so. */

.kahunacart-subscription-timeline {
    margin: 0.75rem 0 1.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}
.kahunacart-subscription-event {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-block-end: 0.4rem;
    border-block-end: 1px solid color-mix(in srgb, var(--kc-border) 55%, transparent);
    font-size: 0.9rem;
}
.kahunacart-subscription-event time {
    min-inline-size: 6.5rem;
    color: var(--kc-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.kahunacart-subscription-event-what {
    font-weight: 600;
}
.kahunacart-subscription-event-who {
    margin-inline-start: auto;
    color: var(--kc-muted);
    font-size: 0.78rem;
}
/* The two entries a customer actually goes looking for. */
.kahunacart-subscription-event--payment_failed .kahunacart-subscription-event-what,
.kahunacart-subscription-event--past_due .kahunacart-subscription-event-what {
    color: var(--kc-danger);
}

.kahunacart-subscription-back {
    margin-block-start: 1.5rem;
}

/* ── the receipt panel ──────────────────────────────────────────────────────
   Two sentences and a link. Deliberately quiet: the customer came to the
   receipt for the order, and this is a signpost rather than a headline. */

.kahunacart-subscriptions--order .kahunacart-subscription-headline {
    margin-block-end: 0.35rem;
    font-weight: 600;
}
.kahunacart-subscriptions--order .kahunacart-subscription-covered {
    margin-block-end: 0.5rem;
    color: var(--kc-muted);
    font-size: 0.9rem;
}
.kahunacart-subscriptions--order .kahunacart-subscription-manage {
    margin: 0;
}

.kahunacart-account-empty {
    color: var(--kc-muted);
}
/* ===================================
   CODESH - Code Syntax Highlighter
   Complete standalone styles
   =================================== */

/* Main container - base styles */
.codesh-block {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    contain: inline-size;
    min-width: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ===================================
   LIGHT MODE (default)
   =================================== */
.codesh-block {
    background-color: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.codesh-block .codesh-header {
    background-color: rgba(229, 231, 235, 0.15);
    border-bottom: 1px solid rgba(209, 213, 219, 0.5);
}

.codesh-block .codesh-lang {
    color: #4b5563;
    background-color: rgba(209, 213, 219, 0.4);
}

.codesh-block .codesh-title {
    color: #374151;
}

.codesh-block .codesh-copy,
.codesh-group .codesh-copy {
    color: #4b5563;
    background-color: rgba(209, 213, 219, 0.4);
    border-color: rgba(156, 163, 175, 0.2);
}

.codesh-block .codesh-copy:hover,
.codesh-group .codesh-copy:hover {
    background-color: rgba(156, 163, 175, 0.2);
    color: #111827;
    border-color: rgba(107, 114, 128, 0.2);
}

.codesh-block .codesh-copy.copied,
.codesh-group .codesh-copy.copied {
    background-color: rgba(34, 197, 94, 0.9);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.8);
}

/* Light mode diff colors */
.codesh-block .line .deleted {
    color: #dc2626;
}

.codesh-block .line .inserted {
    color: #16a34a;
}

/* ===================================
   DARK MODE (via .dark ancestor - Tailwind style)
   Using neutral zinc scale based on #1D1D20
   =================================== */
.dark .codesh-block {
    background-color: #1d1d20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
}

.dark .codesh-block .codesh-header {
    background-color: rgba(39, 39, 42, 0.6);
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

.dark .codesh-block .codesh-lang {
    color: #a1a1aa;
    background-color: rgba(51, 51, 55, 0.8);
}

.dark .codesh-block .codesh-title {
    color: #d4d4d8;
}

.dark .codesh-block .codesh-copy,
.dark .codesh-group .codesh-copy {
    color: #d4d4d8;
    background-color: rgba(51, 51, 55, 0.9);
    border-color: rgba(63, 63, 70, 0.5);
}

.dark .codesh-block .codesh-copy:hover,
.dark .codesh-group .codesh-copy:hover {
    background-color: rgba(63, 63, 70, 0.8);
    color: #ffffff;
    border-color: rgba(82, 82, 91, 0.5);
}

.dark .codesh-block .codesh-copy.copied,
.dark .codesh-group .codesh-copy.clpied {
    background-color: rgba(34, 197, 94, 0.9);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.8);
}


/* ===================================
   SHARED STYLES
   =================================== */

/* Header bar */
.codesh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
}

/* Language badge */
.codesh-lang {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Title/filename display */
.codesh-title {
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Copy button */
.codesh-copy {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.codesh-copy-icon {
    width: 1rem;
    height: 1rem;
}

/* Code container */
.codesh-code {
    overflow-x: auto;
}

/* ===================================
   PHIKI DUAL THEME SUPPORT
   Switch between light/dark themes via CSS variables
   Only applies to blocks with codesh-dual-theme class
   =================================== */

/* Dark mode: switch to dark theme colors via CSS variables */
.dark .codesh-dual-theme .shiki,
.dark .codesh-dual-theme .phiki,
.dark .codesh-group .shiki,
.dark .codesh-group .phiki {
    background-color: var(--shiki-dark-bg, var(--phiki-dark-background-color)) !important;
}

.dark .codesh-dual-theme .shiki span,
.dark .codesh-dual-theme .phiki span,
.dark .codesh-group .shiki span,
.dark .codesh-group .phiki span {
    color: var(--shiki-dark, var(--phiki-dark-color)) !important;
    font-style: var(--shiki-dark-font-style, var(--phiki-dark-font-style)) !important;
    font-weight: var(--shiki-dark-font-weight, var(--phiki-dark-font-weight)) !important;
    text-decoration: var(--shiki-dark-text-decoration, var(--phiki-dark-text-decoration)) !important;
}

/* Token backgrounds for diff - only apply when variable is set */
.dark .codesh-dual-theme .shiki span[style*="--shiki-dark-bg"],
.dark .codesh-dual-theme .phiki span[style*="--phiki-dark-background-color"],
.dark .codesh-group .shiki span[style*="--shiki-dark-bg"],
.dark .codesh-group .phiki span[style*="--phiki-dark-background-color"] {
    background-color: var(--shiki-dark-bg, var(--phiki-dark-background-color)) !important;
}

.codesh-block pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    tab-size: 4;
}

.codesh-block code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* No header mode - minimal styling */
.codesh-block.no-header {
    border-radius: 0.5rem;
}

/* ===================================
   LINE STYLES
   =================================== */
.codesh-block .line {
    display: block;
    padding: 0 0.5rem;
    margin: 0 -0.5rem;
}

/* Line numbers - Phiki uses 'line-number' class */
.codesh-block .line-number {
    display: inline-block;
    width: 2.5em;
    margin-right: 1.5em;
    text-align: right;
    color: inherit;
    opacity: 0.4;
    user-select: none;
    -webkit-user-select: none;
    font-variant-numeric: tabular-nums;
}

/* ===================================
   LINE HIGHLIGHTING
   =================================== */
.codesh-block .line.highlight {
    background-color: rgba(250, 200, 50, 0.15);
    box-shadow: inset 3px 0 0 0 #d19a00;
}

.codesh-block .line.highlight .line-number {
    opacity: 0.6;
}

/* ===================================
   LINE FOCUS
   =================================== */
.codesh-block.has-focus .line:not(.focus) {
    opacity: 0.35;
}

.codesh-block .line.focus {
    background-color: rgba(59, 130, 246, 0.12);
    box-shadow: inset 3px 0 0 0 #3b82f6;
}

.codesh-block .line.focus .line-number {
    opacity: 0.6;
}

/* ===================================
   ERROR FALLBACK
   =================================== */
.codesh-block.codesh-error pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */
.codesh-block pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.codesh-block pre::-webkit-scrollbar-track {
    background: transparent;
}

.codesh-block pre::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.codesh-block pre::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* ===================================
   CODE GROUPS - Tabbed Code Blocks
   =================================== */
.codesh-group {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    contain: inline-size;
    min-width: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Light mode group */
.codesh-group {
    background-color: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Dark mode group - zinc scale */
.dark .codesh-group {
    background-color: #1d1d20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
}

/* Group header */
.codesh-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: rgba(229, 231, 235, 0.8);
    border-bottom: 1px solid rgba(209, 213, 219, 0.5);
}

.dark .codesh-group-header {
    background-color: rgba(39, 39, 42, 0.6);
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

/* Tabs container */
.codesh-group-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.codesh-group-tabs::-webkit-scrollbar {
    display: none;
}

/* Individual tab */
.codesh-group-tab {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.codesh-group-tab:hover {
    color: #374151;
}

.codesh-group-tab.active {
    color: #111827;
    border-bottom-color: #3b82f6;
}

/* Dark mode tabs */
.dark .codesh-group-tab {
    color: #a1a1aa;
}

.dark .codesh-group-tab:hover {
    color: #d4d4d8;
}

.dark .codesh-group-tab.active {
    color: #f4f4f5;
    border-bottom-color: #3b82f6;
}

/* Tab panels container */
.codesh-group-panels {
    position: relative;
}

/* Individual panel - use higher specificity to override .codesh-block base styles */
.codesh-group-panel.codesh-block {
    display: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.codesh-group-panel.codesh-block.active {
    display: block;
}

/* Hide any inner headers - group has its own header */
.codesh-group-panel .codesh-header,
.codesh-group-panel .code-header {
    display: none !important;
}

/* Reset any .code-block wrapper injected by theme */
.codesh-group-panel .code-block {
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    ring: none;
}

/* Reset styles for panels inside groups */
.codesh-group-panel .codesh-code {
    overflow-x: auto;
}

.codesh-group-panel pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    tab-size: 4;
    background: transparent !important;
}

.codesh-group-panel code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* Scrollbar for group panels */
.codesh-group-panel pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.codesh-group-panel pre::-webkit-scrollbar-track {
    background: transparent;
}

.codesh-group-panel pre::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.codesh-group-panel pre::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* ===================================
   LINE WRAPPING
   =================================== */
.codesh-line-wrap pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

.codesh-line-wrap .codesh-code {
    overflow-x: hidden;
}

/* Line numbers with wrapping - use padding/margin technique */
/* Only apply when line numbers are present */
.codesh-line-wrap .line:has(.line-number) {
    padding-left: 4em;
}

.codesh-line-wrap .line-number {
    margin-left: -4em;
}

/* Group panels with line wrap */
.codesh-group-panel.codesh-line-wrap pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}
.toc-anchor {
    transition: hover 0.5s ease;
    position: absolute;
    opacity: 0;
}

.toc-anchor.after {
    margin-left: 5px;
}

.toc-anchor.before {
    margin-left: -22px;
    padding-right: 8px;
}

.toc-anchor:after {
    content: attr(data-anchor-icon);
}

:hover > .toc-anchor, .toc-anchor:focus {
    opacity: .5;
}
#grav-login {
    max-width: 30rem;
    margin: 5rem auto;
    background: #fcfcfc;
    border: 4px solid #eee;
    border-radius: 4px;
    padding: 1rem 3rem 3rem 3rem;
    text-align: center;
}

#grav-login .form-actions {
    text-align: right;
}

#grav-logout {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.alert.info {
    color: #27ae60;
}

.alert.error {
    color: #e74c3c;
}

#grav-login p {
    font-size: small;
    margin: 1rem 0;
    padding: 0;
    text-align: center;
}
#grav-login .form-actions p {
    margin-bottom: 0;
}

#grav-login .button {
    vertical-align: middle;
}

#grav-login .delimiter {
    display: block;
    font-size: 1.6rem;
    letter-spacing: 1px;
    line-height: 1.6rem;
    position: relative;
    text-transform: uppercase;
    margin: 1rem 0;
}

#grav-login .delimiter::after,
#grav-login .delimiter::before {
    background-color: #777777;
    content: "";
    height: 1px;
    position: absolute;
    top: 0.8rem;
    width: 40%;
}
#grav-login .delimiter::before {
    background-image: linear-gradient(to right, #777777, #ffffff);
    left: 0;
}
#grav-login .delimiter::after {
    background-image: linear-gradient(to left, #777777, #ffffff);
    right: 0;
}

#grav-login .rememberme {
    display: inline-block;
    float: left;
    padding: 7px 0;
    vertical-align: middle;
}

#grav-login .rememberme label {
    font-weight: inherit;
    display: inline;
}

.login-status {
    white-space: nowrap;
    vertical-align: middle;
}
.email-change-pending .notice p {
    margin: 0 0 0.5rem 0;
}

.email-change-actions .button {
    margin: 0 0.5rem 0.5rem 0;
}
.form-group.has-errors{background:rgba(255,0,0,.05);border:1px solid rgba(255,0,0,.2);border-radius:3px;margin:0 -5px;padding:0 5px}.form-errors{color:#b52b27}.form-honeybear{display:none;position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:rect(0px, 1px, 1px, 0px)}.form-errors p{margin:0}.form-input-file input{display:none}.form-input-file .dz-default.dz-message{position:absolute;text-align:center;left:0;right:0;top:50%;transform:translateY(-50%);margin:0}.form-input-file.dropzone{position:relative;min-height:70px;border-radius:3px;margin-bottom:.85rem;border:2px dashed #ccc;color:#aaa;padding:.5rem}.form-input-file.dropzone .dz-preview{margin:.5rem}.form-input-file.dropzone .dz-preview:hover{z-index:2}.form-input-file.dropzone .dz-preview .dz-image img{margin:0}.form-input-file.dropzone .dz-preview .dz-remove{font-size:16px;position:absolute;top:3px;right:3px;display:inline-flex;height:20px;width:20px;background-color:red;justify-content:center;align-items:center;color:#fff;font-weight:bold;border-radius:50%;cursor:pointer;z-index:20}.form-input-file.dropzone .dz-preview .dz-remove:hover{background-color:darkred;text-decoration:none}.form-input-file.dropzone .dz-preview .dz-error-message{min-width:140px;width:auto}.form-input-file.dropzone .dz-preview .dz-image,.form-input-file.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:3px;z-index:1}.filepond--root.form-input{min-height:7rem;height:auto;overflow:hidden;border:0}.form-tabs .tabs-nav{display:flex;padding-top:1px;margin-bottom:-1px}.form-tabs .tabs-nav a{flex:1;transition:color .5s ease,background .5s ease;cursor:pointer;text-align:center;padding:10px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ccc;border-radius:5px 5px 0 0}.form-tabs .tabs-nav a.active{border:1px solid #ccc;border-bottom:1px solid rgba(0,0,0,0);margin:0 -1px}.form-tabs .tabs-nav a.active span{color:inherit}.form-tabs .tabs-nav span{display:inline-block;line-height:1.1}.form-tabs.subtle .tabs-nav{margin-right:0 !important}.form-tabs .tabs-content .tab__content{display:none;padding-top:2rem}.form-tabs .tabs-content .tab__content.active{display:block}.checkboxes{display:inline-block}.checkboxes label{display:inline;cursor:pointer;position:relative;padding:0 0 0 20px;margin-right:15px}.checkboxes label:before{content:"";display:inline-block;width:20px;height:20px;left:0;margin-top:0;margin-right:10px;position:absolute;border-radius:3px;border:1px solid #e6e6e6}.checkboxes input[type=checkbox]{display:none}.checkboxes input[type=checkbox]:checked+label:before{content:"✓";font-size:20px;line-height:1;text-align:center}.checkboxes.toggleable label{margin-right:0}.form-field-toggleable .checkboxes.toggleable{margin-right:5px;vertical-align:middle}.form-field-toggleable .checkboxes+label{display:inline-block}.switch-toggle{display:inline-flex;overflow:hidden;border-radius:3px;line-height:35px;border:1px solid #ccc}.switch-toggle input[type=radio]{position:absolute;visibility:hidden;display:none}.switch-toggle label{display:inline-block;cursor:pointer;padding:0 15px;margin:0;white-space:nowrap;color:inherit;transition:background-color .5s ease}.switch-toggle input.highlight:checked+label{background:#333;color:#fff}.switch-toggle input:checked+label{color:#fff;background:#999}.signature-pad{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:10px;width:100%;height:100%;max-width:700px;max-height:460px;border:1px solid #f0f0f0;background-color:#fff;padding:16px}.signature-pad--body{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;border:1px solid #f6f6f6;min-height:100px}.signature-pad--body canvas{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;box-shadow:0 0 5px rgba(0,0,0,.02) inset}.signature-pad--footer{color:#c3c3c3;text-align:center;font-size:1.2em}.signature-pad--actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px}[data-grav-field=array] .form-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}[data-grav-field=array] .form-row>input,[data-grav-field=array] .form-row>textarea{margin:0;display:inline-block}[data-grav-field=array] .form-row>span[data-grav-array-action]{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:1.9rem;min-height:1.9rem;padding:.25rem;border-radius:3px;cursor:pointer;color:inherit;opacity:.45;transition:opacity .2s ease}[data-grav-field=array] .form-row>span[data-grav-array-action]:hover{opacity:1}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]{cursor:grab}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]:active{cursor:grabbing}.form-data.basic-captcha .form-input-wrapper{border:1px solid #ccc;border-radius:5px;display:flex;overflow:hidden}.form-data.basic-captcha .form-input-prepend{display:flex;color:#333;background-color:#ccc;flex-shrink:0}.form-data.basic-captcha .form-input-prepend img{margin:0}.form-data.basic-captcha .form-input-prepend button>svg{margin:0 8px;width:18px;height:18px}.form-data.basic-captcha input.form-input{border:0}
/* ==========================================================================
   KahunaCart storefront layer
   --------------------------------------------------------------------------
   Dresses the /shop routes — listing, category, search, product, cart,
   checkout, receipt, account, and the sign-in screens a shopper passes
   through — in the kahunacart.com identity defined in css/kahuna.css.

   Two mechanisms, in this order of preference:

   1. The token bridge below. The plugin's own stylesheet
      (plugin://kahunacart/assets/kahunacart.css) resolves every internal
      value through --kahunacart-* first, so naming a token here re-colours
      storefront markup this file never mentions — the invoice, the download
      list, the address book. That is how pages nobody has themed still
      arrive on-brand.

   2. Rules under `.kc-storefront`, for the pages whose *layout* had to change
      rather than their colour: a shop with a real masthead, a product page
      with a gallery beside its buy box, a checkout with a summary that follows
      you down the page.

   `.kc-storefront` is the <main> of partials/base-shop.html.twig, so it holds
   every storefront page whether or not this theme has forked its template —
   which is why the account area, the invoice, and anything a later plugin
   release adds are dressed here without a template of their own. A page the
   theme has not forked is also given a container by the `:not(.kc-shop)` rule
   at the end of this section, since the plugin's own templates emit no wrapper
   and would otherwise run edge to edge.

   Load order: this file is registered at a lower priority than the plugin's
   stylesheet so it emits afterwards, and every rule is scoped under
   .kc-storefront or a kc- component class so it also out-specifies the
   plugin's deliberately-weak `:where()` fallbacks. Either alone would do; both
   together mean a change to the plugin's asset priority cannot quietly undress
   the store.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Token bridge — the whole hand-off to the plugin's stylesheet
   --------------------------------------------------------------------------
   Split by job, the way the plugin uses them: --accent is ink and borders,
   --accent-strong is the only one that ever fills a box. Lagoon reads as the
   store's voice, Board is reserved for the thing you click.
   -------------------------------------------------------------------------- */

:root {
    --kahunacart-fg: var(--ks-koa);
    --kahunacart-bg: var(--ks-salt);
    --kahunacart-muted: var(--ks-koa-soft);
    --kahunacart-subtle: var(--ks-koa-soft);
    --kahunacart-border: var(--ks-line);
    --kahunacart-border-strong: #D6C3A4;

    --kahunacart-accent: var(--ks-lagoon);
    --kahunacart-accent-ink: var(--ks-lagoon-deep);
    --kahunacart-accent-strong: var(--ks-board);
    --kahunacart-on-accent-strong: #FFF6EA;

    --kahunacart-surface: var(--ks-sand);
    --kahunacart-surface-2: var(--ks-sand-soft);
    --kahunacart-surface-sunk: var(--ks-sand-deep);
    --kahunacart-card: var(--ks-card);
    --kahunacart-input: #FFFFFF;

    --kahunacart-radius: 10px;
    --kahunacart-radius-lg: 16px;
    --kahunacart-card-ratio: 4 / 3;
    --kahunacart-font-mono: var(--ks-mono);

    --kahunacart-success: #2E6B47;
    --kahunacart-warning: #8A4A12;
    --kahunacart-danger: #A32E12;

    --kahunacart-ease: ease;
    --kahunacart-duration: 140ms;

    /* The glyph on the line under a greyed-out button. Masked and filled with
       currentColor rather than painted, so it follows whatever ink the line
       is drawn in. */
    --kc-info-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   2. Header cart pill
   --------------------------------------------------------------------------
   Sits in the branded bar on every page, beside the CTA. Sand ground so it
   reads as a control rather than a second call to action — the count badge is
   the only Board on it, and only once there is something to count.
   -------------------------------------------------------------------------- */

.kc-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-cart-link:hover { background: var(--ks-sand); border-color: #D6C3A4; color: var(--ks-koa); }
.kc-cart-link svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-cart-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    min-width: 20px;
    padding: 4px 6px;
    border-radius: 999px;
    text-align: center;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}
.kc-cart-link.kc-has-items .kc-cart-count { background: var(--ks-board); color: #FFF6EA; }

/* The account control beside it: same pill, icon only. */
.kc-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-account-link:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-account-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kc-account-link img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anywhere the bar is not at its full 1120px the cart gives up its label and
   the row tightens, which is what keeps the inline nav links alive down to
   1024px rather than losing them at 1200 — see the matching note in
   css/kahuna.css. Documentation pages follow the same rules: the search icon
   is on every bar now, so nothing here is docs-only any more. */
@media (max-width: 1200px) {
    .kc-nav-in { gap: 20px; }
    .kc-cart-link { padding: 8px 11px; gap: 6px; }
    .kc-cart-label { display: none; }
}

/* Two controls went into a bar that was already full, and on a phone the CTA
   ran off the right edge. The lockup gives up room first — it is the one
   element on the row that is not a destination — and below 400px it comes down
   to the bus, which is the mark people recognise anyway. Nothing is hidden
   that a customer needs: the cart, the account and the CTA all survive. */
@media (max-width: 600px) {
    .kc-nav-in { gap: 10px; }
    .kc-nav-in .kc-brand { min-width: 0; gap: 9px; }
    .kc-nav-in .kc-brand i { width: 38px; height: 38px; }
    .kc-nav-in .kc-brand b { font-size: 19px; }
    .kc-account-link { width: 34px; height: 34px; }
    .kc-cart-link { padding: 7px 9px; }
    .kc-cart-count { min-width: 18px; padding: 3px 5px; font-size: 11px; }
    .kc-nav-in .kc-btn-small { padding: 8px 13px; font-size: 13px; }
}
/* 430px (the widest iPhone) still has room for the wordmark once everything
   above has tightened; 390px does not. */
@media (max-width: 400px) {
    .kc-nav-in .kc-brand b { display: none; }
}

/* Even wordmark-less, a docs bar at 390px (sidebar toggle, bus, search, cart,
   account, menu button) is a tight fit in 342px of gutter. The bar — and only the bar —
   trades 8px of gutter each side for it; the page's own .kc-wrap keeps its 24px. */
@media (max-width: 430px) {
    .kc-nav .kc-nav-in,
    .kc-nav .kc-menu > .kc-wrap { padding-left: 16px; padding-right: 16px; }
    .kc-nav-in { gap: 9px; }
}

/* 360px — the smallest phone still worth designing for — gets one more pass,
   so a docs bar with its sidebar toggle and a header CTA still fits. Every bar
   takes it, so the controls keep their size between docs and the rest. */
@media (max-width: 380px) {
    .kc-account-link,
    .kc-nav-search,
    .kc-menu-toggle { width: 30px; height: 30px; }
    .kc-cart-link { padding: 6px 8px; }
    .kc-nav-in .kc-btn-small { padding: 7px 10px; font-size: 12.5px; }
}

.kc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   3. Shop shell
   --------------------------------------------------------------------------
   The masthead band is Sand-soft against the Salt page, which is the same
   move the page hero makes to separate a hero from the cards below it.
   -------------------------------------------------------------------------- */

.kc-shop-hero {
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
    padding: 52px 0 44px;
}
.kc-shop-hero-in {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.kc-shop-hero-text { flex: 1 1 380px; min-width: 0; }
.kc-shop-hero h1 {
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 12px;
}
.kc-shop-hero .kc-intro { margin: 0; max-width: 54ch; }
.kc-shop-hero-search { flex: 0 1 380px; min-width: 260px; }

/* A narrower masthead for the pages that are a step in a flow rather than a
   place to browse — cart, checkout, receipt, account, sign-in. */
.kc-shop-hero.kc-shop-hero--flow { padding: 44px 0 36px; }
.kc-shop-hero.kc-shop-hero--flow h1 { font-size: clamp(28px, 3.6vw, 38px); }

.kc-shop {
    background: var(--ks-salt);
    padding: 40px 0 88px;
}

/* A storefront page that extends the plugin's has no container inside its
   section, so the section is the band and the container at once: the same
   1120px column as .kc-wrap, with the band's ground still running edge to
   edge. */
.kc-shop.kc-shop-frame { padding-inline: max(24px, calc((100% - 1072px) / 2)); }

/* Storefront pages this theme has not forked — the account area, the invoice,
   whatever a later plugin release adds. The plugin's templates emit a bare
   `.kahunacart` section with no container of its own, so it is given one here
   rather than being left to run the full width of the window. Pages that *are*
   forked carry .kc-shop and bring their own .kc-wrap, hence the :not(). */
.kc-storefront > .kahunacart:not(.kc-shop) {
    display: block;
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 24px 88px;
}
.kc-storefront > .kahunacart:not(.kc-shop) > h1 {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--ks-koa);
}
/* The newsletter's pages put their heading inside a card rather than on the
   section, so the rule above does not reach it; the display face still
   should. Size and spacing stay the plugin's, which fits the card. */
.kc-storefront .kahunacart-newsletters-card h1 {
    font-family: var(--ks-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ks-koa);
}
/* No align-items:start on these: a sticky child cannot travel when its
   track is sized to its own content, and the sidebar and the order summary
   both scrolled away with the page. None of these asides paints anything
   itself, so a stretched column is invisible. */
.kc-shop-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 44px;
}
.kc-shop-layout.kc-shop-layout--flat { grid-template-columns: minmax(0, 1fr); }
.kc-shop-aside { position: sticky; top: calc(var(--ks-nav-h) + 20px); }
.kc-shop-main { min-width: 0; }

@media (max-width: 900px) {
    .kc-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .kc-shop-aside { position: static; }
    .kc-shop-hero { padding: 36px 0 32px; }
    .kc-shop-hero-in { align-items: stretch; gap: 24px; }
    .kc-shop-hero-search { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   4. Shared shop furniture
   -------------------------------------------------------------------------- */

.kc-shop-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
}
.kc-shop-panel + .kc-shop-panel { margin-top: 16px; }
.kc-shop-panel-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-shop-panel--sticky { position: sticky; top: calc(var(--ks-nav-h) + 20px); }

/* The listing writes its own count; the search results region carries the
   plugin's, which says how many matched what — so both wear the same label. */
.kc-shop-count,
.kc-storefront .kahunacart-search-summary {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 18px;
}
.kc-storefront .kahunacart-search-more,
.kc-storefront .kahunacart-listing-more { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

.kc-shop-empty {
    background: var(--ks-card);
    border: 1px dashed var(--ks-line);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: var(--ks-koa-soft);
    font-size: 16px;
}
.kc-shop-empty p { margin: 0 0 18px; }
.kc-shop-empty p:last-child { margin: 0; }

.kc-shop-back { margin: 28px 0 0; font-size: 14.5px; }
.kc-shop-back a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-shop-back a:hover { color: var(--ks-lagoon); }

.kc-shop-note { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

/* Flash messages. The plugin names the scope; each one gets its own tint. */
.kc-storefront .kahunacart-messages { margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.kc-storefront .kahunacart-message {
    margin: 0;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-sand);
    color: var(--ks-koa);
    font-size: 14.5px;
}
/* A private currency notice can offer a fresh cart after a hosted payment. */
.kc-storefront .kahunacart-currency-notice {
    margin: 0 0 24px;
    padding: 13px 16px;
    border: 1px solid var(--ks-line);
    border-inline-start: 4px solid var(--ks-lagoon);
    border-radius: 12px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-koa);
    font-size: 14.5px;
}
.kc-storefront .kahunacart-currency-notice-text { margin: 0; }
.kc-storefront .kahunacart-currency-notice-form { margin: 12px 0 0; }
.kc-storefront .kahunacart-currency-notice-button { max-width: 100%; white-space: normal; }

.kc-storefront .kahunacart-message--success { background: var(--ks-lagoon-mist); border-color: #BBD5D2; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-message--error { background: #F8E2D8; border-color: #E8C3B2; color: #8E2A10; }
.kc-storefront .kahunacart-message--warning { background: #F5E6CE; border-color: #E3CBA1; color: #7A4410; }
/* A link inside a notice, "Sign in" most often. It keeps the notice's own
   colour so it reads on every tint, and stands out by weight and underline. */
.kc-storefront .kahunacart-message a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.kc-storefront .kahunacart-message a:hover { text-decoration-thickness: 2px; }
.kc-storefront .kc-payment-open .kahunacart-message p { margin: 0 0 10px; }
.kc-storefront .kc-payment-open-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.kc-storefront .kc-payment-open-note { font-size: 13.5px; color: var(--ks-koa-soft); }

/* The bundle notice: a cheaper way to buy what is already in the basket.
   Lagoon rather than a warning colour, because nothing is wrong. */
.kc-storefront .kahunacart-message--bundle { background: var(--ks-lagoon-mist); border-color: #BBD5D2; color: var(--ks-koa); }
.kc-storefront .kahunacart-message--bundle p { margin: 0 0 12px; }
.kc-storefront .kc-bundle-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kc-storefront .kc-bundle-actions form { margin: 0; }

/* Buttons. The plugin's templates use the bare `.button` class every Grav
   theme is expected to define; this is that definition, in Board. */
.kc-storefront .button,
.kc-shop-hero .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    padding: 12px 22px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-storefront .button:hover,
.kc-shop-hero .button:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); }

.kc-storefront .kc-btn-ghost,
.kc-storefront .button.kc-btn-ghost {
    background: transparent;
    color: var(--ks-koa);
    border: 1.5px solid var(--ks-koa);
}
.kc-storefront .kc-btn-ghost:hover,
.kc-storefront .button.kc-btn-ghost:hover { background: var(--ks-sand); color: var(--ks-koa); }

.kc-storefront .kc-btn-block { display: block; width: 100%; text-align: center; }

/* Form controls, shared by the checkout, the cart, the filters and the
   estimate box. Inputs are white against the warm grounds so a field always
   reads as somewhere to type. */
.kc-storefront .kc-input,
.kc-storefront input[type="text"],
.kc-storefront input[type="email"],
.kc-storefront input[type="tel"],
.kc-storefront input[type="search"],
.kc-storefront input[type="number"],
.kc-storefront input[type="password"],
.kc-storefront select,
.kc-storefront textarea,
.kc-shop-hero input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kc-input:focus,
.kc-storefront input:focus,
.kc-storefront select:focus,
.kc-storefront textarea:focus,
.kc-shop-hero input[type="search"]:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
.kc-storefront ::placeholder { color: #A8917A; }

/* Selects. Helios's Tailwind forms layer sets appearance:none on every select,
   which takes the native arrow with it, so the arrow is drawn here: a Koa
   chevron on the right, and room for it so a long option never runs under it.
   The second selector outranks .kc-input, whose background shorthand would
   otherwise paint over the arrow. */
.kc-storefront select,
.kc-storefront select.kc-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235C4A3A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 13px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

.kc-storefront .kc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}

/* Tick boxes and radios.
   Helios's Tailwind forms layer already paints these with appearance:none and
   an explicit 1rem box, and fills a checked one from `color` rather than
   accent-color — so this re-points that fill at Lagoon and softens the border
   to the brand line, and must never set `width: auto`, which on a box with no
   native appearance collapses it to its own borders. */
.kc-storefront input[type="checkbox"],
.kc-storefront input[type="radio"],
.kc-auth-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    color: var(--ks-lagoon);
    border-color: #C0AB92;
    cursor: pointer;
}
.kc-storefront input[type="checkbox"] { border-radius: 5px; }
.kc-storefront input[type="checkbox"]:focus,
.kc-storefront input[type="radio"]:focus {
    --tw-ring-color: var(--ks-lagoon);
    border-color: var(--ks-lagoon);
}

.kc-storefront .kc-fieldset {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
/* The delivery address is on the page whether the shopper wants it or not, and
   `hidden` is what keeps it out of the way until they untick "ship to the
   billing address". Said out loud because the browser's own
   `[hidden] { display: none }` sits at (0,1,0) and would lose to any later rule
   of ours giving a fieldset a `display` — and a delivery address that paints
   anyway is a second address form on every checkout. */
.kc-storefront .kc-fieldset[hidden] { display: none; }
.kc-storefront .kc-legend {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    padding: 0;
    margin: 0 0 18px;
    float: left;
    width: 100%;
}
.kc-storefront .kc-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    clear: both;
}
.kc-storefront .kc-field { margin: 0; }
.kc-storefront .kc-field--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .kc-storefront .kc-field-grid { grid-template-columns: 1fr; } }

.kc-storefront .kc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ks-koa);
    margin: 14px 0 0;
    cursor: pointer;
}
.kc-storefront .kc-checkbox input { margin: 2px 0 0; flex: none; }

.kc-storefront .kc-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 8px 0 0; }
.kc-storefront .kc-hint--warn { color: #8A4A12; }

/* Radio rows: payment providers, shipping methods. */
.kc-storefront .kc-choice-list { display: flex; flex-direction: column; gap: 10px; clear: both; }
.kc-storefront .kc-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    background: var(--ks-salt);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-storefront .kc-choice:hover { border-color: #D6C3A4; }
.kc-storefront .kc-choice input { flex: none; }
.kc-storefront .kc-choice:has(input:checked) {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
}
.kc-storefront .kc-choice-label { flex: 1 1 auto; font-weight: 600; }
.kc-storefront .kc-choice-price { font-family: var(--ks-mono); font-size: 14px; color: var(--ks-koa-soft); }

/* A shipping method this basket cannot have, and the sentence that says why.
   The row wraps so the note gets a line of its own under the price rather
   than squeezing in beside it. */
.kc-storefront .kc-choice { flex-wrap: wrap; }
.kc-storefront .kc-choice-note { flex-basis: 100%; font-size: 13px; color: var(--ks-koa-soft); }
.kc-storefront .kc-choice:has(input:disabled) { cursor: default; opacity: .6; }
.kc-storefront .kc-choice:has(input:disabled):hover { border-color: var(--ks-line); }

/* The receipt maths block, shared by cart, checkout and the order page. */
.kc-storefront .kahunacart-totals {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.kc-storefront .kahunacart-totals th,
.kc-storefront .kahunacart-totals td {
    padding: 9px 0;
    text-align: left;
    font-weight: 500;
    color: var(--ks-koa-soft);
    border: 0;
}
.kc-storefront .kahunacart-totals td { text-align: right; font-family: var(--ks-mono); color: var(--ks-koa); font-variant-numeric: tabular-nums; }
.kc-storefront .kahunacart-totals .kahunacart-total th,
.kc-storefront .kahunacart-totals .kahunacart-total td {
    border-top: 1px solid var(--ks-line);
    padding-top: 14px;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ks-koa);
    letter-spacing: -0.01em;
}
.kc-storefront .kahunacart-totals .kahunacart-total td { color: var(--ks-board); }
.kc-storefront .kahunacart-adjustment em { font-style: normal; font-size: 12px; color: #A8917A; }


/* --------------------------------------------------------------------------
   5. Storefront search box
   --------------------------------------------------------------------------
   The plugin's own partial, dressed. Field and button share one rounded
   shell so the masthead reads as a single control.
   -------------------------------------------------------------------------- */

.kc-shop-search .kahunacart-search { display: flex; gap: 0; margin: 0; }
.kc-shop-search .kahunacart-search-field { flex: 1 1 auto; min-width: 0; display: block; margin: 0; }
.kc-shop-search input[type="search"] {
    border-radius: 11px 0 0 11px;
    border-right: 0;
    height: 46px;
}
.kc-shop-search .button {
    flex: none;
    border-radius: 0 11px 11px 0;
    height: 46px;
    padding: 0 20px;
}
.kc-shop-search .button:hover { transform: none; }
.kc-storefront .kahunacart-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. Catalog sidebar
   --------------------------------------------------------------------------
   The plugin's category tree and filter panel, included unmodified and
   dressed here — the same arrangement the demo theme uses, so a change in the
   plugin's markup does not need a fork to be picked up.
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-catalog-nav { display: flex; flex-direction: column; gap: 28px; }

.kc-storefront .kahunacart-nav-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ks-line);
}

.kc-storefront .kahunacart-cat-list { list-style: none; margin: 0; padding: 0; }
.kc-storefront .kahunacart-cat-list .kahunacart-cat-list { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-cat-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.kc-storefront .kahunacart-cat-branch { width: 100%; }
.kc-storefront .kahunacart-cat-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.kc-storefront .kahunacart-cat-summary::-webkit-details-marker { display: none; }
.kc-storefront .kahunacart-cat-summary::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-right: 1.5px solid var(--ks-koa-soft);
    border-bottom: 1.5px solid var(--ks-koa-soft);
    transform: rotate(-45deg);
    transition: transform 140ms ease;
}
.kc-storefront details[open] > .kahunacart-cat-summary::before { transform: rotate(45deg); }

.kc-storefront .kahunacart-cat-link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
}
.kc-storefront .kahunacart-cat-link:hover { background: var(--ks-sand); color: var(--ks-lagoon); }
.kc-storefront .kahunacart-cat-link.is-current { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-cat-count,
.kc-storefront .kahunacart-filter-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    color: #A8917A;
    font-variant-numeric: tabular-nums;
}

.kc-storefront .kahunacart-filters { margin: 0; }
.kc-storefront .kahunacart-filter-group { border: 0; margin: 0 0 20px; padding: 0; }
.kc-storefront .kahunacart-filter-group legend {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    padding: 0;
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-filter-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-storefront .kahunacart-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ks-koa);
    padding: 4px 0;
    cursor: pointer;
}
.kc-storefront .kahunacart-filter-option input { flex: none; }
.kc-storefront .kahunacart-filter-option > span:not(.kahunacart-filter-count) { flex: 1 1 auto; }

.kc-storefront .kahunacart-filter-range { display: flex; align-items: center; gap: 8px; }
.kc-storefront .kahunacart-filter-field { flex: 1 1 0; min-width: 0; }
.kc-storefront .kahunacart-filter-dash { color: var(--ks-koa-soft); flex: none; }
.kc-storefront .kahunacart-filter-price input { padding: 9px 11px; font-size: 14px; }

.kc-storefront .kahunacart-filter-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kc-storefront .kahunacart-filter-actions .button { padding: 10px 18px; font-size: 14px; }
.kc-storefront .kahunacart-filter-clear { font-size: 13.5px; color: var(--ks-koa-soft); text-decoration: underline; }

/* The rest of a facet the `catalog.facets.max_values` cap has shortened. A
   <details> holding real checkboxes in the same form, so opening it costs no
   request; the summary reads like the Clear link above rather than like a
   control, because it reveals rather than does. */
.kc-storefront .kahunacart-filter-more { margin-top: 6px; }
.kc-storefront .kahunacart-filter-more-toggle {
    font-size: 13.5px;
    color: var(--ks-lagoon);
    cursor: pointer;
    padding: 2px 0;
}
.kc-storefront .kahunacart-filter-more-toggle:hover { color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-filter-more > .kahunacart-filter-options { margin-top: 6px; }

/* A value nothing reachable answers. Counts are taken over the listing being
   looked at, so a value that would give an empty grid reads 0 and its input is
   disabled; greying it where it stands rather than dropping it keeps the panel
   from reshuffling under the cursor on every tick. `catalog.facets.empty: hide`
   drops them instead and nothing then reaches these rules. Whatever the shopper
   has ticked is never disabled, at any count. */
.kc-storefront .kahunacart-filter-option.is-disabled,
.kc-storefront .kahunacart-filter-range.is-disabled {
    color: var(--ks-koa-soft);
    opacity: 0.5;
    cursor: not-allowed;
}
.kc-storefront .kahunacart-filter-option.is-disabled input { cursor: not-allowed; }

/* Under a facet whose every value is out of reach: one muted line under the
   heading, rather than a column of a dozen dead boxes all reading 0. */
.kc-storefront .kahunacart-filter-none {
    margin: 0;
    font-size: 13.5px;
    font-style: italic;
    color: var(--ks-koa-soft);
}

/* A category holding nothing under the filters currently on. Still a link: the
   tree is the way out of a corner somebody has filtered themselves into. The
   row rather than the whole item, because a dead branch's children carry the
   class too and two nested opacities multiply. */
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-link,
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-count,
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-branch > .kahunacart-cat-summary {
    opacity: 0.5;
}

/* A specification value that is also a link to the rest of the catalogue
   answering it. Ink rather than Lagoon at rest: a spec table where every
   second cell is brand-coloured reads as a list of links rather than a table
   of facts, and the dotted rule under it is what says it is one. */
.kc-storefront .kahunacart-attribute-link {
    color: var(--ks-koa);
    text-decoration: none;
    border-bottom: 1px dotted var(--ks-line);
}
.kc-storefront .kahunacart-attribute-link:hover,
.kc-storefront .kahunacart-attribute-link:focus-visible {
    color: var(--ks-lagoon);
    border-bottom-color: currentColor;
}
.kc-storefront .kahunacart-attribute-link .kahunacart-spec-hex { color: inherit; }


/* --------------------------------------------------------------------------
   7. Product grid
   -------------------------------------------------------------------------- */

.kc-shop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Four cards in three columns leaves one on its own row, and the add-ons
   section has exactly four now. A grid of four sits two by two instead. */
.kc-shop-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-shop-layout--flat .kc-shop-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: minmax(0, 1fr); } }

.kc-pcard {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.kc-pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); border-color: #D6C3A4; }
.kc-pcard.is-sold-out { opacity: 0.72; }

.kc-pcard-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.kc-pcard-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
    overflow: hidden;
}
.kc-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A product with no picture gets a tonal tile carrying its monogram, in a hue
   picked from its id and held inside the warm band — 15deg to 75deg, rust
   through sand to olive — so a catalog that has never uploaded an image still
   reads as a catalog rather than a list of holes. */
.kc-pcard-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(150deg,
            hsl(var(--ks-tile-hue, 30) 42% 88%),
            hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-pcard-mono {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -0.02em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.5);
}

.kc-pcard-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kc-badge {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
}
.kc-badge--sale { background: var(--ks-board); color: #FFF6EA; border-color: var(--ks-board); }
.kc-badge--soon { white-space: nowrap; color: var(--ks-lagoon-deep); border-color: var(--ks-lagoon-mist); background: var(--ks-lagoon-mist); }
/* Compact rows are too tight for a pill: a quiet one-line label beside the price. */
.kc-compact-soon {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}
.kc-badge--sold-out { background: var(--ks-koa); color: var(--ks-sand); border-color: var(--ks-koa); }
.kc-badge--digital { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

.kc-pcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.kc-pcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kc-pcard-title {
    font-family: var(--ks-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ks-koa);
    margin: 0;
    min-width: 0;
}
.kc-pcard-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ks-board);
    white-space: nowrap;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.kc-pcard-was { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; margin-left: 6px; font-weight: 400; }
/* "Not available in EUR" where a price would be, for a product nobody priced in
   the shopper's currency (KahunaCart 1.4.0). The words come from the plugin's
   own partial; this only says where each place puts them. kahunacart.com sells
   in one currency, so none of it shows there. On a card the line takes the row
   under the name, because the price's own column is too narrow for it. */
.kc-pcard-head:has(.kahunacart-unavailable) { flex-wrap: wrap; row-gap: 2px; }
.kc-pcard-head .kahunacart-unavailable { flex: 0 0 100%; margin: 0; font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-hero-body .kahunacart-unavailable { margin: 0; font-size: 15px; color: var(--ks-koa-soft); }
.kc-compact-link .kahunacart-unavailable { flex: none; margin: 0; font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-price-line .kahunacart-unavailable,
.kc-renew-num .kahunacart-unavailable { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ks-koa-soft); }
.kc-pcard-summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kc-pcard-stock {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A4A12;
    margin-top: auto;
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   7b. Sectioned listing
   --------------------------------------------------------------------------
   The shop page split into blocks by the plugin's `catalog.sections`: the hero
   at the top, the add-ons under it, then the shelf of payment providers. The
   plugin resolves the blocks and this theme draws them, through
   partials/kahunacart-section-{hero,grid,compact}.html.twig.

   The column count each block was configured with arrives as
   --kahunacart-section-columns on the block's own element, which is the
   plugin's public token rather than an internal one, so the number a merchant
   typed into the admin is the number these rules read. Every grid below is
   auto-fill with a real minimum track, so the count is a ceiling and the
   blocks collapse on their own without a media query per block. `auto-fill`
   rather than `auto-fit` because the commonest hero here holds one product,
   and auto-fit would collapse the empty track and stretch that one card across
   the width of two with its text ending halfway.
   -------------------------------------------------------------------------- */

.kc-section { margin-bottom: 48px; }
.kc-section:last-child { margin-bottom: 0; }

.kc-section-title {
    font-family: var(--ks-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ks-line);
}

/* The hero. One card per product, picture beside the words, at most two across
   because a third one is the grid with a longer summary. */
.kc-hero-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    gap: 20px;
    max-width: calc(var(--kahunacart-section-columns, 2) * 34rem);
}
.kc-hero-card {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}
.kc-hero-card:hover { box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); border-color: #D6C3A4; }

/* A hero holding one product is the store's headline and takes the whole row:
   a bigger picture, a bigger title, and the summary set wide beside it. The
   two-across ceiling above is for heroes with two products. */
.kc-hero-list:has(> .kc-hero-card:only-child) {
    grid-template-columns: 1fr;
    max-width: none;
}
.kc-hero-card:only-child { padding: 28px; gap: 32px; }
.kc-hero-card:only-child .kc-hero-media { flex: 1 1 18rem; max-width: 24rem; }
.kc-hero-card:only-child .kc-hero-body { flex: 2 1 22rem; gap: 14px; }
.kc-hero-card:only-child .kc-hero-title { font-size: clamp(28px, 3vw, 36px); }
.kc-hero-card:only-child .kc-hero-summary { font-size: 17px; max-width: 60ch; }

/* Stops shrinking at 8rem, by which width the row is about to wrap anyway and
   a narrower column would be a stripe rather than a picture. */
.kc-hero-media {
    position: relative;
    flex: 1 1 8rem;
    min-width: 8rem;
    max-width: 15rem;
    align-self: flex-start;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
}
.kc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kc-hero-body {
    flex: 3 1 14rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.kc-hero-title {
    font-family: var(--ks-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}
.kc-hero-title a { color: var(--ks-koa); text-decoration: none; }
.kc-hero-title a:hover { color: var(--ks-lagoon); }
.kc-hero-summary {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    margin: 0;
    max-width: 46ch;
}
.kc-hero-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
/* On the baseline of the card whatever length the summary came out, so two
   heroes side by side do not have their buttons at two different heights. */
.kc-hero-action { margin-top: auto; }

/* The grid block. The cards are this theme's own; all this does is cap the
   track count at what the block asked for. */
.kc-section--grid .kc-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    max-width: calc(var(--kahunacart-section-columns, 3) * 22rem);
}

/* The compact block. Rows rather than tiles, for the shelf people scan. */
.kc-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 4px 20px;
    max-width: calc(var(--kahunacart-section-columns, 2) * 26rem);
}
.kc-compact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ks-koa);
    transition: background 140ms ease;
}
.kc-compact-link:hover { background: var(--ks-sand-soft); }
.kc-compact-link:hover .kc-compact-title { color: var(--ks-lagoon); }
.kc-compact-media {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
}
.kc-compact-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The monogram tile is shared with the product card, where it fills a card and
   carries a 40px letter. At thumbnail size that letter is the whole tile. */
.kc-compact-media .kc-pcard-mono { font-size: 17px; }

.kc-compact-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
}
.kc-compact-price {
    flex: none;
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
}

/* Subcategory cards — the department landing page, same card language. */
.kc-storefront .kahunacart-subcategory-grid {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-subcategory-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kahunacart-subcategory-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-storefront .kahunacart-subcategory-link { display: block; padding: 18px; text-decoration: none; color: inherit; }
.kc-storefront .kahunacart-subcategory-media { margin: -18px -18px 14px; }
.kc-storefront .kahunacart-subcategory-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.kc-storefront .kahunacart-subcategory-title { font-family: var(--ks-display); font-size: 16.5px; font-weight: 700; margin: 0 0 4px; }
.kc-storefront .kahunacart-subcategory-count { font-family: var(--ks-mono); font-size: 11.5px; color: var(--ks-koa-soft); }


/* --------------------------------------------------------------------------
   8. Product page
   -------------------------------------------------------------------------- */

.kc-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
}
/* The column stretches so the sticky box inside it has somewhere to travel;
   the bordered box stays the height of the picture rather than growing into a
   tall empty card beside a long description. */
.kc-product-media-col { min-width: 0; }
@media (max-width: 900px) { .kc-product-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.kc-product-media {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--ks-nav-h) + 20px);
}
@media (max-width: 900px) { .kc-product-media { position: static; } }

.kc-product-media .kahunacart-gallery { margin: 0; }
.kc-product-media .kahunacart-gallery-main {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.kc-product-media .kahunacart-gallery-main::-webkit-scrollbar { display: none; }
.kc-product-media .kahunacart-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.kc-product-media .kahunacart-gallery-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kc-product-media .kahunacart-gallery-thumbs {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--ks-line);
    overflow-x: auto;
}
.kc-product-media .kahunacart-gallery-thumbs img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--ks-line);
    display: block;
}

/* The stand-in when a product has no pictures at all. */
.kc-product-ph {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg,
        hsl(var(--ks-tile-hue, 30) 42% 88%),
        hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-product-ph span {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 84px;
    letter-spacing: -0.03em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.45);
}

.kc-product-info { min-width: 0; }
.kc-product-title {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--ks-koa);
}
.kc-product-summary { font-size: 17px; line-height: 1.55; color: var(--ks-koa-soft); margin: 0 0 24px; }
.kc-product-desc { font-size: 15.5px; color: var(--ks-koa); margin: 24px 0 0; }
.kc-product-desc h2 { font-size: 21px; font-weight: 800; margin: 28px 0 10px; }
.kc-product-desc h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.kc-product-desc p { margin: 0 0 14px; }
.kc-product-desc ul, .kc-product-desc ol { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.kc-product-desc ol { list-style: decimal; }
.kc-product-desc li { margin-bottom: 6px; }
.kc-product-desc code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }
.kc-product-desc pre { background: var(--ks-koa); color: #E8DECF; border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.kc-product-desc pre code { background: none; padding: 0; color: inherit; }

/* The buy box: the one panel on the page that fills with Board. */
.kc-product-buy {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
    margin: 0 0 24px;
}
/* The plugin gives the buy form its own bordered surface, which inside this
   panel would read as a box in a box. The panel is the box; the form is
   flattened into it. */
.kc-product-buy .kahunacart-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
}
.kc-product-buy .kahunacart-options,
.kc-product-buy .kahunacart-variant-picker { flex: 1 1 100%; }
.kc-product-buy .kahunacart-option { margin: 0 0 14px; }
.kc-product-buy .kahunacart-option-name {
    display: block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 8px;
}
.kc-product-buy .kahunacart-option-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-product-buy .kahunacart-option-choice {
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ks-line);
    background: var(--ks-salt);
    color: var(--ks-koa);
    cursor: pointer;
}
.kc-product-buy .kahunacart-option-choice[aria-checked="true"] {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-product-buy .kahunacart-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ks-board);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kc-product-buy .kahunacart-compare-price { font-family: var(--ks-mono); font-size: 16px; color: #A8917A; }
.kc-product-buy .kahunacart-qty { flex: none; margin: 0; }
.kc-product-buy .kahunacart-qty input { width: 72px; text-align: center; }
.kc-product-buy .button { margin-left: auto; padding: 13px 26px; }
.kc-product-buy select { max-width: 100%; }

/* "Notify me when it's back", and "when it launches" on a product that isn't
   on sale yet. The plugin draws it as a second box under the buy form, pulled
   up against it; inside this panel it would be a box in a box, so it is a
   section of the panel instead, under a hairline. The email field and the
   button share a row, and the note and the answer sit under them. [hidden]
   is restated because the script shows and hides it as the variant changes. */
.kc-product-buy .kahunacart-stock-alert {
    margin: 18px 0 0;
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--ks-line);
    border-radius: 0;
    background: none;
}
.kc-product-buy .kahunacart-stock-alert[hidden] { display: none; }
.kc-product-buy .kahunacart-stock-alert-guest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px 12px;
    width: 100%;
}
.kc-product-buy .kahunacart-stock-alert-email {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.kc-product-buy .kahunacart-stock-alert-email span {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-product-buy .kahunacart-stock-alert-email input { width: 100%; min-width: 0; }
.kc-product-buy .kahunacart-stock-alert .button { margin-left: 0; white-space: nowrap; }
.kc-product-buy .kahunacart-stock-alert-note,
.kc-product-buy .kahunacart-stock-alert-status {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--ks-koa-soft);
}
.kc-product-buy .kahunacart-stock-alert-status:not(:empty) { margin-top: 2px; color: var(--ks-koa); font-weight: 600; }
.kc-product-buy .kahunacart-stock-alert-watching {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    font-size: 14px;
    font-weight: 700;
}
.kc-product-buy .kahunacart-stock-alert-stop { font-size: 14px; color: var(--ks-koa-soft); }
.kc-product-buy .kahunacart-stock-alert-stop:hover { color: var(--ks-board); }
.kc-product-buy .kahunacart-stock-alert-which span { font-size: 13px; font-weight: 600; color: var(--ks-koa-soft); }
.kc-product-buy .kahunacart-stock-alert-signin { margin: 0; font-size: 14.5px; }
.kc-product-buy .kahunacart-stock-alert-signin a { color: var(--ks-lagoon); font-weight: 700; }
.kc-product-buy .kc-coming-soon { margin: 0; color: var(--ks-koa); font-size: 15px; line-height: 1.55; }
@media (max-width: 520px) {
    .kc-product-buy .kahunacart-stock-alert-guest { grid-template-columns: minmax(0, 1fr); }
    .kc-product-buy .kahunacart-stock-alert .button { width: 100%; }
}

/* Tags: a way of narrowing the catalog, so they are chips, not headings. */
.kc-storefront .kahunacart-tags { margin: 26px 0 0; }
.kc-storefront .kahunacart-tags-title {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.kc-storefront .kahunacart-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    color: var(--ks-koa-soft);
    text-decoration: none;
}
.kc-storefront .kahunacart-tag:hover { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

/* Breadcrumbs, above the product title. */
.kc-storefront .kahunacart-breadcrumbs { margin: 0 0 18px; }
.kc-storefront .kahunacart-breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
}
.kc-storefront .kahunacart-breadcrumb-item + .kahunacart-breadcrumb-item::before {
    content: "/";
    color: #C0AB92;
    margin-right: 8px;
}
.kc-storefront .kahunacart-breadcrumb-item a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-storefront .kahunacart-breadcrumb-item a:hover { color: var(--ks-lagoon); }
.kc-storefront .kahunacart-breadcrumb-current { color: var(--ks-koa-soft); }
.kc-shop-hero .kahunacart-breadcrumbs { margin: 0 0 14px; }


/* --------------------------------------------------------------------------
   9. Cart
   -------------------------------------------------------------------------- */

.kc-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-cart-table { width: 100%; border-collapse: collapse; }
.kc-cart-table thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-cart-table thead th.kc-num,
.kc-cart-table td.kc-num { text-align: right; }
.kc-cart-table tbody td {
    padding: 18px 12px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 15px;
    vertical-align: middle;
}
.kc-cart-table tbody tr:last-child td { border-bottom: 0; }
.kc-cart-table td:first-child, .kc-cart-table th:first-child { padding-left: 0; }
.kc-cart-table td:last-child, .kc-cart-table th:last-child { padding-right: 0; }

.kc-cart-item-title { display: block; font-weight: 600; color: var(--ks-koa); }
.kc-cart-item-sku { display: block; font-family: var(--ks-mono); font-size: 12px; color: #A8917A; margin-top: 3px; }
/* A line on backorder: "2 of 3 on backorder · Expected to ship late October" (KahunaCart 1.3.3). */
.kc-line-backorder { display: block; flex-basis: 100%; font-size: 13px; color: var(--kahunacart-warning); margin-top: 3px; }
.kc-cart-table td.kc-num { font-family: var(--ks-mono); font-variant-numeric: tabular-nums; color: var(--ks-koa); }
.kc-cart-line-total { font-weight: 600; }
.kc-storefront .kc-qty-input { width: 68px; text-align: center; padding: 8px 6px; }

.kc-storefront .kc-remove {
    background: none;
    border: 1px solid transparent;
    color: #A8917A;
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .kc-remove:hover { background: #F8E2D8; color: #8E2A10; border-color: #E8C3B2; }

.kc-cart-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* The discount form and the estimate box, dressed inside their panels. */
/* The plugin gives this form a dashed surface of its own, which inside the
   panel would be a box in a box; and its label repeats the panel's heading
   word for word, so the label is left for screen readers only. */
.kc-storefront .kahunacart-coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.kc-storefront .kahunacart-coupon > label[for="kahunacart-coupon-code"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.kc-storefront .kahunacart-coupon input { flex: 1 1 140px; min-width: 0; }
.kc-storefront .kahunacart-coupon .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-coupon-remove { background: transparent; color: var(--ks-koa-soft); border: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-coupon-remove:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .kahunacart-coupon-active {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border-radius: 8px;
    padding: 8px 11px;
    margin: 0 0 14px;
}

.kc-storefront .kahunacart-estimate-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-estimate-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.kc-storefront .kahunacart-estimate-field { flex: 1 1 100%; }
.kc-storefront .kahunacart-estimate-field > span:first-child { display: block; font-size: 13px; font-weight: 600; color: var(--ks-koa-soft); margin: 0 0 6px; }
.kc-storefront .kahunacart-estimate-form .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-estimate-result { margin: 14px 0 0; font-size: 14px; }
.kc-storefront .kahunacart-estimate-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 12px 0 0; }


/* --------------------------------------------------------------------------
   10. Checkout
   -------------------------------------------------------------------------- */

/* The plugin caps .kahunacart-checkout-form at 42rem, which is right for the
   single stacked column it ships and wrong for two — without the reset the
   form never grows past 672px and the summary sits in the middle of the page
   with the right third empty. Same story for the one-message pages below. */
.kc-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 40px;
    max-width: none;
    align-items: start;
}
@media (max-width: 960px) { .kc-checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.kc-checkout-main { min-width: 0; }
.kc-checkout-aside { min-width: 0; }
.kc-checkout-pay { min-width: 0; }

/* The payment step is one element wrapping the payment choices, the notes and
   the button that spends the money, because the plugin's script greys Place
   order against the controls inside the step it sits in — a method nobody has
   picked has to be in the same element as the button that would charge it. This
   layout draws those in two columns, so the wrapper itself draws no box and its
   two halves take their own places in the grid. */
.kc-step--payment { display: contents; }

@media (min-width: 961px) {
    /* Stated rather than left to auto-placement, because the payment step's two
       halves arrive as separate items in the same flow as the column above
       them, and the summary has to run beside both rather than start level with
       the second. */
    .kc-checkout-main { grid-column: 1; grid-row: 1; }
    .kc-checkout-pay { grid-column: 1; grid-row: 2; }
    /* Stretched to the height of both rows, not the `start` the layout gives
       everything else: a sticky panel cannot travel outside its own box, so
       an aside only as tall as the summary left it scrolling away with the
       page, and Place order went with it. */
    .kc-checkout-aside { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
}

/* ---- express pay ----
   The wallet buttons a provider mounted, at the top of the left column and
   above the first section of the form. The plugin's own sheet draws the
   caption, the row and the "or continue below" divider; this gives them the
   site's voice and the spacing that puts the block in the same rhythm as the
   cards under it. The buttons stay on the column's left edge, level with the
   inputs, and each keeps the plugin's cap so a lone wallet button is a button
   rather than a bar across the column. Nothing renders here today — this shop
   has no express provider — and the rules cost nothing until one is installed. */
.kc-storefront .kahunacart-express {
    margin: 0 0 20px;

    /* What a wallet button paints itself with on the plugin's `auto` theme,
       which is what a store gets until a merchant picks a fixed colour. The
       plugin resolves it from the storefront's ink and ground and would land
       here on its own; it is written out because this site is light-only — it
       sets the theme to light before first paint and strips any dark class —
       and a button that reads its colours off the page should be pinned to the
       one palette this file has rather than left free to follow a visitor's
       system preference into a scheme the rest of the page does not have. */
    --kahunacart-express-auto-bg: var(--ks-koa);
    --kahunacart-express-auto-fg: var(--ks-salt);
    --kahunacart-express-auto-border: transparent;
}

.kc-storefront .kahunacart-express-heading {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-storefront .kahunacart-express-or {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--ks-koa-soft);
}

.kc-storefront .kahunacart-express-or::before,
.kc-storefront .kahunacart-express-or::after { background: var(--ks-line); }

/* Where a Continue lands. The plugin sends the shopper back to the step they
   are now on rather than to the top of the page, so each step wrapper carries
   an id — and the header is sticky, which is what this clears. */
#kahunacart-checkout-address,
#kahunacart-checkout-shipping,
#kahunacart-checkout-payment { scroll-margin-top: calc(var(--ks-nav-h) + 20px); }

.kc-summary-items { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--ks-line); display: flex; flex-direction: column; gap: 12px; }
.kc-summary-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 14px; font-size: 14.5px; }
/* The title takes what the total leaves, so a backorder line wraps onto a row of its own under the two. */
.kc-summary-item-title { color: var(--ks-koa); flex: 1 1 0; min-width: 0; }
.kc-summary-qty { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; }
.kc-summary-item-total { font-family: var(--ks-mono); color: var(--ks-koa); white-space: nowrap; font-variant-numeric: tabular-nums; }

.kc-checkout-aside .kc-shop-panel .button { margin-top: 18px; }
.kc-checkout-aside .kc-shop-back { text-align: center; margin-top: 16px; }

/* ---- the checkout steps ----
   Checkout is one form with a button under each part of it, and the plugin's
   script says out loud which parts are finished: `data-kc-step-ready` on the
   step and on its button, the real `disabled` attribute beside it, and
   `aria-busy` on the delivery region while the options are being fetched. All
   three are set by script alone, so a browser with no scripting meets none of
   them and every button is live — which is the checkout that has always worked
   without JavaScript. */

/* The button that ends a step, under the section it belongs to. The fieldsets
   carry their own 16px below them, so this only tops that up. */
.kc-checkout-main .kc-step-actions,
.kc-checkout-main .kahunacart-step-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 24px;
}

@media (max-width: 560px) {
    .kc-checkout-main .kc-step-actions .button,
    .kc-checkout-main .kahunacart-step-actions .button { width: 100%; text-align: center; }
}

/* In the summary panel there is one button and it is the width of the panel. */
.kc-storefront .kc-step-actions--block,
.kc-storefront .kahunacart-place-order-actions { display: block; margin: 0; }
.kc-storefront .kahunacart-place-order { display: block; width: 100%; text-align: center; }

/* Greyed out while the step it sits under is unfinished. `disabled` is the
   real state; the attribute is the styling hook, and the cursor goes on the
   wrapper because a dead button does not receive the hover itself. */
.kc-storefront .kahunacart-buy .button.kahunacart-sold-out[disabled],
.kc-storefront .kc-step-actions .button[disabled],
.kc-storefront .kc-step-actions .button[data-kc-step-ready="0"],
.kc-storefront .kahunacart-step-actions .button[disabled],
.kc-storefront .kahunacart-step-actions .button[data-kc-step-ready="0"] {
    background: var(--ks-sand);
    color: #A8917A;
    pointer-events: none;
    transform: none;
}

.kc-storefront [data-kc-step-ready="0"] .kc-step-actions,
.kc-storefront .kc-step-actions:has(.button[aria-disabled="true"]),
.kc-storefront [data-kc-step-ready="0"] .kahunacart-step-actions,
.kc-storefront .kahunacart-step-actions:has(.button[aria-disabled="true"]) { cursor: not-allowed; }

/* What a greyed-out button is waiting for, under the button.
   The plugin's script makes this element where a theme has not drawn one, and
   the one it made in the summary panel landed on top of Place order. Every
   button that can be greyed out has one of its own now — both Continues and
   Place order — so the line always appears in the same place: under the
   button, a little below it, reading as a note rather than a caption. Small,
   but in the secondary ink rather than the placeholder grey: it is the
   sentence that says why nothing is happening, and it has to be read. */
.kc-storefront .kc-step-missing,
.kc-storefront .kahunacart-step-missing {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 24px;
    font-family: var(--ks-body);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ks-koa-soft);
}

/* The summary panel's copy sits directly under a full-width button, so it has
   the panel's own spacing rather than a step's. */
.kc-storefront .kc-step-actions--block + .kc-step-missing,
.kc-storefront .kahunacart-place-order-actions + .kahunacart-step-missing { margin: 10px 0 12px; }

/* `hidden` has to win over the flex above it, or an empty line would hold open
   a gap under every button on the page. */
.kc-storefront .kc-step-missing[hidden],
.kc-storefront .kahunacart-step-missing[hidden] { display: none; }

.kc-storefront .kc-step-missing::before,
.kc-storefront .kahunacart-step-missing::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    background: currentColor;
    opacity: .75;
    -webkit-mask: var(--kc-info-glyph) no-repeat center / contain;
    mask: var(--kc-info-glyph) no-repeat center / contain;
}

/* The chevron on a Continue: pressing it takes you to the section below, and
   the glyph says so. Only on the two Continues — Place order goes nowhere on
   the page. */
.kc-storefront .kc-step-actions .button,
.kc-storefront .kahunacart-step-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.kc-storefront .kc-step-chevron,
.kc-storefront .kahunacart-step-chevron { width: 1em; height: 1em; flex: none; }

/* While the delivery options are on their way, and while a method the shopper
   has just picked is being stored and the order repriced. Quiet rather than
   busy: what is there stays readable, it just stops taking clicks until the
   answer has arrived. The summary panel is in the list because the total is one
   of the things about to change, and a figure that fades for a moment is a
   figure nobody reads as final. */
.kc-storefront [data-kc-step][aria-busy="true"],
.kc-storefront #kahunacart-checkout-summary[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
    cursor: progress;
    transition: opacity 140ms ease;
}

/* The address-check panel, when a geocoder proposes a correction. */
.kc-storefront .kahunacart-address-suggestion {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 20px 22px;
    margin: 0 0 20px;
    grid-column: 1 / -1;
}
.kc-storefront .kahunacart-address-suggestion h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--ks-lagoon-deep); }

.kc-storefront .kahunacart-shipping-address,
.kc-storefront .kahunacart-shipping-methods { clear: both; }


/* --------------------------------------------------------------------------
   11. Receipt, processing, denied
   -------------------------------------------------------------------------- */

.kc-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-order-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-order-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 24px; }
.kc-order-meta div { display: flex; flex-direction: column; gap: 4px; }
.kc-order-meta dt,
.kc-order-meta .kc-order-meta-label {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-order-meta dd,
.kc-order-meta .kc-order-meta-value {
    margin: 0;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}

.kc-order-items { width: 100%; border-collapse: collapse; }
.kc-order-items thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-order-items thead th:last-child, .kc-order-items td:last-child { text-align: right; padding-right: 0; }
.kc-order-items th:first-child, .kc-order-items td:first-child { padding-left: 0; }
.kc-order-items tbody td { padding: 15px 12px; border-bottom: 1px solid var(--ks-line); font-size: 15px; }
.kc-order-items tbody tr:last-child td { border-bottom: 0; }

.kc-storefront .kahunacart-status {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    margin-right: 5px;
}
.kc-storefront .kahunacart-status--paid,
.kc-storefront .kahunacart-status--completed { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-status--shipped { background: #F3DEC9; color: #8A4A12; }
.kc-storefront .kahunacart-status--refunded,
.kc-storefront .kahunacart-status--cancelled,
.kc-storefront .kahunacart-status--failed { background: #F8E2D8; color: #8E2A10; }

.kc-storefront .kahunacart-download-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kc-storefront .kahunacart-download {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .kahunacart-download > a { font-weight: 700; color: var(--ks-lagoon); text-decoration: none; }
.kc-storefront .kahunacart-download > a:hover { text-decoration: underline; }
.kc-storefront .kahunacart-download-meta,
.kc-storefront .kahunacart-release-version { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); }

/* Merchant Markdown inside the storefront: licence install steps and offline
   payment instructions. The base sheet resets every list to nothing, which is
   right for navigation and wrong for ten numbered install steps, so the
   defaults are put back here the way .kc-product-desc puts them back on the
   product page. */
.kc-storefront .kahunacart-license-instructions,
.kc-storefront .kahunacart-offline-instructions { font-size: 15px; line-height: 1.55; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-instructions p,
.kc-storefront .kahunacart-offline-instructions p { margin: 0 0 12px; }
.kc-storefront .kahunacart-license-instructions ul,
.kc-storefront .kahunacart-license-instructions ol,
.kc-storefront .kahunacart-offline-instructions ul,
.kc-storefront .kahunacart-offline-instructions ol { list-style: revert; margin: 0 0 14px; padding-left: 22px; }
.kc-storefront .kahunacart-license-instructions li,
.kc-storefront .kahunacart-offline-instructions li { margin-bottom: 6px; }
.kc-storefront .kahunacart-license-instructions code,
.kc-storefront .kahunacart-offline-instructions code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }

/* The licence card in the grav.org licensing layout: the packages a key covers as
   pills under the key, the licence file and the ready-to-run package as real
   buttons, and every H3 of the merchant's instructions folded into a
   <details> so a customer opens the install route they want and never reads
   the other two. */
/* The card itself sits on the same light ground as a download row in the
   panel above it. The plugin's own sheet paints it on --kahunacart-surface,
   which this theme maps to Sand, and a whole card of Sand read as a dark block
   beside its neighbours. */
.kc-storefront .kahunacart-license { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.05); }
.kc-storefront .kahunacart-license + .kahunacart-license { margin-top: 16px; }
/* Inside a receipt panel the card is already on card white, so it drops to the
   page ground and loses the shadow: a card on a card reads as a mistake. */
.kc-storefront .kahunacart-order-panel .kahunacart-license { background: var(--ks-salt); box-shadow: none; }
/* The boxes inside the card (a download row, an install option) are card white
   on the receipt, where the card is on the page ground. On the account tab the
   card is the white thing, so those boxes take the page ground instead and keep
   their edges either way. */
.kc-storefront .kahunacart-account .kahunacart-license-download,
.kc-storefront .kahunacart-account .kahunacart-license-instructions details.kahunacart-license-option { background: var(--ks-salt); }
.kc-storefront .kahunacart-account .kahunacart-license-instructions details.kahunacart-license-option[open] { background: var(--ks-card); }
.kc-storefront .kahunacart-license-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.kc-storefront .kahunacart-license-product { font-size: 20px; font-weight: 800; margin: 0; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-variant { font-weight: 500; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license-keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.kc-storefront .kahunacart-license-keylabel,
.kc-storefront .kahunacart-license-rename-label,
.kc-storefront .kahunacart-license h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license h4 { margin: 0 0 10px; }
.kc-storefront .kahunacart-license-key { font-family: var(--ks-mono); font-size: 17px; font-weight: 600; background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 9px; padding: 6px 12px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-copy { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--ks-line); background: transparent; color: var(--ks-koa); cursor: pointer; }
.kc-storefront .kahunacart-license-copy:hover { background: var(--ks-sand); }
.kc-storefront .kahunacart-license-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 4px; }
.kc-storefront .kahunacart-license-rename-input { flex: 0 1 320px; }
.kc-storefront .kahunacart-license-rename button { flex: none; }
.kc-storefront .kahunacart-license-rename-input { font-size: 14.5px; padding: 8px 12px; border: 1px solid var(--ks-line); border-radius: 9px; background: var(--ks-card); color: var(--ks-koa); }
.kc-storefront .kahunacart-license-rename button { font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--ks-line); background: transparent; color: var(--ks-koa); cursor: pointer; }
.kc-storefront .kahunacart-license-rename button:hover { background: var(--ks-sand); }
.kc-storefront .kahunacart-license-rename-help { flex-basis: 100%; font-size: 13px; color: var(--ks-koa-soft); margin: 0 0 12px; }
.kc-storefront .kahunacart-license-terms { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0 0 8px; padding: 14px 0 0; border-top: 1px solid var(--ks-line); font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license-renew { margin: 0 0 18px; font-size: 14.5px; }
.kc-storefront .kahunacart-license-renew-link { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-storefront .kahunacart-license-renew-link:hover { text-decoration: underline; }
.kc-storefront .kahunacart-license-downloads,
.kc-storefront .kahunacart-license-instructions,
.kc-storefront .kahunacart-license-activations { padding-top: 18px; border-top: 1px solid var(--ks-line); margin-top: 6px; }
@media (max-width: 560px) {
    .kc-storefront .kahunacart-license { padding: 18px; }
    .kc-storefront .kahunacart-license-rename { grid-template-columns: 1fr; }
}
/* The box for an add-on that landed on a key the customer already held: the
   same card as a licence, headed by the add-on's name, the covering key in the
   same code box a key line uses, then the add-on rule's own instructions. */
.kc-storefront .kahunacart-license--addon h4.kahunacart-license-product { font-size: 20px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ks-koa); margin: 0 0 12px; }
.kc-storefront .kahunacart-license-covered { margin: 0 0 6px; font-size: 15px; color: var(--ks-koa); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kc-storefront .kahunacart-license-covered code { font-family: var(--ks-mono); font-size: 15px; font-weight: 600; background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 8px; padding: 4px 10px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-no-new-key { margin: 0 0 16px; font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license--addon .kahunacart-license-instructions { margin-top: 0; padding-top: 16px; }
.kc-storefront .kahunacart-license-covers { margin: 10px 0 0; }
.kc-storefront .kahunacart-license-coverslabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-koa-soft); margin: 0 0 6px; }
.kc-storefront .kahunacart-license-packages { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 14px; padding: 0; }
.kc-storefront .kahunacart-license-package { font-family: var(--ks-mono); font-size: 12.5px; font-weight: 600; color: var(--ks-koa); background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 999px; padding: 4px 11px; }
.kc-storefront .kahunacart-license-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.kc-storefront .kahunacart-license-file-button,
.kc-storefront .kahunacart-license-download-button {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ks-board); color: #FFF6EA; font-weight: 700; font-size: 14px;
    border-radius: 9px; padding: 9px 18px; text-decoration: none; border: 0; white-space: nowrap;
    transition: background .15s ease, transform .15s ease;
}
.kc-storefront .kahunacart-license-file-button:hover,
.kc-storefront .kahunacart-license-download-button:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); text-decoration: none; }
.kc-storefront .kahunacart-license-downloads { margin: 0 0 20px; }
.kc-storefront .kahunacart-license-downloads h4 { margin: 0 0 8px; }
.kc-storefront .kahunacart-license-download { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 12px; }
.kc-storefront .kahunacart-license-download + .kahunacart-license-download { margin-top: 8px; }
.kc-storefront .kahunacart-license-download-name { font-weight: 600; color: var(--ks-koa); overflow-wrap: anywhere; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option { border: 1px solid var(--ks-line); border-radius: 12px; padding: 0 16px; margin: 0 0 10px; background: var(--ks-card); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 10px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary::-webkit-details-marker { display: none; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ks-koa-soft); border-bottom: 2px solid var(--ks-koa-soft); transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option[open] > summary::before { transform: rotate(45deg); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > :not(summary) { margin-left: 17px; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > :last-child:not(summary) { margin-bottom: 14px; }
.kc-storefront .kahunacart-license-instructions pre { background: #2B2118; color: #FFF1DD; border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; overflow-x: auto; font-family: var(--ks-mono); font-size: 13.5px; line-height: 1.6; }
.kc-storefront .kahunacart-license-instructions pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
@media (max-width: 560px) {
    .kc-storefront .kahunacart-license-download { flex-direction: column; align-items: flex-start; }
}

.kc-storefront .kahunacart-offline-instructions {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-board);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 24px;
    font-size: 15px;
}

.kc-order-links { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0 0; font-size: 14.5px; }
.kc-order-links a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-order-links a:hover { text-decoration: underline; }

.kc-storefront .kahunacart-account-offer {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 22px;
    margin: 24px 0 0;
}
.kc-storefront .kahunacart-account-offer-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-account-offer-text { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0 0 16px; }

/* A one-message page — payment in flight, or a download that cannot be
   honored — is centred rather than left in a wide empty column. */
.kc-storefront .kahunacart-processing,
.kc-storefront .kahunacart-denied { max-width: none; }

.kc-shop-notice {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 48px 32px;
}
.kc-shop-notice h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.kc-shop-notice p { font-size: 16px; color: var(--ks-koa-soft); margin: 0 0 20px; }
.kc-shop-notice p:last-child { margin: 0; }
.kc-shop-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 22px;
    border: 3px solid var(--ks-line);
    border-top-color: var(--ks-lagoon);
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .kc-shop-spinner { animation: kc-shop-spin 900ms linear infinite; }
    @keyframes kc-shop-spin { to { transform: rotate(360deg); } }
}


/* --------------------------------------------------------------------------
   12. Account area
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-account-nav { margin: 0 0 28px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}
/* The plugin's base CSS underlines and pads the <li>; the underline here lives on
   the link/span, so the <li> is reset or the current tab shows two rules. */
.kc-storefront .kahunacart-account-nav-item { padding: 0; margin: 0; border: 0; }
.kc-storefront .kahunacart-account-nav-item a,
.kc-storefront .kahunacart-account-nav-item span {
    display: inline-block;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.kc-storefront .kahunacart-account-nav-item a:hover { color: var(--ks-lagoon); }
.kc-storefront .kahunacart-account-nav-item--current span { color: var(--ks-koa); border-bottom-color: var(--ks-board); }
.kc-storefront .kahunacart-account-nav-item--logout { margin-left: auto; }
.kc-storefront .kahunacart-account-nav-item--logout a { color: #A32E12; }

.kc-storefront .kahunacart-account-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-panel > h2 {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-identity { font-size: 15px; color: var(--ks-koa-soft); margin: 0 0 20px; }

/* The customer groups they are in (Founders, Trade), as the catalog's own
   mono pills in lagoon — membership is who they are, not a sale or a warning.
   The name line gives up its gap when they follow it, so the two read as one. */
.kc-storefront .kahunacart-account-identity:has(+ .kahunacart-account-groups) { margin-bottom: 8px; }
.kc-storefront .kahunacart-account-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.kc-storefront .kahunacart-account-group {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    border: 1px solid #BBD5D2;
}
.kc-storefront .kahunacart-account-profile-who .kahunacart-account-groups { margin: 8px 0 0; }

/* Password and security. The form is the Login plugin's generic output inside
   an account panel; these rules name its classes (form-field, form-label,
   switch-toggle, twofa-*) rather than ones this theme controls. */
.kc-storefront .kahunacart-account-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity { margin: 0; line-height: 1.45; }
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity strong {
    display: block;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}
.kc-storefront .kahunacart-account-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--ks-salt), 0 0 0 4px var(--ks-line);
}

/* A form page, not a table page: the card is only as wide as a field wants to
   be, so an email address is not stretched across a 1100px input. */
/* The Account page in two columns: the profile form down the left, the panels
   the add-ons hang on it (payment methods, email preferences) stacked on the
   right. The heading, the nav and the avatar row span both. The form spans a
   generous run of rows so every panel placed after it lands beside it, and
   anything full-width that follows drops below. */
.kc-storefront .kahunacart-account-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
.kc-storefront .kahunacart-account-profile > :not(.kahunacart-account-panel):not(.kahunacart-customer-panel) { grid-column: 1 / -1; }
.kc-storefront .kahunacart-account-profile > .kahunacart-account-panel--credentials { grid-column: 1; grid-row: span 12; max-width: none; }
.kc-storefront .kahunacart-account-profile > .kahunacart-account-panel:not(.kahunacart-account-panel--credentials),
.kc-storefront .kahunacart-account-profile > .kahunacart-customer-panel { grid-column: 2; }
@media (max-width: 860px) {
    .kc-storefront .kahunacart-account-profile { grid-template-columns: minmax(0, 1fr); }
    .kc-storefront .kahunacart-account-profile > .kahunacart-account-panel--credentials { grid-row: auto; }
    .kc-storefront .kahunacart-account-profile > .kahunacart-account-panel,
    .kc-storefront .kahunacart-account-profile > .kahunacart-customer-panel { grid-column: 1; }
}
.kc-storefront .kahunacart-account-panel--credentials .form-field { margin: 0 0 18px; }
.kc-storefront .kahunacart-account-panel--credentials .form-label label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}
.kc-storefront .kahunacart-account-panel--credentials .form-label .required { color: var(--ks-board); margin-left: 2px; }
.kc-storefront .kahunacart-account-panel--credentials .form-description {
    display: block;
    font-size: 13px;
    color: var(--ks-koa-soft);
    margin: 6px 0 0;
}
.kc-storefront .kahunacart-account-panel--credentials input[disabled] {
    background: var(--ks-sand-soft);
    color: var(--ks-koa-soft);
    cursor: not-allowed;
}
.kc-storefront .kahunacart-account-panel--credentials .form-errors { margin: 6px 0 0; font-size: 13px; }

/* The two-factor block is a Form plugin "section": an h3 over a .form-section. */
.kc-storefront .kahunacart-account-panel--credentials h3 {
    font-family: var(--ks-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 26px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--ks-line);
}

/* The yes/no toggle: a segmented pill in the brand colours in place of the
   Form plugin's grey boxes. */
.kc-storefront .switch-toggle {
    display: inline-flex;
    padding: 3px;
    line-height: 1;
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    overflow: hidden;
}
.kc-storefront .switch-toggle label {
    padding: 8px 18px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .switch-toggle label:hover { color: var(--ks-koa); }
.kc-storefront .switch-toggle input:checked + label { background: var(--ks-sand-deep); color: var(--ks-koa); }
.kc-storefront .switch-toggle input.highlight:checked + label { background: var(--ks-lagoon); color: #FFFFFF; }

/* The secret: QR code beside its text form and the regenerate button. */
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    align-items: center;
    padding: 16px;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .twofa-secret img[data-2fa-image] {
    grid-row: span 2;
    width: 128px;
    height: 128px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--ks-line) !important;
    border-radius: 10px;
}
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper > div { font-size: 13.5px; color: var(--ks-koa-soft); align-self: end; }
.kc-storefront .twofa-secret .twofa-wrapper.danger { align-self: start; }
.kc-storefront .twofa-secret-code {
    display: block;
    margin-top: 4px;
    font-family: var(--ks-mono);
    font-size: 14.5px;
    letter-spacing: 0.06em;
    color: var(--ks-koa);
}
.kc-storefront .twofa-secret .button.button-small {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
}
.kc-storefront .twofa-secret .button.button-small:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .twofa-secret .fa { display: none; }

.kc-storefront .kahunacart-account-panel--credentials .buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-empty { color: var(--ks-koa-soft); font-size: 14.5px; margin: 0; }

.kc-storefront .kahunacart-account-orders,
.kc-storefront .kahunacart-account-downloads { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kc-storefront .kahunacart-account-orders th,
.kc-storefront .kahunacart-account-downloads th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-orders td,
.kc-storefront .kahunacart-account-downloads td { padding: 14px 12px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-orders tr:last-child td { border-bottom: 0; }
.kc-storefront .kahunacart-account-orders th:first-child,
.kc-storefront .kahunacart-account-orders td:first-child { padding-left: 0; }
.kc-storefront .kahunacart-account-orders a { color: var(--ks-lagoon); font-weight: 700; text-decoration: none; }

.kc-storefront .kahunacart-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .kc-storefront .kahunacart-address-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-address-card {
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    padding: 18px;
}
/* The add-address tile: dashed, quiet, a big terracotta plus; opened, it becomes
   an ordinary card the width of the row. */
.kc-storefront .kahunacart-address-card--add { background: transparent; border: 1px dashed var(--ks-line-strong, #D6C3A4); padding: 0; }
.kc-storefront .kahunacart-address-card--add:hover { background: var(--ks-card); border-color: var(--ks-board); }
.kc-storefront .kahunacart-address-add-summary { color: var(--ks-koa-soft); font-weight: 600; font-size: 14.5px; }
.kc-storefront .kahunacart-address-add-plus { color: var(--ks-board); font-weight: 300; }
.kc-storefront .kahunacart-address-card--add:has(.kahunacart-address-add[open]) { background: var(--ks-card); border: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-address-add[open] > .kahunacart-address-add-summary { color: var(--ks-koa); font-size: 18px; font-weight: 800; }
.kc-storefront .kahunacart-address-card h3 {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa); }

/* Stock alerts: what the customer is waiting to hear about. One card like the
   other account panels, the alerts as rows under hairlines the way the orders
   table reads, the product in lagoon, and Remove a quiet link that only turns
   Board on hover, because it is not the thing this page is for. */
.kc-storefront .kahunacart-stock-alerts {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-stock-alerts-intro { margin: 0 0 14px; font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-stock-alert-list { display: block; margin: 0; padding: 0; list-style: none; }
.kc-storefront .kahunacart-stock-alert-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--ks-line);
    border-radius: 0;
    background: none;
}
.kc-storefront .kahunacart-stock-alert-name { flex: 1 1 14rem; font-size: 15px; }
.kc-storefront .kahunacart-stock-alert-name a { color: var(--ks-lagoon); font-weight: 700; text-decoration: none; }
.kc-storefront .kahunacart-stock-alert-name a:hover { color: var(--ks-lagoon-deep); text-decoration: underline; }
.kc-storefront .kahunacart-stock-alert-item .kahunacart-stock-alert-variant { margin-left: 6px; font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-stock-alert-item .kahunacart-stock-alert-status {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-sand);
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-stock-alert-remove { margin: 0; }
.kc-storefront .kahunacart-stock-alert-remove .kahunacart-link-button { font-size: 14px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-stock-alert-remove .kahunacart-link-button:hover { color: var(--ks-board); }
.kc-storefront .kahunacart-stock-alerts .kahunacart-account-empty { padding-top: 14px; border-top: 1px solid var(--ks-line); }


/* --------------------------------------------------------------------------
   13. Sign-in and the other Login plugin screens
   --------------------------------------------------------------------------
   The markup is the Login plugin's generic form output, so these rules name
   its classes rather than ones this theme controls.
   -------------------------------------------------------------------------- */

.kc-auth { max-width: 460px; margin: 0 auto; }
.kc-auth-note { margin: 22px 2px 0; }
.kc-auth-note h2 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ks-koa);
}
.kc-auth-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
}
.kc-auth-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 32px 30px;
}
/* The Login plugin ships css/login.css, which gives #grav-login a 4px grey
   border, an off-white fill, 5rem of vertical margin and centred text — a
   whole card of its own, inside this one. Neutralised rather than switched off
   with `built_in_css: false`, because that flag also undresses the screens
   this theme does not style (two-factor, register, the profile form).

   The <h1> is the plugin's own page body, "# User Login" in
   plugin://login/pages/login.md. The masthead above already names the page, so
   it is dropped rather than shown twice — and dropping it also leaves the page
   with a single h1, which is what a screen reader's heading list wants. */
.kc-auth-card #grav-login {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
}
.kc-auth-card #grav-login > h1 { display: none; }
.kc-auth-card #grav-login .form-actions { text-align: left; }
.kc-auth-card #grav-login p { font-size: 14px; text-align: left; margin: 12px 0; }
.kc-auth-card .form-data,
.kc-auth-card .form-field { margin: 0 0 16px; }
.kc-auth-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
    text-align: left;
}
.kc-auth-card .form-input-wrapper { display: block; }
.kc-auth-card input[type="text"],
.kc-auth-card input[type="email"],
.kc-auth-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
}
.kc-auth-card input:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
/* The plugin puts "remember me", "forgot" and the submit button in one
   .form-actions row. Given a full basis it wraps onto a line of its own above
   the two buttons, which is where a tick box belongs. */
.kc-auth-card .rememberme { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 100%; }
.kc-auth-card .rememberme .form-input-wrapper { display: flex; align-items: center; gap: 8px; }
.kc-auth-card .rememberme input { flex: none; }
.kc-auth-card .rememberme label { margin: 0; font-weight: 500; color: var(--ks-koa); }

.kc-auth-card .form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.kc-auth-card .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: 11px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease;
}
.kc-auth-card .button:hover { background: var(--ks-board-deep); color: #FFF6EA; }
.kc-auth-card .button.secondary {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    order: 2;
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 16px;
}
.kc-auth-card .button.secondary:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-auth-card .button[value="login.login"] { order: 1; }
.kc-auth-card .fa { display: none; }
.kc-auth-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.kc-auth-card hr { border: 0; border-top: 1px solid var(--ks-line); margin: 18px 0; }


/* --------------------------------------------------------------------------
   14. Error page
   --------------------------------------------------------------------------
   Shared by the storefront shell and the marketing one — see
   templates/error.html.twig, which picks the shell from the route.
   -------------------------------------------------------------------------- */

.kc-error { text-align: center; padding: 40px 0 24px; max-width: 640px; margin: 0 auto; }
.kc-error-code {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(96px, 18vw, 180px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
    /* Kept inside the warm family: Board to Board-deep. Running it across to
       Lagoon looks good written down and renders a grey-olive mud through the
       middle, because orange to teal passes straight through neutral. */
    background: linear-gradient(105deg, var(--ks-board), var(--ks-board-deep) 55%, #7A3208);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kc-error-title {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 800;
    margin: 14px 0 12px;
    color: var(--ks-koa);
}
.kc-error-message {
    font-size: 17px;
    color: var(--ks-koa-soft);
    margin: 0 auto 8px;
    max-width: 48ch;
}

/* --------------------------------------------------------------------------
   15. Affiliate tab (KahunaCart Affiliates)
   --------------------------------------------------------------------------
   The add-on's account tab at /shop/account/affiliate. Its own sheet paints
   cards and figures on --kahunacart-surface, which this theme maps to Sand,
   and a page of Sand blocks reads darker than every other account tab. These
   rules put its cards on card white with the account panel's border, radius
   and heading, its labels in the licence card's small caps, and its sub-tabs
   in the account navigation's type. Markup and class names are the add-on's
   (templates/partials/kahunacart-affiliates/), so nothing here needs a copy
   of its templates.
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-affiliates { gap: 16px; margin: 0 0 8px; }

/* Every box on the tab is an account panel. */
.kc-storefront .kahunacart-affiliates-card,
.kc-storefront .kahunacart-affiliates-notice,
.kc-storefront .kahunacart-affiliates-intro,
.kc-storefront .kahunacart-affiliates--apply > .kahunacart-affiliates-form,
.kc-storefront .kahunacart-affiliates-stat {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
}
.kc-storefront .kahunacart-affiliates-card > h2,
.kc-storefront .kahunacart-affiliates-notice > h2,
.kc-storefront .kahunacart-affiliates-intro > h2 {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 0 0 12px;
}
.kc-storefront .kahunacart-affiliates p { font-size: 15px; line-height: 1.55; }
.kc-storefront .kahunacart-affiliates-muted,
.kc-storefront .kahunacart-affiliates p.kahunacart-affiliates-muted { font-size: 14px; color: var(--ks-koa-soft); }

/* The tab's own pages: pills in the account navigation's type, the current
   one filled in Koa like the account nav's current tab is underlined. */
.kc-storefront .kahunacart-affiliates-nav ul { gap: 6px; }
.kc-storefront .kahunacart-affiliates-nav a {
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    border-color: var(--ks-line);
    background: var(--ks-card);
}
.kc-storefront .kahunacart-affiliates-nav a:hover { color: var(--ks-lagoon); border-color: #D6C3A4; }
.kc-storefront .kahunacart-affiliates-nav a[aria-current="page"] { color: var(--ks-salt); background: var(--ks-koa); border-color: var(--ks-koa); }

/* The four figures on the overview. */
.kc-storefront .kahunacart-affiliates-stats { gap: 12px; }
.kc-storefront .kahunacart-affiliates-stat { padding: 18px 20px; }
.kc-storefront .kahunacart-affiliates-stat dt,
.kc-storefront .kahunacart-affiliates-label,
.kc-storefront .kahunacart-affiliates-money-currency {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-storefront .kahunacart-affiliates-stat dd {
    font-family: var(--ks-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 6px 0 0;
}
.kc-storefront .kahunacart-affiliates-stat dd.kahunacart-affiliates-stat-note {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ks-koa-soft);
}
.kc-storefront .kahunacart-affiliates-stat--balance { border-color: #BBD5D2; background: var(--ks-lagoon-mist); }

/* A link or a code to copy: the licence key's code box. */
.kc-storefront .kahunacart-affiliates-code {
    font-family: var(--ks-mono);
    font-weight: 600;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 9px;
    padding: 4px 10px;
    color: var(--ks-koa);
}

/* Lines about the partner's standing: the receipt's offline note. */
.kc-storefront .kahunacart-affiliates-status {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-board);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
}

/* The program's terms, above the application form: label and value rows. */
.kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms { gap: 0; margin: 16px 0 0; }
.kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms > li {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 11px 0;
    border-top: 1px solid var(--ks-line);
    font-size: 15px;
}
.kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms > li > strong {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
}

/* Forms: the panel spans the column like every account panel, the fields
   keep the add-on's reading width inside it. */
.kc-storefront .kahunacart-affiliates--apply > .kahunacart-affiliates-form { max-inline-size: none; }
.kc-storefront .kahunacart-affiliates-form > * { max-inline-size: 40rem; }
.kc-storefront .kahunacart-affiliates-field > span,
.kc-storefront .kahunacart-affiliates-field > legend { font-size: 14.5px; font-weight: 600; color: var(--ks-koa); }
.kc-storefront .kahunacart-affiliates fieldset.kahunacart-affiliates-field > legend { padding: 0; margin: 0 0 8px; }
.kc-storefront .kahunacart-affiliates-field small { font-size: 13px; color: var(--ks-koa-soft); }

/* "I've read and accept the program terms." Since Affiliates 1.0.1 the add-on
   keeps the sentence in one span, so its flex row no longer splits the link
   from its full stop. A block still reads best here: the box sits in the first
   line of text and the sentence wraps under it like prose. */
.kc-storefront .kahunacart-affiliates-terms-accept { display: block; font-size: 15px; }
.kc-storefront .kahunacart-affiliates-terms-accept input { margin: 0 8px 0 0; vertical-align: -2px; }

/* Who is applying, above the signed-in form, and the hidden field for scripts. */
.kc-storefront .kahunacart-affiliates-applicant { font-size: 15px; color: var(--ks-koa); margin: 0 0 4px; }
.kc-storefront .kahunacart-affiliates-applicant .kahunacart-affiliates-muted { font-size: 14px; }

/* The public application form at /shop/affiliate/apply, and the pages that
   follow it (check your email, confirm, done). The same panels as the
   Affiliate tab, under a page heading in the account page's type, so applying
   with or without an account looks like one form. */
.kc-storefront .kahunacart-affiliates-public { max-inline-size: none; margin: 0 0 8px; gap: 16px; }
.kc-storefront .kahunacart-affiliates-public > .kahunacart-affiliates-form {
    max-inline-size: none;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
}
.kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-intro > h1,
.kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-notice > h1 {
    font-family: var(--ks-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--ks-koa);
    margin: 0 0 12px;
}
.kc-storefront .kahunacart-affiliates-signin-line { font-size: 15px; margin-top: 4px; }
.kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-actions { margin-top: 8px; }

@media (max-width: 560px) {
    .kc-storefront .kahunacart-affiliates-public > .kahunacart-affiliates-form { padding: 18px; }
    .kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-intro > h1,
    .kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-notice > h1 { font-size: 22px; }
    .kc-storefront .kahunacart-affiliates-card,
    .kc-storefront .kahunacart-affiliates-notice,
    .kc-storefront .kahunacart-affiliates-intro,
    .kc-storefront .kahunacart-affiliates--apply > .kahunacart-affiliates-form { padding: 18px; }
    .kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms > li { grid-template-columns: 1fr; gap: 2px; }
    .kc-storefront .kahunacart-affiliates-stat { padding: 14px 16px; }
    .kc-storefront .kahunacart-affiliates-stat dd { font-size: 22px; }
}

/* A page locked to a customer group: the sign-in form's note about it and the
   access-denied page (login.html.twig, unauthorized.html.twig). */
.kc-auth-note--locked { padding: 16px 18px; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 14px; margin-left: 0; margin-right: 0; }
.kc-auth-note--locked p + p { margin-top: 8px; }
.kc-auth-note--locked a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-auth-note--locked a:hover { text-decoration: underline; }
.kc-locked .kc-kicker { margin: 0 0 6px; }
.kc-locked .kc-ctas { margin-top: 22px; }

/* ── printing ───────────────────────────────────────────────────────────────
   The shop on paper: the page title without its sand band or breadcrumb, one
   column (the order summary, the cart summary and the checkout summary sit
   under the lines instead of beside them), panels as thin outlines, and the
   parts that are only ever pressed left off. This theme draws its own receipt,
   cart, checkout and catalog, so it names their action rows itself; the
   buttons and forms inside them KahunaCart's stylesheet already leaves off. */
@media print {
    .kc-shop-hero {
        background: none;
        border: 0;
        padding: 0 0 16px;
    }
    .kc-shop-hero .kahunacart-breadcrumbs,
    .kc-storefront .kahunacart-breadcrumbs,
    .kc-shop-hero-search,
    .kc-shop-aside,
    .kahunacart-account-offer,
    .kahunacart-account-offer-signin,
    .kc-order-links,
    .kc-shop-back,
    .kc-cart-actions,
    .kc-payment-open-actions,
    .kc-bundle-actions,
    .kc-step-missing,
    .kc-shop-plan-actions,
    .kc-shop-cta-actions,
    .kc-renew-link,
    .kahunacart-checkout-link,
    .kc-cart-aside .kc-btn-block,
    .kc-shop-panel:has(> .kahunacart-no-print:only-of-type),
    .kc-shop-panel:has(.kahunacart-discount):not(:has(.kahunacart-coupon-applied)) {
        display: none !important;
    }
    /* The quantity in the cart is the number, not a box around it. */
    .kc-qty-input {
        border: 0 !important;
        padding: 0 !important;
        width: auto !important;
        background: none !important;
        appearance: textfield;
        -moz-appearance: textfield;
    }
    .kc-product-title {
        margin-top: 10px;
    }
    .kc-order-layout,
    .kc-cart-layout,
    .kc-checkout-layout,
    .kc-shop-layout,
    .kc-product-layout {
        display: block !important;
    }
    .kc-order-aside,
    .kc-cart-aside,
    .kc-checkout-aside {
        position: static;
        margin-top: 20px;
    }
    .kc-shop-panel {
        background: none !important;
        border-color: #bbb;
        box-shadow: none;
    }
    /* A product's picture shares the first sheet with its name and price. */
    .kc-product-media {
        position: static;
        max-width: 3in;
    }
}

/* --------------------------------------------------------------------------
   The plugin's markup on pages that extend its own (KahunaCart 1.6.0)

   The shop pages extend the plugin's templates rather than copying them, so
   the parts this site leaves alone arrive in the plugin's markup, and some of
   them are parts the copies had lost: pictures and notes on cart lines, the
   quantity limits, sets, the quantity ladders, Save for later, reviews and
   the order history. These rules give them the site's look.
   -------------------------------------------------------------------------- */

/* A line's picture beside its name: small and square, because the name is
   what is read and the picture only confirms it is the right thing. */
.kc-cart-product { display: flex; align-items: center; gap: 14px; }
.kc-cart-product-text { min-width: 0; }
.kc-cart-thumb {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--ks-sand);
}
.kc-cart-item-title a { color: inherit; text-decoration: none; }
.kc-cart-item-title a:hover { color: var(--ks-lagoon); text-decoration: underline; }

/* A plugin's note about the line, a free trial most often: a qualification of
   the price beside it, so quiet and small beneath the name. */
.kc-cart-item-note,
.kc-summary-item-note { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ks-koa-soft); }
.kc-summary-item-note { flex-basis: 100%; }
.kc-cart-item-note a,
.kc-summary-item-note a { color: inherit; }

/* A quantity an add-on decided is a number, not a box; a product's limit
   ("Limit 3 per order") sits under the box. */
.kc-qty-fixed { display: inline-block; padding: 8px 0; font-variant-numeric: tabular-nums; }
.kc-cart-table .kahunacart-qty-hint {
    display: block;
    margin-top: 4px;
    font-family: var(--ks-body);
    font-size: 12px;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}

/* A set a grouped product's button added: its own row counts, its parts sit
   under it indented with their prices greyed, and no rule between them. */
.kc-cart-set:has(+ .kc-cart-part) td,
.kc-cart-part:has(+ .kc-cart-part) td { border-bottom-color: transparent; }
.kc-cart-part td:first-child { padding-left: 24px; }
.kc-cart-part .kc-cart-thumb { width: 44px; height: 44px; }
.kc-cart-part .kc-cart-item-title { font-weight: 500; }
.kc-cart-table .kc-cart-part td:nth-child(2),
.kc-cart-table .kc-cart-part .kc-cart-line-total { color: var(--ks-koa-soft); font-weight: 400; }

/* Under the lines: the express buttons and "Goes well with your order". */
.kc-cart-main > .kahunacart-zone,
.kc-cart-main > .kahunacart-cart-cross-sells { margin-top: 24px; }

/* Where a quantity ladder stands, above the totals it changes. */
.kc-tier-next { margin: 0 0 12px; font-size: 14px; color: var(--ks-koa-soft); }

/* Save for later, under the buy box: a quiet line with a heart rather than a
   second button beside Add to cart. */
.kc-product-info .kahunacart-wishlist-add { margin: 14px 0 0; }
.kc-product-info .kahunacart-wishlist-add .kahunacart-link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ks-koa-soft);
    font-size: 14px;
    text-decoration: none;
}
.kc-product-info .kahunacart-wishlist-add .kahunacart-link-button::before { content: "\2661"; font-size: 1.15em; line-height: 1; }
.kc-product-info .kahunacart-wishlist-add .kahunacart-link-button:hover { color: var(--ks-lagoon); text-decoration: underline; }

/* Reviews and "You might also like", full width under the two columns. */
.kc-shop--product .kahunacart-reviews,
.kc-shop--product .kahunacart-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--ks-line); }
.kc-shop--product .kahunacart-reviews > h2,
.kc-shop--product .kahunacart-related > h2 {
    margin: 0 0 14px;
    font-family: var(--ks-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--ks-koa);
}
.kc-shop--product .kahunacart-reviews-empty,
.kc-shop--product .kahunacart-review-signin { margin: 0 0 6px; font-size: 15px; color: var(--ks-koa-soft); }

/* The order's history, in a panel like the rest of the receipt. Styled on the
   plugin's section rather than wrapped, so an order with no history draws no
   empty panel. */
.kc-order-main > .kahunacart-order-history {
    margin-top: 16px;
    padding: 22px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
}
.kc-order-main > .kahunacart-order-history > h2 {
    margin: 0 0 12px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
}
.kc-order-main .kahunacart-order-history-list { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.kc-order-main .kahunacart-order-history-entry { display: flex; gap: 16px; padding: 4px 0; color: var(--ks-koa); }
.kc-order-main .kahunacart-order-history-when { flex: none; font-family: var(--ks-mono); font-size: 13px; color: var(--ks-koa-soft); font-variant-numeric: tabular-nums; }

/* A phone has no room for five columns: the pictures go, and so does the
   unit price, which the line total beside the quantity already says. */
@media (max-width: 560px) {
    .kc-cart-thumb { display: none; }
    .kc-cart-table th:nth-child(2),
    .kc-cart-table td:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
    /* The quantity box keeps room for its number. */
    .kc-cart-table .kc-qty-input { width: 56px; min-width: 56px; }
}
/* ==========================================================================
   Help center (Helpdesk Pro's client portal at /support)
   --------------------------------------------------------------------------
   The portal draws every color, radius and space from its --helpdesk-*
   custom properties (plugin docs: help-center.md#styling), so most of the
   work here is pointing those at the brand palette. The rules after the
   tokens are the few places where the site does something the tokens cannot
   say: the Board orange action button, the display face on headings, the
   docs' code blocks inside articles.

   Registered at priority 5 in kahuna-site.php so it emits after the plugin's
   portal.css (default priority 10) and wins on equal specificity. Everything
   is scoped under .helpdesk or .kc-helpdesk. Light-only, like the rest of the
   site: the portal has no dark rules of its own, so there is nothing to undo.
   ========================================================================== */

:root {
    --helpdesk-accent: var(--ks-lagoon);
    --helpdesk-accent-contrast: #FFF6EA;
    --helpdesk-text: var(--ks-koa);
    --helpdesk-muted: var(--ks-koa-soft);
    --helpdesk-border: var(--ks-line);
    --helpdesk-surface: var(--ks-card);
    --helpdesk-subtle: var(--ks-sand-soft);
    --helpdesk-team: color-mix(in srgb, var(--ks-lagoon-mist) 55%, var(--ks-card));
    --helpdesk-radius: 10px;
    --helpdesk-width: 1072px;
    --helpdesk-success: #1E6B3A;
    --helpdesk-warning: var(--ks-amber);
    --helpdesk-danger: #A83A2A;
}

/* The page container: the site's gutter and the air under the sticky header
   that every interior page has. The portal centres itself at its own width. */
.kc-body main > .kc-helpdesk,
.kc-body main > #helpdesk-root.helpdesk {
    padding: 28px 24px 24px;
}
.kc-body main > .kc-helpdesk > #helpdesk-root.helpdesk { padding: 0; }
/* An article page has no .kc-helpdesk wrapper (the plugin's kb-article
   template is used as is), so the root carries the gutter itself and is
   widened by it to line up with the help center's own pages. */
.kc-body main > #helpdesk-root.helpdesk { max-width: calc(var(--helpdesk-width) + 48px); }

.kc-body .helpdesk {
    --hd-border-strong: color-mix(in srgb, var(--ks-koa) 22%, transparent);
    --hd-field: var(--ks-card);
    --hd-faint: #8F7A60;
    --hd-shadow: none;
    --hd-shadow-hover: 0 12px 28px -14px rgba(43, 28, 12, 0.28);
    --hd-focus: 0 0 0 3px rgba(26, 111, 131, 0.16);
    font-family: var(--ks-body);
}

/* Headings in the brand display face, weighted like the rest of the site. */
.kc-body .helpdesk :is(h1, h2, h3, h4) {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    word-spacing: normal;
}
.kc-body .helpdesk .helpdesk-hero__title,
.kc-body .helpdesk .helpdesk-title { font-weight: 800; letter-spacing: -0.025em; }
.kc-body .helpdesk .helpdesk-section__title,
.kc-body .helpdesk .helpdesk-band__title { font-weight: 800; }
.kc-body .helpdesk .helpdesk-topic__name { font-weight: 700; }

/* ── The portal's nav row, read as a sub-nav under the site header ───── */
.kc-body .helpdesk .helpdesk-nav { border-bottom: 1px solid var(--ks-line); font-size: 14.5px; }
.kc-body .helpdesk .helpdesk-nav__link { color: var(--ks-koa-soft); font-weight: 600; }
.kc-body .helpdesk .helpdesk-nav__link:hover { color: var(--ks-lagoon); }
.kc-body .helpdesk .helpdesk-nav__link[aria-current] { color: var(--ks-koa); }
.kc-body .helpdesk .helpdesk-nav__link[aria-current="page"],
.kc-body .helpdesk .helpdesk-nav__link[aria-current="true"] { border-bottom-color: var(--ks-board); }
.kc-body .helpdesk .helpdesk-nav__count { background: var(--ks-board); }

/* ── Buttons: primary is the site's .kc-btn (Board orange, cream text) ─ */
.kc-body .helpdesk .helpdesk-button {
    border: 1.5px solid var(--ks-koa);
    border-radius: 11px;
    background: transparent;
    color: var(--ks-koa);
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.kc-body .helpdesk .helpdesk-button:hover { background: var(--ks-sand); border-color: var(--ks-koa); color: var(--ks-koa); }
.kc-body .helpdesk .helpdesk-button--primary {
    border-color: var(--ks-board);
    background: var(--ks-board);
    color: #FFF6EA;
}
.kc-body .helpdesk .helpdesk-button--primary:hover {
    border-color: var(--ks-board-deep);
    background: var(--ks-board-deep);
    color: #FFF6EA;
    transform: translateY(-1px);
}
.kc-body .helpdesk .helpdesk-button--sm { font-size: 14px; border-radius: 9px; }
.kc-body .helpdesk .helpdesk-button--lg { font-size: 16px; padding: 0.7rem 1.6rem; }
.kc-body .helpdesk .helpdesk-link-button:hover { color: var(--ks-lagoon); }

/* ── Fields, like the contact form's ──────────────────────────────────── */
.kc-body .helpdesk :is(.helpdesk-input, .helpdesk-textarea, select) {
    border: 1.5px solid var(--ks-line);
    border-radius: 11px;
    background-color: var(--ks-card);
    font-family: var(--ks-body);
}
.kc-body .helpdesk :is(.helpdesk-input, .helpdesk-textarea)::placeholder { color: #A08A6E; }
.kc-body .helpdesk :is(.helpdesk-input, .helpdesk-textarea, select):focus { border-color: var(--ks-lagoon); }
.kc-body .helpdesk select.helpdesk-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ks-koa) 50%), linear-gradient(135deg, var(--ks-koa) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}
.kc-body .helpdesk .helpdesk-search__field { border: 1.5px solid var(--ks-line); background: var(--ks-card); }
.kc-body .helpdesk .helpdesk-search__field:focus-within { border-color: var(--ks-lagoon); }

/* ── Help center home ─────────────────────────────────────────────────── */
.kc-body .helpdesk .helpdesk-hero {
    border: 1.5px solid var(--ks-line);
    border-radius: 22px;
    background:
        radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--ks-lagoon-mist) 70%, transparent), transparent 70%),
        var(--ks-sand-soft);
}
.kc-body .helpdesk .helpdesk-hero__title { font-size: clamp(34px, 5vw, 52px); line-height: 1.04; }
.kc-body .helpdesk .helpdesk-hero__intro { font-size: 17px; }
.kc-body .helpdesk .helpdesk-search--lg .helpdesk-search__field { box-shadow: 0 14px 30px -18px rgba(43, 28, 12, 0.35); }

/* Cards as the site draws them: a 1.5px sand line, a lift and a Lagoon
   edge on hover. */
.kc-body .helpdesk :is(.helpdesk-topic, .helpdesk-card, .helpdesk-band, .helpdesk-article-row) {
    border-width: 1.5px;
    border-color: var(--ks-line);
    border-radius: 14px;
}
.kc-body .helpdesk a.helpdesk-topic:hover,
.kc-body .helpdesk .helpdesk-article-row:hover { border-color: var(--ks-lagoon); transform: translateY(-2px); }

/* Article link lists (popular, related, more in this topic): hairline rows. */
.kc-body .helpdesk .helpdesk-links > li { border-bottom-color: var(--ks-line); }
.kc-body .helpdesk .helpdesk-links__link { font-weight: 600; }
.kc-body .helpdesk .helpdesk-links__link:hover { background: var(--ks-sand-soft); color: var(--ks-lagoon); }
.kc-body .helpdesk .helpdesk-links__icon { color: #A08A6E; }
.kc-body .helpdesk .helpdesk-topic__mark { border-radius: 12px; background: var(--ks-sand); color: var(--ks-lagoon); }
/* Topic cards on the home page stack the icon over the text, so four fit a
   row without folding "Licences and billing" onto two lines. */
.kc-body .helpdesk a.helpdesk-topic { flex-direction: column; gap: 14px; padding: 22px; }
.kc-body .helpdesk .helpdesk-band { background: var(--ks-sand); border-color: var(--ks-sand-deep); }

/* Status pills and banners on the site's greens, ambers and reds. */
.kc-body .helpdesk .helpdesk-status { color: var(--ks-koa); }

/* ── Breadcrumbs, like the docs' and the storefront's ─────────────────── */
.kc-body .helpdesk .helpdesk-crumbs a,
.kc-body .helpdesk .helpdesk-backlink a { color: var(--ks-koa-soft); font-weight: 600; }
.kc-body .helpdesk .helpdesk-crumbs a:hover,
.kc-body .helpdesk .helpdesk-backlink a:hover { color: var(--ks-lagoon); text-decoration: none; }

/* ── Article text: the docs' prose, and the docs' code blocks ──────────
   Measured against a docs page (Helios prose + kahuna.css): 16px on 1.75,
   inline code 14px semibold Lagoon on Sand, code blocks 14px on 1.7. */
.kc-body .helpdesk .helpdesk-prose { font-size: 16px; line-height: 1.75; color: var(--ks-koa); }
.kc-body .helpdesk .helpdesk-prose h2 { font-size: 26px; font-weight: 800; }
.kc-body .helpdesk .helpdesk-prose h3 { font-size: 20px; font-weight: 700; }
.kc-body .helpdesk .helpdesk-prose a { color: var(--ks-lagoon); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.kc-body .helpdesk .helpdesk-prose a:hover { text-decoration-color: currentColor; }
.kc-body .helpdesk .helpdesk-prose :not(pre) > code {
    font-family: var(--ks-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
    background: var(--ks-sand);
    border-radius: 4px;
    padding: 2px 6px;
}
.kc-body .helpdesk .helpdesk-prose strong { font-weight: 700; }

/* codesh draws its own frame; the portal's plain <pre> rule (border, tint,
   inherited size) must not land on top of it. kahuna.css colours
   .codesh-block for the whole site; these are the metrics the docs' prose
   gives the code inside it. */
.kc-body .helpdesk .helpdesk-prose > :is(.codesh-block, .codesh-group) { margin-block: 24px; }
.kc-body .helpdesk .helpdesk-prose :is(.codesh-block, .codesh-group) pre {
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 6px;
    font-family: var(--ks-mono);
    font-size: 14px;
    line-height: 1.7;
}
.kc-body .helpdesk .helpdesk-prose :is(.codesh-block, .codesh-group) pre code { font-family: inherit; font-size: inherit; font-weight: 400; color: inherit; background: none; padding: 0; }

/* A plain fenced block codesh did not claim: the site's dark code panel. */
.kc-body .helpdesk .helpdesk-prose > pre {
    background: var(--ks-koa);
    color: #E8DECF;
    border: 0;
    border-radius: 12px;
    padding: 18px 20px;
    font-family: var(--ks-mono);
    font-size: 14px;
    line-height: 1.7;
}
.kc-body .helpdesk .helpdesk-prose > pre code { font-family: inherit; color: inherit; }

/* Tables and quotes as in .kc-prose. */
.kc-body .helpdesk .helpdesk-prose :is(th, td) { border-color: var(--ks-line); }
.kc-body .helpdesk .helpdesk-prose blockquote { border-left: 3px solid var(--ks-board); color: var(--ks-koa-soft); }

/* The articles index lists each topic's first articles, which need room:
   two columns at most, one on narrow screens. */
.kc-body .helpdesk .helpdesk-topics--lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .kc-body .helpdesk .helpdesk-topics--lists { grid-template-columns: minmax(0, 1fr); }
}

/* ── Other ways to get help (the page's channels:, after the portal) ──── */
.kc-helpdesk-channels {
    max-width: var(--helpdesk-width);
    margin: 0 auto;
    padding: 0 0 72px;
}
.kc-helpdesk-channels .kc-kicker { margin-bottom: 14px; }
.kc-helpdesk-channels .kc-support-cards { margin: 0; }

@media (max-width: 640px) {
    .kc-body main > .kc-helpdesk,
    .kc-body main > #helpdesk-root.helpdesk { padding: 16px 16px 16px; }
    .kc-body .helpdesk .helpdesk-hero { border-radius: 16px; }
    .kc-helpdesk-channels { padding-bottom: 48px; }
}