/** Shopify CDN: Minification failed

Line 19:0 All "@import" rules must come first

**/
/* =========================================================================
   Kurohebi — Design System tokens, fonts, and theme overrides
   ========================================================================= */

/* ----- Webfonts ---------------------------------------------------------- */
@font-face {
  font-family: 'Metamorphous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('//kurohebi.shop/cdn/shop/t/16/assets/kh-Metamorphous.ttf?v=172161466379039625131779044032') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Shippori+Mincho+B1:wght@400;500;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* Ink scale */
  --kh-ink-1000: #050507;
  --kh-ink-900:  #0b0b0e;
  --kh-ink-800:  #131318;
  --kh-ink-700:  #1d1d24;
  --kh-ink-600:  #2a2a33;
  --kh-ink-500:  #3a3a45;

  /* Ash */
  --kh-ash-500: #878793; /* bumped from #6e6e7a — original failed AA contrast (~4.0:1) on ink-900; now ~5.4:1 */
  --kh-ash-400: #8c8c98;
  --kh-ash-300: #aaaab4;

  /* Bone */
  --kh-bone-500: #c4bda8;
  --kh-bone-400: #d8d0bb;
  --kh-bone-300: #e5dec7;
  --kh-bone-200: #efe8d3;
  --kh-bone-100: #f6f0dc;
  --kh-bone-50:  #fbf7e9;

  /* Blood */
  --kh-blood-900: #4a0608;
  --kh-blood-700: #8a0c12;
  --kh-blood-600: #a8121a;
  --kh-blood-500: #c81822;
  --kh-blood-400: #e2342c;
  --kh-blood-300: #ff5046;

  /* Sigil */
  --kh-sigil-500: #6f8aa8;
  --kh-sigil-400: #8aa3bd;

  /* Semantic */
  --kh-bg:        var(--kh-ink-900);
  --kh-bg-elev:   var(--kh-ink-800);
  --kh-bg-raised: var(--kh-ink-700);
  --kh-fg:        var(--kh-bone-50);
  --kh-fg-2:      var(--kh-bone-300);
  --kh-fg-3:      var(--kh-ash-400);
  --kh-fg-mute:   var(--kh-ash-500);
  --kh-accent:    var(--kh-blood-500);
  --kh-accent-hot: var(--kh-blood-400);
  --kh-border:    var(--kh-ink-600);
  --kh-hairline:  color-mix(in oklab, var(--kh-bone-50) 10%, transparent);

  /* Type families */
  --kh-font-display: 'Metamorphous', 'UnifrakturCook', 'Cormorant Garamond', serif;
  --kh-font-ritual:  'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --kh-font-serif:   'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
  --kh-font-sans:    'Space Grotesk', 'Neue Haas Grotesk', 'Helvetica Neue', sans-serif;
  --kh-font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --kh-font-jp:      'Shippori Mincho B1', 'Noto Serif JP', serif;

  /* Aliases without the kh- prefix so the landing page (which uses Kurohebi
     stock variable names) can drop in cleanly. */
  --ink-1000: var(--kh-ink-1000);
  --ink-900:  var(--kh-ink-900);
  --ink-800:  var(--kh-ink-800);
  --ink-700:  var(--kh-ink-700);
  --ink-600:  var(--kh-ink-600);
  --ink-500:  var(--kh-ink-500);
  --ash-500:  var(--kh-ash-500);
  --ash-400:  var(--kh-ash-400);
  --ash-300:  var(--kh-ash-300);
  --bone-500: var(--kh-bone-500);
  --bone-400: var(--kh-bone-400);
  --bone-300: var(--kh-bone-300);
  --bone-200: var(--kh-bone-200);
  --bone-100: var(--kh-bone-100);
  --bone-50:  var(--kh-bone-50);
  --blood-900: var(--kh-blood-900);
  --blood-700: var(--kh-blood-700);
  --blood-600: var(--kh-blood-600);
  --blood-500: var(--kh-blood-500);
  --blood-400: var(--kh-blood-400);
  --blood-300: var(--kh-blood-300);
  --sigil-500: var(--kh-sigil-500);
  --sigil-400: var(--kh-sigil-400);
  --font-display: var(--kh-font-display);
  --font-ritual:  var(--kh-font-ritual);
  --font-serif:   var(--kh-font-serif);
  --font-sans:    var(--kh-font-sans);
  --font-mono:    var(--kh-font-mono);
  --font-jp:      var(--kh-font-jp);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  --kh-grain: var(--grain);

  /* ===== Type scale ==================================================== */
  --size-display-xl: clamp(72px, 12vw, 200px);
  --size-display-l:  clamp(56px, 9vw, 140px);
  --size-display:    clamp(44px, 7vw, 96px);
  --size-h1:         clamp(36px, 5vw, 64px);
  --size-h2:         clamp(28px, 3.5vw, 44px);
  --size-h3:         22px;
  --size-h4:         18px;
  --size-body-lg:    18px;
  --size-body:       15px;
  --size-body-sm:    13px;
  --size-micro:      11px;

  --leading-tight:   0.95;
  --leading-snug:    1.1;
  --leading-body:    1.55;
  --leading-loose:   1.7;

  --track-tight:     -0.02em;
  --track-normal:    0;
  --track-wide:      0.08em;
  --track-wider:     0.18em;
  --track-widest:    0.32em;

  /* ===== Spacing ======================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===== Radius ======================================================== */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* ===== Shadows ======================================================= */
  --shadow-1:     0 1px 0 0 var(--kh-hairline) inset;
  --shadow-2:     0 0 0 1px var(--kh-border), 0 8px 24px -8px rgb(0 0 0 / 0.6);
  --shadow-glow:  0 0 0 1px var(--kh-blood-700), 0 0 32px -4px var(--kh-blood-600);
  --shadow-inset: inset 0 0 0 1px var(--kh-hairline);
}

