/* kms-bundle-head.css - V139 2026-10-15 site speed phase 2. GENERATED, do not edit by hand.
   Replaces 11 render-blocking <link>s in <head> (snippets/kms-favicon, snippets/stylesheets, layout/theme).
   Byte-exact concatenation, in cascade order, of:
     kms-cart-drawer-fix.css  md5 ef9bccdcf7f51bbefc7ad5c315865ca2  5851 bytes
     base.css  md5 b51266bcf681b9f5fdceaf0d99468a4f  64999 bytes
     kms-blog-pcard.css  md5 36f308ca5a087a488a0251d950c9e43b  4435 bytes
     kms-dark-scheme.css  md5 87108ca2e9785359c42c7a2d0c171ead  27391 bytes
     kms-contrast.css  md5 fb4cc2c5a4ec4c22b08829ebb7e6ae78  11451 bytes
     kms-nav-polish.css  md5 c20d5756c2dfc7152fb8a708f02807c6  32510 bytes
     kms-cards-lightfix.css  md5 9256d9c9e71b2539c4222c623ff32f10  6224 bytes
     kms-vs-fix.css  md5 f0d54e8b2e14d7fc9d6d54940f5bf1d9  2674 bytes
     kms-cards.css  md5 00b590c9db919819d1a00f2d9053e235  25355 bytes
     kms-polish.css  md5 5e52f118fda6e77b328027b193b2ac86  17952 bytes
     kms-inline.css  md5 000c1850aee2ea8216bf6c2c6bcf276c  31761 bytes
   To change any of them: edit the source file, then rebuild this bundle (recipe in
   00_DOCS/2026-10-15_site-speed/theme-phase2-handoff.md). */

/* ===== kms-cart-drawer-fix.css ===== */
/* KMS cart drawer spacing.
   2026-09-15 (V57): first cart line sat flush against the drawer header, so any
   scroll of .cart-drawer__content (e.g. the consent box scrollIntoView) cut the
   product image and title.
   2026-09-15 (V58): the last line sat flush on the summary border, so the 3D
   shadow under its quantity and delete buttons was cut off. Same breathing room
   at the bottom, and a divider-free gap before the summary. */
.cart-drawer__items{padding-top:16px;padding-bottom:24px}
.cart-drawer__content{scroll-padding-top:16px}

/* 2026-09-15 (V58): Judge.me uninstalled. Belt and braces for any leftover rating
   UI (search results badge in templates/search.json, app badges, old card rows). */
.kms-star-rating,.kms-card__rating,.kmsft__rating,.jdgm-widget,.jdgm-prev-badge,.jdgm-rev-widg,.jdgm-all-reviews-text{display:none !important}

/* =====================================================================
   V73, 2026-09-23 (Kreal + Caleb/CRO + Bruna/DTC + Adam/UX): cart drawer.

   WHY THE DRAWER STAYS A DRAWER. 30 of ~35 real orders in the last 90 days are
   a single line item, so the cart is not a place where anyone assembles an
   order - it is a confirmation step on the way to checkout. A centred modal is
   the pattern for a cart people work in, and on a phone it degrades into the
   same full-height sheet anyway. The format was never the problem; the weight
   of the controls inside it was.

   WHAT WAS WRONG. Remove and Close both carried the theme's filled .button
   style - gradient, purple border and a 5px 3D shadow - so the loudest things
   in the drawer were a destructive action repeated once per line and a
   dismissal, both louder than Check out. The unit price printed a second time
   next to the line total, which is the same number whenever quantity is 1.

   WHY THESE RULES LIVE HERE AND NOT IN kms-cart-extra.css: that file is not
   loaded by layout/theme.liquid at all (checked in the browser 2026-09-23 -
   it is missing from the stylesheet list on every template). This file is
   loaded. It also loads EARLY, before kms-polish.css and kms-theme.css, which
   is why the overrides below need both a deeper selector and !important: the
   filled .button style wins on cascade order otherwise.
   ===================================================================== */

/* Remove: quiet by default, red only on hover, never a filled block. */
.cart-drawer .cart-items__remove.button,
.cart-items__remove.button{
  background-image:none !important;
  background-color:transparent !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:none !important;
  color:#847F99 !important;
  width:34px !important; height:34px !important;
  min-height:0 !important; min-width:0 !important;
  padding:0 !important; border-radius:9px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  transform:none !important;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.cart-drawer .cart-items__remove.button:hover,
.cart-items__remove.button:hover{
  color:#ff8f8f !important;
  border-color:rgba(255,143,143,.45) !important;
  background-color:rgba(255,143,143,.08) !important;
}
.cart-items__remove.button svg{width:15px !important;height:15px !important}

/* Close: ghost. One filled button in the drawer, and it is Check out. */
.cart-drawer .cart-drawer__close-button.button,
.cart-drawer__close-button.button{
  background-image:none !important;
  background-color:transparent !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:none !important;
  color:#CAC7DC !important;
  border-radius:10px !important;
  transform:none !important;
}
.cart-drawer .cart-drawer__close-button.button:hover{
  background-color:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

/* One price per line. The unit price repeats the line total at quantity 1,
   which is nine orders out of ten here. kms-cart-guards.js marks the rows that
   really hold more than one unit with data-kms-multi; only those show it. */
.cart-drawer .cart-items__unit-price-wrapper,
.cart-items__unit-price-wrapper{display:none !important}
.cart-drawer tr[data-kms-multi] .cart-items__unit-price-wrapper,
tr[data-kms-multi] .cart-items__unit-price-wrapper{
  display:block !important;font-size:.76rem !important;opacity:.62;
}

/* Unlimited is one seat, so the subscription line gets no quantity stepper.
   Variant 58720578732296 = KMS All-Access, Pro (1 seat).

   CAREFUL: hide the STEPPER ONLY, never .cart-items__quantity. The remove
   button lives inside that same wrapper, and the first version of this rule
   hid the whole block - which left a subscription line in the cart that could
   not be removed at all. Caught in the browser the same day; a line you cannot
   delete is a far worse bug than a stepper nobody needs.

   Repairing a line that is already at 2 or 3 happens in kms-cart-guards.js;
   this only stops it going up from here. */
tr[data-key^="58720578732296:"] .quantity-selector-wrapper,
tr[data-key^="58720578732296:"] cart-quantity-selector-component,
tr[data-key^="58720578732296:"] .quantity-selector{display:none !important}

/* The deferred-purchase consent is legally required, but it must not be the
   last thing read before paying: small, secondary, and after the reassurance. */
.cart-drawer__summary .cart__ctas ~ p,
.cart-drawer__summary .cart__ctas ~ div p{
  font-size:.72rem !important;line-height:1.45 !important;color:#7d7891 !important;
}

/* One line of reassurance, inserted directly after Check out by
   kms-cart-guards.js. */
.kms-cart-assure{
  margin:10px 0 0 !important;font-size:.78rem !important;line-height:1.4 !important;
  color:#9b96ae !important;text-align:center !important;
}
.kms-cart-assure b{color:#CAC7DC !important;font-weight:600}

/* ===== base.css ===== */
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-inline-end var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }

  /* The theme drawer opens from the inline-end edge, so the shift mirrors in RTL */
  [dir='rtl'] .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: var(--theme-drawer-width, var(--sidebar-width));
  }
}

