/* V104 page-by-page pass (KAN-1070), 09.10.2026. Loaded from snippets/kms-header-actions.liquid on every page.
   Palette: lime #C6FF3A / pink #FF2E88 / white on #0B0B0D. No blue, violet, cyan, amber. */

/* --- product cards (related products, collections): the title link was drawn as a grey box with a border --- */
html body .kms-card a.kms-card__link{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}
html body .kms-card a.kms-card__link:hover .kms-card__title{color:#C6FF3A}

/* --- collection card "+ Add" button: hover was violet #6C5CE7 --- */
html body .kms-add{border-color:#3A3A42 !important;color:#F0F0F3 !important;font-family:'Geist','DM Sans',system-ui,sans-serif !important}
html body .kms-add:hover{background:#C6FF3A !important;border-color:#C6FF3A !important;color:#0B0B0D !important}
html body .kms-add:focus-visible{outline-color:#C6FF3A !important}

/* --- PDP "What you're actually buying" + install: a 880px column hugged the left of a 1200px page and left the
       right half empty. On wide screens: description left, install steps sticky on the right. --- */
@media (min-width:1100px){
  html body .kms-body__inner:has(> .kms-install){display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:56px;align-items:start}
  html body .kms-body__inner:has(> .kms-install) > .kms-body__sec{grid-column:1;grid-row:1 / span 3;max-width:none}
  html body .kms-body__inner:has(> .kms-install) > .kms-install{grid-column:2;grid-row:1;max-width:none;position:sticky;top:96px}
  html body .kms-body__inner:has(> .kms-install) > .kms-aan--inst{grid-column:2;grid-row:2;max-width:none}
}
html body .kms-related a.kms-related__all{background:transparent !important;border:0 !important;padding:0 !important;color:#C6FF3A !important;-webkit-text-fill-color:currentColor}

/* --- Shopify cookie banner: "Accept" was white text on lime (unreadable) --- */
html body .shopify-pc__banner__btn-accept,
html body .shopify-pc__prefs__header-accept,
html body button[class*="shopify-pc__"][class*="accept"]{color:#0B0B0D !important;-webkit-text-fill-color:#0B0B0D !important;font-weight:700 !important}

/* --- cart: "Remove" was a loud lime square, styled like a primary action. Quiet ghost icon instead --- */
html:not(#k1):not(#k2):not(#k3) body button.cart-items__remove{background:transparent !important;background-image:none !important;border:1px solid #303037 !important;color:#8F8F99 !important;box-shadow:none !important}
html:not(#k1):not(#k2):not(#k3) body button.cart-items__remove:hover{border-color:#FF2E88 !important;color:#FF2E88 !important;background:rgba(255,46,136,.08) !important}
html:not(#k1):not(#k2):not(#k3) body button.cart-items__remove svg, html:not(#k1):not(#k2):not(#k3) body button.cart-items__remove svg *{color:#BDBDC6 !important;stroke:currentColor !important}
html:not(#k1):not(#k2):not(#k3) body button.cart-items__remove:hover svg, html:not(#k1):not(#k2):not(#k3) body button.cart-items__remove:hover svg *{color:#FF2E88 !important}

/* --- product cards on phones (cart "Complete your stack", related): price + "Add to cart" did not fit a 2-column card,
       the button ran into the card edge. Stack them below 520px. --- */
@media (max-width:520px){
  html body .kms-grid .kms-card__foot{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
  html body .kms-grid .kms-card__foot .kms-add{width:100% !important;justify-content:center !important;text-align:center !important;padding:0 8px !important}
}

/* --- collections: "Browse by category" (sections kms_cattiles). 20 tall tiles (1,245px) pushed the products below
       two screens, and each tile had its own top colour (blue, violet, orange, green). Compact 4-column tiles,
       one neutral colour, lime on hover. Phones keep the horizontal scroller. --- */
html:not(#k1):not(#k2):not(#k3) body .kms-cattile::before,
html:not(#k1):not(#k2):not(#k3) body .kms-cattile::after{background:#2A2A31 !important;background-image:none !important;box-shadow:none !important}
html:not(#k1):not(#k2):not(#k3) body .kms-cattile:hover::before{background:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .kms-cattile:hover{border-color:rgba(198,255,58,.45) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-cattile .kms-cattile__cta,
html:not(#k1):not(#k2):not(#k3) body .kms-cattile .kms-cattile__arrow{color:#8F8F99 !important;-webkit-text-fill-color:currentColor}
html:not(#k1):not(#k2):not(#k3) body .kms-cattile:hover .kms-cattile__arrow{color:#C6FF3A !important}
@media (min-width:990px){
  html:not(#k1):not(#k2):not(#k3) body .kms-cattiles__grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px !important}
  html:not(#k1):not(#k2):not(#k3) body .kms-cattile{min-height:0 !important;padding:14px 16px 12px !important;gap:6px !important}
  html:not(#k1):not(#k2):not(#k3) body .kms-cattile .kms-cattile__foot{display:none !important}
  html:not(#k1):not(#k2):not(#k3) body .kms-cattile .kms-cattile__name{font-size:15px !important;line-height:1.3 !important}
}
html body .kms-cintro__sum{color:#C6FF3A !important;-webkit-text-fill-color:currentColor}

/* --- search page: "Search results" and "Products" were in the plain body font while every other page title on the
       site is Archivo condensed caps; the theme's small "No results found…" line repeated the big empty-state box. --- */
html body.template-search .text-block h3,
html body .shopify-section[id*="__search"] .text-block h3,
html body .shopify-section[id*="__search"] h4.main-collection-grid__title{font-family:'Archivo','Arial Narrow',sans-serif !important;font-stretch:75%;font-weight:850 !important;text-transform:uppercase !important;letter-spacing:-.01em !important;color:#F3F3F5 !important}
html body .shopify-section[id*="__search"] .text-block h3{font-size:clamp(32px,4.4vw,52px) !important;line-height:1 !important}
html body .shopify-section[id*="__search"] h4.main-collection-grid__title{font-size:28px !important}
html body .search-results__no-results > p{display:none !important}

/* --- department pages (page.department, e.g. /pages/sales-marketing-growth): specialty tiles were colour-coded
       coral / blue / lime (top line, icon chip, "Browse" label). One neutral tile, lime accents, like the
       collection category tiles. --- */
html:not(#k1):not(#k2):not(#k3) body .kms-dtile::before{background:#2A2A31 !important}
html:not(#k1):not(#k2):not(#k3) body .kms-dtile:hover::before{background:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .kms-dtile:hover{border-color:rgba(198,255,58,.45) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-dtile .kms-dtile__icon{background:rgba(198,255,58,.08) !important;color:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .kms-dtile .kms-dtile__icon svg{stroke:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .kms-dtile .kms-dtile__cta,
html:not(#k1):not(#k2):not(#k3) body .kms-dtile .kms-dtile__arrow{color:#C6FF3A !important}

/* ===== KAN-1116..1118 (09.10.2026): explainer pages on the old light .cs-page design
   (claude-skills, skills-vs-plugins, paid-vs-free-ai-skills) moved to the site palette.
   Page bodies stay untouched; tokens are remapped here, theme-scoped to V104. ===== */
html body .cs-page, html body .kms-hero{
  --bg-page:#0B0B0D;--bg-card:#141417;--bg-surface:#1A1A1E;--bg-dark:#141417;
  --border:#26262B;--border-hover:#3A3A42;
  --text-primary:#F2F2F4;--text-secondary:#B4B4BC;--text-muted:#8A8A93;
  --purple:#C6FF3A;--purple-dark:#C6FF3A;--purple-light:rgba(198,255,58,.08);--purple-subtle:rgba(198,255,58,.35);
  --shadow-card:none;
  --font:var(--lab-sans,"Geist",system-ui,sans-serif);--mono:var(--lab-mono,"Geist Mono",ui-monospace,monospace);
}
html:not(#k1):not(#k2):not(#k3) body main:has(.cs-page){background:#0B0B0D !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page{background-color:#0B0B0D !important;background-image:radial-gradient(600px circle at 88% 0,rgba(255,46,136,.05),transparent 70%),radial-gradient(circle at 10% 30%,rgba(198,255,58,.04),transparent 42%) !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page h1,html:not(#k1):not(#k2):not(#k3) body .cs-page h2{font-family:var(--lab-display,"Archivo",sans-serif)}
/* code chips and inline code */
html:not(#k1):not(#k2):not(#k3) body .cs-page code{background:rgba(198,255,58,.08) !important;border-color:rgba(198,255,58,.22) !important;color:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-code{background:#0F0F12 !important;border:1px solid #26262B !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-code code{background:transparent !important;border:0 !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-code .c-key{color:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-code .c-val{color:#FF8DBE !important}
/* numbered steps: lime disc, dark digit */
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-steps li::before{background:#C6FF3A !important;color:#0B0B0D !important}
/* CTA panel and button */
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-cta{background:#141417 !important;border:1px solid rgba(255,46,136,.45) !important;box-shadow:0 0 0 1px rgba(255,46,136,.08),0 30px 80px -40px rgba(255,46,136,.35) !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-cta__eyebrow{color:#FF2E88 !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-cta__body{color:#B4B4BC !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page a.cs-cta__btn{background:#C6FF3A !important;color:#0B0B0D !important;border-color:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page a.cs-cta__btn:hover{background:#D6FF6A !important}
/* cards hover, related tiles */
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-related a:hover{border-color:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-related a:hover,html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-related a:hover span{color:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-related h2{font:600 12px/1.4 var(--lab-mono,"Geist Mono",monospace) !important;letter-spacing:.12em;text-transform:uppercase}
/* light illustration: invert to dark with lime lines */
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-figure{background:#0F0F12 !important;border-color:#26262B !important}
html:not(#k1):not(#k2):not(#k3) body .cs-page .cs-figure img{filter:invert(1) hue-rotate(0deg) saturate(1.4);mix-blend-mode:normal}
/* top hero animation: violet to lime/pink */
html:not(#k1):not(#k2):not(#k3) body .kms-hero{background:#0B0B0D !important;border-bottom:1px solid #1E1E22}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-hero__glow{background:radial-gradient(circle,rgba(198,255,58,.10),transparent 60%) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-ring{border-color:rgba(198,255,58,.10) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-wire{stroke:rgba(198,255,58,.30) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-wire.w2{stroke:rgba(255,46,136,.28) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-hub{border-color:rgba(198,255,58,.5) !important;box-shadow:0 0 44px rgba(198,255,58,.12) !important;background:#0F0F12 !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-hub__logo .skills,html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-hub__eyebrow,html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-code .t-key{color:#C6FF3A !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-hub__divider{background:rgba(198,255,58,.4) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-code .t-str{color:#FF8DBE !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-code .t-pun{color:#8A8A93 !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-node:hover{border-color:rgba(198,255,58,.4) !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-node__badge[style*="#534AB7"]{background:#C6FF3A !important;color:#0B0B0D !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-node__badge[style*="#993C1D"]{background:#FF2E88 !important}
html:not(#k1):not(#k2):not(#k3) body .kms-hero .kms-node__badge[style*="#0F6E56"]{background:#2A2A31 !important;color:#C6FF3A !important}

/* ===== KAN-1119 (09.10.2026): free tools hub on phones. 136 tool cards stacked made the page ~26k px tall.
   Compact rows: tighter padding, one-line description. ===== */
@media (max-width:749px){
  html:not(#k1):not(#k2):not(#k3) body ul.kx-tools{gap:6px !important}
  html:not(#k1):not(#k2):not(#k3) body .kx-tools a.kx-tool{padding:11px 14px !important;gap:2px !important}
  html:not(#k1):not(#k2):not(#k3) body .kx-tools .kx-tool__t{font-size:15px !important;line-height:1.3 !important}
  html:not(#k1):not(#k2):not(#k3) body .kx-tools .kx-tool__d{font-size:13px !important;line-height:1.4 !important;display:-webkit-box !important;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden !important}
}

/* ===== KAN-1120..1123 (09.10.2026): free tool pages (kms-tl-tool-wrap, ~136 pages).
   1. The "Use it free here. Keep it in your app." band sat above the H1 at 384px (desktop) and
      pushed the tool below the fold. Now a compact strip: same text and buttons, smaller type.
   2. "Compare plans" (full 3-plan table, ~1,900px) is removed from tool pages: it duplicates the
      pricing page and its plans change with KAN-1174. "What you get for this tool" stays. ===== */
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-hero{padding:18px 0 20px !important}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-h2{font-size:clamp(24px,2.4vw,32px) !important;line-height:1.02 !important;margin:6px 0 6px !important}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-sub{font-size:14px !important;line-height:1.45 !important;max-width:560px}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-offer{padding:12px 16px !important}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-btns{display:flex !important;flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:8px !important;margin-top:0;height:auto !important}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-btns > *{width:auto !important;flex:0 0 auto}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-offer{display:none !important}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktw-top__grid{align-items:center !important}
html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-btns > *{margin:0 !important}
html:not(#k1):not(#k2):not(#k3) body .ktw-after .ktl-sec:has(.kcmp){display:none !important}
@media (max-width:749px){
  html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-sub,
  html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktl-offer,
  html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktw-st{display:none !important}
  html:not(#k1):not(#k2):not(#k3) body .ktw-top .ktw-top__grid{gap:10px !important}
}
/* KAN-1122: AI text generator pages carried the homepage "KissMySkills / Works with any AI" diagram between the
   app band and the tool (261px desktop). It says nothing about the tool and pushed the form down. Hidden inside the tool wrapper only. */
html:not(#k1):not(#k2):not(#k3) body .ktw-tool > .kms-hero{display:none !important}