/* =========================================================================
   UTILITY CLASSES — drop-in atoms for any new markup
   ========================================================================= */

.lede {
  font-family: var(--kh-font-serif);
  font-size: 22px;
  line-height: 1.45;
  font-style: italic;
  color: var(--kh-fg-2);
}

.kh-jp,
.jp {
  font-family: var(--kh-font-jp);
  font-weight: 500;
}

.kh-mono,
.mono {
  font-family: var(--kh-font-mono);
}

.micro,
.eyebrow {
  font-family: var(--kh-font-mono);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--kh-fg-3);
}

.display-xl {
  font-family: var(--kh-font-display);
  font-weight: 400;
  font-size: var(--size-display-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}
.display {
  font-family: var(--kh-font-display);
  font-weight: 400;
  font-size: var(--size-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}

.surface {
  background: var(--kh-bg-elev);
  border: 1px solid var(--kh-border);
}
.surface-raised {
  background: var(--kh-bg-raised);
  border: 1px solid var(--kh-ink-500);
}
.surface--grain {
  background-image: var(--kh-grain), linear-gradient(var(--kh-bg-elev), var(--kh-bg-elev));
}

.divider-thorn {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kh-ink-500) 20%, var(--kh-bone-500) 50%, var(--kh-ink-500) 80%, transparent);
  position: relative;
}
.divider-thorn::after {
  content: "✦";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--kh-bg);
  padding: 0 12px;
  color: var(--kh-bone-500);
  font-size: 12px;
}

code, kbd, samp, pre {
  font-family: var(--kh-font-mono);
  font-size: 0.92em;
}
code { color: var(--kh-blood-400); }

/* =========================================================================
   GLOBAL THEME OVERRIDES — apply Kurohebi palette to Impulse defaults
   ========================================================================= */

body {
  background: var(--kh-bg) !important;
  color: var(--kh-fg);
  font-family: var(--kh-font-sans);
}

::selection { background: var(--kh-blood-500); color: var(--kh-bone-50); }

/* =========================================================================
   FOCUS RING — keyboard / AT users see where they are
   ========================================================================= */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--kh-blood-400);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Filled buttons get a blood-glow ring instead so the outline doesn't clip */