.page-wrapper--drawer-open {
  margin-inline-end: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
  cursor: pointer;
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background-color: var(--color-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-inline: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flip-x {
  scale: -1 1;
}

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

.text-left {
  --text-align: start;

  text-align: start;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: end;

  text-align: end;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: flex-end;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Caret icon transition */
.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;

  /* Keep the fixed close button clear of the status bar and inline-end notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* Safe-area env() values are physical; in RTL the button sits by the left-side notch */
[dir='rtl'] .close-button {
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-left, 0px));
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);

  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: start;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  inset-inline-start: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > slideshow-arrows .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    .spacing-style {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}

/* ============================================================
   KISSMYSKILLS — CUSTOM STYLES (CLEANED)
   Last updated: April 2026

   HOW TO USE:
   In your Shopify theme editor, open assets/base.css. Find the
   line that reads:
       KissMySkills custom styles (comment line)
   Delete everything from that line to the end of the file.
   Paste this entire block in its place. Save. Hard refresh.

   VERIFY ON DEPLOY:
   1. Section 2 targets Shopify auto-generated block IDs for
      product metafield labels (FORMAT, FILE, COMPATIBLE WITH,
      SKILL LEVEL, INSTALL TIME). Inspect a live product page
      in DevTools. If those exact class names don't appear,
      the labels have moved — delete Section 2.
   2. Hard refresh (Cmd+Shift+R / Ctrl+F5) after deploy.
   ============================================================ */


/* ------------------------------------------------------------
   1. MEGA MENU LAYOUT
   ------------------------------------------------------------ */
/* KMS 2026-10-06: this rule was never applied - a nested comment above swallowed it
   ("Minification failed"). Kept disabled so the live mega menu looks exactly the same.
.mega-menu__grid {
  display: flex !important;
  align-items: flex-start;
  gap: 56px;
  padding: 28px 36px 32px !important;
}
*/
.mega-menu__list { flex: 0 0 460px; }
.mega-menu__column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  width: 100%;
}
.mega-menu__grid > *:not(.mega-menu__list) {
  flex: 1;
  min-width: 340px;
}
.mega-menu__column > div:nth-child(8) {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-top: 6px;
}
.mega-menu__column > div:nth-child(7) .mega-menu__link {
  color: var(--color-primary);
  font-weight: 500;
}
.mega-menu__column > div:last-child .mega-menu__link { color: #3b6d11; }
.menu-list__list-item:has(> a[href="/"]) { display: none; }


/* ------------------------------------------------------------
   2. PRODUCT METAFIELD LABELS
   Auto-generated Shopify block IDs — VERIFY ON LIVE SITE.
   If labels don't appear in DOM anymore, delete this section.
   ------------------------------------------------------------ */
.text-block--AOGRkcm5Zd015eEVvc__text_wbUH3b::before {
  content: "FORMAT";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #888780;
  margin-bottom: 5px;
}
.text-block--AOGRkcm5Zd015eEVvc__text_wbUH3b p {
  display: inline-block;
  background: #EEEDFE;
  color: #534AB7;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 20px;
}
.text-block--AMzhwR1d1UzIxcjlEN__text_wMzPkc::before {
  content: "FILE";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #888780;
  margin-bottom: 5px;
}
.text-block--AMzhwR1d1UzIxcjlEN__text_wMzPkc p {
  font-family: monospace;
  font-size: 12px;
  color: #888780;
}
.text-block--AOWJQZGpRaGtkbWZmZ__text_JgUXbC::before {
  content: "COMPATIBLE WITH";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #888780;
  margin-bottom: 6px;
}
.metafield-single_line_text_field-array {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.metafield-single_line_text_field {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: #F4F3EF;
  border: 1px solid #E8E6E0;
  color: #555550;
  font-size: 12px;
}
.text-block--AcU8rb2NLQ0U4aG1pT__text_ebhpP3::before {
  content: "SKILL LEVEL";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #888780;
  margin-bottom: 5px;
}
.text-block--ASitwMm9MTHNpRTNOS__text_dj6Epr::before {
  content: "INSTALL TIME";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #888780;
  margin-bottom: 5px;
}
.text-block--AcU8rb2NLQ0U4aG1pT__text_ebhpP3 p,
.text-block--ASitwMm9MTHNpRTNOS__text_dj6Epr p {
  display: inline-block;
  background: #F4F3EF;
  border: 1px solid #E8E6E0;
  color: #555550;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
}


/* ------------------------------------------------------------
   3. KMS PRODUCT FORMAT BADGES
   ------------------------------------------------------------ */
.kms-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}
.kms-badge--skill-md    { background: #EEEDFE; color: #534AB7; }
.kms-badge--mcp         { background: #E1F5EE; color: #0F6E56; }
.kms-badge--cowork      { background: #FAECE7; color: #993C1D; }
.kms-badge--prompt-pack { background: #E6F1FB; color: #185FA5; }
.kms-badge--bundle      { background: #F4F3EF; color: #1A1A18; }
.kms-badge--guide       { background: #EAF3DE; color: #3B6D11; }


/* ------------------------------------------------------------
   4. FOOTER
   ------------------------------------------------------------ */
footer *[class*="heading"] {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #888780 !important;
}
footer li a {
  font-size: 13px !important;
  color: #555550 !important;
  text-decoration: none !important;
}
footer li a:hover { color: #534AB7 !important; }
.shopify-section--footer { border-top: 1px solid #E8E6E0 !important; }


/* ------------------------------------------------------------
   5. PRODUCT CARDS — TITLE, PRICE, PADDING
   ------------------------------------------------------------ */
@media (min-width: 750px) {
  .product-card__content p[role="heading"] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #1A1A18;
  }
  /* KMS: Horizon 4.2.0 dropped the .price__regular/.price__sale wrappers in
     snippets/price.liquid; the [ref="priceContainer"] selectors target the same spans. */
  .price__regular .price,
  [ref="priceContainer"] > span.price:not(.price-item__group) {
    font-size: 15px !important;
    font-weight: 600;
    color: #1A1A18;
  }
  .price__sale .price-item--sale,
  [ref="priceContainer"] > .price-item__group.price {
    font-size: 15px !important;
    font-weight: 600;
  }
  .product-card__content.product-grid__card {
    padding-inline: 16px !important;
    padding-block: 16px 20px !important;
  }
}


/* ------------------------------------------------------------
   6. SECTION HEADINGS
   ------------------------------------------------------------ */
.section-header__title,
.collection-list__title,
.featured-collection__title,
.multicolumn__title,
.rich-text__heading {
  font-size: 28px;
  font-weight: 600;
  color: #1A1A18;
  line-height: 1.2;
}
@media (min-width: 990px) {
  .section-header__title,
  .collection-list__title,
  .featured-collection__title,
  .multicolumn__title,
  .rich-text__heading {
    font-size: 32px;
  }
}
.caption-with-letter-spacing,
.eyebrow-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888780;
  display: block;
  margin-bottom: 8px;
}


/* ------------------------------------------------------------
   7. TRUST BAR (multicolumn / icon-with-text)
   ------------------------------------------------------------ */
.multicolumn .section-background,
.icon-with-text .section-background {
  background-color: #F0EFFC;
}
.multicolumn,
.icon-with-text {
  border-top: 1px solid #E0DDFB;
  border-bottom: 1px solid #E0DDFB;
}
.multicolumn-card__title,
.icon-with-text__heading,
.icon-with-text__body strong {
  font-size: 18px;
  font-weight: 600;
  color: #534AB7;
  display: block;
}
.multicolumn-card__description,
.icon-with-text__body p {
  font-size: 12px;
  color: #888780;
  line-height: 1.4;
}


/* ------------------------------------------------------------
   8. HERO — CTA BUTTONS + OVERLAY
   ------------------------------------------------------------ */
.banner .banner__media { position: relative; }
.banner .banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 50, 0.10);
  pointer-events: none;
  z-index: 1;
}
.banner .banner__box,
.banner .banner__content {
  position: relative;
  z-index: 2;
}
@media (min-width: 750px) {
  .banner__buttons .button,
  .banner__buttons a.button {
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    min-width: 160px;
  }
  .banner__buttons .button:not(.button-secondary) {
    background-color: #534AB7;
    color: #ffffff;
  }
  .banner__buttons .button-secondary {
    background-color: transparent;
    color: #1A1A18;
    box-shadow: inset 0 0 0 1.5px #1A1A18;
  }
  .banner .banner__description,
  .banner .banner__text p {
    font-size: 18px;
    line-height: 1.55;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ------------------------------------------------------------
   9. PRODUCT GRID — 4 COLUMNS DESKTOP
   ------------------------------------------------------------ */
@media (min-width: 750px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ------------------------------------------------------------
   10. ANNOUNCEMENT BAR — DARK
   ------------------------------------------------------------ */
.announcement-bar {
  background-color: #0E0D14 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.announcement-bar__message,
.announcement-bar__message a {
  color: rgba(255,255,255,0.55) !important;
}


/* ------------------------------------------------------------
   11. HOMEPAGE — DARK HERO
   ------------------------------------------------------------ */
.banner {
  background-color: #0E0D14 !important;
  min-height: 520px !important;
  position: relative !important;
  overflow: hidden !important;
}
.banner::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 350px;
  background: radial-gradient(ellipse, rgba(83,74,183,0.35) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.banner__content {
  position: relative;
  z-index: 2;
}
.banner__heading {
  font-size: 52px !important;
  font-weight: 600 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.08 !important;
  color: #FFFFFF !important;
}
.banner__subheading {
  color: rgba(255,255,255,0.5) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
}


/* ------------------------------------------------------------
   12. HOMEPAGE — DARK PAGE STYLING (template-index scoped)
   ------------------------------------------------------------ */
.template-index body,
.template-index { background-color: #0E0D14; }
.template-index .shopify-section { background-color: transparent; }
.template-index .section-background { background-color: #0E0D14 !important; }

/* Section headings */
.template-index .section-header__title,
.template-index .featured-collection__title,
.template-index .collection-list__title { color: #FFFFFF !important; }

/* "View all" links */
.template-index .section-header a,
.template-index .featured-collection__view-all { color: #7B72E8 !important; }

/* Header */
.template-index .header-wrapper,
.template-index .header {
  background-color: rgba(14,13,20,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px);
}
.template-index .header__menu-item,
.template-index .header a:not(.button) {
  color: rgba(240,239,248,0.65) !important;
}
.template-index .header a:not(.button):hover { color: #FFFFFF !important; }

/* Dividers */
.template-index hr,
.template-index .section-separator {
  border-color: rgba(255,255,255,0.07) !important;
}

/* Trust bar dark */
.template-index .multicolumn .section-background,
.template-index .icon-with-text .section-background {
  background-color: #16151F !important;
}
.template-index .multicolumn,
.template-index .icon-with-text {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.template-index .multicolumn-card__title,
.template-index .icon-with-text__heading { color: #FFFFFF !important; }
.template-index .multicolumn-card__description,
.template-index .icon-with-text__body p {
  color: rgba(240,239,248,0.5) !important;
}

/* Collection list tiles */
.template-index .collection-card__inner {
  background-color: #16151F;
  border: 1px solid rgba(255,255,255,0.07);
}
.template-index .collection-card .card__heading { color: #FFFFFF !important; }

/* Rich text */
.template-index .rich-text .section-background {
  background-color: #16151F !important;
}
.template-index .rich-text__heading { color: #FFFFFF !important; }
.template-index .rich-text p { color: rgba(240,239,248,0.55) !important; }

/* FAQ / collapsible */
.template-index details summary {
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.template-index details .accordion__content p {
  color: rgba(240,239,248,0.55) !important;
}

/* Product cards on homepage — keep dark text on light card */
.template-index .product-card__content p[role="heading"],
.template-index .product-card__content .h4,
.template-index .product-card__content h3,
.template-index .product-card__content h4 {
  color: #1A1A18 !important;
  text-shadow: none !important;
}
.template-index .price__regular .price,
.template-index .price__sale .price-item--sale {
  color: #1A1A18 !important;
  text-shadow: none !important;
}


/* ------------------------------------------------------------
   13. COLLECTION PAGE — HERO BANNER LAYOUT + WHITE TEXT
   Scoped to .template-collection so it doesn't bleed into
   product pages, blog, or other templates.
   ------------------------------------------------------------ */
.template-collection .hero__content-wrapper {
  display: grid !important;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 16px 12px;
}
.template-collection .hero__content-wrapper > div.text-block,
.template-collection .hero__content-wrapper > rte-formatter {
  grid-column: 1 / -1;
  text-align: center;
  width: 100%;
}
.template-collection .hero__content-wrapper > a { justify-self: center; }

@media (max-width: 749px) {
  .template-collection .hero__content-wrapper { grid-template-columns: 1fr; }
  .template-collection .hero__content-wrapper > a {
    width: 100%;
    max-width: 280px;
    text-align: center;
    justify-content: center;
  }
}

.template-collection .banner h1,
.template-collection .banner h2,
.template-collection .banner__heading,
.template-collection .collection__hero h1,
.template-collection .collection__hero h2 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.template-collection .banner__text,
.template-collection .banner__text p,
.template-collection .banner .text-block p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  margin-top: 8px !important;
}

.template-collection .hero h2,
.template-collection .hero h4 { color: #FFFFFF !important; }


/* ------------------------------------------------------------
   14. HIDE DUPLICATE COLLECTION DESCRIPTION
   ------------------------------------------------------------ */
.collection__description,
.collection-description,
.shopify-section--collection-description,
.collection-hero__description,
.collection__rte,
[class*="collection"][class*="description"] {
  display: none !important;
}


/* ------------------------------------------------------------
   15. COLLECTION PAGE — SEO SECTION (color-scheme-5)
   ------------------------------------------------------------ */
.section.color-scheme-5 .text-block h1 { display: none !important; }
.section.color-scheme-5 {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.section.color-scheme-5 .custom-section-content {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.section.color-scheme-5 rte-formatter h2,
.section.color-scheme-5 rte-formatter h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(240,239,248,0.4) !important;
  text-shadow: none !important;
  text-align: center !important;
  margin-top: 24px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.section.color-scheme-5 rte-formatter p,
.section.color-scheme-5 rte-formatter li,
.section.color-scheme-5 rte-formatter ul {
  font-size: 12px !important;
  color: rgba(240,239,248,0.25) !important;
  line-height: 1.75 !important;
  text-shadow: none !important;
  text-align: left !important;
}
.section.color-scheme-5 rte-formatter strong {
  color: rgba(240,239,248,0.35) !important;
  font-weight: 600 !important;
}
.section.color-scheme-5 .section-content-wrapper {
  --padding-block-start: 32px !important;
  --padding-block-end: 32px !important;
}
.section.color-scheme-5 rte-formatter {
  --text-align: left !important;
  text-align: left !important;
}


/* ------------------------------------------------------------
   16. COLLECTION PAGE — DARK BACKGROUND + WHITE PRODUCT TEXT
   ------------------------------------------------------------ */
.template-collection { background-color: #0E0D14; }
.template-collection .shopify-section { background-color: transparent; }
.template-collection .section-background { background-color: #0E0D14 !important; }

.template-collection .product-card__content p[role="heading"],
.template-collection .product-card__content .h4,
.template-collection .product-card__content h3,
.template-collection .product-card__content h4 {
  color: #FFFFFF !important;
}
.template-collection .product-grid__item .price {
  color: rgba(240,239,248,0.85) !important;
}





/* ------------------------------------------------------------
   18. PRODUCT PAGE — DESCRIPTION WIDTH (CAP + CENTRE)
   Caps body copy at 720px for ~70 char line length, then
   centres in whatever column Horizon hands it. Inline
   max-widths inside product HTML get neutralised so they
   don't double-cap.
   ------------------------------------------------------------ */
.product-information .rte-formatter,
.product__description .rte-formatter,
.rte-formatter {
  max-width: 720px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.rte-formatter [style*="max-width"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* Product title fix — light pages */
p[role="heading"][aria-level="3"] {
  color: #1A1A18 !important;
}

/* Override for dark template pages */
.template-collection p[role="heading"][aria-level="3"],
.template-index p[role="heading"][aria-level="3"] {
  color: #FFFFFF !important;
}

product-card p[role="heading"][aria-level="3"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================
   END — KISSMYSKILLS CUSTOM STYLES
   ============================================================ */

/* Тёмный дропдаун */
#header-component {
  --color-submenu: #0E0D14;
}

/* ── Fix: wrap long <pre> prompt blocks in blog posts (kill horizontal scroll) ── */
.blog-post-content pre,
.rte pre {
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #1A1A18;
  background: #F4F3EF;
  border: 1px solid #E8E6E0;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 12px;
}
.blog-post-content code,
.rte code {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ===== kms-blog-pcard.css ===== */
/* ===== KMS card-surface fixes =====
   Two unrelated fixes live here. The second one is parked in this file
   rather than a new asset purely to avoid a concurrent edit to
   snippets/stylesheets.liquid while another change was in flight. If
   this file grows further, split it and rename.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BLOG: in-article product cards (2026-08-12)

   .kms-pcard is the product card embedded in article bodies, 2-4 per
   post, measured 672x303 at desktop, sitting at ~32/37/42/65% of page
   height. Structurally fine: eyebrow, 104x104 image, 18px title, desc,
   132x42 CTA.

   Measured BEFORE this block:
     background   rgba(0,0,0,0)      (transparent)
     box-shadow   none
     border       1px solid #2A2A28
   On #0E0D14 that reads as a faint text divider, not as a product. The
   blog is ~half of all site traffic and converts at ~0, and these cards
   are the only commercial object inside the article body -- so they are
   exactly the element that must not look like a horizontal rule.

   Two changes:
   a. Surface + the same elevation already applied to .kms-card and
      .product-card in kms-cards.css, so the card reads as an object.
   b. Brand palette. The card shipped with a teal eyebrow (#5BD0AE) and
      a green CTA (#0F6E56). Every other accent on this site is gold
      #FFB020 or the purple ramp #8079EE -> #534AB7; green appears
      nowhere else, which made the block look like third-party content
      pasted into the article.

   Specificity: base rules live in an inline <style> in <body> at
   (0,1,0). A stylesheet in <head> would lose an equal-specificity tie
   on source order, so the .blog-post-content.rte prefix takes these to
   (0,3,0). Same technique kms-cards.css already uses for
   .kms-pcard__desc. No !important needed.
   --------------------------------------------------------------------- */
.blog-post-content.rte .kms-pcard{background:#16151F;border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 0 0 #050409,0 12px 24px 0 rgba(0,0,0,.40);transition:box-shadow .2s ease,transform .2s ease}
.blog-post-content.rte .kms-pcard:hover{box-shadow:0 6px 0 0 #050409,0 16px 32px 0 rgba(0,0,0,.55);transform:translateY(-2px)}
.blog-post-content.rte .kms-pcard__eyebrow{color:#FFB020}
.blog-post-content.rte .kms-pcard__cta{background:linear-gradient(#8079EE,#534AB7);border:1px solid #534AB7;box-shadow:0 3px 0 0 #2c2660,0 3px 0 1px #000;color:#fff}
.blog-post-content.rte .kms-pcard__cta:hover{background:linear-gradient(#8F88F5,#5F55C9)}

/* ---------------------------------------------------------------------
   2. BROWSE ALL: un-mask the cover letter badge (2026-08-12)

   sections/kms-catalog.liquid ships this inline, scoped by section id:

     .kmc-item .kms-card__media::after {
       content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
       background: radial-gradient(circle at left top,
         rgba(14,13,20,.97) 0px, rgba(14,13,20,.93) 21%,
         rgba(14,13,20,.55) 32%, rgba(14,13,20,0) 47%); }

   It is a deliberate mask over the top-left corner of every cover, put
   there to hide the letter chip baked into the cover PNG -- presumably
   so it would not compete with the "Skill .md" pill at the top right.

   Two problems with it:
   a. It does not actually hide the chip. Peak opacity is .97, not 1, so
      the letter still shows through as a ghost inside a dark smudge.
      Reported by the store owner as "the letters vanished into a square".
   b. It contradicts the rest of the site. The same covers render their
      chip at full brightness on /collections/all-skills (D purple,
      S pink, C pink, P blue) and on every product page. Only the
      Browse All grid masks them.

   Verified NOT a regression from this audit: sections/kms-catalog.liquid
   is byte-identical in live theme V34 and draft V35 (25343 bytes,
   md5 b2fb42ed84ffcb3bb3c11002bcaf9647), so the mask predates all of it.

   Fix: drop the mask and let the chip show, matching every other
   surface. !important is required because the shipped rule is scoped by
   a section ID, specificity (1,2,1).
   To restore the old look, delete the one rule below.
   --------------------------------------------------------------------- */
.kmc-item .kms-card__media::after { background: none !important; }

/* ===== kms-dark-scheme.css ===== */
/* ============================================================================
   kms-dark-scheme.css — the ONE place that makes colour-scheme-1 dark
   Created 2026-08-12. Every number below was read with getComputedStyle on
   the V35 preview (theme 200185708808) at 1920x1080, before and after.

   ---------------------------------------------------------------------------
   WHAT WAS WRONG
   ---------------------------------------------------------------------------
   The site LOOKS dark, but the theme's own colour scheme is still the LIGHT
   one Horizon shipped with. Measured on the live V35 preview, the scheme is
   declared by an inline <style> block as

       :root, .color-scheme-1 {
         --color-background: rgb(247 246 242 / 1.0);   -- #F7F6F2 cream
         --color-background-rgb: 247 246 242;
         --color-foreground: rgb(85 85 80 / 1.0);      -- #555550 warm grey
         --color-foreground-heading: rgb(26 26 24 / 1.0);
         --color-border: rgb(232 230 224 / 1.0);
         --color-primary: rgb(83 74 183 / 1.0);
         --color-input-background: rgb(255 255 255 / 0.78);
         --color-secondary-button-text: rgb(26 26 24 / 1.0);
         ... 40+ more tokens, all light ...
       }

   The dark look came from exactly ONE rule, in assets/kms-cards.css:

       main:not([data-template="index"]) .color-scheme-1 {
         --color-background:#0E0D14 !important;
         --color-foreground:#CAC7DC !important;
         --color-foreground-heading:#F5F4FB !important; ... }

   That rule is anchored to <main>. Consequences, all measured:

   1. body itself was NEVER darkened outside the homepage. base.css contains
      `body { background: var(--color-background) }` plus a single opt-in
      `.template-index body { background-color: rgb(14,13,20) }`. So on the
      homepage body is #0E0D14 — and on EVERY other template body computed
      rgb(247, 246, 242).
      This is not theoretical. On /products/executive-assistant-skill-claude
      the whole custom footer sits on it: sampling elementFromPoint(200,600)
      inside .kmsft and walking up, the first opaque background found was
      body = rgb(247,246,242). The chain .kmsft -> section.shopify-section ->
      footer -> body is transparent all the way. A full-viewport cream band
      renders under the footer, and the footer's own text measured
        footer-utilities text  #847F99 on #F7F6F2 ... 3.55:1  (AA wants 4.5)
        "before you go" eyebrow #FFB020 on #F7F6F2 ... 1.69:1
        nav "SKILLs"            #FFD37A on #F7F6F2 ... 1.31:1
        nav "Browse All"        #8B87A8 on #F7F6F2 ... 3.17:1
        currency "PLN / EN"     #A09FBE on #F7F6F2 ... 2.37:1
      Nine header/footer strings below AA on one product page alone.

   2. Everything rendered OUTSIDE <main> kept the light scheme. Painted light
      surfaces measured on the homepage with all <dialog>s forced open:
        div.localization-wrapper.color-scheme-1 ..... rgb(247,246,242)
        div.menu-drawer__submenu.color-scheme-1 ..... rgb(247,246,242)
        dialog.quick-add-modal.color-scheme-1 ....... rgb(247,246,242)
        input.country-filter__input ................. rgba(255,255,255,.78)
        select.localization-form__select ............ rgba(255,255,255,.78)
        li.localization-form__list-item (hover) ..... rgba(60,52,137,.1)
      and the text on them:
        span.language-selector__label ............... 3.41:1
        span.localization-form__currency ............ 2.57:1
        span "No results found" ..................... 3.41:1

   3. Tokens that are FOREGROUNDS broke the other way round — a light-theme
      ink painted onto the dark page:
        a.skip-to-content-link.button-secondary
            --color-secondary-button-text #1A1A18 on #0E0D14 ... 1.11:1
        a "Log in", span.show-more__label
            --color-primary #534AB7 on #0E0D14 ................. 2.79:1
        div.account-button.color-scheme-1
            --color-foreground #555550 on #0E0D14

   ---------------------------------------------------------------------------
   WHY THIS FILE, AND WHY body RATHER THAN A PILE OF PATCHES
   ---------------------------------------------------------------------------
   Point-fixing each drawer/dialog was rejected: it is what produced the mess
   in the first place (the cart drawer and the search modal each needed their
   own hand-written block, and the search modal STILL shipped a white strip
   because one gradient read --color-background-rgb, not --color-background).
   Any new Horizon dialog would arrive light again.

   So the scheme is redefined once, at the two places every overlay inherits
   from: `body` and `.color-scheme-1`.

   `body` is required, not decorative. The cookie banner, the skip link, the
   terms popover and the app switcher are all direct children of <body> with
   NO color-scheme class — a `.color-scheme-1`-only fix would miss them, and
   would leave body itself cream.

   ---------------------------------------------------------------------------
   THE ONE THING THAT COULD HAVE BROKEN — CHECKED, NOT ASSUMED
   ---------------------------------------------------------------------------
   The 46 free-generator pages (/pages/cold-email-generator and siblings, plus
   /pages/ai-generators) render a DELIBERATELY light island, .generator-page,
   background #F7F6F2, INSIDE the dark <main>. Darkening a token that island
   reads would put dark ink on cream or a dark input on a cream card.

   Measured on /pages/cold-email-generator before writing a line of this file:
     - .generator-page is a DIRECT child of main.content-for-layout;
     - it carries NO color-scheme class, no ancestor carries one, and
       querySelectorAll('[class*="color-scheme"]') inside it returns 0 nodes.
   So the `.color-scheme-1` half of this file cannot reach it. Good.
   BUT it does inherit the scheme tokens through <body>, and it really uses
   them — of its 96 descendants:
       4 x input.field__input .. rgba(255,255,255,.78) = --color-input-background
                                 rgb(232,230,224)      = --color-input-border
       2 x .toggle-option ...... rgb(244,243,239)      = --color-secondary-button-hover-background
       1 x .btn-generate ....... rgb(26,26,24)         = --color-primary-button-background
      41 x text ............... rgb(85,85,80)         = --color-foreground / --text-secondary
   That is why block C below RESTORES the full light token set on
   .generator-page. Restoring on the element itself always beats a value
   inherited from <body>, !important or not, so no !important is needed there.

   Also verified before shipping: on / , /collections/all and
   /products/... there is not a single element that paints a light scheme token
   as a FOREGROUND (colour == #F7F6F2 / #E8E6E0 / #F4F3EF) or as a background
   (#555550 / #1A1A18 / #E8E6E0 / #F4F3EF). Scan returned 0 for all four
   categories, so darkening them cannot invert anything that reads correctly
   today.

   ---------------------------------------------------------------------------
   RGB TRIPLETS ARE NOT OPTIONAL
   ---------------------------------------------------------------------------
   Horizon builds every translucent surface from a SEPARATE triplet variable,
   never from the hex:
       --to-top-gradient-background:
           linear-gradient(to top, rgb(var(--color-background-rgb) / var(--opacity-90)), ...)
       --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60))
       --shadow-drawer: 0 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15))
   Setting --color-background without --color-background-rgb leaves every
   gradient, overlay, hover fill and hairline light. That is exactly how the
   white strip survived at the bottom of the search modal after its
   background had already been "fixed". Every pair below is therefore written
   twice: the colour AND its `R G B` triplet.

   ---------------------------------------------------------------------------
   SPECIFICITY / LOAD ORDER
   ---------------------------------------------------------------------------
   This file is linked 5th in snippets/stylesheets.liquid, i.e. in <head>.
   The scheme it overrides lives in an inline <style> whose position relative
   to this link is not guaranteed, and it matches at the same specificity
   (`:root, .color-scheme-1` = 0,1,0). !important on the custom properties is
   the only reliable way to win without inventing selector hacks; kms-cards.css
   already uses the same technique for the same tokens.
   kms-cards.css loads AFTER this file, so its
   `main:not([data-template="index"]) .color-scheme-1 { ... !important }`
   still wins inside <main> — it sets the identical #0E0D14 / #CAC7DC /
   #F5F4FB, so there is no conflict, and the -rgb triplets it never declared
   now arrive from here by inheritance.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   A. THE DARK SCHEME
   Palette is not invented — every value already exists in the theme's
   hand-written dark chrome (kms-cards.css / kms-polish.css / kms-theme.css):
     #0E0D14 page            #16151F raised surface   #1E1C2A hover surface
     #CAC7DC body ink        #F5F4FB heading ink      #847F99 muted ink
     #A8A1F7 link            #8079EE link hover       #534AB7 primary solid
   Contrast against #0E0D14, computed with the WCAG 2.1 relative-luminance
   formula:
     #F5F4FB 17.0:1   #CAC7DC 11.5:1   #A8A1F7 8.2:1   #8079EE 5.3:1
     #847F99 4.93:1   muted foreground (60% of #CAC7DC over #0E0D14) 4.70:1
   All >= 4.5:1, i.e. AA for normal text.
--------------------------------------------------------------------------- */
body,
.color-scheme-1 {
  /* --- surface + ink ---------------------------------------------------- */
  --color-background: rgb(14 13 20 / 1.0) !important;
  --color-background-rgb: 14 13 20 !important;
  --color-foreground: rgb(202 199 220 / 1.0) !important;
  --color-foreground-rgb: 202 199 220 !important;
  --color-foreground-heading: rgb(245 244 251 / 1.0) !important;
  --color-foreground-heading-rgb: 245 244 251 !important;

  /* --- accent ------------------------------------------------------------
     Was #534AB7 (2.79:1 on #0E0D14 — this is what made "Log in" and
     "Show more" almost unreadable). #A8A1F7 is the link colour the
     hand-written footer/catalogue rules already use, and measures 8.2:1.
     --color-primary-hover doubles as a 10%-opacity selection tint on
     li.localization-form__list-item, so it stays purple rather than the
     gold used for hand-written :hover — a gold tint there reads as a
     warning, not a selection.                                             */
  --color-primary: rgb(168 161 247 / 1.0) !important;
  --color-primary-rgb: 168 161 247 !important;
  --color-primary-hover: rgb(128 121 238 / 1.0) !important;
  --color-primary-hover-rgb: 128 121 238 !important;

  /* --- hairlines ---------------------------------------------------------
     Was #E8E6E0. Deliberately an OPAQUE #3A3750 rather than
     rgb(255 255 255 / .14): --color-border-rgb is consumed both bare and
     inside rgb(... / opacity), and a bare white triplet would paint solid
     white borders wherever the opacity form is not used.                  */
  --color-border: rgb(58 55 80 / 1.0) !important;
  --color-border-rgb: 58 55 80 !important;

  /* --- form fields -------------------------------------------------------
     Was rgba(255,255,255,.78) on #1A1A18 ink — the white pills seen in the
     country/language selector and in every Horizon search field.          */
  --color-input-background: rgb(22 21 31 / 1.0) !important;
  --color-input-text: rgb(245 244 251 / 1.0) !important;
  --color-input-text-rgb: 245 244 251 !important;
  --color-input-border: rgb(74 70 100 / 1.0) !important;
  --color-input-hover-background: rgb(30 28 42 / 1.0) !important;

  /* --- primary button ----------------------------------------------------
     Was #1A1A18 (near-black) on a #0E0D14 page: a button that disappears
     into its own background. No element on the audited templates paints it
     today (the real CTAs are hand-styled gradients), so this is a latent
     bug being closed, not a visible change. White on #534AB7 = 6.9:1,
     white on the #6B62D4 hover = 4.9:1.                                   */
  --color-primary-button-text: rgb(255 255 255 / 1.0) !important;
  --color-primary-button-background: rgb(83 74 183 / 1.0) !important;
  --color-primary-button-border: rgb(83 74 183 / 1.0) !important;
  --color-primary-button-hover-text: rgb(255 255 255 / 1.0) !important;
  --color-primary-button-hover-background: rgb(107 98 212 / 1.0) !important;
  --color-primary-button-hover-border: rgb(107 98 212 / 1.0) !important;

  /* --- secondary button --------------------------------------------------
     This one IS visible: a.skip-to-content-link.button-secondary is the
     first thing a keyboard or screen-reader user reaches, and it measured
     #1A1A18 on #0E0D14 = 1.11:1. #CAC7DC takes it to 11.5:1.              */
  --color-secondary-button-text: rgb(202 199 220 / 1.0) !important;
  --color-secondary-button-background: rgb(0 0 0 / 0.0) !important;
  --color-secondary-button-border: rgb(74 70 100 / 1.0) !important;
  --color-secondary-button-hover-text: rgb(245 244 251 / 1.0) !important;
  --color-secondary-button-hover-background: rgb(30 28 42 / 1.0) !important;
  --color-secondary-button-hover-border: rgb(107 98 212 / 1.0) !important;

  /* --- variant swatches --------------------------------------------------
     No live consumer: every product in the catalogue is single-variant, so
     nothing renders these today. Included anyway because the shipped
     --color-variant-hover-background is rgb(245,245,245) — the moment a
     multi-variant product is added, hovering a swatch would flash a white
     tile on the dark page, i.e. the exact class of bug this file exists to
     remove. Cheap to set now, invisible until it matters.                 */
  --color-variant-background: rgb(30 28 42 / 1.0) !important;
  --color-variant-border: rgb(74 70 100 / 1.0) !important;
  --color-variant-text: rgb(202 199 220 / 1.0) !important;
  --color-variant-text-rgb: 202 199 220 !important;
  --color-variant-hover-background: rgb(40 37 56 / 1.0) !important;
  --color-variant-hover-text: rgb(245 244 251 / 1.0) !important;
  --color-variant-hover-border: rgb(128 121 238 / 1.0) !important;
  --color-selected-variant-background: rgb(83 74 183 / 1.0) !important;
  --color-selected-variant-border: rgb(128 121 238 / 1.0) !important;
  --color-selected-variant-text: rgb(255 255 255 / 1.0) !important;
  --color-selected-variant-hover-background: rgb(107 98 212 / 1.0) !important;
  --color-selected-variant-hover-text: rgb(255 255 255 / 1.0) !important;
  --color-selected-variant-hover-border: rgb(128 121 238 / 1.0) !important;

  /* --color-shadow / --color-shadow-rgb are left alone: they are already
     rgb(0 0 0), which is what a dark theme wants. */
}


/* ---------------------------------------------------------------------------
   B. body's own paint
   base.css already declares `body { background: var(--color-background) }`,
   so block A darkens body for free. This line exists only to neutralise the
   homepage-only opt-in `.template-index body { background-color: rgb(14,13,20) }`
   drifting away from the token — same value, one source of truth now.
--------------------------------------------------------------------------- */
body {
  background-color: var(--color-background);
}


/* ---------------------------------------------------------------------------
   C. LIGHT ISLAND — .generator-page (46 generator pages + /pages/ai-generators)
   The single place on the site that is light ON PURPOSE. It sits inside the
   dark <main>, paints its own `background-color:#F7F6F2 !important`, and its
   controls read the scheme tokens straight off <body> (see the header of this
   file for the measured list). Block A would hand them dark values, so the
   original light set is restored here verbatim — these are the exact values
   read from the theme's inline scheme block, not re-picked by hand.

   No !important: a declaration on the element itself always beats a value
   INHERITED from <body>, whatever its importance. Keeping it plain means a
   future rule can still override it normally.

   .generator-page .color-scheme-1 is included defensively — the audited
   generator page has zero color-scheme nodes inside the island, but if a
   section is ever dropped in there it must stay light too.

   >>> IF YOU ADD ANOTHER DELIBERATELY LIGHT BLOCK, ADD ITS CLASS HERE.
   >>> Do NOT sprinkle !important at the call site — that is how we ended up
   >>> with a dark theme built out of one rule bolted to <main>.
--------------------------------------------------------------------------- */
.generator-page,
.generator-page .color-scheme-1 {
  --color-background: rgb(247 246 242 / 1.0);
  --color-background-rgb: 247 246 242;
  --color-foreground: rgb(85 85 80 / 1.0);
  --color-foreground-rgb: 85 85 80;
  --color-foreground-heading: rgb(26 26 24 / 1.0);
  --color-foreground-heading-rgb: 26 26 24;

  --color-primary: rgb(83 74 183 / 1.0);
  --color-primary-rgb: 83 74 183;
  --color-primary-hover: rgb(60 52 137 / 1.0);
  --color-primary-hover-rgb: 60 52 137;

  --color-border: rgb(232 230 224 / 1.0);
  --color-border-rgb: 232 230 224;

  --color-input-background: rgb(255 255 255 / 0.78);
  --color-input-text: rgb(26 26 24 / 1.0);
  --color-input-text-rgb: 26 26 24;
  --color-input-border: rgb(232 230 224 / 1.0);
  --color-input-hover-background: rgb(244 243 239 / 1.0);

  --color-primary-button-text: rgb(255 255 255 / 1.0);
  --color-primary-button-background: rgb(26 26 24 / 1.0);
  --color-primary-button-border: rgb(26 26 24 / 1.0);
  --color-primary-button-hover-text: rgb(255 255 255 / 1.0);
  --color-primary-button-hover-background: rgb(83 74 183 / 1.0);
  --color-primary-button-hover-border: rgb(83 74 183 / 1.0);

  --color-secondary-button-text: rgb(26 26 24 / 1.0);
  --color-secondary-button-background: rgb(0 0 0 / 0.0);
  --color-secondary-button-border: rgb(232 230 224 / 1.0);
  --color-secondary-button-hover-text: rgb(26 26 24 / 1.0);
  --color-secondary-button-hover-background: rgb(244 243 239 / 1.0);
  --color-secondary-button-hover-border: rgb(232 230 224 / 1.0);

  --color-variant-background: rgb(26 26 24 / 1.0);
  --color-variant-border: rgb(26 26 24 / 1.0);
  --color-variant-text: rgb(255 255 255 / 1.0);
  --color-variant-text-rgb: 255 255 255;
  --color-variant-hover-background: rgb(245 245 245 / 1.0);
  --color-variant-hover-text: rgb(0 0 0 / 1.0);
  --color-variant-hover-border: rgb(230 230 230 / 1.0);
  --color-selected-variant-background: rgb(83 74 183 / 1.0);
  --color-selected-variant-border: rgb(83 74 183 / 1.0);
  --color-selected-variant-text: rgb(255 255 255 / 1.0);
  --color-selected-variant-hover-background: rgb(26 26 24 / 1.0);
  --color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
  --color-selected-variant-hover-border: rgb(26 26 24 / 1.0);

  /* The island's own ink, so nothing inherits #CAC7DC from <body>. Same
     values the page's own :root tokens already declare. */
  color: var(--text-primary, #1A1A18);
}


/* ---------------------------------------------------------------------------
   D. SHOPIFY COOKIE-CONSENT BANNER (shopify-pc__banner__*)
   NOT rendered by the theme — Shopify's Customer Privacy script injects both
   the markup (a <section id="shopify-pc__banner"> appended straight to
   <body>) and an inline <style> block, at runtime. Its colours come from
   Shopify admin > Settings > Customer privacy > Cookie banner > "Customize
   appearance"; there is no "dark" preset there that matches #0E0D14, which
   is why it shipped white.

   CAN the theme repaint it from CSS? YES — verified, not assumed:
     - the banner is in the normal document, not a shadow root
       (document.querySelectorAll('*') finds it, so a stylesheet reaches it);
     - its own rules are ordinary and low-specificity:
         .shopify-pc__banner__dialog                                   (0,1,0)
         .shopify-pc__banner__dialog h2 / p / a                        (0,1,1)
         .shopify-pc__banner__dialog button.shopify-pc__banner__btn-*  (0,2,1)
     - the block is injected into <head> AFTER this stylesheet, so equal
       specificity would lose on source order. !important is therefore
       required here and is used only in this block.

   Measured before: dialog rgb(255,255,255); h2/p/a rgb(31,31,31);
   Accept + Decline buttons rgb(255,255,255) background with rgb(51,51,51)
   text and a rgb(31,31,31) border — a white slab across the bottom of every
   dark page.
   After, against the #16151F panel: heading 16.5:1, body 11.1:1,
   policy link 7.9:1, Accept (white on #534AB7) 6.9:1, Decline 11.1:1.

   The "Manage preferences" modal is handled separately in block D2 — its
   markup does not exist until the button is clicked, so it had to be opened
   and read before it could be styled.
--------------------------------------------------------------------------- */
.shopify-pc__banner__dialog {
  background-color: #16151F !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .55) !important;
}
.shopify-pc__banner__dialog h2 { color: #F5F4FB !important; }
.shopify-pc__banner__dialog p  { color: #CAC7DC !important; }
.shopify-pc__banner__dialog a  { color: #A8A1F7 !important; }

.shopify-pc__banner__dialog button.shopify-pc__banner__btn-accept {
  background: #534AB7 !important;
  border: 1px solid #8079EE !important;
  color: #FFFFFF !important;
}
.shopify-pc__banner__dialog button.shopify-pc__banner__btn-decline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #CAC7DC !important;
}
.shopify-pc__banner__dialog button.shopify-pc__banner__btn-manage-prefs {
  color: #A8A1F7 !important;
}


/* ---------------------------------------------------------------------------
   D2. SHOPIFY CONSENT PREFERENCES MODAL (shopify-pc__prefs__*)
   The panel behind "Manage preferences". Neither its markup nor its CSS
   exists in the document on load — querySelectorAll('[class*="shopify-pc__prefs"]')
   returns 0 nodes and 0 matching rules — so it had to be opened once and
   read before anything could be written here. Nothing below is guessed;
   every selector was copied off the injected stylesheet.

   Measured with the panel open:
     section#shopify-pc__prefs__dialog ......... rgb(255,255,255)
     header h2 / intro h3 / option labels ...... rgb(31,31,31)
     option descriptions ....................... rgba(31,31,31,.9)
     header-close svg path ..................... fill="#000" (attribute)
     header-actions button ..................... rgb(255,255,255) bg,
                                                 rgb(31,31,31) text+border
     header-actions button.primary ............. rgb(31,31,31) bg, white text
     header border-bottom, option:first-child .. 1px solid rgb(224,224,224)

   THIS BLOCK IS ALSO A REGRESSION FIX, not just polish. Block A darkens
   --color-foreground on <body>, and several nodes in this modal have no
   colour of their own — div#shopify-pc__prefs, .shopify-pc__prefs__intro-main
   and .shopify-pc__prefs__header-actions measured rgb(202,199,220) INHERITED
   straight off body. On the white panel that is roughly 1.5:1. Darkening the
   panel is what makes that inherited ink correct again.

   The checkbox icons are deliberately LEFT ALONE. Shopify draws them as a
   24x24 <svg> with background-color:#fff and a path whose fill is baked into
   the markup (hsl(0deg,0%,12%)), and only the "checked" variant is present
   in the DOM to read. Recolouring blind could make the unchecked state
   invisible; a white/near-black checkbox on the dark panel is unambiguous as
   it stands.

   Close-button icon: the path carries fill="#000" as a presentation
   ATTRIBUTE, which any CSS `fill` beats, so it recolours cleanly.

   Verified after: 0 strings below 4.5:1 anywhere inside #shopify-pc__prefs.
--------------------------------------------------------------------------- */
.shopify-pc__prefs__dialog {
  background-color: #16151F !important;
  color: #CAC7DC !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .65) !important;
}
.shopify-pc__prefs__dialog header {
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}
.shopify-pc__prefs__dialog header h2 { color: #F5F4FB !important; }
.shopify-pc__prefs__header-close svg path { fill: #CAC7DC !important; }

.shopify-pc__prefs__header-actions button {
  background: transparent !important;
  color: #CAC7DC !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
}
.shopify-pc__prefs__header-actions button.primary {
  background: #534AB7 !important;
  color: #FFFFFF !important;
  border: 1px solid #8079EE !important;
}

.shopify-pc__prefs__intro h3 { color: #F5F4FB !important; }
.shopify-pc__prefs__intro p,
.shopify-pc__prefs__intro ul li,
.shopify-pc__prefs__intro-main,
.shopify-pc__prefs__intro-explain,
.shopify-pc__prefs__options { color: #CAC7DC !important; }
.shopify-pc__prefs__option label { color: #F5F4FB !important; }
/* the four per-category descriptions carry their OWN rgba(31,31,31,.9), so
   inheriting from .shopify-pc__prefs__options is not enough — measured 1.09:1
   on the new dark panel until this line was added. */
.shopify-pc__prefs__option p { color: #CAC7DC !important; }
.shopify-pc__prefs__option:first-child {
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
}
.shopify-pc__prefs__dialog a { color: #A8A1F7 !important; }


/* ---------------------------------------------------------------------------
   E. Two leftovers that the token work alone cannot reach
--------------------------------------------------------------------------- */

/* E1. Current page number in pagination.
   styles.css declares `.pagination__link--current { color: var(--color-background) }`
   — the number is meant to be knocked out of a filled pill, but no pill is
   painted here: the element computed background-color rgba(0,0,0,0) and
   background-image none, so the "1" rendered #0E0D14 on #0E0D14 = 1.00:1,
   completely invisible on /collections/... Darkening the token cannot fix
   this one; it needs the opposite colour.
   Doubling the class scores (0,2,0) so it beats styles.css — which loads
   after this file — without an !important. Result 17.0:1. */
.pagination__link--current.pagination__link--current {
  color: var(--color-foreground-heading);
}

/* E2. Third-party language-switcher stub.
   A 2x2px div.tl-switcher-container, position:absolute, z-index:9999,
   background rgb(255,255,255), appended to <body> by the translation app.
   Its list (.tl-languages-unwrap) is display:none, so the only thing it
   renders is a white speck pinned near the top-right corner over the dark
   header. Only the outer stub is made transparent — the app's own list
   styling is untouched, so nothing breaks if the switcher is ever enabled. */
.tl-switcher-container { background-color: transparent !important; }

/* ===== kms-contrast.css ===== */
/* ============================================================================
   kms-contrast.css — WCAG AA (4.5:1) fixes for hard-coded text colours
   ----------------------------------------------------------------------------
   Все цвета ниже были прибиты хексами прямо в CSS секций (inline <style> в
   <body>) или в kms-inline.css, поэтому системная правка тёмной схемы
   (kms-dark-scheme.css, работающая через токены) их не подхватила.

   Файл подключается в snippets/stylesheets.liquid, т.е. грузится в <head>.
   Почти все исходные правила лежат ПОЗЖЕ (inline <style> в <body> или
   kms-inline.css, который подключается после stylesheets.liquid), поэтому при
   равной специфичности мы проигрываем по порядку. Отсюда удвоенные/утроенные
   классы: специфичность строго выше исходной, !important не нужен.
   !important стоит ровно в одном месте — там, где исходное правило само
   объявлено с !important (см. блок Judge.me).

   Замеры сделаны на 1920x1080 на живых страницах:
   /pages/cold-email-generator, /pages/ai-generators, /,
   /collections/all-skills, /products/executive-assistant-skill-claude,
   /blogs/news/agentic-ai-examples
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1. Тёмный баннер-диаграмма сверху страниц генераторов
   Фоны: .kms-node — #1F1F1D, окружающий баннер — #1A1A18.
   Источник: inline <style> секции генератора, специфичность (0,1,0)/(0,2,0).
   Приглушённый серый остаётся приглушённым — просто на 2 ступени светлее.
   ------------------------------------------------------------------------- */

/* БЫЛО #76757F на #1F1F1D = 3.65:1 — ниже AA.
   СТАЛО #94939D = 5.44:1. */
.kms-node__sub.kms-node__sub {
  color: #94939D;
}

/* БЫЛО #76757F на #1A1A18 = 3.84:1 — ниже AA.
   СТАЛО #94939D = 5.74:1. */
.kms-hub__sub.kms-hub__sub {
  color: #94939D;
}

/* БЫЛО #76757F на #1A1A18 = 3.84:1 — ниже AA.
   Исходное правило `.kms-code .t-mut` имеет специфичность (0,2,0),
   поэтому здесь нужен третий класс — (0,3,0).
   СТАЛО #94939D = 5.74:1. */
.kms-code .t-mut.t-mut {
  color: #94939D;
}

/* БЫЛО #6E6D78 на #1A1A18 = 3.42:1 — худший показатель в баннере.
   Это анимированная «влетающая» строка кода; по замыслу она тусклее
   соседних подписей, поэтому берём оттенок на ступень темнее, чем
   .kms-node__sub — иерархия сохраняется.
   СТАЛО #8E8D97 = 5.32:1.
   Анимация codeIn трогает только opacity/transform, цвет не перебивает. */
.kms-code--in.kms-code--in {
  color: #8E8D97;
}


/* ----------------------------------------------------------------------------
   2. Светлый остров генератора (фон #FFFFFF внутри панели и #F7F6F2 у каталога)
   Источник: inline <style> секции, `--text-muted: #888780` объявлен на :root.
   Сам токен не трогаем — он глобальный и на тёмных участках работает иначе;
   правим только конкретные светлые узлы. Всё ограничено `.generator-page`,
   чтобы generic-класс `.opt` не задел другие шаблоны.
   ------------------------------------------------------------------------- */

/* БЫЛО var(--text-muted) = #888780:
     .panel__label на #FFFFFF   = 3.61:1
     .opt         на #FFFFFF    = 3.61:1
     .dir-cat__n  на #F7F6F2    = 3.33:1
   Все ниже AA.
   СТАЛО #6B6A63 — тот же тёплый серо-оливковый тон, просто глубже:
     на #FFFFFF = 5.43:1, на #F7F6F2 = 5.02:1.
   Остаётся заметно светлее основного текста (#1A1A18), т.е. по-прежнему
   читается как вторичный. */
.generator-page .panel__label.panel__label,
.generator-page .opt.opt,
.generator-page .dir-cat__n.dir-cat__n {
  color: #6B6A63;
}


/* ----------------------------------------------------------------------------
   3. Тёмные карточки (#1C1B27): каталог на главной, блок «vs» на товаре/статье
   ------------------------------------------------------------------------- */

/* БЫЛО #847F99 на #1C1B27 = 4.43:1 — чуть-чуть не дотягивает.
   На #0E0D14 этот же цвет даёт 5.04:1, поэтому проблема именно на карточке.
   СТАЛО #8B86A1 = 4.87:1 на #1C1B27 (и 5.54:1 на #0E0D14). */
.kmsc-count.kmsc-count {
  color: #8B86A1;
}

/* БЫЛО #847F99 на #1C1B27 = 4.43:1.
   Источник — kms-inline.css (0,1,0), грузится ПОСЛЕ этого файла,
   поэтому нужен удвоенный класс.
   СТАЛО #8B86A1 = 4.87:1. */
.kms-vs__x.kms-vs__x {
  color: #8B86A1;
}

/* БЫЛО color: var(--acc) — акцент задаётся инлайн-стилем на каждой карточке,
   поэтому конкретный цвет разный. Замеры всех 10 акцентов на #1C1B27:
     #A855F7 = 4.30  (единственный ниже AA)
     #3B82F6 = 4.62, #8079EE = 4.77, #818CF8 = 5.70, #FB7185 = 6.32,
     #14B8A6 = 6.83, #38BDF8 = 7.93, #E6A817 = 8.08, #34D399 = 8.84,
     #2DD4BF = 9.13
   Перебить инлайн-переменную нельзя без !important, да и незачем: --acc
   используется ещё для рамки, свечения и иконки. Вместо этого подмешиваем
   10% белого прямо в цвет текста — тон сохраняется, читаемость растёт.
   СТАЛО минимум по палитре 4.96:1 (#A855F7 → #B166F8), максимум 10.21:1.
   color-mix уже используется в теме (.kmsc-icon), так что поддержка ок. */
.kmsc-open.kmsc-open {
  color: color-mix(in srgb, var(--acc, #8079EE) 90%, #FFFFFF);
}


/* ----------------------------------------------------------------------------
   4. Разделитель «·» в шапке коллекции
   ------------------------------------------------------------------------- */

/* БЫЛО rgba(160,159,190,.4) → фактически #484758 на #0E0D14 = 2.15:1.
   Формально это декоративная пунктуация, но стоит внутри строки текста и
   попадает в аудит, поэтому доводим до AA самой мягкой правкой — поднимаем
   только альфу, тон не трогаем.
   СТАЛО rgba(160,159,190,.78) ≈ #807F99 = 4.9:1.
   Соседние пункты меты идут #A09FBE (7.55:1), так что точка по-прежнему
   заметно тусклее и иерархия строки не ломается. */
.kms-chero__dot.kms-chero__dot {
  color: rgba(160, 159, 190, 0.78);
}


/* ----------------------------------------------------------------------------
   5. Иконка «+» в FAQ статей блога (sections/kms-article-faq.liquid)
   ------------------------------------------------------------------------- */

/* БЫЛО #534AB7 на #0E0D14 = 2.79:1 — худший показатель по всему сайту.
   #534AB7 — это цвет ФОНА кнопок темы (--color-primary-button-background),
   он не предназначен для текста на тёмном.
   СТАЛО #8079EE = 5.42:1 — фиолетовый той же линейки, уже используется в
   теме как --color-primary-hover и как акцент карточек каталога. */
.kms-afaq__icon.kms-afaq__icon {
  color: #8079EE;
}


/* ----------------------------------------------------------------------------
   6. Judge.me
   ------------------------------------------------------------------------- */

/* 6a. Кнопка «Write a review» на странице товара.
   БЫЛО #CAC7DC на #534AB7 = 4.19:1.
   Это НЕ баг приложения: сам Judge.me отдаёт кнопке
   --jm-review-widget-button-text-color: #FFFFFF. Цвет перебивает правило
   ТЕМЫ в kms-inline.css:
     main[data-template="product"] [class^="jm-"]:not(svg):not(path)
     { color: rgb(202,199,220) !important }
   — оно красит вообще всё внутри виджета под тёмный фон страницы и заодно
   портит текст на залитой кнопке. Точечно возвращаем белый.
   !important здесь обязателен: исходное правило само с !important.
   Специфичность исходного (0,2,3), нашего — (0,3,1) и (0,4,1), т.е. выше.
   СТАЛО #FFFFFF на #534AB7 = 6.93:1. */
main[data-template='product'] .jm-button.jm-button--primary,
main[data-template='product'] .jm-button.jm-button--primary .jm-text {
  color: #FFFFFF !important;
}

/* 6b. Бейдж «4.9 out of 5 stars / Verified» на главной.
   БЫЛО #108474 (фирменный тил Judge.me) на #0E0D14 = 4.21:1.
   СТАЛО #17A28E = 6.07:1 — тот же тон, поднятая светлота.
   Звёзды красятся тем же правилом, поэтому осветляем группу целиком,
   иначе число и звёзды разъедутся по цвету.
   Правило приложения имеет специфичность (0,2,0) и лежит в <body>,
   поэтому здесь третий класс. Без !important: если Judge.me когда-нибудь
   перерисует виджет с другими классами или добавит !important, правка
   просто перестанет применяться и ничего не сломает.
   ВНИМАНИЕ: это стили стороннего приложения. Правильное «долгое» решение —
   поменять primary color в админке Judge.me; CSS здесь лишь страховка. */
.jdgm-all-reviews-text .jdgm-all-reviews-rating.jdgm-all-reviews-rating,
.jdgm-all-reviews-text .jdgm-all-reviews-rating .jdgm-star.jdgm-star,
.jdgm-all-reviews-text .jdgm-all-reviews-text__text.jdgm-all-reviews-text__text,
.jdgm-verified-by .jdgm-verified-by__text.jdgm-verified-by__text {
  color: #17A28E;
}

/* ===== kms-nav-polish.css ===== */
/* ===== NAV POLISH for the Browse menu ==================================
   Sections 1-2: mega-panel geometry and the old FREE chip (2026-08-12,
   KAN-446). Sections 3-8: the 2026-10-04 header pass (KAN-916, KAN-922,
   KAN-927, KAN-930, KAN-933, KAN-929).

   NOTE FOR WHOEVER TOUCHES THIS NEXT: a new .css file dropped into assets/
   is NOT linked by anything in this theme. Several attempts in one day
   proved it the hard way. Put header CSS in THIS file, which is linked.
   ===================================================================== */

/* --- 1. Room for the Browse panel -------------------------------------
   sections/kms-announcement-bar.liquid ships an inline <style> clamping
   every submenu to min(92vw, 720px) with 2 max-content columns. Fine for
   8-13 links; the Browse menu holds 19 across three groups and rendered
   as a wall. The clamp is NOT removed: the rounded 1200px card is the
   theme's language and a full-bleed dropdown would fight it.

   Specificity: the shipped rules are (0,2,0) with !important in an inline
   <style> in <body>, so an equal rule from <head> loses on source order.
   #header-component takes these to (1,2,0), which wins even against
   !important. Scoped to the centre nav so the drawer is untouched. */
#header-component .header__column--center .menu-list__list-item .menu-list__submenu {
  max-width: min(94vw, 1200px) !important;
  width: max-content !important;
}
#header-component .header__column--center .menu-list__list-item .menu-list__submenu .mega-menu__grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  gap: 8px 28px !important;
}

/* --- 2. The FREE chip collides with the brace on "Free" ---------------
   kms-polish.css carries a gold FREE chip keyed on href*="ai-generators".
   Two rules then fight over the same ::after: the brace rule wins
   `content`, the chip rule still applies background and padding, and the
   cascade resolves per property - a closing brace on an orange pill. */
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="ai-generators"] .menu-list__link-title::after {
  content: " }" !important;
  background: none !important;
  color: #3E3A57 !important;
  -webkit-text-fill-color: #3E3A57 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}
.menu-drawer__menu-item[href*="ai-generators"] .menu-drawer__menu-item-text::after {
  content: none !important;
}

/* ===== 3. KAN-916. ONE FILLED BUTTON, NO BADGE SOUP ====================
   V88 shipped the new Browse menu but none of the decoration was touched,
   so the bar carried four competing accents: a lime pill with a glow and
   a pink dot on "How it works", a SAVE chip on "Bundles", a blue NEW
   badge next to MCP, and a pink filled "Get Unlimited".
   sections/kms-home-v69.liquid states the rule this breaks: exactly ONE
   filled button above the fold.

   WHY THE OVERRIDE LIVES HERE. Three generations of stylesheet re-style
   the same elements: kms-polish.css (gold SAVE + braces),
   kms-lab-recolor-v79.css (lime recolour), kms-lab-v80.css (pink lab
   pass, and the one that wins - `html:not(#kmslab) body ...` with
   !important). Only kms-polish.css and this file are theme assets; both
   lab files live in Shopify Files and cannot be edited in place (same
   trap as KAN-873). So the fix out-specifies them rather than deleting.

   SPECIFICITY MATH. `html:not(#kmslab) body :is(.kms-hz__cta,
   #header-component .kms-hz__cta)` computes to (2,1,2) because :not()
   and :is() each count their most specific argument. Everything below is
   (2,1,3) or higher, so load order stops mattering. Do not shorten these
   selectors.

   THE TWO PSEUDO-ELEMENTS ON a.menu-list__link ARE NOT THE SAME THING.
   ::after is the dropdown caret (5x5, drawn with borders) and must stay -
   a first pass removed both and Browse lost every hint that it opens
   anything. ::before is the 7x7 lab dot and is what goes. Strip them
   separately, never with one blanket rule.
   ===================================================================== */

html:not(#kmslab) body #header-component a.kms-hz__cta,
html:not(#kmslab) body #header-component a.kms-hz__cta:hover {
  background: #C6FF3A !important;
  border-color: #C6FF3A !important;
  color: #080A08 !important;
  -webkit-text-fill-color: #080A08 !important;
  box-shadow: none !important;
}

html:not(#kmslab) body #header-component span.kms-hz__badge {
  display: none !important;
}

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a .menu-list__link-title::after,
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a .menu-list__link-title::before {
  content: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link {
  background: none !important;
  border-color: transparent !important;
  font-style: normal !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link::before {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link span.menu-list__link-title {
  background: none !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

html:not(#kmslab) body a.menu-drawer__menu-item .menu-drawer__menu-item-text::after,
html:not(#kmslab) body a.menu-drawer__menu-item .menu-drawer__menu-item-text::before {
  content: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== 4. KAN-916 part 2. PRESENCE =====================================
   Section 3 went from four accents to none and the bar read as dead.
   Measured at 1440px: all four items were colour rgb(226,232,221),
   weight 400, size 13px, contrast 15.9:1 - legibility was never the
   problem, ranking and reaction were.
   ===================================================================== */
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  border-radius: 10px !important;
  padding-inline: 12px !important;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease !important;
}
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link:hover::after {
  border-color: currentColor !important;
  opacity: 1 !important;
}

/* ===== 5. KAN-922. THE NAV USES THE BRAND PALETTE ======================
   Every destination OWNS a colour, from the theme's own palette:
     Browse lime #C6FF3A | Bundles pink #FF2E88 |
     How it works blue #3D8BFF | Pricing violet #9B6BFF
   Adding a fifth item is ONE line: set its --kh-accent.

   ### THE UNDERLINE GOES ON THE TEXT, NOT ON THE LINK BOX. READ THIS. ###
   The first version drew it as `box-shadow: inset 0 -2px` on
   a.menu-list__link. It shipped visibly broken, for three reasons that
   all come from painting the BOX instead of the WORD:
     1. The link has border-radius: 10px, and an inset shadow follows the
        radius - a "2px underline" renders as a U with both ends curled up.
     2. Measured: text bottom y=48, link bottom y=63. The rule landed 15px
        BELOW the word, far enough to look like a detached floating box.
     3. The boxes are not the same height, so the four rules sat at two
        different heights.
   border-bottom on the inner span fixes all three. The box keeps
   border-radius for the hover tint only - a background, never an outline.
   Browse also carried `inset 0 0 0 1px`, a full rounded ring; that was the
   lime rectangle people saw. DO NOT reintroduce a ring or an inset shadow.

   ### WHY THE FOUR ITEMS NEED FORCING TO ONE BOX ###
   "How it works" is a legacy pill and does NOT match its neighbours:
       margin-block  6.5px   vs  0        <- pushed the link down 7px
       border-width  1px     vs  0        <- ate 2px of height
       line-height   15px    vs  25.07px  <- different text box
   Section 3 only made that border TRANSPARENT, so it still occupied space.
   Its GLYPHS sat 3px lower than the other three (measured on the text
   node: top 25.7 vs 22.7) while its underline sat 2px higher.
   Zeroing margin-block and border-width and pinning line-height puts all
   four on identical boxes - verified glyph top 23.2, rule y 49 on each.
   ===================================================================== */
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[href$="/collections/all"] { --kh-accent: #C6FF3A; }
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[href$="/collections/bundles"] { --kh-accent: #FF2E88; }
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[href*="/pages/how-it-works"] { --kh-accent: #3D8BFF; }
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[href$="/pages/pricing"] { --kh-accent: #9B6BFF; }

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link {
  box-shadow: none !important;
  margin-block: 0 !important;
  border-width: 0 !important;
  line-height: 24px !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: center !important;
  padding-block: 9px !important;
}

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link span.menu-list__link-title {
  line-height: 24px !important;
  border-bottom: 2px solid color-mix(in srgb, var(--kh-accent, #98A294) 32%, transparent) !important;
  padding-bottom: 3px !important;
  transition: border-color .16s ease, color .16s ease !important;
}

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link:is(:hover, :focus-visible),
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[aria-current]:not([aria-current="false"]) {
  color: var(--kh-accent, #EEF3EA) !important;
  -webkit-text-fill-color: var(--kh-accent, #EEF3EA) !important;
  background: color-mix(in srgb, var(--kh-accent, #98A294) 9%, transparent) !important;
}
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link:is(:hover, :focus-visible) span.menu-list__link-title,
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[aria-current]:not([aria-current="false"]) span.menu-list__link-title {
  color: var(--kh-accent, #EEF3EA) !important;
  -webkit-text-fill-color: var(--kh-accent, #EEF3EA) !important;
  border-bottom-color: var(--kh-accent, #EEF3EA) !important;
}

html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[href$="/collections/all"] {
  font-weight: 700 !important;
  background: color-mix(in srgb, #C6FF3A 10%, transparent) !important;
}
html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link[href$="/collections/all"]:hover {
  background: color-mix(in srgb, #C6FF3A 18%, transparent) !important;
}

html:not(#kmslab) body #header-component a[href*="/pages/connector"]:not(.kms-hz__cta) {
  color: #3D8BFF !important;
  -webkit-text-fill-color: #3D8BFF !important;
}

html:not(#kmslab) body a.menu-drawer__menu-item .menu-drawer__menu-item-text { font-weight: 500 !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html:not(#kmslab) body a.menu-drawer__menu-item[href$="/collections/all"] .menu-drawer__menu-item-text { color: #C6FF3A !important; -webkit-text-fill-color: #C6FF3A !important; font-weight: 700 !important; }
html:not(#kmslab) body a.menu-drawer__menu-item[href$="/collections/bundles"] .menu-drawer__menu-item-text { color: #FF2E88 !important; -webkit-text-fill-color: #FF2E88 !important; }
html:not(#kmslab) body a.menu-drawer__menu-item[href*="/pages/how-it-works"] .menu-drawer__menu-item-text { color: #3D8BFF !important; -webkit-text-fill-color: #3D8BFF !important; }
html:not(#kmslab) body a.menu-drawer__menu-item[href$="/pages/pricing"] .menu-drawer__menu-item-text { color: #9B6BFF !important; -webkit-text-fill-color: #9B6BFF !important; }

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  html:not(#kmslab) body #header-component :is(.header__column--center, .header__column--left) header-menu nav overflow-list > li > a.menu-list__link span.menu-list__link-title {
    border-bottom-color: var(--kh-accent, #98A294) !important;
  }
}

/* ===== 6. KAN-927. SPACING =============================================
   Measured at 1440px before any of this existed:
     left column   40 -> 851, but the nav ends at 554 => 297px of dead
                   space in the middle of the bar
     right side    search->MCP 7px | MCP->CTA 6px | CTA->account 6px |
                   account->cart 0px (touching) | cart->language 9px

   FAILED ATTEMPTS, each a different wrong element:

   1. `.header-actions__action + .header-actions__action` can NEVER match.
      Account and cart are not siblings: account sits inside
      <header-actions>, cart sits inside <cart-drawer-component> inside it.
      The gap has to go on the <header-actions> container.

   2. The gaps were first written WITHOUT a media query. They cost the
      right column ~10px, and that was enough: at 1280px "Pricing" dropped
      into the "More" overflow menu. Verified against live V88 at the same
      width, which shows no "More". The 297px of slack exists at 1440px
      and NOWHERE BELOW IT.

   ### 3. DO NOT TRY TO WIDEN THE SEARCH FIELD. IT CANNOT BE DONE HERE. ###
   The field is two nested boxes:
       <search-button class="search-action search-action--hidden-on-drawer">
         <button class="header-actions__action">   <- renders as the field
   The INNER button is sized by an inline <style> in
   snippets/kms-header-actions.liquid, @media (min-width: 990px):
   `width: 200px; min-width: 140px; max-width: 200px; flex: 0 1 auto`.
   - Sizing only the inner button to 260px shipped as a visible collision:
     the parent kept its 170px, the child overflowed by 90px and printed
     the placeholder through the MCP link (child right 1142 vs .kms-hz
     left 1069 = 73px overlap). A flex row reserves space for the ITEM.
   - Sizing the PARENT does nothing. Verified by probe: an injected rule on
     the exact matching selector applied its `outline` (so it matched and
     won the cascade) while `width` stayed 170px, at three specificities.
     <search-button> accepts `flex` but ignores `width`.
   The field stays at its native 170px, exactly as in V88.

   WIDTH BUDGET: every pixel the right side takes is a menu entry that
   collapses into "More". After changing any number here, re-check at
   1280px AND 1440px that data-menu-style is still "menu", that all four
   items are on the bar, that no visible element reads "More", and that no
   two right-side boxes overlap. data-menu-style alone is NOT enough: it
   stays "menu" while items silently collapse.
   ===================================================================== */

@media screen and (min-width: 1440px) {
  html:not(#kmslab) body #header-component .kms-hz {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-inline: 10px !important;
  }

  html:not(#kmslab) body #header-component header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html:not(#kmslab) body #header-component .header__column--right .dropdown-localization {
    margin-left: 18px !important;
  }
}

/* ===== 7. KAN-930 / KAN-933. THE SEARCH MODAL ==========================
   Measured with the panel open at 1512px, not judged by eye.

   ### A. THE RESULT ROWS HAD NO PRODUCT IN THEM. THIS IS THE BIG ONE. ###
   An inline <style> in the theme shipped these, inside @media 750px:
       .search-modal .predictive-search-results__card--product
         .resource-card__media { display: none !important; }
       .search-modal .predictive-search-results__card--product
         .resource-card .price { display: none !important; }
   So every search result was a bare text string: no cover, no price.
   Measured: 16 <img> in the markup, 0 visible. The images are real and do
   load once the container is shown (naturalWidth 44, complete: true) and
   carry proper alt text ("Resume Screener, Alex AI skill ..., cover").

   Why that matters here specifically: this catalogue has 2,500 items whose
   names differ by one word - "AI Resume Builder for Barista" vs "for
   Waitress" vs "for Digital Marketer". A text-only list gives the shopper
   nothing to choose on. The cover is the fastest discriminator and the
   price is the primary commercial input, shown on every other card on the
   site (.kms-card__price). Both are restored below.

   TRAP: each card renders TWO images (main + hover, from `image_hover:
   true` in snippets/predictive-search-products-list.liquid). Turning the
   media container back on without hiding the second one stacks them and
   the row turns to mush. img:nth-of-type(2) is hidden for that reason.

   SECOND TRAP: .resource-card is built as a GRID card - column direction,
   centred. In a row it has to be flipped to row + flex-start + left text,
   or the thumbnails sit at a different x on every line and the left edge
   goes ragged. Verified by screenshot, not by assumption.

   ### B. ONE GUTTER ###
   dialog padding was 0 and .predictive-search-form__header had
   `padding: 4px 4px 0`, putting the field at x=425 while the results
   started at x=441 - the field was MISALIGNED WITH ITS OWN RESULTS BY
   16px. Fixed with a 20px gutter; verified input, heading and link all at
   x=441.

   ### C. ONE COLUMN, NOT TWO ###
   The grid shipped `repeat(2, 1fr)` - two 301px columns. Titles run 20-50
   characters, so long ones wrapped and short ones did not:
       row heights  36, 36, 54, 54     <- ragged, with holes beside the
                                          one-line titles
   With variable-length titles a two-column grid CANNOT produce even rows.
   Single column measured: 38, 38, 38, 38 at tops 227/268/308/348.
   This is also the standard predictive-search pattern (Shopify's own
   default, Algolia, Google): one column is one eye path.
   DO NOT put this back to two columns to "save height".

   ### D. ROWS TAKE VERTICAL PADDING ONLY ###
   TWICE I gave rows horizontal padding plus a negative margin-inline on
   the list so the hover background would bleed wider than the text. BOTH
   times they did not cancel and the row text landed at 430/431 against the
   heading's 441 - the gutter fixed in part B, broken again a few lines
   below. If you want the bleed, move BOTH numbers and re-measure the TEXT.

   ### E. A NAMELESS ROW IN "Recently viewed" ###
   A card rendered as a bare price with no name. Data, not layout: its
   title anchor is empty AND carries an empty href, while the price block
   still renders. :empty cannot test it (the anchor holds a visually-hidden
   span), so the test is the empty href. The second rule hides the whole
   block when that broken card was its ONLY card. :has() cannot nest inside
   :has(), so "no good cards left" is written as :only-child.

   ### F. VERIFIED WORKING - DO NOT "FIX" THESE ###
   - Search filters correctly ("resume" returns 8 relevant items). An
     earlier doubt came from firing a synthetic input event, which the
     component ignores; test with real keystrokes.
   - "View all" is hidden by design until there is a query, via
     `predictive-search-component:has([data-search-results]) ...` in
     snippets/search-modal.liquid. Empty state correctly has no footer.
   - The lime focus ring on the field is the theme's `--color-primary`
     focus outline. It is WCAG 2.4.7 and it stays.

   ### G. KNOWN AND NOT FIXED: the lime close button ###
   snippets/search-modal.liquid asks for a transparent close button
   (--button-background-color: transparent), but kms-lab-v80.css repaints
   every .button lime and that file cannot be edited in place (section 3).
   It does not yield: border-color obeys a rule at (1,5,4) - so the
   selector matches and wins - while background-color does not change at
   (1,3,3), at (1,5,4), with two IDs, or even from an INLINE style with
   !important. Not a pseudo-element, not a child, no style attribute, and
   .button-secondary / .button-unstyled (the lab's own escape classes)
   change nothing. It needs the lab file replaced.
   ===================================================================== */

/* B. One gutter: the field lines up with the results under it. */
html:not(#kmslab) body dialog.search-modal__content .predictive-search-form__header {
  padding: 14px 20px 0 !important;
}

/* C + D. One column, even rows. */
html:not(#kmslab) body dialog.search-modal__content .predictive-search-results__list {
  grid-template-columns: 1fr !important;
  gap: 2px !important;
}

/* A. Put the product back in the row: cover + title + price. */
html:not(#kmslab) body .search-modal .predictive-search-results__card--product .resource-card {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  transition: background-color .14s ease !important;
}
html:not(#kmslab) body .search-modal .predictive-search-results__card--product .resource-card:hover {
  background-color: rgb(238 243 234 / .07) !important;
}
html:not(#kmslab) body .search-modal .predictive-search-results__card--product .resource-card__media {
  display: block !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
}
html:not(#kmslab) body .search-modal .predictive-search-results__card--product .resource-card__media img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
}
/* The hover duplicate. Without this the two covers stack. */
html:not(#kmslab) body .search-modal .predictive-search-results__card--product .resource-card__media img:nth-of-type(2) {
  display: none !important;
}
html:not(#kmslab) body .search-modal .predictive-search-results__card--product .resource-card__content {
  align-items: flex-start !important;
  text-align: left !important;
}
html:not(#kmslab) body .search-modal .predictive-search-results__card--product .resource-card .price {
  display: block !important;
  color: #9AA69A !important;
  font-size: 13px !important;
}

/* E. Drop the card whose product no longer resolves, and the block if it
      was the only one in there. */
html:not(#kmslab) body .search-modal__content li.predictive-search-results__card:has(a[href=""]) {
  display: none !important;
}
html:not(#kmslab) body .search-modal__content .recently-viewed-wrapper:has(li.predictive-search-results__card:only-child a[href=""]) {
  display: none !important;
}

/* ===== 8. KAN-929. THE SIGNED-IN AVATAR ================================
   The signed-in avatar is a lime circle with the customer's initial in
   WHITE: background rgb(198,255,58), text rgb(255,255,255), 28x28.
   White on #C6FF3A is ~1.2:1 against a 4.5:1 minimum - the letter was
   effectively invisible. An accessibility defect, not a preference.

   WHY AN EARLIER NOTE SAID THIS WAS UNFIXABLE, AND WHY THAT WAS WRONG.
   The avatar is Shopify's <shopify-account> web component in shadow DOM;
   it exposes only signed-out-avatar and dialog as parts, so ::part()
   cannot reach the signed-in circle. A first pass concluded the colour
   could only change in Shopify admin. That came from setting the custom
   properties WITHOUT a priority and reading the rendered colour of an
   INNER element - the wrong level to measure.
   Re-tested on the HOST, which exists signed out too:
       baseline               text rgb(255 255 255 / 1)   bg #C6FF3A
       plain stylesheet rule  text #0E0D14                bg #C6FF3A
   Custom properties DO cross the shadow boundary by inheritance. A rule on
   <shopify-account> is enough; !important is not required.

   THE PAIR IS SET TOGETHER ON PURPOSE. Pinning only the text would leave a
   black letter that disappears the day someone changes the brand accent in
   admin to something dark.
       #0E0D14 on #C6FF3A = 16.35:1   (was ~1.2:1)
   If the lime changes, recompute before changing either value.
   ===================================================================== */

html:not(#kmslab) body shopify-account {
  --shopify-account-signed-in-avatar-color-background: #C6FF3A;
  --shopify-account-signed-in-avatar-color-text: #0E0D14;
}

/* --- 9. V120 header pass (12.10.2026, owner: "the menu is our visual Achilles heel") -------------
   One rhythm for the whole bar: every control on the right is 40 px tall and pill shaped, 8 px apart;
   top-level links share one line box (Pricing is a bare li > a without the dropdown span wrapper and
   sat 3 px higher); the permanent lime box on Marketplace is gone (it made two boxes on /pricing),
   Marketplace stays bold, the hover / open state keeps its box. Account initial is dark with a lime
   ring instead of a second lime blob next to "See plans". */
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu overflow-list > li{display:flex!important;align-items:center!important;align-self:stretch!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu overflow-list > li > a.menu-list__link,
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu overflow-list > li > span > a.menu-list__link{display:inline-flex!important;align-items:center!important;height:40px!important;line-height:24px!important;margin-block:0!important;padding-block:0!important;border-radius:0!important;top:0!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu overflow-list > li > a.menu-list__link .menu-list__link-title,
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu overflow-list > li > span > a.menu-list__link .menu-list__link-title{line-height:24px!important}
/* right cluster */
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right{gap:8px!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right header-actions{margin-inline-start:0!important;gap:8px!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right :is(search-button .header-actions__action,.kms-hz__link,.kms-hz__cta){height:40px!important;min-height:40px!important;border-radius:999px!important;box-sizing:border-box!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right search-button .header-actions__action{width:40px!important;padding:0!important;display:inline-grid!important;place-items:center!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .kms-hz__link{padding:0 18px!important;display:inline-flex!important;align-items:center!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .kms-hz__cta{padding:0 20px!important;display:inline-flex!important;align-items:center!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right .header-actions__action:not(.kms-hz__link):not(.kms-hz__cta){width:40px!important;height:40px!important;border-radius:999px!important;display:inline-grid!important;place-items:center!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right localization-form-component{display:flex!important;align-items:center!important;height:40px!important;margin-inline-start:4px!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right select.localization-form__select{width:68px!important;min-width:0!important;height:40px!important;border-radius:999px!important;padding:0 24px 0 14px!important;border:1px solid rgb(243 243 245 / .14)!important;background-color:transparent!important;font:600 12.5px/1 'Geist Mono',ui-monospace,monospace!important;letter-spacing:.06em!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right select.localization-form__select:hover{border-color:rgb(198 255 58 / .5)!important}

/* 9b. V120 second pass (owner: "Marketplace and Pricing do not look like our design code"):
   no boxes in the left nav at all. Every item is the same Geist 15/500 in #E2E8DD; the current page
   and hover are lime text with a 2 px lime bar under the word (the site's lime accent), never a
   grey or green box. Marketplace is no longer bold. */
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu nav overflow-list > li a.menu-list__link,
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu nav overflow-list > li a.menu-list__link:is(:hover,:focus-visible,[aria-expanded="true"],.menu-list__link--active,[aria-current]){background:transparent!important;box-shadow:none!important;font-weight:500!important;padding-inline:10px!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu nav overflow-list > li a.menu-list__link .menu-list__link-title{color:#E2E8DD!important;-webkit-text-fill-color:currentColor!important;font-weight:500!important;padding:0!important;border-bottom:2px solid transparent!important;padding-bottom:2px!important;margin-bottom:-4px!important;transition:color .15s,border-color .15s}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu nav overflow-list > li a.menu-list__link:is(:hover,:focus-visible,[aria-expanded="true"]) .menu-list__link-title{color:#C6FF3A!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component header-menu nav overflow-list > li a.menu-list__link:is(.menu-list__link--active,[aria-current="page"]) .menu-list__link-title{color:#C6FF3A!important;border-bottom-color:#C6FF3A!important}
/* language: the "EN" label is a ::before at left 12px (older inline rule); the wrapper's own padding pushed the
   select 16 px right of it. Wrapper padding 0, select text inset 12 px = label and pill line up. */
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right .language-selector{padding:0!important;width:auto!important;gap:0!important}
html:not(#kv1):not(#kv2):not(#kv3):not(#kv4):not(#kv5) body #header-component .header__column--right .language-selector::before{left:14px!important}

/* ===== kms-cards-lightfix.css ===== */
/* KissMySkills - light-island ink fixes
   ==================================================================
   Home for every place where the "SITEWIDE DARK BASE" block in
   assets/kms-cards.css paints text for a dark background that isn't
   there. That block is scoped to main:not([data-template="index"]) and
   assumes everything inside <main> sits on #0E0D14. Wherever something
   light renders inside that same <main>, the text goes near-invisible.

   Method used throughout this file: WIN ON SPECIFICITY, NOT !important.
   The culprit selectors score (0,1,2). Every rule below scores (0,2,1)
   or higher, so the cascade for every genuinely dark template is left
   untouched.

   LINKED FROM snippets/stylesheets.liquid, and it must stay linked.
   Until 2026-08-21 this file was an orphan that nothing loaded - the
   generator fix below only ever worked because it is also duplicated
   inside kms-cards.css. Unlink it and the app-proxy fix dies silently,
   because the page it protects is only reachable with a real order id.
   It loads EARLIER than kms-cards.css; that is fine, every rule here
   wins on specificity rather than on source order.
   ================================================================== */

/* ===== 1. FREE GENERATOR PAGES (2026-08-11) =====
   .generator-page renders a light island (background #F7F6F2) on the 46
   free-generator pages plus /pages/ai-generators. Measured before the
   fix: page H1 and every article H2 at 1.01:1, i.e. invisible, on 49
   URLs. --text-primary is the generator page's own token, so this
   restores the intended ink rather than inventing a colour. */
main:not([data-template="index"]) .generator-page :is(h1,h2,h3,h4,h5,h6){color:var(--text-primary,#1A1A18)}

/* ===== 2. FILEFLARE DOWNLOAD PAGE - app proxy (KAN-158, 2026-08-21) =====
   /apps/digital-downloads/orders/<id> is an app proxy: Fileflare's markup
   is served under our domain and wrapped in OUR layout/theme.liquid, so
   it inherits every rule above. But the order card is drawn LIGHT by the
   app (#FFFFFF, with #E2E7F0 behind the order number) and we do not
   control that markup. On this page <main> carries data-template="", so
   :not([data-template="index"]) matches and the dark base applies in
   full.

   Measured on live order #1030, contrast by the WCAG formula:
     .dda-order__item-name (h3)  #F5F4FB on #FFFFFF  ->  1.09:1
     .dda-order__number          #F5F4FB on #E2E7F0  ->  1.14:1
   AA wants 4.5:1. 1.09:1 is not "hard to read", it is not readable: the
   buyer cannot see WHAT they bought or WHICH order it is, on the page
   they land on straight from the payment email.

   WHY THE RULES ARE SPLIT THE WAY THEY ARE. Line A only sets an
   inheritance root on the card. That is deliberately safe: a declared
   colour on any element always beats an inherited one, so Fileflare's own
   palette survives wherever the app actually declares it. Lines B and C
   exist because the theme DECLARES directly on h1-h3 and on p/li - and a
   declaration beats inheritance no matter what line A says - so those two
   groups have to be answered head-on.

   TRADE-OFF, STATED OUT LOUD: lines B and C also outrank a single-class
   rule of the app's own on a heading or a paragraph inside the card. If
   Fileflare later colours such an element on purpose, ours wins and
   theirs is lost. That is the price of not having to guess which tags the
   app will use next, and both replacement colours are readable on white,
   so the failure mode is "slightly wrong shade", never "invisible again".
   Measured side effect of line A on order #1030: the action link and the
   asset filename inherited #1A1A18 instead of the app's #2D3648, i.e.
   12.12:1 -> 17.43:1. Darker, same family, accepted.

   Colours are the same two tokens the generator pages use:
     #1A1A18 on #FFFFFF -> 16.1:1
     #555550 on #FFFFFF ->  7.4:1
     #555550 on #E2E7F0 ->  5.9:1

   `dda-` is Fileflare's (Digital Downloads App) class prefix. IF THE APP
   EVER CHANGES THAT PREFIX, THIS WHOLE BLOCK STOPS MATCHING AND THE BUG
   COMES BACK SILENTLY. Re-check it after any Fileflare major update.

   Other app-proxy pages served under our domain have not been audited -
   they cannot be crawled, they are not in the sitemap, and they need a
   real order to reach. Anything else light under this <main> belongs in
   this file too. */

/* A. inheritance root for the light card */
main:not([data-template="index"]) .dda-order{color:#1A1A18}

/* B. headings: answer the theme's direct declaration */
main:not([data-template="index"]) .dda-order :is(h1,h2,h3,h4,h5,h6),
main:not([data-template="index"]) :is(h1,h2,h3,h4,h5,h6)[class*="dda-"]{color:#1A1A18}

/* C. body copy: same, one step quieter */
main:not([data-template="index"]) .dda-order :is(p,li,.rte,rte-formatter),
main:not([data-template="index"]) :is(p,li)[class*="dda-"]{color:#555550}

/* D. the order number sits on #E2E7F0, not on white */
main:not([data-template="index"]) .dda-order__number,
main:not([data-template="index"]) .dda-order .dda-order__number{color:#555550}

/* E. Fileflare's OWN secondary grey, #717D96, is itself below AA and this
   is NOT caused by our theme. Measured on order #1030 with the app's
   colours untouched:
     order date          #717D96 on #F7F9FC -> 3.92:1
     iOS instructions    #717D96 on #F7F9FC -> 3.92:1
     asset meta + label  #717D96 on #FFFFFF -> 4.14:1
   Fixed here rather than filed as a follow-up: it is the same defect
   class, on the same page, in the same file, and shipping a ticket called
   "the download page is unreadable" while leaving three sub-AA labels on
   it would just get rediscovered later.
   #5A6478 keeps Fileflare's cool blue-grey family instead of switching to
   our warm #555550 - this is secondary chrome and it should still read as
   the app's, only darker. Result: 5.95:1 on white, 5.66:1 on #F7F9FC. */
main:not([data-template="index"]) .dda-order__date,
main:not([data-template="index"]) .dda-order__asset-meta,
main:not([data-template="index"]) .dda-order__asset-meta_label,
main:not([data-template="index"]) .dda-orders__ios-instructions,
main:not([data-template="index"]) .dda-orders__ios-instructions-body{color:#5A6478}

/* ===== kms-vs-fix.css ===== */
/* ==========================================================================
   kms-vs-fix.css - KAN-181, 2026-08-21

   The price badge's right-hand label carries the role: "hiring an email
   consultant". kms-inline.css sets white-space:nowrap on .kms-vs__label, and
   .kms-vs is an inline-flex box, so a long role does not wrap - it widens the
   whole badge and pushes the price out of the buy-box column.

   snippets/kms-value-compare.liquid guards against that by collapsing any
   built label longer than N characters into the generic "hiring one". On
   2026-08-21 that guard was firing on 487 of 955 English product pages and
   699 of 955 German ones: on half the catalogue the main price argument, in
   the first screen, read "hiring one".

   Letting the RIGHT label wrap removes the reason for the low cap. Measured
   over the same 955 products, raising the cap from 34 to 52 drops the
   fallback to 73 on EN and 133 on DE.

   The LEFT label stays nowrap on purpose: it is one short phrase per locale
   ("this skill", "dieser Skill") and wrapping it would misalign the price.

   Loaded from snippets/stylesheets.liquid, which renders BEFORE kms-inline.css.
   Every rule here therefore wins on SPECIFICITY (0,2,0 against the original
   0,1,0), not on source order. Do not flatten these selectors.

   WHY 28ch, AND WHY THE CAP IS 52
   -------------------------------
   The pair was picked by rendering, not by arithmetic. All 5045 labels that
   the live catalogue can actually produce (955 roles x 6 storefront locales,
   filtered to <= 52 characters) were rendered in headless Chromium at
   viewport widths 500 / 460 / 420 / 382 px - 382 being just above the 380 px
   breakpoint below which kms-inline.css wraps the whole badge anyway.

   Result: max 3 lines, max badge width 319 px, zero labels overflowing their
   column. The same sweep at 30ch / cap 56 leaves only 5 px of clearance at
   382 px, which is inside the noise of real buy-box padding, so 28 / 52 is
   where it stops.

   Raising the cap in the snippet REQUIRES raising max-width here with it, and
   re-running that sweep. Raising one without the other is how the label ends
   up four lines tall or back outside the column.
   ========================================================================== */

.kms-vs{max-width:100%}
.kms-vs__there{min-width:0}
.kms-vs__there .kms-vs__label{white-space:normal;max-width:28ch;line-height:1.25}

/* Under 380px kms-inline.css already wraps the whole badge and unsets nowrap
   on both labels. The width cap would only re-narrow it there, so drop it. */
@media (max-width:380px){
  .kms-vs__there .kms-vs__label{max-width:none}
}

/* ===== kms-cards.css ===== */
/* V137 2026-10-15 (site speed): the legacy-font @import that stood here was render-blocking on every page; the same families now load async from snippets/stylesheets.liquid. */
/* KissMySkills — product card + RETRO overrides */
/* .kms-card* lives in assets/kms-theme.css — single source of truth.
   This file used to redeclare .kms-card / :hover / __body / __price /
   __price--free with LIGHT values for a retired card design (avatar +
   initials + tags). No markup emits those members any more: every
   .kms-card on the site comes from snippets/kms-card.liquid, which is
   the dark design. Because this file loads in <head> and kms-theme.css
   loads later in <body>, the light values only ever won where
   kms-theme.css was absent — the same card rendered white there.
   Removed so there is exactly one owner. The old .kms-card *{box-sizing}
   is covered by the global *{box-sizing:border-box} in base.css. */

/* ===== RETRO catalog chrome ===== */
.kmc-eyebrow{font-family:'VT323',ui-monospace,monospace !important;font-size:16px !important;font-weight:400 !important;letter-spacing:2px !important;color:#FFB020 !important}
.kmc-eyebrow::before{content:'// '}
.kmc-head p{color:#CAC7DC !important}
.kmc-fgroup{background:#16151F !important;border:1px solid rgba(255,255,255,.15) !important;border-radius:12px !important;box-shadow:0 3px 0 0 #050409 !important}
.kmc-fgroup h4{font-family:'VT323',ui-monospace,monospace !important;font-size:14px !important;font-weight:400 !important;letter-spacing:1.5px !important;color:#A8A1F7 !important}
.kmc-search input{font-family:'VT323',ui-monospace,monospace !important;font-size:16px !important;letter-spacing:.5px !important}
.kmc-search svg{stroke:#FFB020 !important}
.kmc-opt{font-family:'DM Sans',sans-serif !important;color:#CAC7DC !important}
.kmc-opt input{accent-color:#8079EE !important}
.kmc-opt .c{font-family:'DM Mono',ui-monospace,monospace !important;color:#847F99 !important}
.kmc-count{font-family:'VT323',ui-monospace,monospace !important;font-size:17px !important;letter-spacing:.5px !important;color:#CAC7DC !important}
.kmc-count b{color:#FFB020 !important}
.kmc-sort{font-family:'VT323',ui-monospace,monospace !important}
.kmc-sort select{font-family:'VT323',ui-monospace,monospace !important;font-size:15px !important}
.kmc-clear{color:#A8A1F7 !important}
.kmc-clear:hover{color:#FFB020 !important}
.kmc-filterbtn{font-family:'VT323',ui-monospace,monospace !important;font-size:15px !important;letter-spacing:.5px !important;text-transform:uppercase !important}
.kmc-filterbtn svg{stroke:#FFB020 !important}
.kmc-apply{font-family:'VT323',ui-monospace,monospace !important;font-size:17px !important;letter-spacing:.5px !important;text-transform:uppercase !important;background:linear-gradient(#8079EE,#534AB7) !important}

/* ===== Announcement bar ===== */
.kms-announce{background:#121119 !important;border-bottom:1px solid rgba(255,255,255,.10) !important}
.kms-announce,.kms-announce *{font-family:'VT323',ui-monospace,monospace !important;letter-spacing:.5px !important}
.kms-announce__msg,.kms-announce__msg *{color:#FFCF6B !important;font-size:15px !important}
.kms-announce a{color:#A8A1F7 !important}

/* ===== Display font = Space Grotesk (homepage sections) ===== */
.kms-hero2 h1,.kmsc__heading,.kmsc-name,.kmsb__heading,.kms-tools__heading,.kms-hiw__heading,.kms-hiw__title,.kms-faq__heading,.kms-faq__q,.kms-cta__heading,.kmc-head h2,.kms-cat-label{font-family:'Space Grotesk',ui-sans-serif,sans-serif !important;font-weight:700 !important}
.kms-hero2 h1{letter-spacing:-1.5px !important}

/* ===== Finish pass: hatch + gold eyebrows (homepage) ===== */
.kms-trust,.kms-hiw,.kms-tools,.kms-faq{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 1px,transparent 1px 7px) !important}
.kms-hiw__heading::before,.kms-faq__heading::before{color:#FFB020 !important}

/* ===== Header nav (retro) ===== */
.menu-list__link-title{font-family:'VT323',ui-monospace,monospace !important;font-size:16px !important;letter-spacing:1px !important;text-transform:uppercase !important}

/* ===== Footer (retro-terminal) ===== */
.shopify-section-group-footer-group{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 1px,transparent 1px 7px)}
/* column headings = gold-prompted VT323 directory headers */
.menu__heading,.menu__heading__default{font-family:'VT323',ui-monospace,monospace !important;font-size:16px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:#A8A1F7 !important}
.shopify-section-group-footer-group .menu__heading::before{content:'> ';color:#FFB020}
/* link columns wrapped in a terminal window */
.shopify-section-group-footer-group .section:has(.footer-content){position:relative;background:#16151F !important;border:1px solid rgba(255,255,255,.14);border-radius:15px;box-shadow:0 5px 0 0 #050409,0 18px 40px rgba(0,0,0,.4);overflow:hidden;padding:52px 22px 30px !important;margin:6px 0}
.shopify-section-group-footer-group .section:has(.footer-content) .section-background{display:none !important}
.shopify-section-group-footer-group .section:has(.footer-content)::before{content:'~/sitemap --all';position:absolute;top:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#1E1C2A,#15141E);border-bottom:1px solid rgba(255,255,255,.08);font-family:'VT323',ui-monospace,monospace;font-size:15px;letter-spacing:.5px;color:#CAC7DC}
.shopify-section-group-footer-group .section:has(.footer-content)::after{content:'';position:absolute;top:14px;left:16px;width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:18px 0 0 #febc2e,36px 0 0 #28c840}
/* directory-listing links */
.shopify-section-group-footer-group .menu__item a{font-family:'DM Mono',ui-monospace,monospace !important;font-size:12.5px !important;color:#CAC7DC !important;letter-spacing:.2px;text-decoration:none;transition:color .13s ease}
.shopify-section-group-footer-group .menu__item a::before{content:'/ ';color:#847F99}
.shopify-section-group-footer-group .menu__item a:hover{color:#FFB020 !important}
.shopify-section-group-footer-group .menu__item a:hover::before{color:#FFB020}
/* utilities bar (copyright + policy) */
.shopify-section-group-footer-group .utilities,.shopify-section-group-footer-group .utilities a{font-family:'DM Mono',ui-monospace,monospace !important;font-size:12px !important;color:#847F99 !important;letter-spacing:.3px}
.shopify-section-group-footer-group .utilities{border-top:1px solid rgba(255,255,255,.08) !important}
.shopify-section-group-footer-group .utilities a:hover{color:#A8A1F7 !important}

/* ===== SITEWIDE DARK BASE (all templates except homepage) ===== */
main:not([data-template="index"]){background-color:#0E0D14 !important;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 1px,transparent 1px 7px) !important}
main:not([data-template="index"]) .color-scheme-1{--color-background:#0E0D14 !important;--color-foreground:#CAC7DC !important;--color-foreground-heading:#F5F4FB !important;background-color:transparent !important;color:#CAC7DC !important}
main:not([data-template="index"]) .section-background{background-color:transparent !important;background-image:none !important}
main:not([data-template="index"]) h1,main:not([data-template="index"]) h2,main:not([data-template="index"]) h3{font-family:'Space Grotesk',ui-sans-serif,sans-serif !important;color:#F5F4FB}
main:not([data-template="index"]) p,main:not([data-template="index"]) li,main:not([data-template="index"]) .rte,main:not([data-template="index"]) rte-formatter{color:#CAC7DC}

/* ===== LIGHT-SCHEME ISLANDS — ink fix (2026-08-11) =====================
   The SITEWIDE DARK BASE block above is scoped to main:not([data-template=
   "index"]) and assumes everything inside that <main> sits on #0E0D14. It
   paints h1/h2/h3 with #F5F4FB and p/li/.rte with #CAC7DC.

   That assumption breaks on the 46 free-generator pages plus their
   catalogue (/pages/ai-generators): those render a LIGHT island
   (.generator-page, background #F7F6F2) inside the very same <main>.
   Measured before this fix:
     - page H1 and every article H2 .... 1.01:1  (invisible)
     - page subtitle and 23 body <p> ... 1.53:1  (near-invisible)
   WCAG 2.1 AA wants 4.5:1. 49 URLs were affected.

   The culprit selectors score (0,1,2); the two below score (0,2,2), so
   they win on specificity alone — no !important needed, and the cascade
   for every dark template is left untouched. Colours come from the
   generator pages' own :root tokens (--text-primary #1A1A18,
   --text-secondary #555550), so this restores the intended ink instead of
   inventing new values. Resulting contrast: 16.1:1 and 6.8:1 worst case.

   If a future light island is added, extend the selector list here rather
   than sprinkling !important at the call site. */
main:not([data-template="index"]) .generator-page :is(h1,h2,h3,h4,h5,h6){color:var(--text-primary,#1A1A18)}
main:not([data-template="index"]) .generator-page :is(p,li,.rte,rte-formatter){color:var(--text-secondary,#555550)}

/* ===== BLOG "In summary" CALLOUT — light-theme leftover (2026-08-11) ====
   The article content pipeline emits a summary callout with its palette
   hardcoded inline, written back when the site was light:
     <div style="background:#EEEBFA;...;color:#1A1A18;">
       <p style="...color:#534AB7;">In summary:</p>
       <p style="...color:#1A1A18;">...</p>
   On today's #0E0D14 article page that renders as a lavender-white box
   with near-black text — the single most jarring light artefact left in
   the blog. Present in 3 of 405 articles today (agentic-ai-examples,
   best-ai-productivity-tools-2026, deepseek-vs-chatgpt-2026), all three
   published Aug 2026, i.e. the pattern is NEW and will land in every
   future post until the generator itself is fixed.

   Matching on the inline style attribute is deliberate: it repairs the
   three live posts AND anything the pipeline emits next, without editing
   405 article bodies. !important is required here only because the values
   being overridden are inline styles.
   THIS IS A BAND-AID — still fix the content generator to emit
   background:#1E1B2E;color:#EDEBFB at the source. */
[style*="#EEEBFA"]{background:#1E1B2E !important;color:#EDEBFB !important;border:1px solid rgba(255,255,255,.10)}
[style*="#EEEBFA"] p[style*="#1A1A18"],[style*="#EEEBFA"] li{color:#EDEBFB !important}
[style*="#EEEBFA"] p[style*="#534AB7"]{color:#A8A1F7 !important}
[style*="#EEEBFA"] a{color:#FFB020 !important}

/* ===== DEPTH & POLISH PASS (2026-08-11) ================================
   Also kept standalone as assets/kms-depth-polish.css for easy revert;
   that copy is NOT linked, this inlined block is what actually loads.
   Every value below was measured on the V35 preview at 1920x1080. */

/* 1. "Most-loved skills" cards computed to box-shadow:none while ALREADY
      declaring `transition: border-color .2s, transform .2s, box-shadow
      .2s` — the elevation was designed and then never set. The weakest
      depth on the homepage sat on its strongest selling block while a
      decorative terminal window got 0 30px 64px. Blur stays at 24px, not
      the hero's 64px: a grid of 8+ cards at 64px smears into one mass.
      Parent .kmsb__grid is overflow:visible, so nothing clips. */
.kms-card{box-shadow:0 4px 0 0 #050409,0 12px 24px 0 rgba(0,0,0,.40) !important}
.kms-card:hover{box-shadow:0 6px 0 0 #050409,0 16px 32px 0 rgba(0,0,0,.55) !important;transform:translateY(-2px)}

/* 2. Category cards had `0 2px 0 0 #050409` — a hard ledge with zero blur,
      which reads as a flat sticker beside the hero window. The second,
      blurred layer adds the missing air and keeps the existing ledge. */
.kmsc-card{box-shadow:0 2px 0 0 #050409,0 12px 28px 0 rgba(0,0,0,.35) !important}
.kmsc-card:hover{box-shadow:0 3px 0 0 #050409,0 16px 34px 0 rgba(0,0,0,.45) !important}

/* 3. Collection grid product cards measured box-shadow:none and
      border-radius:0 — the flattest surface in the catalogue. Both
      <product-card> and its li.product-grid__item parent are
      overflow:visible, so a shadow cannot be clipped.
      Radius is deliberately NOT set: the card does not clip its own media,
      so rounding the shadow while the artwork stays square would look
      worse than either extreme. Revisit with the media wrapper. */
.product-card{box-shadow:0 12px 24px 0 rgba(0,0,0,.40) !important;transition:box-shadow .2s ease,transform .2s ease}
.product-card:hover{box-shadow:0 16px 32px 0 rgba(0,0,0,.55) !important;transform:translateY(-2px)}

/* 4. Collection hero. What makes the homepage and /pages/faq feel three-
      dimensional is a two-layer background on the WRAPPER (hatch + one
      large radial glow), not a shadow on the card. Applied to the short
      hero block only — deliberately NOT to the grid below, because the
      glow is sized 1100x520 and stretching it across 6000px of paginated
      scroll just smears it into grey. */
.kms-chero{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 1px,transparent 1px 7px),radial-gradient(1100px 520px at 80% -10%,rgba(123,114,232,.12),transparent 60%) !important}

/* 5. H1 word rotator overlap. "The AI Marketplace for [Prompts|Skills|
      Agents]" stacks three absolutely positioned .kms-word spans and
      cross-fades them. Both directions used `opacity .45s` with no offset,
      so for ~0.2s of every cycle two words paint on top of each other —
      captured on screenshot rendering as "Skillspts" in the H1 above the
      fold. Fix is timing only, no JS involved: the outgoing word leaves in
      .2s, the incoming one waits .2s. Cycle length is unchanged. */
.kms-word{transition:opacity .2s ease,transform .6s cubic-bezier(.16,1,.3,1) !important}
.kms-word.active{transition:opacity .35s ease .2s,transform .6s cubic-bezier(.16,1,.3,1) !important}

/* 6. Footer column balance. Measured heights: 544 / 838 / 1306 / 535 / 329
      px. The "All Skills" column carries 24 links and drags the row to
      1306px while its 6-link neighbour stops at 329px, leaving ~1000px of
      void underneath. :has() is already used by this theme's footer above,
      so this adds no new dependency. */
.shopify-section-group-footer-group ul.list-unstyled:has(li:nth-child(16)){column-count:2;column-gap:28px}

/* ===== CART DRAWER (slide-out) dark retro ===== */
.cart-drawer__dialog,.cart-drawer__inner,.cart-drawer__content,.dialog-drawer,.cart-drawer__items,.cart-items-component,.cart-form{background-color:#0E0D14 !important;color:#CAC7DC !important}
.cart-drawer__header{background:linear-gradient(#1E1C2A,#15141E) !important;border-bottom:1px solid rgba(255,255,255,.08) !important}
.cart-drawer__heading{font-family:'Space Grotesk',ui-sans-serif,sans-serif !important;color:#F5F4FB !important}
.cart-drawer__close-button{color:#CAC7DC !important}
.cart-items,.cart-items *{color:#CAC7DC !important}
.cart-items__title{color:#F5F4FB !important;font-family:'Space Grotesk',ui-sans-serif,sans-serif !important}
.cart-items__table-row,.cart-items__table{border-color:rgba(255,255,255,.1) !important}
.cart-bubble__background{background:#FFB020 !important}
.cart-bubble__text,.cart-bubble__text-count{color:#17130c !important}
cart-drawer-component .button,[class*="cart-drawer"] [name="checkout"],.cart-drawer__checkout-button,.cart__checkout-button,[class*="cart"] button[type="submit"]{font-family:'VT323',ui-monospace,monospace !important;font-size:18px !important;letter-spacing:1px !important;text-transform:uppercase !important;background:linear-gradient(#8079EE,#534AB7) !important;color:#fff !important;border:1px solid #534AB7 !important;border-radius:11px !important;box-shadow:0 5px 0 0 #2c2660,0 5px 0 1px #000 !important}
.cart-drawer__footer,[class*="cart-drawer"] [class*="totals"],[class*="cart-drawer"] [class*="footer"]{background-color:#16151F !important;border-top:1px solid rgba(255,255,255,.08) !important;color:#CAC7DC !important}

/* ===== CART DRAWER summary (footer) dark fix ===== */
.cart-drawer__summary{background-color:#16151F !important;border-top:1px solid rgba(255,255,255,.08) !important}
.cart-drawer__summary > *,.cart-drawer__summary .kms-consent,.cart-drawer__summary .cart-totals,.cart-drawer__summary .cart-totals__container,.cart-drawer__summary .cart-totals__item,.cart-drawer__summary .cart-discount,.cart-drawer__summary .cart__ctas{background-color:transparent !important}
.cart-drawer__summary span,.cart-drawer__summary label,.cart-drawer__summary p,.cart-drawer__summary strong,.cart-drawer__summary li,.cart-drawer__summary div{color:#CAC7DC !important}
.cart-totals__total,.cart-totals__total-label{color:#F5F4FB !important}
.cart-drawer__summary input:not([type=checkbox]){background:#0E0D14 !important;border:1px solid rgba(255,255,255,.18) !important;color:#F5F4FB !important}
.cart-drawer__summary input::placeholder{color:#847F99 !important}
.cart-drawer__summary a{color:#A8A1F7 !important}
.cart-drawer__summary input[type=checkbox]{accent-color:#8079EE !important}
.cart-drawer__summary .cart__checkout-button,.cart-drawer__summary .cart__checkout-button *{color:#fff !important}

/* ===== Gold review stars sitewide (Judge.me old + new) ===== */
.jdgm-prev-badge__stars,.jdgm-star,[class*=jdgm] [class*=star]{color:#FFB020 !important}
.jm-stars,.jm-star,[class*=jm-] [class*=star]{color:#FFB020 !important}
[class*=jdgm] svg path,[class*=jm-] svg path,.jdgm-star svg,.jm-star svg{fill:#FFB020 !important}

/* ===== WIDE-SCREEN, PRODUCT DEPTH & BLOG TYPE PASS (2026-08-12) ========
   Every number below was read with getComputedStyle /
   getBoundingClientRect on the V35 preview at 1920x1080, before and
   after each rule. */

/* 7. Homepage content width above 1600px.
      Measured at 1920, eight of the nine homepage sections capped
      themselves far below the viewport:
        .kms-hero2 1060   .kms-hiw__inner 1100   .kmsc__inner 1140
        .kms-bnd   1060   .kms-tools__inner 1000  .kms-cta__inner 800
        .kmsft__inner 1140
      i.e. 52-59% of the screen, with 390-560px of dead page down each
      side. Every one of those caps is a plain single-class rule
      (specificity 0,1,0) that lives in a section's inline <style> in
      <body>. kms-cards.css loads in <head>, so an equally specific rule
      here would LOSE on source order and silently do nothing. Doubling
      the class name scores (0,2,0) and wins on specificity alone — no
      !important, and phone/tablet layouts are untouched because the
      whole block sits inside @media (min-width:1600px).
      .kmsr-window and .kms-cats carry their OWN 1060px caps, so raising
      .kms-hero2 by itself would have moved nothing; both are listed.
      Nothing here stretches a line of prose. Every grid inside is
      fr-based (.kmsc__grid repeat(5,1fr), .kms-bnd-grid repeat(4,1fr),
      .kmsft__grid 1.2fr 1fr 1fr, .kms-hiw__layout 1.1fr .9fr), so the
      extra 220-360px lands in the CARDS: category cards 210 -> 254px,
      bundle cards 254 -> 329px, footer columns 385/321/321 ->
      467/389/389. The prose blocks already cap themselves
      (.kms-hero2-sub 560, .kms-bnd-sub 640, .kms-tools__sub 540) and
      were re-measured after the change at exactly those same widths.
      .kms-faq__inner (840px) is deliberately NOT in the list: it is a
      single reading column and 840px is already the right measure.
      .kms-cta__inner is raised for consistency but is close to a visual
      no-op — it holds only centred short text (a 27-character heading
      and a 56-character subline) that never reached even 800px.
      One element needed a NEW cap. .kms-hiw__desc had max-width:none and
      sat at 482px inside the 1.1fr column. At 1360 that column grows to
      729px, which would have pushed a 13px paragraph to ~110 characters
      per line — the exact "uncomfortably long line" this pass is meant to
      avoid. Capped at 520px (~84 characters), i.e. the measure the step
      cards have today. */
@media (min-width: 1600px){
  .kms-hero2.kms-hero2,
  .kms-hero2 .kmsr-window.kmsr-window,
  .kms-hero2 .kms-cats.kms-cats,
  .kms-hiw__inner.kms-hiw__inner,
  .kmsc__inner.kmsc__inner,
  .kms-bnd.kms-bnd,
  .kms-tools__inner.kms-tools__inner,
  .kms-cta__inner.kms-cta__inner,
  .kmsft__inner.kmsft__inner{max-width:1360px}
  .kms-hiw__desc{max-width:520px}
}

/* 8. Product gallery depth (/products/*).
      Measured on /products/executive-assistant-skill-claude: the whole
      chain img.product-media__image -> div.product-media ->
      slideshow-slide -> slideshow-slides -> slideshow-container computed
      background rgb(14,13,20), background-image none, box-shadow none.
      The gallery window is therefore painted the SAME #0E0D14 as the page
      it sits on, with nothing separating the two — the flattest surface
      on the highest-intent template in the store.
      This is the same two-layer trick already proven on the homepage and
      /pages/faq (see item 4): hatch + one radial glow on the WRAPPER,
      elevation on the window itself.
      Wrapper = .product-information__media (620x563 measured, the box
      that hugs the gallery). The glow is resized 760x420 instead of the
      homepage's 1100x520 — a 1100px glow inside a 620px box would put
      its whole falloff off-canvas and just read as flat tint.
      Shadow goes on slideshow-container (538x539) because that is the
      element carrying the 20px radius and the background, so the shadow
      follows the rounded corners. Blur is 40px, not the hero window's
      64px: this is a 539px object sitting next to the buy column, and
      64px would bleed under it.
      CLIPPING CHECKED, nothing is cut: all seven ancestors up to <main>
      (slideshow-component, media-gallery, .product-information__media,
      .product-information__grid, .product-information, .shopify-section,
      main) compute overflow:visible, and none has a clip-path.
      slideshow-container itself is overflow:hidden, but that only clips
      its children — an element's own outer box-shadow is never clipped by
      its own overflow.
      No !important: .product-information__media scores (0,1,0) against a
      computed background-image of `none` (nothing declares it), and
      `media-gallery slideshow-container` (0,0,2) against a computed
      box-shadow of `none`. Both were verified to take effect. */
.product-information__media{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 1px,transparent 1px 7px),radial-gradient(760px 420px at 80% -10%,rgba(123,114,232,.12),transparent 60%)}
media-gallery slideshow-container{box-shadow:0 6px 0 0 #050409,0 20px 40px 0 rgba(0,0,0,.55)}

/* 9. Blog article type scale (/blogs/*).
      Measured on /blogs/news/agentic-ai-examples at 1920:
        body copy 14px / line-height 22.4px, column .blog-post-content
        max-width 672px, H2 48px/48px, H3 32px/35.2px.
      Two problems in one. First, 14px -> 48px is a 3.43x jump: that is
      not emphasis, it is a broken modular scale — the H2 is display-sized
      while the text under it is caption-sized. Second, 14px is simply
      small for a 1500+ word longread on a 1920px screen, and the measure
      runs long with it: counted on four real paragraphs (chars divided
      by rendered line boxes) the column ran 83 / 85 / 89 / 73 = ~82
      characters per line, above the 45-75 that reads comfortably.
      Raising the body to 17px fixes BOTH at once: the same four
      paragraphs now measure 69 / 85 / 67 / 73 = ~74 characters per line,
      and the scale becomes
        17 -> 24 -> 32  (steps 1.41 and 1.33)
      instead of 14 -> 32 -> 48 (steps 2.29 and 1.50). Honest note: the
      first step is 1.41, slightly above the 1.333 target — hitting 1.333
      exactly from 17px would need a 22.7px H3, and 24px keeps the H3 on
      the theme's existing 4px sub-grid. Total body-to-H2 spread drops
      from 3.43x to 1.88x.
      Line-height goes 1.6 -> 1.7 (22.4px -> 28.9px) because a 17px face
      over a ~74-character measure needs more leading, not less.
      Scope: `.blog-post-content.rte` only. That class exists solely on
      the article body block, so nothing outside the blog moves — verified
      by re-measuring a non-article paragraph on the same page: still
      13.5px. The article H1 (48px, its own 1560px block) is deliberately
      left alone so the H1 > H2 hierarchy actually reads for the first
      time.
      Specificity (0,2,1) is used instead of the natural (0,1,1) because
      the 14px comes from `.blog-post-content` itself (0,1,0) in a
      stylesheet whose load order relative to this file is not guaranteed;
      two classes plus an element removes the coin-flip. Still no
      !important anywhere in this item.
      .kms-pcard__desc is the one opt-out: product cards injected into
      article bodies live in a 500px box, where 17px would wrap badly, so
      they are pinned back to 14px at (0,3,0). */
.blog-post-content.rte :is(p,li){font-size:17px;line-height:1.7}
.blog-post-content.rte h2{font-size:32px;line-height:1.15}
.blog-post-content.rte h3{font-size:24px;line-height:1.25}
.blog-post-content.rte .kms-pcard__desc{font-size:14px;line-height:1.55}

/* ===== kms-polish.css ===== */
/* ===== KMS deep-polish: collection/search facets ===== */
.facets--filters-title{font-family:'VT323',ui-monospace,monospace !important;font-size:19px !important;letter-spacing:2px !important;text-transform:uppercase !important;color:#FFB020 !important}
.facets--filters-title::before{content:'// '}
.facets__summary,.facets__summary *{font-family:'VT323',ui-monospace,monospace !important;font-size:15px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:#A8A1F7 !important}
.facets__label,.facets__inputs-list-item label,.facets__item{font-family:'DM Sans',sans-serif !important;color:#CAC7DC !important}
.facets__inputs input,.facets input[type=checkbox],.sorting-filter__input{accent-color:#8079EE !important}
.facets__panel,.facets__form-wrapper,.facets-block-wrapper,.facets__inputs-list-item{border-color:rgba(255,255,255,.1) !important}
.sorting-filter__select,.facets__select,select.facets__select{font-family:'VT323',ui-monospace,monospace !important;font-size:15px !important;letter-spacing:.5px !important;background:#16151F !important;color:#CAC7DC !important;border:1px solid rgba(255,255,255,.15) !important;border-radius:8px !important}
.facets__status,.facets-remove,.facets__label--active{color:#A8A1F7 !important;font-family:'VT323',ui-monospace,monospace !important}
.facets-toggle,.facets-toggle__wrapper{color:#CAC7DC !important}
.sorting-filter__label,.facets-controls-wrapper{font-family:'VT323',ui-monospace,monospace !important;letter-spacing:1px !important;color:#CAC7DC !important}
.sorting-filter__option,.sorting-filter__options-inner{background:#16151F !important;color:#CAC7DC !important}

#MainContent .product-card__link,#MainContent .product-card__title,#MainContent .product-card__title a,#MainContent .product-card__title *,#MainContent [class*="product_title"],#MainContent [class*="product_title"] p,#MainContent [class*="product_title"] *{color:#F5F4FB !important;-webkit-text-fill-color:#F5F4FB !important}
#MainContent .product-card__link:hover,#MainContent .product-card__title a:hover,#MainContent .product-card__link:hover [class*="product_title"],#MainContent .product-card__link:hover [class*="product_title"] p{color:#A8A1F7 !important;-webkit-text-fill-color:#A8A1F7 !important}
#MainContent .product-card .price,#MainContent .product-card .price *,#MainContent .product-grid__item .price,#MainContent .product-grid__item .price *,#MainContent .product-card__link .price{color:#FFB020 !important}
#MainContent .product-card .price--on-sale .price-item--regular,#MainContent .product-card s,#MainContent .product-card del{color:#847F99 !important;text-decoration:line-through !important}
#MainContent .product-card .product-card__vendor,#MainContent .product-card [class*=vendor],#MainContent .product-card [class*=subtitle]{color:#847F99 !important}

.menu-list__link[href*="ai-generators"] .menu-list__link-title::after,.menu-drawer__menu-item[href*="ai-generators"] .menu-drawer__menu-item-text::after{content:"FREE";display:inline-block;margin-left:6px;font-family:'VT323',ui-monospace,monospace;font-size:11px;letter-spacing:.5px;color:#0E0D14 !important;-webkit-text-fill-color:#0E0D14 !important;background:#FFB020;padding:0 5px;border-radius:4px;vertical-align:middle;text-transform:none;line-height:1.5}

.kms-cseo,.kms-cseo__wrap{background:transparent !important}
.kms-cseo,.kms-cseo p,.kms-cseo li,.kms-cseo span,.kms-cseo div,.kms-cseo__wrap{color:#CAC7DC !important}
.kms-cseo h1,.kms-cseo h2,.kms-cseo h3,.kms-cseo h4,.kms-cseo strong,.kms-cseo b{color:#F5F4FB !important}
.kms-cseo h2,.kms-cseo h3{font-family:'Space Grotesk',ui-sans-serif,sans-serif !important}
.kms-cseo a{color:#A8A1F7 !important}
.kms-cseo li::marker{color:#FFB020 !important}

.cart-page__title,.cart-title{font-family:'Space Grotesk',ui-sans-serif,sans-serif !important;color:#F5F4FB !important}
cart-quantity-selector-component,.quantity-selector{background:#16151F !important;border:1px solid rgba(255,255,255,.16) !important;color:#F5F4FB !important;border-radius:9px !important}
.quantity-selector button,cart-quantity-selector-component button{color:#A8A1F7 !important;background:transparent !important}
.quantity-selector input,cart-quantity-selector-component input{background:transparent !important;color:#F5F4FB !important}
.cart-summary,.cart-summary__inner,.cart-page__summary,.cart-summary *{color:#CAC7DC !important}
.cart-summary__title,.cart-summary h2{font-family:'Space Grotesk',ui-sans-serif,sans-serif !important;color:#F5F4FB !important}
.cart-summary{border-color:rgba(255,255,255,.1) !important}

.kms-404{background:#16151F !important;border:1px solid rgba(255,255,255,.1) !important;color:#CAC7DC !important}
.kms-404 *{color:#CAC7DC !important}
.kms-404 h1,.kms-404 h2,.kms-404__title,.kms-404__big,.kms-404__code{color:#F5F4FB !important;font-family:'Space Grotesk',ui-sans-serif,sans-serif !important}
.kms-404__search{background:#0E0D14 !important;border:1px solid rgba(255,255,255,.16) !important}
.kms-404__search input{background:transparent !important;color:#F5F4FB !important}
.kms-404__search input::placeholder{color:#847F99 !important}
.kms-404__cat{background:#1C1B27 !important;border:1px solid rgba(255,255,255,.12) !important;color:#CAC7DC !important;box-shadow:0 3px 0 0 #050409 !important;border-radius:11px !important}
.kms-404__cat:hover{border-color:#8079EE !important;transform:translateY(-2px)}
.kms-404__btn,.kms-404 button[type=submit]{font-family:'VT323',ui-monospace,monospace !important;text-transform:uppercase !important;letter-spacing:1px !important;background:linear-gradient(#8079EE,#534AB7) !important;color:#fff !important;border:1px solid #534AB7 !important;border-radius:10px !important}

.menu-drawer__menu-item[href*="/collections/all-skills"]{color:#FFCF6B !important;-webkit-text-fill-color:#FFCF6B !important;font-weight:700 !important}

.menu-drawer__menu-item[href*="/collections/bundles"] .menu-drawer__menu-item-text,.menu-drawer__menu-item[href*="/collections/bundles"]{color:#FFB020 !important;-webkit-text-fill-color:#FFB020 !important;font-weight:700 !important}
.menu-drawer__menu-item[href*="/collections/bundles"] .menu-drawer__menu-item-text::after{content:"SAVE";display:inline-block;margin-left:6px;font-family:'VT323',ui-monospace,monospace;font-size:11px;letter-spacing:.5px;color:#0E0D14 !important;-webkit-text-fill-color:#0E0D14 !important;background:#FFB020;padding:0 5px;border-radius:4px;vertical-align:middle;text-transform:none;line-height:1.5}

/* ===== NAV: Curly Braces terminal style (2026-07-27) =====
   Braces render on .menu-list__link-title (the inner text span, not
   the <a>) so they stay inline instead of becoming flex-column items.
   Dropdown chevron lives on li::after. Bundles' discount info is baked
   directly into its own ::before/::after content — small "-70%" text
   inside the closing bracket, chosen after two earlier attempts broke
   visually (absolutely-positioned badge stretched full-width; a tiny
   dot accidentally shrank the opening brace itself to 9px). */
#header-component .header__column--center header-menu nav overflow-list > li {
  position: relative;
}
#header-component .header__column--center header-menu nav overflow-list > li > a {
  position: relative;
  display: inline-flex !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-inline: 6px !important;
  transition: color 0.2s !important;
}
#header-component .header__column--center header-menu nav overflow-list > li > a,
#header-component .header__column--center header-menu nav overflow-list > li > a .menu-list__link-title {
  font-family: 'VT323', ui-monospace, monospace !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  color: #8B87A8 !important;
}
#header-component .header__column--center header-menu nav overflow-list > li > a .menu-list__link-title::before {
  content: "{ ";
  color: #3E3A57;
}
#header-component .header__column--center header-menu nav overflow-list > li > a .menu-list__link-title::after {
  content: " }";
  color: #3E3A57;
}
#header-component .header__column--center header-menu nav overflow-list > li > a:hover,
#header-component .header__column--center header-menu nav overflow-list > li > a:hover .menu-list__link-title {
  color: #ffffff !important;
}

#header-component .header__column--center header-menu nav overflow-list > li > a.menu-list__link--active,
#header-component .header__column--center header-menu nav overflow-list > li > a.menu-list__link--active .menu-list__link-title {
  color: #85B7EB !important;
  font-weight: 700 !important;
}
#header-component .header__column--center header-menu nav overflow-list > li > a.menu-list__link--active .menu-list__link-title::before,
#header-component .header__column--center header-menu nav overflow-list > li > a.menu-list__link--active .menu-list__link-title::after {
  color: #85B7EB;
}

/* Skills — flagship: gold + bold, always (own identity, not just active state) */
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/all-skills"],
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/all-skills"] .menu-list__link-title {
  color: #FFD37A !important;
  font-weight: 700 !important;
}
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/all-skills"] .menu-list__link-title::before,
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/all-skills"] .menu-list__link-title::after {
  color: #FFD37A;
}

/* Best Sellers — pink identity color, always */
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/best-sellers"],
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/best-sellers"] .menu-list__link-title {
  color: #E08FD9 !important;
}
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/best-sellers"] .menu-list__link-title::before,
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/best-sellers"] .menu-list__link-title::after {
  color: #E08FD9;
}

/* Bundles — "-70%" as a small suffix inside the closing bracket.
   Opening brace stays normal size/color (fixes the earlier bug where
   it was accidentally shrunk to 9px along with the dot marker).

   2026-08-12: label corrected from "-30%" to "-70%". The old figure was
   inherited from an earlier pricing policy (bundle = 0.65 x sum of parts
   = 35% off). Live prices no longer match it. Measured from the store:
     Everything Bundle          447.99 vs 1715.00 compare-at  = -73.9%
     7 department bundles        63.99 vs  245.00 compare-at  = -73.9%
     Agency Skill Bundle         48.99 vs  145.00 compare-at  = -66.2%
   Compare-at prices are sound (5 agents x $49 = $245). So the menu was
   advertising less than half the discount the storefront already shows.
   CAVEAT: -70% slightly overstates the Agency Skill Bundle (-66.2%). If
   that matters for EU price-claim rules, use "up to -74%" instead, or
   reprice that one bundle. */
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/bundles"] .menu-list__link-title::before {
  content: "{ ";
  color: #FFB020;
}
#header-component .header__column--center header-menu nav overflow-list > li > a[href*="/collections/bundles"] .menu-list__link-title::after {
  content: " SAVE }";
  color: #FFB020;
  font-size: 14px;
}

/* More dropdown chevron — on li::after so it doesn't collide with the braces */
#header-component .header__column--center header-menu nav overflow-list > li:has(> a[href="#"])::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-4px);
  opacity: 0.6;
  color: #8B87A8;
}


.kms-cc-benefit{font-family:'DM Sans',sans-serif !important;font-size:12.5px !important;line-height:1.35 !important;color:#A9A6C4 !important;-webkit-text-fill-color:#A9A6C4 !important;margin:2px 0 6px !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;min-height:33.75px !important;}

.mega-menu__link--parent {
  font-weight: 700 !important;
  color: #F5F4FB !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 12px !important;
  opacity: .72;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 8px !important;
  margin-bottom: 4px;
}
.mega-menu__link--parent:hover {
  color: #A8A1F7 !important;
  opacity: 1;
}

.kms-star-rating{display:flex;align-items:center;gap:6px;margin:2px 0 2px}
.kms-star-rating__stars{position:relative;display:inline-block;font-size:13px;line-height:1;white-space:nowrap;letter-spacing:1px}
.kms-star-rating__bg{color:rgba(255,255,255,.18);-webkit-text-fill-color:rgba(255,255,255,.18)}
.kms-star-rating__fg{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#FFB020;-webkit-text-fill-color:#FFB020}
.kms-star-rating__count{font-family:'DM Sans',sans-serif;font-size:12px;color:#847F99;-webkit-text-fill-color:#847F99}

/* ===== SKILLS flagship priority — visual order REMOVED (2026-07-30) =====
   This block used to set flex `order` on <overflow-list> > li to move
   Skills earlier in the row. Removed: `order` is also used internally
   by overflow-list.js (assets/overflow-list.js) to compute which items
   fit vs. overflow into the "more" popover on narrow screens — two
   writers on the same property broke that math and caused a nav item
   (Bundles) to render detached near the breadcrumb on resize. To make
   Skills appear earlier in the row, reorder it in Shopify Admin >
   Online Store > Navigation instead — that's DOM order, which
   overflow-list already handles correctly at every width. */

/* ===== MEGA MENU: fix uneven column heights (2026-07-27, v2) =====
   .mega-menu__grid lays its top-level groups into a 2-col CSS Grid
   (subgrid pass-through from .mega-menu__list). Grid always shares row
   height across both columns in the same row, so a group that's just a
   single leaf link (e.g. "All Skills", no nested <ul>) gets stretched
   to match whatever taller group lands in the same row, leaving a big
   visual gap before the next group below it.
   Fix: give leaf (no-sublist) columns a high `order` so Grid's
   auto-placement algorithm — which is order-aware per spec — flows them
   to the very end, where they land alone in the last row with nothing
   to stretch against. Pure CSS, no DOM/menu changes; same `order`
   pattern already used above for the top nav row. */
.mega-menu__column:not(:has(ul)) {
  order: 99;
}

/* ===== PRODUCT CARD: Sale badge + quick-add crowd/legibility fix on
   dense card layouts, e.g. /collections/bundles (2026-08-13) ===========
   REPORTED: the "Sale" badge and the circular quick-add button collide
   with the card image content and with the title text directly below it
   on bundle cards.

   ROOT CAUSE, confirmed by reading the render chain (snippets/card-gallery.
   liquid -> snippets/product-badges-styles.liquid -> snippets/quick-add-
   styles.liquid) and by measuring live DOM rects on /collections/bundles:

   1) LEGIBILITY: .product-badges__badge (product-badges-styles.liquid)
      paints with `background: var(--color-background); color:
      var(--color-foreground)`, i.e. it inherits the CARD's own dark
      color-scheme. Bundle product photos are themselves dark headshot
      collages, so the badge pill is nearly the same colour as the image
      behind it -> no visible box, just "Sale" text floating directly on
      top of the portrait grid with zero contrast edge. Fix reuses the
      exact pill already defined for KMS's own badge system
      (.kms-badge--bundle in assets/kms-theme.css: solid near-black pill,
      31% white border) instead of inventing a new style.

   2) CROWDING: badge + quick-add are absolutely positioned inside
      .card-gallery with fixed padding-based insets (--badge-inset,
      --quick-add-right/bottom) that do not scale down with the image box.
      On the bundle grid's narrower columns / "dense" grid-density state
      (grid-density-controls.liquid) the image box measured as small as
      ~76-90px while the badge (23-29px tall) and quick-add button
      (34-36px) keep full size — together consuming over half the image
      height and landing within ~8-13px of the title directly underneath.
      The theme ALREADY has a safeguard for "card too small for quick-add"
      in base.css:
        @container (max-width: 70px) {
          .card-gallery:hover .quick-add__button { display: none; }
        }
      but it only covers the desktop HOVER-triggered button, stops at
      70px (just under the ~76-90px danger zone actually measured on
      bundle cards), and does nothing for the badge or for the
      always-visible MOBILE quick-add (`--quick-add-mobile-display: flex`
      in snippets/quick-add-styles.liquid). Fix below reuses the identical
      container-query mechanism/selector, just widens it to also catch the
      mobile-visible button and the badge, at a threshold that covers the
      measured danger zone. No new positioning is invented anywhere. */
.product-badges .product-badges__badge.product-badges__badge {
  background-color: rgba(14, 13, 20, 0.92) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@container (max-width: 96px) {
  .card-gallery .quick-add__button,
  .card-gallery .product-badges {
    display: none !important;
  }
}

/* ===== kms-inline.css ===== */
/* ==========================================================================
   kms-inline.css — CSS extracted from inline <style> tags in KMS snippets
   and sections. Loaded once from layout/theme.liquid, right after
   kms-polish.css, so the cascade order relative to base.css / kms-cards.css /
   kms-polish.css is unchanged and it still wins over the section
   compiled_assets bundle and app CSS via the existing !important rules.

   Sources (inline <style> removed from these files):
     snippets/kms-value-compare.liquid      -> .kms-vs
     snippets/kms-how-it-works.liquid       -> .kms-hiw
     snippets/kms-buybox-guarantee.liquid   -> .kms-bbg
     snippets/kms-buybox-highlights.liquid  -> .kms-bbh + PDP overrides
     snippets/kms-share-button.liquid       -> .kms-share
     snippets/kms-product-preview.liquid    -> .kms-prev
     snippets/kms-install.liquid            -> .kms-install
     snippets/kms-compat.liquid             -> .kms-compat
     snippets/kms-related.liquid            -> .kms-related
     sections/kms-product-body.liquid       -> .kms-body / .kms-sample
     sections/kms-product-faq.liquid        -> .kms-pfaq
     sections/kms-footer-trust.liquid       -> .kmsft
     sections/kms-footer-brand.liquid       -> .kms-fbrand
     sections/kms-launch-badges.liquid      -> .kmslb
   ========================================================================== */

/* --- kms-value-compare ---------------------------------------------------- */
.kms-vs{display:inline-flex;align-items:center;gap:10px;margin:4px 0 2px;padding:8px 14px;background:#1C1B27;border:1px solid rgba(255,176,32,.4);border-radius:10px}
.kms-vs__here,.kms-vs__there{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.kms-vs__price{font-family:'DM Mono',ui-monospace,monospace;font-size:15px;font-weight:600;color:#F5F4FB}
.kms-vs__price--strike{color:#9A97AC;text-decoration:line-through;text-decoration-color:rgba(255,90,90,.7);font-weight:500;font-size:13.5px}
.kms-vs__label{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#9A97AC;margin-top:1px;white-space:nowrap}
.kms-vs__here .kms-vs__price{color:#FFB020}
.kms-vs__x{font-family:'VT323',ui-monospace,monospace;font-size:14px;color:#847F99;text-transform:uppercase;padding:0 2px}
@media (max-width:380px){
  .kms-vs{flex-wrap:wrap;gap:6px 10px}
  .kms-vs__label{white-space:normal}
}

/* --- kms-how-it-works ----------------------------------------------------- */
.kms-hiw{margin:4px 0 6px}
.kms-hiw__trigger{position:relative;display:flex;width:100%;align-items:center;gap:10px;font-family:'VT323',ui-monospace,monospace;font-size:17px;letter-spacing:.6px;text-transform:uppercase;color:#FFB020;background:#1C1B27;border:1px solid rgba(255,176,32,.45);border-radius:10px;padding:11px 16px;cursor:pointer;box-shadow:0 0 0 1px rgba(255,176,32,.08),0 0 18px rgba(255,176,32,.14);transition:border-color .15s,color .15s,background .15s,box-shadow .15s,transform .12s}
.kms-hiw__trigger:hover{border-color:rgba(255,176,32,.85);color:#FFC85C;background:#221D18;box-shadow:0 0 0 1px rgba(255,176,32,.15),0 0 26px rgba(255,176,32,.28)}
.kms-hiw__trigger:active{transform:translateY(1px)}
.kms-hiw__trigger-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,176,32,.12);flex-shrink:0;animation:kmsHiwPulse 2.2s ease-in-out infinite}
.kms-hiw__trigger svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.kms-hiw__trigger-arrow{margin-left:auto;font-size:16px;transition:transform .15s}
.kms-hiw__trigger:hover .kms-hiw__trigger-arrow{transform:translateX(3px)}
@keyframes kmsHiwPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.35)}50%{box-shadow:0 0 0 5px rgba(255,176,32,0)}}

.kms-hiw__overlay{position:fixed;inset:0;z-index:9999;background:rgba(8,7,13,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}
.kms-hiw__overlay[hidden]{display:none}
.kms-hiw__modal{position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:#16151F;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 3px 0 0 #050409,0 20px 48px rgba(0,0,0,.5);padding:28px 26px}
.kms-hiw__close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#1C1B27;color:#CAC7DC;font-size:15px;cursor:pointer;line-height:1}
.kms-hiw__close:hover{color:#F5F4FB;border-color:rgba(255,255,255,.3)}
.kms-hiw__modal h3{margin:0 6px 6px 0;font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.3px;color:#F5F4FB}
.kms-hiw__sub{margin:0 0 18px;font-size:13px;color:#9A97AC}

.kms-hiw__media{margin:0 0 20px;border-radius:12px;overflow:hidden;background:#0E0D14;border:1px solid rgba(255,255,255,.1)}

.kms-hiw__demo{padding:0 0 18px}
.kms-hiw__demo-topbar{display:flex;align-items:center;gap:5px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.kms-hiw__demo-topbar span:not(.kms-hiw__demo-title){width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.kms-hiw__demo-title{margin-left:6px;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;color:#847F99;width:auto;height:auto;border-radius:0;background:none}
.kms-hiw__demo-body{position:relative;padding:18px 18px 4px;display:flex;flex-direction:column;gap:12px;min-height:134px}

.kms-hiw__demo-drop{align-self:center;display:inline-flex;align-items:center;gap:7px;font-family:'DM Sans',system-ui,sans-serif;font-size:11.5px;color:#847F99;border:1.5px dashed rgba(168,161,247,.35);border-radius:10px;padding:10px 16px;margin-top:8px;animation:kmsDemoDrop 8s ease-in-out infinite}

.kms-hiw__demo-file{align-self:flex-end;display:inline-flex;align-items:center;gap:7px;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;color:#F5F4FB;background:linear-gradient(#8079EE,#534AB7);border-radius:10px 10px 2px 10px;padding:8px 12px;box-shadow:0 2px 0 0 #2c2660;animation:kmsDemoFile 8s ease-in-out infinite}
.kms-hiw__demo-file-check{color:#28c840;font-weight:700;animation:kmsDemoCheck 8s ease-in-out infinite}

.kms-hiw__demo-ai{display:flex;align-items:flex-start;gap:8px;animation:kmsDemoAi 8s ease-in-out infinite}
.kms-hiw__demo-ai-dot{flex-shrink:0;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#1C1B27;border:1px solid rgba(168,161,247,.4);box-shadow:0 0 8px rgba(168,161,247,.35)}
.kms-hiw__demo-ai-bubble{position:relative;display:inline-block;font-family:'DM Sans',system-ui,sans-serif;font-size:12.5px;line-height:1.5;color:#E6E5F0;background:#1C1B27;border:1px solid rgba(255,255,255,.1);border-radius:2px 10px 10px 10px;padding:9px 12px}
.kms-hiw__demo-typed{display:inline-block;clip-path:inset(0 100% 0 0);animation:kmsDemoType 8s ease-in-out infinite}
.kms-hiw__demo-cursor{display:inline-block;width:2px;height:11px;margin-left:1px;vertical-align:-1px;background:#A8A1F7;animation:kmsDemoCursor 8s steps(1) infinite}

@keyframes kmsDemoDrop{0%{opacity:0}6%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}
@keyframes kmsDemoFile{0%,20%{opacity:0;transform:translateY(-6px) scale(.96)}26%,88%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes kmsDemoCheck{0%,32%{opacity:0;transform:scale(.5)}38%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
@keyframes kmsDemoAi{0%,36%{opacity:0;transform:translateY(8px)}42%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes kmsDemoType{0%,42%{clip-path:inset(0 100% 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
@keyframes kmsDemoCursor{0%,40%{opacity:0}41%{opacity:1}46%{opacity:0}51%{opacity:1}56%{opacity:0}61%{opacity:1}66%{opacity:0}71%{opacity:1}76%{opacity:0}81%{opacity:1}86%{opacity:0}90%,100%{opacity:0}}

.kms-hiw__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.kms-hiw__steps li{display:flex;gap:12px;align-items:flex-start}
.kms-hiw__num{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:linear-gradient(#8079EE,#534AB7);color:#fff;font-family:'DM Mono',ui-monospace,monospace;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 0 #2c2660}
.kms-hiw__steps strong{display:block;font-size:14.5px;color:#F5F4FB;margin-bottom:2px}
.kms-hiw__steps p{margin:0;font-size:13px;color:#CAC7DC;line-height:1.5}

@media (max-width:480px){
  .kms-hiw__modal{padding:22px 18px}
  .kms-hiw__modal h3{font-size:18px}
}

/* --- kms-buybox-guarantee ------------------------------------------------- */
.kms-bbg{margin:2px 0 16px}
.kms-bbg__chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.kms-bbg__chip{display:inline-flex;align-items:center;gap:6px;font-family:'VT323',ui-monospace,monospace;font-size:14px;letter-spacing:.5px;color:#CAC7DC;background:#1C1B27;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 10px}
.kms-bbg__chip b{color:#FFB020;font-weight:400}
.kms-bbg__guarantee{display:flex;gap:10px;align-items:flex-start;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.kms-bbg__guarantee svg{width:18px;height:18px;stroke:#28c840;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:1px}
.kms-bbg__guarantee p{margin:0;font-size:12.5px;color:#CAC7DC;line-height:1.55}
.kms-bbg__guarantee strong{color:#F5F4FB}
.kms-bbg__guarantee a{color:#A8A1F7;text-decoration:none;font-weight:500}
.kms-bbg__guarantee a:hover{color:#FFB020;text-decoration:underline}

/* --- kms-buybox-highlights ------------------------------------------------ */
.kms-bbh{font-family:'DM Sans',system-ui,sans-serif;background:#16151F;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 3px 0 0 #050409,0 12px 24px rgba(0,0,0,.35);padding:18px 20px;margin:18px 0 14px}
.kms-bbh__lead{margin:0 0 14px;font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.3px;color:#F5F4FB}
.kms-bbh__hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.kms-bbh__hl li{position:relative;padding-left:24px;font-size:13.5px;color:#E6E5F0;line-height:1.45}
.kms-bbh__hl li::before{content:"\25B8";position:absolute;left:3px;top:-1px;color:#FFB020;font-family:'VT323',ui-monospace,monospace;font-size:17px}
.kms-bbh__who{margin:13px 0 0;font-size:12.5px;color:#9A97AC;line-height:1.5}
.kms-bbh__anchor{display:block;color:#A8A1F7;margin-top:3px}

/* NOTE: the dark-PDP background rules that used to live here
   (main[data-template="product"] background / .color-scheme-1 / .section-background)
   were exact duplicates of `main:not([data-template=index])` in kms-cards.css
   and have been dropped. */
main[data-template="product"] .product-information [class*="media-gallery"]{padding-block-start:24px !important}

/* ===== Native PDP retro overrides ===== */
.product-information h1{font-family:'Space Grotesk',ui-sans-serif,sans-serif !important;font-weight:700 !important;letter-spacing:-.6px !important;color:#F5F4FB !important}
.product-information .price,.sticky-add-to-cart .price,.sticky-add-to-cart__price .price{font-family:'DM Mono',ui-monospace,monospace !important;color:#F5F4FB !important}
.add-to-cart-button{font-family:'VT323',ui-monospace,monospace !important;font-size:19px !important;letter-spacing:1px !important;text-transform:uppercase !important;background:linear-gradient(#8079EE,#534AB7) !important;color:#fff !important;border:1px solid #534AB7 !important;border-radius:11px !important;box-shadow:0 5px 0 0 #2c2660,0 5px 0 1px #000 !important;transition:filter .15s ease,transform .12s ease,box-shadow .12s ease !important}
.add-to-cart-button:hover{filter:brightness(1.08) !important}
.add-to-cart-button:active{transform:translateY(5px) !important;box-shadow:none !important}
@media (min-width:990px){
  .product-information__grid.product-information--media-left{grid-template-columns:minmax(0,620px) minmax(0,500px)!important;justify-content:center!important;align-items:start!important;gap:40px!important;}
}

/* ===== Gold review stars ===== */
.jdgm-widget,.jdgm-all-reviews-rating,.jdgm-prev-badge,.jdgm-histogram,.jdgm-rev-widg{--jdgm-primary-color:#FFB020 !important;--jdgm-star-color:#FFB020 !important}
.jdgm-star,.jdgm-star.jdgm--on,.jdgm-star.jdgm--half,.jdgm--on{color:#FFB020 !important}

/* --- kms-share-button ----------------------------------------------------- */
.kms-share{margin:10px 0}
.kms-share__btn{display:inline-flex;align-items:center;gap:8px;font-family:'VT323',ui-monospace,monospace;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:#CAC7DC;background:#1C1B27;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:8px 16px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.kms-share__btn:hover{border-color:rgba(168,161,247,.55);color:#F5F4FB;background:#211F2E}
.kms-share__btn:active{transform:translateY(1px)}
.kms-share__icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.kms-share__icon--check{display:none;stroke:#28c840}
.kms-share__btn.kms-share--copied{border-color:rgba(40,200,64,.55);color:#28c840}
.kms-share__btn.kms-share--copied .kms-share__icon--link{display:none}
.kms-share__btn.kms-share--copied .kms-share__icon--check{display:block}

/* --- kms-product-preview -------------------------------------------------- */
.kms-prev{margin:22px 0;font-family:'DM Sans',system-ui,sans-serif}
.kms-prev__bar{display:flex;align-items:center;gap:10px;background:linear-gradient(#1E1C2A,#15141E);border:1px solid rgba(255,255,255,.14);border-bottom:none;border-radius:12px 12px 0 0;padding:10px 16px}
.kms-prev__dots{display:flex;gap:6px}
.kms-prev__dots i{width:11px;height:11px;border-radius:50%;display:inline-block}
.kms-prev__dots .r{background:#ff5f57}.kms-prev__dots .y{background:#febc2e}.kms-prev__dots .g{background:#28c840}
.kms-prev__file{font-family:'VT323',ui-monospace,monospace;font-size:14px;letter-spacing:.5px;color:#847F99}
.kms-prev__body{position:relative;background:#0E0D14;border:1px solid rgba(255,255,255,.14);border-top:none;border-radius:0 0 12px 12px;max-height:260px;overflow:hidden}
.kms-prev__body pre{margin:0;padding:16px 18px;font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.7;color:#CAC7DC;white-space:pre-wrap;word-break:break-word}
.kms-prev__fade{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(to bottom,rgba(14,13,20,0),#0E0D14);border-radius:0 0 12px 12px;pointer-events:none}
.kms-prev__caption{margin:8px 0 0;font-size:11px;color:#847F99;text-align:center}

/* --- kms-install ---------------------------------------------------------- */
.kms-install{margin:22px 0;padding:24px;background:#16151F;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 3px 0 0 #050409;font-family:'DM Sans',system-ui,sans-serif}
.kms-install__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.kms-install__eyebrow{font-family:'VT323',ui-monospace,monospace;font-size:15px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:#FFB020}
.kms-install__time{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(128,121,238,.14);color:#A8A1F7;font-family:'VT323',ui-monospace,monospace;font-size:14px;letter-spacing:.5px;border-radius:999px;border:1px solid rgba(128,121,238,.3)}
.kms-install__time-icon{width:12px;height:12px;flex-shrink:0}
.kms-install__title{font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-size:18px;font-weight:700;color:#F5F4FB;margin:0 0 14px 0;line-height:1.3;letter-spacing:-.3px}
.kms-install__steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.kms-install__step{display:flex;align-items:flex-start;gap:14px;padding:13px 14px;background:#1C1B27;border:1px solid rgba(255,255,255,.1);border-radius:10px;transition:border-color .15s ease,transform .15s ease}
.kms-install__step:hover{border-color:#534AB7;transform:translateY(-1px)}
.kms-install__number{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(#8079EE,#534AB7);color:#FFFFFF;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;font-weight:500;border-radius:8px}
.kms-install__step-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.kms-install__step-title{font-size:14px;font-weight:600;color:#F5F4FB;line-height:1.3}
.kms-install__step-copy{font-size:12.5px;font-weight:300;color:#CAC7DC;line-height:1.5;margin:0}
.kms-install__footnote{font-size:11px;font-weight:400;color:#847F99;margin:14px 0 0 0;line-height:1.45;text-align:center}
@media(max-width:480px){.kms-install{padding:20px 18px}.kms-install__title{font-size:16px}.kms-install__step{padding:11px 12px;gap:12px}.kms-install__number{width:28px;height:28px}}

/* --- kms-compat ----------------------------------------------------------- */
.kms-compat{margin:22px 0;padding:22px 24px;background:#16151F;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 3px 0 0 #050409;font-family:'DM Sans',system-ui,sans-serif}
.kms-compat__inner{display:flex;flex-direction:column;gap:10px}
.kms-compat__eyebrow{font-family:'VT323',ui-monospace,monospace;font-size:15px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:#FFB020}
.kms-compat__title{font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-size:18px;font-weight:700;color:#F5F4FB;margin:0;line-height:1.3;letter-spacing:-.3px}
.kms-compat__copy{font-size:13px;font-weight:300;color:#CAC7DC;line-height:1.55;margin:0}
.kms-compat__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:6px 0 0 0}
.kms-compat__pill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;background:#1C1B27;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12px;font-weight:500;color:#F5F4FB;transition:border-color .15s ease,transform .15s ease}
.kms-compat__pill:hover{border-color:#534AB7;transform:translateY(-1px)}
.kms-compat__dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.kms-compat__footnote{font-size:11px;font-weight:400;color:#847F99;margin:6px 0 0 0;line-height:1.4}
@media(max-width:480px){.kms-compat{padding:18px 18px}.kms-compat__title{font-size:16px}}

/* --- kms-related ---------------------------------------------------------- */
/* KMS 2026-08-13: was a bare two-column text-link list (.kms-related__list).
   Replaced with a card grid reusing the shared .kms-card component (image,
   badge, rating, price — see snippets/kms-card.liquid), rendered by
   snippets/kms-related.liquid so "More in [Collection]" matches the visual
   style of Bestsellers/catalog grids instead of a plain-text link list. */
.kms-related{max-width:880px;margin:8px auto 24px;padding:0 24px;font-family:'DM Sans',system-ui,sans-serif}
.kms-related__eyebrow{font-family:'VT323',ui-monospace,monospace;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:#FFB020;margin:0 0 12px}
.kms-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kms-related__all{display:inline-block;margin-top:14px;font-family:'VT323',ui-monospace,monospace;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:#A8A1F7;text-decoration:none}
.kms-related__all:hover{color:#FFB020}
@media(max-width:760px){.kms-related__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kms-related{padding:0 16px}}

/* --- kms-product-body ----------------------------------------------------- */
.kms-body{padding:8px 24px 16px;font-family:'DM Sans',system-ui,sans-serif}
.kms-body__inner{max-width:880px;margin:0 auto}
.kms-body__eyebrow{font-family:'VT323',ui-monospace,monospace;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:#FFB020;margin:0 0 12px}
.kms-body__sec{margin:0 0 10px}
.kms-body__desc-wrap{position:relative;max-height:360px;overflow:hidden;transition:max-height .35s ease}
.kms-body__desc-wrap.open{max-height:8000px}
.kms-body__fade{position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(to bottom,rgba(14,13,20,0),#0E0D14);pointer-events:none}
.kms-body__desc-wrap.open .kms-body__fade{display:none}
.kms-body__more{margin:14px auto 0;display:block;font-family:'VT323',ui-monospace,monospace;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:#A8A1F7;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:8px 20px;cursor:pointer;transition:.15s}
.kms-body__more:hover{color:#FFB020;border-color:#534AB7}
.kms-body__desc,.kms-body__desc *{color:#D6D4E4 !important}
.kms-body__desc{font-size:14.5px;line-height:1.8}
.kms-body__desc p{margin:0 0 14px}
.kms-body__desc li{margin-bottom:11px;line-height:1.7}
.kms-body__desc h1,.kms-body__desc h2,.kms-body__desc h3,.kms-body__desc h4,.kms-body__desc strong,.kms-body__desc b{color:#F5F4FB !important;font-family:'Space Grotesk',ui-sans-serif,sans-serif !important}
.kms-body__desc h2,.kms-body__desc h3{font-size:19px;margin:22px 0 12px}
.kms-body__desc [style*="background"]{background:#16151F !important;border:1px solid rgba(255,255,255,.14) !important;border-radius:12px !important;padding:18px 20px !important}
.kms-body__desc a{color:#A8A1F7 !important}
.kms-body__desc hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:18px 0}
/* hide empty icon placeholder boxes inside merchant description */
.kms-body__desc div:empty{display:none !important}
/* sample */
.kms-sample{margin:22px 0}
.kms-sample__win{border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;box-shadow:0 3px 0 0 #050409}
.kms-sample__bar{display:flex;align-items:center;gap:8px;background:linear-gradient(#1E1C2A,#15141E);border-bottom:1px solid rgba(255,255,255,.08);padding:9px 14px;font-family:'VT323',ui-monospace,monospace}
.kms-sample__bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.kms-sample__bar .r{background:#ff5f57}.kms-sample__bar .y{background:#febc2e}.kms-sample__bar .g{background:#28c840}
.kms-sample__file{flex:1;text-align:center;color:#847F99;font-size:14px;letter-spacing:.5px}
.kms-sample__prompt{background:#0E0D14;padding:14px 16px;font-family:'DM Mono',ui-monospace,monospace;font-size:13px;color:#F5F4FB;line-height:1.6}
.kms-sample__dollar{color:#FFB020;margin-right:8px}
.kms-sample__out{background:#16151F;border-top:1px solid rgba(255,255,255,.08);padding:14px 16px;font-size:13.5px;color:#CAC7DC;line-height:1.6;white-space:pre-wrap}
/* final CTA */
.kms-body__cta{position:relative;overflow:hidden;text-align:center;margin:26px 0 8px;padding:34px 24px;background:#16151F;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 5px 0 0 #050409,0 18px 40px rgba(0,0,0,.45)}
.kms-body__cta-glow{position:absolute;inset:0;background:radial-gradient(420px 200px at 50% 0,rgba(128,121,238,.22),transparent 62%);pointer-events:none}
.kms-body__cta-h{position:relative;font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-size:24px;font-weight:700;color:#F5F4FB;margin:0 0 8px;letter-spacing:-.4px}
.kms-body__cta-p{position:relative;font-size:14px;font-weight:300;color:#CAC7DC;margin:0 0 20px}
.kms-body__cta-btn{position:relative;display:inline-block;cursor:pointer;font-family:'VT323',ui-monospace,monospace;font-size:20px;letter-spacing:1px;text-transform:uppercase;color:#fff;background:linear-gradient(#8079EE,#534AB7);border:1px solid #534AB7;border-radius:11px;padding:14px 32px;box-shadow:0 6px 0 0 #2c2660,0 6px 0 1px #000;transition:filter .15s,transform .12s,box-shadow .12s}
.kms-body__cta-btn:hover{filter:brightness(1.08)}
.kms-body__cta-btn:active{transform:translateY(6px);box-shadow:none}
@media(max-width:600px){.kms-body{padding:8px 16px 12px}.kms-body__cta{padding:26px 18px}.kms-body__cta-h{font-size:20px}}

/* ===== Judge.me reviews on dark page (widget text was dark = invisible) ===== */
main[data-template="product"]{--jdgm-star-color:#FFB020 !important;--jdgm-primary-color:#FFB020 !important;--jm-star-color:#FFB020 !important;--jm-primary-color:#FFB020 !important;--jm-color-primary:#FFB020 !important;--jm-color-star:#FFB020 !important}
main[data-template="product"] [class^="jm-"]:not(svg):not(path),
main[data-template="product"] [class*=" jm-"]:not(svg):not(path),
main[data-template="product"] [class*="jdgm-rev"]:not(svg):not(path){color:#CAC7DC !important}
main[data-template="product"] .jm-review-content__title,
main[data-template="product"] [class*="reviews-title"],
main[data-template="product"] .jdgm-rev-widg__title{color:#F5F4FB !important}
main[data-template="product"] [class*="jm-"] svg{color:#FFB020 !important}
main[data-template="product"] [class*="jm-review"]{border-color:rgba(255,255,255,.1) !important}

/* --- kms-product-faq ------------------------------------------------------ */
/* padding comes from section settings via the --kms-pfaq-pt/pb custom properties */
.kms-pfaq{background:transparent;padding:var(--kms-pfaq-pt,48px) 24px var(--kms-pfaq-pb,48px);font-family:'DM Sans',system-ui,sans-serif}
.kms-pfaq__inner{max-width:800px;margin:0 auto}
.kms-pfaq__eyebrow{font-family:'VT323',ui-monospace,monospace;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:#FFB020;text-align:center;margin-bottom:6px}
.kms-pfaq__heading{font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-size:26px;font-weight:700;color:#F5F4FB;margin:0 0 24px;text-align:center;letter-spacing:-.4px}
.kms-pfaq details{background:#16151F;border:1px solid rgba(255,255,255,.14);border-radius:10px;margin-bottom:10px;box-shadow:0 3px 0 0 #050409;overflow:hidden}
.kms-pfaq summary{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;gap:16px}
.kms-pfaq summary::-webkit-details-marker{display:none}
.kms-pfaq__q{font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-size:15px;font-weight:700;color:#F5F4FB}
.kms-pfaq__icon{font-family:'VT323',ui-monospace,monospace;font-size:22px;color:#FFB020;flex-shrink:0;transition:transform .2s ease;line-height:1}
.kms-pfaq details[open] .kms-pfaq__icon{transform:rotate(45deg)}
.kms-pfaq__a{font-size:13.5px;font-weight:300;color:#CAC7DC;line-height:1.7;padding:0 18px 16px;margin:0}

/* --- kms-footer-trust ----------------------------------------------------- */
.kmsft{background:transparent;border-top:1px solid rgba(255,255,255,.08);padding:48px 24px 6px}
.kmsft__inner{max-width:1140px;margin:0 auto}
.kmsft__eyebrow{font-family:'VT323',ui-monospace,monospace;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:#FFB020;margin-bottom:12px}
.kmsft__eyebrow::before{content:'// '}
.kmsft__win{background:#16151F;border:1px solid rgba(255,255,255,.15);border-radius:15px;overflow:hidden;box-shadow:0 5px 0 0 #050409,0 18px 40px rgba(0,0,0,.45)}
.kmsft__bar{display:flex;align-items:center;gap:10px;padding:9px 16px;background:linear-gradient(#1E1C2A,#15141E);border-bottom:1px solid rgba(255,255,255,.08);font-family:'VT323',ui-monospace,monospace}
.kmsft__bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.kmsft__bar .l1{background:#ff5f57}.kmsft__bar .l2{background:#febc2e}.kmsft__bar .l3{background:#28c840}
.kmsft__bar .t{flex:1;text-align:center;color:#CAC7DC;font-size:15px;letter-spacing:.5px}
.kmsft__bar .c{color:#28c840;font-size:14px;letter-spacing:.5px}
.kmsft__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding:26px 24px}
.kmsft__col h3{font-family:'Space Grotesk',ui-sans-serif,sans-serif;font-weight:700;font-size:16px;color:#F5F4FB;margin:0 0 8px;line-height:1.3}
.kmsft__col p{font-family:'DM Sans',sans-serif;font-size:13px;color:#CAC7DC;line-height:1.6;margin:0}
.kmsft__tag{display:block;font-family:'VT323',ui-monospace,monospace;font-size:15px;letter-spacing:.5px;color:#A8A1F7;margin-bottom:4px}
.kmsft__tag::before{content:'> '}
.kms-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;align-items:center}
.kms-pay svg{height:24px;width:auto;border-radius:3px;display:block}
.kms-news{display:flex;gap:8px;margin-top:12px}
.kms-news input{flex:1;min-width:0;background:#0E0D14;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:11px 13px;font-family:'DM Sans',sans-serif;font-size:14px;color:#F5F4FB;outline:none;transition:border-color .15s}
.kms-news input::placeholder{color:#847F99}
.kms-news input:focus{border-color:#8079EE}
.kms-news button{font-family:'VT323',ui-monospace,monospace;font-size:17px;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:linear-gradient(#8079EE,#534AB7);border:1px solid #534AB7;border-radius:10px;padding:0 18px;cursor:pointer;box-shadow:0 4px 0 0 #2c2660,0 4px 0 1px #000;transition:.13s;white-space:nowrap}
.kms-news button:hover{background:linear-gradient(#8C85F2,#5d54c4)}
.kms-news button:active{transform:translateY(4px);box-shadow:none}
.kms-news__ok{font-family:'DM Mono',ui-monospace,monospace;color:#FFB020;font-size:13px;margin-top:10px}
.kmsft__rating{display:flex;align-items:center;gap:7px;font-family:'DM Sans',sans-serif;font-size:13px;color:#CAC7DC;margin-top:12px}
.kmsft__rating svg{width:15px;height:15px;fill:#FFB020;flex-shrink:0}
.kmsft__support{font-family:'DM Sans',sans-serif;font-size:13px;color:#CAC7DC;margin-top:10px;line-height:1.55}
.kmsft__support a{font-family:'DM Mono',ui-monospace,monospace;color:#A8A1F7;text-decoration:none}
.kmsft__support a:hover{color:#FFB020}
@media(max-width:860px){.kmsft__grid{grid-template-columns:1fr;gap:24px;padding:22px 18px}.kmsft{padding:36px 18px 4px}}

/* --- kms-footer-brand ----------------------------------------------------- */
/* stroke colour comes from the section setting via --kms-fbrand-stroke */
/* KMS 2026-08-13: bottom padding added (was 0) — overflow:hidden + tight
   line-height:.82 + transform:translateY(12%) pushed the glyph baseline box
   past the container's bottom edge, clipping descenders (the "y" in
   KissMySkills lost its tail and read as "u" -> "KissMuSkills"). 26px covers
   the worst case (~21px shift at the largest clamp() size, 176px font). */
.kms-fbrand{background:#0E0D14;overflow:hidden;padding:26px 0 26px;line-height:0}
.kms-fbrand__word{
  font-family:'Space Grotesk',ui-sans-serif,sans-serif;
  font-weight:700;letter-spacing:-.03em;line-height:.82;
  text-align:center;white-space:nowrap;user-select:none;
  font-size:clamp(58px,11.5vw,176px);
  color:transparent;-webkit-text-stroke:1px var(--kms-fbrand-stroke,rgba(139,130,232,0.24));
  transform:translateY(12%);
}
.kms-fbrand__caret{-webkit-text-stroke:0;color:#FFB020;animation:kmsFCaret 1.05s steps(1) infinite}
@keyframes kmsFCaret{50%{opacity:0}}
@supports not (-webkit-text-stroke:1px black){
  .kms-fbrand__word{color:rgba(139,130,232,.1)}
  .kms-fbrand__caret{color:#FFB020}
}

/* --- kms-launch-badges ---------------------------------------------------- */
.kmslb{background:transparent;padding:0 24px 28px}
.kmslb__inner{max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.kmslb__label{font-family:'VT323',ui-monospace,monospace;font-size:14px;letter-spacing:1px;color:#847F99;text-transform:uppercase;margin-right:4px}
.kmslb__badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kmslb__badges a{display:inline-flex;line-height:0;opacity:.9;transition:opacity .15s}
.kmslb__badges a:hover{opacity:1}
.kmslb__badges img{display:block;height:40px;width:auto}
@media(max-width:860px){.kmslb{padding:0 18px 22px}}