.kh-btn:focus-visible,
.kh-btn--primary:focus-visible,
.kh-btn--secondary:focus-visible,
.kh-btn--ghost:focus-visible,
button.btn:focus-visible,
.element-button:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--kh-blood-700), 0 0 32px -4px var(--kh-blood-600);
}
/* Inputs already have a focus state — preserve it; add outline only as a fallback */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--kh-blood-400);
  outline-offset: 1px;
}
/* Card-shaped links (product cards) — full-frame ring */
.kh-ccard:focus-visible,
.kh-pcard:focus-visible {
  outline: 2px solid var(--kh-blood-400);
  outline-offset: -2px;
}

/* Display & ritual headings */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kh-font-ritual);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kh-fg);
}

/* Mega/display headings used on hero sections */
.hero__title,
.section-header__title,
.feature-row__title,
.index-section__title {
  font-family: var(--kh-font-display) !important;
  text-transform: none;
  letter-spacing: -0.01em !important;
  color: var(--kh-bone-50) !important;
}

/* Sharp corners everywhere */
.btn,
button.btn,
.element-button,
.product__price-savings,
.collection-image,
.grid-product__content,
.grid-product__image,
.image-element,
.product-single__photo,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  border-radius: 4px !important;
}

/* Primary buttons → blood */
.btn,
button.btn,
.element-button,
.element-button[type="submit"] {
  background: var(--kh-blood-500) !important;
  color: var(--kh-bone-50) !important;
  border: 1px solid var(--kh-blood-500) !important;
  font-family: var(--kh-font-ritual) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  transition: background 180ms cubic-bezier(.65,0,.35,1), box-shadow 180ms, transform 80ms;
}

.btn:hover,
button.btn:hover,
.element-button:hover,
.element-button[type="submit"]:hover {
  background: var(--kh-blood-400) !important;
  border-color: var(--kh-blood-400) !important;
  box-shadow: 0 0 0 1px var(--kh-blood-700), 0 0 28px -6px var(--kh-blood-600);
}

.btn:active,
button.btn:active,
.element-button:active {
  transform: translateY(1px);
  opacity: 0.92;
}

/* Secondary / ghost buttons */
.btn--secondary,
.btn--tertiary,
.element-button--ghost {
  background: transparent !important;
  color: var(--kh-bone-50) !important;
  border-color: var(--kh-bone-50) !important;
}

.btn--secondary:hover,
.btn--tertiary:hover,
.element-button--ghost:hover {
  background: var(--kh-bone-50) !important;
  color: var(--kh-ink-900) !important;
}

/* =========================================================================
   HEADER
   ========================================================================= */

.site-header,
.site-header__wrapper {
  background: rgba(11, 11, 14, 0.92) !important;
  border-bottom: 1px solid var(--kh-ink-600) !important;
  backdrop-filter: blur(8px);
}

.site-nav__link,
.site-nav a,
.site-header__logo-link a {
  font-family: var(--kh-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--kh-ash-400) !important;
  transition: color 160ms ease;
}

.site-nav__link:hover,
.site-nav a:hover,
.site-nav__active {
  color: var(--kh-bone-50) !important;
}

.site-header__cart-indicator,
.cart-link__bubble {
  background: var(--kh-blood-500) !important;
  color: var(--kh-bone-50) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px var(--kh-blood-400);
}

/* =========================================================================
   PRODUCT CARDS  (Impulse uses grid-product__*)
   ========================================================================= */

.grid-product__content,
.product-card,
.kh-pcard {
  background: var(--kh-ink-800) !important;
  border: 1px solid var(--kh-ink-600) !important;
  border-radius: 4px !important;
  overflow: hidden;
  transition: border-color 200ms ease;
}

.grid-product__content:hover,
.product-card:hover,
.kh-pcard:hover {
  border-color: var(--kh-bone-500) !important;
}

.grid-product__title,
.product-card__title,
.kh-pcard__name {
  font-family: var(--kh-font-ritual) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--kh-bone-50) !important;
}

.grid-product__price,
.product-card__price,
.product__price,
.price-item {
  font-family: var(--kh-font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  color: var(--kh-bone-50) !important;
}

.grid-product__price--original,
.price-item--regular {
  text-decoration: line-through;
  color: var(--kh-ash-400) !important;
}

.grid-product__tag,
.product-tag {
  background: var(--kh-blood-500) !important;
  color: var(--kh-bone-50) !important;
  font-family: var(--kh-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 6px 10px !important;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer,
.site-footer__hr,
.site-footer__copyright {
  background: var(--kh-ink-1000) !important;
  color: var(--kh-bone-300) !important;
  border-top: 1px solid var(--kh-ink-600);
}

.site-footer__linklist-link,
.site-footer__newsletter-input {
  font-family: var(--kh-font-sans) !important;
  color: var(--kh-bone-300) !important;
}

.site-footer__linklist-link:hover {
  color: var(--kh-bone-50) !important;
}

.site-footer h4,
.site-footer__hr h4 {
  font-family: var(--kh-font-ritual) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--kh-bone-50) !important;
}

.site-footer__copyright,
.site-footer__copyright-content,
.footer__small-text {
  font-family: var(--kh-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--kh-ash-500) !important;
  border-top: 1px solid var(--kh-ink-700);
  padding-top: 16px !important;
  margin-top: 40px !important;
}

/* Kurohebi footer brand-pillar layout */
.kh-foot { padding: 64px 0 28px !important; }
.kh-foot__divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 56px;
}
.kh-foot__divider::before,
.kh-foot__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kh-ink-500);
}
.kh-foot__divider span {
  color: var(--kh-blood-500);
  font-size: 16px;
}

.kh-foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 4fr;
  gap: 40px;
  align-items: start;
}

.kh-foot__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kh-foot__badge {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
}
.kh-foot__jp {
  font-family: var(--kh-font-jp);
  font-size: 32px;
  font-weight: 700;
  color: var(--kh-bone-50);
  line-height: 1;
}
.kh-foot__name {
  font-family: var(--kh-font-ritual);
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 13px;
  color: var(--kh-bone-50);
}
.kh-foot__est {
  font-family: var(--kh-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--kh-ash-500);
}

/* Reset the inner block grid so it flows in row layout under the right column */
.kh-foot__blocks .grid {
  margin: 0 !important;
}

@media (max-width: 959px) {
  .kh-foot__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Brand pillar: badge sits left-aligned by default while the spans inherit
     centered alignment from Impulse's stock footer CSS — looks off-axis.
     Center the whole stack on mobile so the badge sits directly above the
     wordmark and EST line. */
  .kh-foot__brand {
    align-items: center;
    text-align: center;
  }
  .kh-foot__badge { margin-left: auto; margin-right: auto; }
  /* Impulse's .grid__item carries a left-only gutter (padding-left:17px,
     padding-right:0) for desktop column layouts. On mobile the items stack
     vertically, so that lone left gutter shifts every block ~8.5px right of
     center. Neutralize on mobile so the footer link list / newsletter /
     menu blocks all sit dead-center. */
  .kh-foot__blocks .grid__item { padding-left: 0 !important; padding-right: 0 !important; }
}

/* =========================================================================
   INPUTS / FORMS
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background: var(--kh-ink-700) !important;
  border: 1px solid var(--kh-ink-500) !important;
  color: var(--kh-bone-50) !important;
  font-family: var(--kh-font-sans) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
}

/* Footer newsletter field — even visual inset on both sides. The submit icon
   sits absolute-right inside .footer__newsletter, so we pad the right side
   enough to clear it (~48px) and match the LEFT padding to what's left over
   visually, giving the placeholder/text the same breathing room on each side. */
.site-footer__newsletter-input,
.footer__newsletter-input,
.kh-foot__input {
  padding: 14px 48px 14px 24px !important;
  box-sizing: border-box !important;
}
.site-footer__newsletter,
.footer__newsletter,
.kh-foot__form {
  gap: 4px;
}
/* Re-seat the icon submit so it sits inside the right padding, not flush. */
.footer__newsletter-btn {
  right: 16px !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--kh-blood-400) !important;
  box-shadow: 0 0 0 1px var(--kh-blood-700), 0 0 16px -4px var(--kh-blood-600) !important;
}

/* =========================================================================
   UTILITY MARQUEE / DROP STRIP — for theme sections that want it
   ========================================================================= */

.kh-marquee {
  overflow: hidden;
  background: var(--kh-bone-100);
  color: var(--kh-ink-900);
  border-bottom: 1px solid var(--kh-ink-600);
  border-top: 1px solid var(--kh-ink-600);
}
.kh-marquee__track {
  display: flex; gap: 64px; width: max-content;
  animation: kh-marq 40s linear infinite;
  padding: 12px 0;
}
.kh-marquee__group { display: flex; gap: 64px; padding-right: 64px; }
.kh-marquee__item {
  font-family: var(--kh-font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 16px; white-space: nowrap;
}
.kh-marquee__dot { color: var(--kh-blood-500); font-size: 14px; }
@keyframes kh-marq { to { transform: translateX(-50%); } }

/* =========================================================================
   EYEBROW + DIVIDER (ritual section labels)
   ========================================================================= */

.kh-eyebrow {
  font-family: var(--kh-font-mono);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kh-ash-400);
}

.kh-eyebrow-divider {
  display: flex; align-items: center; gap: 18px;
  padding: 32px 0 24px;
}
.kh-eyebrow-divider__rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--kh-ink-500) 30%, var(--kh-bone-500) 50%, var(--kh-ink-500) 70%, transparent);
}
.kh-eyebrow-divider__label {
  font-family: var(--kh-font-ritual); font-weight: 600;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--kh-bone-300); white-space: nowrap;
}

/* =========================================================================
   PRODUCT DETAIL PAGE (PDP)
   ========================================================================= */

/* Product title — display font, large, bone */
.product-single__title {
  font-family: var(--kh-font-display) !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--kh-bone-50) !important;
  margin: 8px 0 0 !important;
}

/* Vendor / SKU / meta */
.product-single__vendor,
.product-single__sku {
  font-family: var(--kh-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--kh-ash-400) !important;
}

/* Price block */
.product__price {
  font-family: var(--kh-font-mono) !important;
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  color: var(--kh-bone-50) !important;
}
.product__price--compare {
  font-family: var(--kh-font-mono) !important;
  color: var(--kh-ash-400) !important;
  text-decoration: line-through;
}
.product__price-savings {
  background: var(--kh-blood-500) !important;
  color: var(--kh-bone-50) !important;
  font-family: var(--kh-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 4px 8px !important;
}

/* Description / RTE body on PDP — italic Garamond for the lede flavour */
.product-single__description.rte > p:first-of-type,
.product-single__description > p:first-of-type {
  font-family: var(--kh-font-serif) !important;
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--kh-bone-300) !important;
}
.product-single__description.rte,
.product-single__description {
  font-family: var(--kh-font-sans) !important;
  color: var(--kh-fg-2) !important;
}

/* Image well */
.product__main-photos {
  background: var(--kh-ink-800) !important;
  border: 1px solid var(--kh-ink-600) !important;
  border-radius: 4px !important;
  overflow: hidden;
}

/* Thumbnails */
.product__thumb-item .product__thumb {
  background: var(--kh-ink-800) !important;
  border: 1px solid var(--kh-ink-600) !important;
  border-radius: 4px !important;
  transition: border-color 160ms ease;
}
.product__thumb-item.is-active .product__thumb,
.product__thumb-item .product__thumb[aria-current="true"] {
  border-color: var(--kh-bone-50) !important;
}

/* Policies / colophon */
.product__policies {
  font-family: var(--kh-font-sans) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--kh-fg-2) !important;
  border-top: 1px solid var(--kh-ink-600) !important;
  padding-top: 16px !important;
}

/* =========================================================================
   VARIANT SELECTORS (size + color)
   ========================================================================= */

/* Variant label — eyebrow style */
.variant__label {
  font-family: var(--kh-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--kh-ash-400) !important;
}
.variant__label-info {
  color: var(--kh-bone-50) !important;
  font-family: var(--kh-font-mono) !important;
  letter-spacing: 0.12em !important;
}

/* Variant input wrap — fieldset becomes an inline group with hairline */
.variant-input-wrap {
  border: 1px solid var(--kh-ink-500) !important;
  border-radius: 4px !important;
  overflow: hidden;
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 0 !important;
  padding: 0 !important;
  margin: 6px 0 !important;
}

/* Size buttons — segmented control */
.variant-input-wrap:not(.variant__input--color-swatch) .variant-input {
  margin: 0 !important;
  flex: 0 0 auto;
}
.variant-input-wrap:not(.variant__input--color-swatch) .variant__button-label {
  background: var(--kh-ink-700) !important;
  color: var(--kh-bone-50) !important;
  border: none !important;
  border-right: 1px solid var(--kh-ink-500) !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  min-width: 52px;
  font-family: var(--kh-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: background 160ms;
  cursor: pointer;
}
.variant-input-wrap:not(.variant__input--color-swatch) .variant-input:last-child .variant__button-label {
  border-right: none !important;
}
.variant-input-wrap:not(.variant__input--color-swatch) .variant__button-label:hover {
  background: var(--kh-ink-600) !important;
}
.variant-input-wrap:not(.variant__input--color-swatch) input:checked + .variant__button-label,
.variant-input-wrap:not(.variant__input--color-swatch) .variant__button-label.is-active {
  background: var(--kh-bone-50) !important;
  color: var(--kh-ink-900) !important;
}
.variant-input-wrap:not(.variant__input--color-swatch) .variant__button-label.disabled {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none;
}

/* Color swatches — circular pellets */
.variant__input--color-swatch {
  display: inline-flex !important;
  gap: 10px !important;
  border: none !important;
  background: transparent !important;
}
.variant__input--color-swatch .variant-input {
  margin: 0 !important;
}
.variant__input--color-swatch .color-swatch {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kh-ink-500) !important;
  padding: 0 !important;
  transition: box-shadow 160ms;
  background-size: cover !important;
  background-position: center !important;
}
.variant__input--color-swatch input:checked + .color-swatch,
.variant__input--color-swatch .color-swatch.is-active {
  box-shadow: 0 0 0 2px var(--kh-ink-900), 0 0 0 3px var(--kh-bone-50);
}
.variant__input--color-swatch .color-swatch.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Quantity input */
.product__quantity input,
.js-qty__num,
.quantity-selector input {
  background: var(--kh-ink-700) !important;
  border: 1px solid var(--kh-ink-500) !important;
  color: var(--kh-bone-50) !important;
  font-family: var(--kh-font-mono) !important;
  font-size: 13px !important;
}
.js-qty__adjust {
  background: var(--kh-ink-700) !important;
  border: 1px solid var(--kh-ink-500) !important;
  color: var(--kh-bone-50) !important;
}
.js-qty__adjust:hover { background: var(--kh-ink-600) !important; }

/* =========================================================================
   STAMP / BADGE
   ========================================================================= */

.kh-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border: 2px solid currentColor;
  font-family: var(--kh-font-ritual); font-weight: 700;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  transform: rotate(-6deg);
}
.kh-stamp--blood { color: var(--kh-blood-500); }
.kh-stamp--bone  { color: var(--kh-bone-100); }

.kh-jp { font-family: var(--kh-font-jp); font-weight: 500; }

/* =========================================================================
   MONOGRAM BADGE — the brand disc mark, used as a small stamp across
   product cards, meta rows, sticky bar, and any surface where the
   kh-badge SVG should appear. Sized variants below.
   ========================================================================= */

.kh-monogram {
  display: inline-block;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/* Variants */
.kh-monogram--meta {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  opacity: 0.85;
}
.kh-monogram--stick {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  opacity: 0.9;
}
.kh-monogram--card {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  opacity: 0.7;
}
.kh-monogram--lg {
  width: 56px;
  height: 56px;
  opacity: 1;
}

/* Cards: lay drop label out so monogram + text stay inline */
.kh-ccard__drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Meta row gets a slight gap so the monogram doesn't crowd the first item */
.kh-meta--with-badge {
  align-items: center;
}