html {
  background: var(--kb-bg);
  font-size: 16px;
}

/* Header utility cluster and PDP owner-review refinements. */
.kb-site-header__actions {
  gap: 0;
  padding-right: calc(var(--kb-space) * 1.25);
}

.kb-site-header__utility-group {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 1.1);
}

.kb-site-header__utility-group + .kb-site-header__utility-group {
  border-left: 1px solid var(--kb-line);
  margin-left: calc(var(--kb-space) * 1.25);
  padding-left: calc(var(--kb-space) * 1.25);
}

.kb-header-icon {
  border-radius: var(--kb-radius-control);
  min-height: 44px;
  min-width: 44px;
  transition: background-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease), transform var(--kb-motion-fast) var(--kb-ease);
}

.kb-header-icon svg {
  height: 21px;
  stroke-width: 1.5;
  width: 21px;
}

.kb-header-icon:hover,
.kb-header-icon:focus-visible {
  background: var(--kb-accent-tint);
  color: var(--kb-accent);
}

.kb-site-header__utility-group--cart .kb-header-icon {
  background: var(--kb-surface-alt);
  min-height: 46px;
  min-width: 46px;
}

.kb-site-header__utility-group--cart .kb-header-icon:hover,
.kb-site-header__utility-group--cart .kb-header-icon:focus-visible {
  background: var(--kb-blush-tint);
}

.kb-site-header__cart span,
.kb-wishlist-count {
  align-items: center;
  background: var(--kb-accent);
  border: 1px solid var(--kb-surface);
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  display: inline-flex;
  font-size: 0.625rem;
  font-weight: 800;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-width: 1rem;
  padding: 0 0.18rem;
  position: absolute;
  right: 0.12rem;
  top: 0.12rem;
}

.kb-language-switcher .trp-language-switcher,
.kb-language-switcher .trp-ls-shortcode-current-language,
.kb-language-switcher .trp-ls-shortcode-language {
  background: var(--kb-surface);
  border-color: var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
}

.kb-language-switcher a:hover,
.kb-language-switcher a:focus-visible {
  color: var(--kb-accent);
}

.kb-mobile-menu__language {
  border-top: 1px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 0.5);
  padding-top: calc(var(--kb-space) * 1.25);
}

:root {
  --theme-palette-color-1: var(--kb-accent);
  --theme-palette-color-2: var(--kb-button);
  --theme-palette-color-3: var(--kb-ink);
  --theme-palette-color-4: var(--kb-ink-soft);
  --theme-palette-color-5: var(--kb-accent-tint);
  --theme-palette-color-6: var(--kb-surface-alt);
  --theme-palette-color-7: var(--kb-surface);
  --theme-palette-color-8: var(--kb-button-ink);
}

body {
  background: var(--kb-bg);
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
}

body .ct-header,
body .ct-footer {
  display: none !important;
}

.home .entry-header {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
  color: var(--kb-ink);
  font-family: var(--kb-font-display);
  font-weight: 650;
  letter-spacing: 0;
}

a {
  color: var(--kb-accent);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--kb-accent-strong);
}

.button,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.kb-button,
.kb-gate__button {
  background: var(--kb-button);
  border: 1px solid var(--kb-button);
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-meta);
  font-weight: 650;
  letter-spacing: 0.02em;
  min-height: 42px;
  padding: calc(var(--kb-space) * 1.45) calc(var(--kb-space) * 3.25);
  text-decoration: none;
}

/* Bare button/input hovers sit in :where() so a component's own class rule
   (light card, tab, chip) beats them; otherwise every custom button turned
   solid rose on hover while its text kept the component colour. */
.button:hover,
.wp-block-button__link:hover,
.kb-button:hover,
.kb-gate__button:hover,
:where(button, input[type="button"], input[type="submit"]):hover {
  background: var(--kb-button-hover);
  border-color: var(--kb-button-hover);
  color: var(--kb-button-ink);
}

input,
select,
textarea {
  border: 0.5px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
}

.cmplz-documents a.cmplz-link:empty {
  display: none;
}

.mailpoet_form input.mailpoet_submit {
  background: var(--kb-button) !important;
  border-color: var(--kb-button) !important;
  color: var(--kb-button-ink) !important;
}

.kb-gate {
  align-items: center;
  background: var(--kb-bg);
  color: var(--kb-ink);
  display: grid;
  min-height: 100vh;
  padding: calc(var(--kb-space) * 3);
  place-items: center;
}

.kb-gate__panel {
  max-width: 560px;
  text-align: center;
}

.kb-gate__title {
  font-size: var(--kb-fs-h1);
  line-height: 1.08;
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-gate__copy {
  color: var(--kb-ink-soft);
  margin: 0 auto calc(var(--kb-space) * 3);
}

.kb-announcement {
  align-items: center;
  background: var(--kb-ink);
  color: var(--kb-button-ink);
  display: flex;
  font-size: var(--kb-fs-meta);
  font-weight: 650;
  justify-content: center;
  letter-spacing: 0.03em;
  min-height: 34px;
  padding: var(--kb-space) calc(var(--kb-space) * 2);
  text-align: center;
}

.kb-site-header {
  background: var(--kb-surface);
  border-bottom: 0.5px solid var(--kb-line);
  position: relative;
  top: auto;
  z-index: 100;
}

.admin-bar .kb-site-header {
  top: auto;
}

.kb-site-header__inner {
  align-items: center;
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: auto 1fr auto;
  margin-inline: auto;
  max-width: var(--kb-maxw);
  min-height: 72px;
  padding: 0 calc(var(--kb-space) * 2.75);
}

.kb-site-header__logo {
  align-items: center;
  color: var(--kb-ink);
  display: inline-flex;
  min-width: 180px;
}

.kb-site-header__logo-image {
  display: block;
  height: auto;
  max-height: 42px;
  max-width: 220px;
  width: auto;
}

.kb-site-header__nav {
  justify-self: center;
}

.kb-site-header__menu,
.kb-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-site-header__menu {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 3);
}

.kb-site-header__menu li {
  margin: 0;
  position: relative;
}

.kb-site-header__menu a,
.kb-site-header__actions a,
.kb-mobile-menu__list a {
  color: var(--kb-ink);
  font-size: var(--kb-fs-body);
  font-weight: 550;
  text-decoration: none;
}

.kb-site-header__menu a:hover,
.kb-site-header__actions a:hover,
.kb-mobile-menu__list a:hover {
  color: var(--kb-accent);
}

.kb-site-header__menu .sub-menu {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  display: grid;
  gap: var(--kb-space);
  left: 50%;
  list-style: none;
  margin: 0;
  min-width: 220px;
  opacity: 0;
  padding: calc(var(--kb-space) * 2);
  pointer-events: none;
  position: absolute;
  top: calc(100% + var(--kb-space));
  transform: translateX(-50%);
}

.kb-site-header__menu li:hover > .sub-menu,
.kb-site-header__menu li:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
}

.kb-site-header__actions {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 1.5);
  justify-self: end;
  white-space: nowrap;
}

.kb-site-header__cart span {
  align-items: center;
  background: var(--kb-accent-tint);
  border-radius: 999px;
  color: var(--kb-accent-strong);
  display: inline-flex;
  font-size: var(--kb-fs-eyebrow);
  justify-content: center;
  margin-left: calc(var(--kb-space) * 0.5);
  min-width: calc(var(--kb-space) * 2.25);
  padding: 0 calc(var(--kb-space) * 0.55);
}

/* Burger toggle: shows the bars, swaps to an X while the drawer is open.
   Scoped to .kb-site-header so it beats :is(button,a).kb-icon-button's display. */
.kb-site-header .kb-menu-toggle { display: none; }
.kb-menu-toggle__bars { align-items: center; display: inline-flex; }
.kb-menu-toggle__x { display: none; }
.kb-menu-toggle[aria-expanded="true"] .kb-menu-toggle__bars { display: none; }
.kb-menu-toggle[aria-expanded="true"] .kb-menu-toggle__x { align-items: center; display: inline-flex; }

/* Off-canvas mobile menu that slides in from the left. */
.kb-mobile-menu {
  inset: 0;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: 120;
}

.kb-mobile-menu.is-open { opacity: 1; visibility: visible; }

.kb-mobile-menu__backdrop {
  background: color-mix(in srgb, var(--kb-ink) 45%, transparent);
  border: 0;
  cursor: pointer;
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity var(--kb-motion-base) var(--kb-ease);
}

.kb-mobile-menu.is-open .kb-mobile-menu__backdrop { opacity: 1; }

.kb-mobile-menu__panel {
  background: var(--kb-surface);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  max-width: 86vw;
  overflow-y: auto;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition: transform var(--kb-motion-base) var(--kb-ease);
  width: 340px;
}

.kb-mobile-menu.is-open .kb-mobile-menu__panel { transform: translateX(0); }

.kb-mobile-menu__head {
  align-items: center;
  border-bottom: 0.5px solid var(--kb-line);
  display: flex;
  justify-content: space-between;
  padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
}

.kb-mobile-menu__list {
  display: grid;
  gap: calc(var(--kb-space) * 0.25);
  list-style: none;
  margin: 0;
  padding: calc(var(--kb-space) * 1.5);
}

.kb-mobile-menu__top,
.kb-mobile-menu__acc-head {
  align-items: center;
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-body);
  font-weight: 600;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 calc(var(--kb-space) * 1.25);
  text-decoration: none;
  width: 100%;
}

.kb-mobile-menu__top:hover,
.kb-mobile-menu__acc-head:hover { background: var(--kb-surface-alt); }

.kb-mobile-menu__acc { border: 0; }
.kb-mobile-menu__acc-head { cursor: pointer; list-style: none; }
.kb-mobile-menu__acc-head::-webkit-details-marker { display: none; }
.kb-mobile-menu__acc-head svg { flex: none; transition: transform var(--kb-motion-fast) var(--kb-ease); }
.kb-mobile-menu__acc[open] .kb-mobile-menu__acc-head svg { transform: rotate(180deg); }

.kb-mobile-menu__sub {
  display: none;
  list-style: none;
  margin: 0 0 calc(var(--kb-space) * 0.5);
  padding: calc(var(--kb-space) * 0.25) 0 calc(var(--kb-space) * 0.5) calc(var(--kb-space) * 2.5);
}

.kb-mobile-menu__acc[open] .kb-mobile-menu__sub { display: grid; }

.kb-mobile-menu__sub a {
  color: var(--kb-ink-soft);
  display: block;
  font-size: var(--kb-fs-meta);
  padding: calc(var(--kb-space) * 0.85) calc(var(--kb-space) * 1.25);
  text-decoration: none;
}

.kb-mobile-menu__sub a:hover { color: var(--kb-accent); }
.kb-mobile-menu__sub-all { color: var(--kb-accent) !important; font-weight: 700; }

.kb-mobile-menu__language {
  border-top: 0.5px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 1);
  padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.25) 0;
}

.kb-home {
  background: var(--kb-bg);
  color: var(--kb-ink);
}

.kb-home a {
  text-decoration: none;
}

.kb-hero,
.kb-section {
  margin-inline: auto;
  max-width: var(--kb-maxw);
  padding: calc(var(--kb-space) * 8) calc(var(--kb-space) * 2.75);
}

.kb-section:nth-of-type(even) {
  background: var(--kb-surface-alt);
  max-width: none;
}

.kb-section:nth-of-type(even) > * {
  margin-inline: auto;
  max-width: var(--kb-maxw);
}

.kb-hero {
  align-items: center;
  display: grid;
  gap: calc(var(--kb-space) * 6);
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1.12fr);
  min-height: 560px;
}

.kb-hero__copy {
  max-width: 520px;
}

.kb-hero h1,
.kb-section h2 {
  font-family: var(--kb-font-display);
  letter-spacing: 0;
}

.kb-hero h1 {
  font-size: var(--kb-fs-h1);
  line-height: 1.08;
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-hero p:not(.kb-eyebrow) {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  margin: 0 0 calc(var(--kb-space) * 3.5);
}

.kb-hero__image {
  align-items: end;
  animation: kb-hero-pulse 2.8s var(--kb-ease) infinite;
  aspect-ratio: 1.35 / 1;
  background:
    radial-gradient(circle at 70% 28%, var(--kb-accent-tint), transparent 28%),
    linear-gradient(135deg, var(--kb-surface-alt), var(--kb-bg));
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: flex;
  gap: calc(var(--kb-space) * 2);
  justify-content: center;
  min-height: 340px;
  overflow: hidden;
  padding: calc(var(--kb-space) * 5);
  position: relative;
  transform-origin: center bottom;
}

/* Placeholder hero image (swap the src later). Covers the tile. */
.kb-hero__media {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 1;
}

/* Smooth continuous pulse on the hero image. */
@keyframes kb-hero-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-hero__image { animation: none; }
}

/* Mobile navigation and footer accordions. Kept last so these responsive rules
   intentionally supersede the earlier header/footer compatibility layers. */
.kb-mobile-menu__item-label,
.kb-mobile-menu__account {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 1.25);
}

.kb-site-footer__accordion > summary {
  color: var(--kb-button-ink);
  cursor: default;
  font-size: var(--kb-fs-body);
  font-weight: 700;
  list-style: none;
  margin-bottom: calc(var(--kb-space) * 1.5);
}

.kb-site-footer__accordion > summary::-webkit-details-marker { display: none; }
.kb-site-footer__accordion > summary .kb-icon { display: none; }
.kb-site-footer__accordion:not([open]) > nav { display: block; }

@media (max-width: 767px) {
  .kb-announcement {
    display: block;
    overflow: hidden;
    padding-inline: 0;
    text-align: left;
    white-space: nowrap;
  }

  .kb-announcement__track {
    animation: kb-mobile-announcement-ticker 18s linear infinite;
    display: flex;
    width: max-content;
  }

  .kb-announcement__track > span { padding-right: calc(var(--kb-space) * 5); }

  .kb-mobile-menu {
    inset: var(--kb-mobile-menu-top, 7.5rem) 0 0;
    z-index: 90;
  }

  .kb-mobile-menu__backdrop { inset: 0; }

  .kb-mobile-menu__panel {
    max-width: none;
    overflow: hidden;
    width: 100vw;
  }

  .kb-mobile-menu__list {
    flex: 1 1 auto;
    gap: calc(var(--kb-space) * 0.5);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.5);
  }

  .kb-mobile-menu__top,
  .kb-mobile-menu__acc-head {
    border-bottom: 0.5px solid var(--kb-line);
    border-radius: 0;
    min-height: 52px;
    padding-inline: 0;
  }

  .kb-mobile-menu__acc-head > .kb-icon--plus { transition: transform var(--kb-motion-fast) var(--kb-ease); }
  .kb-mobile-menu__acc[open] .kb-mobile-menu__acc-head > .kb-icon--plus { transform: rotate(45deg); }
  .kb-mobile-menu__acc[open] .kb-mobile-menu__acc-head > .kb-icon:not(.kb-icon--plus) { transform: none; }
  .kb-mobile-menu__sub { padding-left: calc(var(--kb-space) * 3.75); }

  .kb-mobile-menu__footer {
    border-top: 0.5px solid var(--kb-line);
    display: grid;
    flex: 0 0 auto;
    gap: calc(var(--kb-space) * 1.25);
    padding: calc(var(--kb-space) * 1.5);
  }

  .kb-mobile-menu__account {
    background: var(--kb-surface-alt);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-control);
    color: var(--kb-ink);
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: 0 calc(var(--kb-space) * 1.5);
    text-decoration: none;
  }

  .kb-mobile-menu__language {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .kb-mobile-menu__language .kb-language-switcher { min-height: 44px; position: relative; }
  .kb-mobile-menu__footer .kb-language-switcher__menu {
    bottom: calc(100% + var(--kb-space));
    top: auto;
    z-index: 100;
  }

  .kb-header-search { gap: calc(var(--kb-space) * 1.25); }
  .kb-header-search .kb-icon { margin-right: 0; }

  .kb-splide:not(.is-initialized) .splide__slide { flex-basis: calc(44% - var(--kb-space)); }

  .kb-site-footer__inner { gap: 0; }
  .kb-site-footer__accordion { border-bottom: 0.5px solid color-mix(in srgb, var(--kb-button-ink), transparent 78%); }
  .kb-site-footer__accordion > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin: 0;
    min-height: 52px;
  }
  .kb-site-footer__accordion > summary .kb-icon { display: block; transition: transform var(--kb-motion-fast) var(--kb-ease); }
  .kb-site-footer__accordion[open] > summary .kb-icon { transform: rotate(45deg); }
  .kb-site-footer__accordion:not([open]) > nav { display: none; }
  .kb-site-footer__accordion > nav { padding-bottom: calc(var(--kb-space) * 1.25); }
}

@keyframes kb-mobile-announcement-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-announcement__track { animation: none; }
}

.kb-hero__image span {
  background: color-mix(in srgb, var(--kb-accent-tint), var(--kb-surface) 54%);
  border: 0.5px solid var(--kb-line);
  border-radius: calc(var(--kb-radius-card) * 0.7);
  display: block;
  width: clamp(52px, 7vw, 82px);
}

.kb-hero__image span:nth-child(1) {
  height: 48%;
}

.kb-hero__image span:nth-child(2) {
  height: 68%;
}

.kb-hero__image span:nth-child(3) {
  height: 55%;
}

.kb-eyebrow {
  color: var(--kb-accent);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kb-ls-eyebrow);
  line-height: 1.2;
  margin: 0 0 calc(var(--kb-space) * 1.25);
  text-transform: lowercase;
}

.kb-button {
  display: inline-flex;
  justify-content: center;
}

.kb-button--small {
  font-size: var(--kb-fs-meta);
  min-height: 34px;
  padding: calc(var(--kb-space) * 1) calc(var(--kb-space) * 2);
}

.kb-section__heading {
  display: grid;
  gap: var(--kb-space);
  justify-items: start;
  margin-bottom: calc(var(--kb-space) * 2.75);
}

.kb-section__link {
  color: var(--kb-accent-strong);
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  text-decoration: none;
}

.kb-section__link:hover,
.kb-section__link:focus-visible {
  color: var(--kb-accent);
}

.kb-section h2 {
  font-size: var(--kb-fs-h2);
  line-height: 1.15;
  margin: 0;
  max-width: 680px;
}

.kb-tile-grid,
.kb-card-grid,
.kb-product-grid,
.kb-brand-row,
.kb-routine__steps {
  display: grid;
  gap: calc(var(--kb-space) * 2);
}

.kb-tile-grid--categories,
.kb-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kb-journal-card {
  display: flex;
  flex-direction: column;
  gap: var(--kb-space);
  justify-content: space-between;
  min-height: 14rem;
  padding: calc(var(--kb-space) * 2.5);
}

.kb-journal-card strong {
  font-size: var(--kb-fs-h3);
  line-height: 1.3;
}

.kb-journal-related-products {
  border-top: 1px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 5);
  padding-top: calc(var(--kb-space) * 4);
}

.kb-journal-related-products h2 {
  font-size: var(--kb-fs-h2);
  margin-bottom: calc(var(--kb-space) * 2);
}

.kb-splide {
  --kb-splide-padding: 4rem;
  min-width: 0;
  position: relative;
  visibility: visible;
}

.kb-splide .splide__track {
  overflow: hidden;
  padding-bottom: calc(var(--kb-space) * 1.5);
  /* Room for the card's hover lift + shadow so its top is not clipped. */
  padding-top: calc(var(--kb-space) * 2);
}

.kb-splide .splide__list {
  align-items: stretch;
  min-height: 100%;
}

/* Pre-mount only: Splide applies the config padding to the track after init;
   applying it here as well double-shrinks the slide percentage base. */
.kb-splide:not(.is-initialized) .splide__list {
  padding-right: var(--kb-splide-padding);
}

.kb-splide .splide__slide {
  height: auto;
  min-width: 0;
}

.kb-splide .splide__slide > :is(.kb-product-card, .kb-journal-card) {
  height: 100%;
}

.kb-splide:not(.is-initialized) .splide__list {
  display: flex;
  gap: calc(var(--kb-space) * 2);
  overflow: hidden;
}

.kb-splide:not(.is-initialized) .splide__slide {
  flex: 0 0 calc(20% - (var(--kb-space) * 1.6));
}

.kb-splide:not(.is-initialized) .kb-splide__arrows {
  display: none;
}

.kb-splide__arrows {
  display: flex;
  gap: calc(var(--kb-space) * 0.75);
  justify-content: flex-end;
  margin-top: calc(var(--kb-space) * 1.5);
}

.kb-splide .splide__arrow {
  align-items: center;
  background: var(--kb-button);
  border: 1px solid var(--kb-button);
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  cursor: pointer;
  display: inline-flex;
  height: calc(var(--kb-icon) + (var(--kb-space) * 2));
  justify-content: center;
  opacity: 1;
  position: static;
  transform: none;
  transition: background var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease), transform var(--kb-motion-fast) var(--kb-ease);
  width: calc(var(--kb-icon) + (var(--kb-space) * 2));
}

.kb-splide .splide__arrow:hover:not(:disabled) {
  background: var(--kb-button-hover);
  border-color: var(--kb-button-hover);
  color: var(--kb-button-ink);
  transform: translateY(-1px);
}

.kb-splide .splide__arrow:disabled,
.kb-splide .splide__arrow[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.kb-splide .splide__arrow svg {
  fill: none;
  height: var(--kb-icon-sm);
  width: var(--kb-icon-sm);
}

@media (max-width: 1439px) {
  .kb-splide:not(.is-initialized) .splide__slide {
    flex-basis: calc(25% - (var(--kb-space) * 1.5));
  }
}

@media (max-width: 1023px) {
  .kb-splide {
    --kb-splide-padding: 2.5rem;
  }

  .kb-splide:not(.is-initialized) .splide__slide {
    flex-basis: calc(40% - var(--kb-space));
  }
}

@media (max-width: 767px) {
  .kb-splide {
    --kb-splide-padding: 1.25rem;
  }

  .kb-splide:not(.is-initialized) .splide__slide {
    flex-basis: calc(71.42% - (var(--kb-space) * 0.65));
  }

  .kb-splide__arrows {
    display: none;
  }
}

/* Mobile/PDP UX pass: these rules intentionally sit last so the approved header cluster remains isolated. */
.kb-splide .splide__track,
.kb-pdp-gallery .splide__track {
  touch-action: pan-y;
}

.kb-pdp-gallery {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 76px minmax(0, 1fr);
}

.kb-pdp-gallery__main {
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  padding: calc(var(--kb-space) * 0.75);
  position: relative;
}

.kb-pdp-gallery__main .splide__track,
.kb-pdp-gallery__main .splide__list,
.kb-pdp-gallery__main .splide__slide {
  height: 100%;
}

.kb-pdp-gallery__main .splide__slide {
  align-items: center;
  display: flex;
  justify-content: center;
}

.kb-pdp-gallery__main .splide__slide img {
  aspect-ratio: auto;
  border: 0;
  border-radius: calc(var(--kb-radius-card) - 4px);
  display: block;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
}

.kb-pdp-gallery__main .splide__pagination {
  bottom: calc(var(--kb-space) * 1.25);
}

.kb-pdp-gallery__main .splide__pagination__page {
  background: var(--kb-line);
  height: 8px;
  margin: 4px;
  opacity: 1;
  width: 8px;
}

.kb-pdp-gallery__main .splide__pagination__page.is-active {
  background: var(--kb-accent);
  transform: scale(1);
}

.kb-pdp-gallery__arrows .splide__arrow {
  align-items: center;
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  opacity: 1;
  width: 40px;
}

.kb-pdp-gallery__arrows .splide__arrow:hover,
.kb-pdp-gallery__arrows .splide__arrow:focus-visible {
  background: var(--kb-blush-tint);
  color: var(--kb-accent-strong);
}

.kb-pdp-gallery__arrows .splide__arrow--prev { left: calc(var(--kb-space) * 1.25); }
.kb-pdp-gallery__arrows .splide__arrow--next { right: calc(var(--kb-space) * 1.25); }
.kb-pdp-gallery__arrows .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }
.kb-pdp-gallery__arrows .splide__arrow--prev .kb-icon { transform: none; }

.kb-pdp-gallery__thumbs {
  align-self: start;
  grid-column: 1;
  grid-row: 1;
  height: min(100%, 31rem);
  min-width: 0;
  overflow: hidden;
}

.kb-pdp-gallery__thumbs .splide__track { height: 100%; }
.kb-pdp-gallery__thumbs .splide__list { gap: 10px !important; }
.kb-pdp-gallery__thumbs .splide__slide { height: 76px !important; width: 76px !important; }

.kb-pdp-gallery__thumb {
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  box-sizing: border-box;
  display: block;
  height: 76px;
  overflow: hidden;
  padding: 0;
  width: 76px;
}

.kb-pdp-gallery__thumb.is-active,
.kb-pdp-gallery__thumb:focus-visible {
  border: 2px solid var(--kb-accent);
}

.kb-pdp-gallery__thumb img {
  border: 0;
  border-radius: calc(var(--kb-radius) - 2px);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kb-pdp-gallery__pending {
  grid-column: 2;
}

.kb-site-footer .kb-shipping-partners {
  color: var(--kb-surface-alt);
}

.kb-site-footer .kb-shipping-partners strong {
  align-items: center;
  border-color: var(--kb-surface-alt);
  color: var(--kb-surface-alt);
  display: inline-flex;
  min-height: 2rem;
}

.kb-site-footer__bar {
  align-items: center;
  gap: calc(var(--kb-space) * 1.5);
}

.kb-site-footer__bar :is(.kb-payment-marks, .kb-shipping-partners) {
  margin: 0;
}

.kb-search-overlay__panel .dgwt-wcas-search-wrapp,
.kb-search-overlay__panel .dgwt-wcas-sf-wrapp {
  position: relative;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit,
.kb-search-overlay__panel .dgwt-wcas-search-submit::before {
  align-items: center;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  line-height: 1;
  margin: 0;
  top: 0;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit {
  inset: 0 auto 0 0;
  min-height: 44px;
  min-width: 44px;
  position: absolute;
  width: 44px;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit::before {
  background-position: center;
  background-size: var(--kb-icon-sm) var(--kb-icon-sm);
  width: var(--kb-icon-sm);
}

.dgwt-wcas-search-input {
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text starts just past the 44px submit icon rather than the plugin's wide default. */
.kb-search-overlay__panel .dgwt-wcas-search-input {
  padding-left: 50px !important;
}

.kb-catalog__toolbar-actions {
  align-items: center;
  display: flex;
  gap: var(--kb-space);
}

.kb-catalog__filter-trigger,
.kb-catalog__filter-close,
.kb-catalog__filter-scrim {
  display: none;
}

@media (max-width: 1023px) {
  .kb-catalog__toolbar {
    align-items: center;
    gap: var(--kb-space);
    margin-bottom: calc(var(--kb-space) * 2);
  }

  .kb-catalog__toolbar > :first-child {
    display: none;
  }

  .kb-catalog__toolbar-actions {
    justify-content: space-between;
    width: 100%;
  }

  .kb-catalog__toolbar .woocommerce-ordering,
  .kb-catalog__toolbar .woocommerce-ordering select {
    margin: 0;
    max-width: 100%;
  }

  .kb-catalog__filter-trigger {
    align-items: center;
    background: var(--kb-surface);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-control);
    color: var(--kb-ink);
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    gap: calc(var(--kb-space) * 0.75);
    justify-content: center;
    min-height: 44px;
    padding: 0 calc(var(--kb-space) * 1.5);
  }

  .kb-catalog__filter-count {
    align-items: center;
    background: var(--kb-accent);
    border-radius: var(--kb-radius-control);
    color: var(--kb-accent-ink);
    display: inline-flex;
    font-size: var(--kb-fs-meta);
    font-weight: 700;
    height: 1.35rem;
    justify-content: center;
    min-width: 1.35rem;
  }

  .kb-catalog__filters {
    background: transparent;
    border: 0;
    border-radius: 0;
    bottom: 0;
    display: block;
    inset: 0;
    padding: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    z-index: 100001;
  }

  .kb-catalog__filter-scrim {
    background: var(--kb-ink);
    border: 0;
    display: block;
    inset: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    transition: opacity var(--kb-motion-base) var(--kb-ease);
    width: 100%;
  }

  .kb-catalog__filter-panel {
    background: var(--kb-surface);
    border-radius: var(--kb-radius-card) var(--kb-radius-card) 0 0;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 46rem);
    overflow: hidden;
    padding: calc(var(--kb-space) * 2);
    position: absolute;
    transform: translateY(100%);
    transition: transform var(--kb-motion-base) var(--kb-ease);
    width: 100%;
  }

  .kb-catalog__filters.is-open {
    pointer-events: auto;
  }

  .kb-catalog__filters.is-open .kb-catalog__filter-scrim { opacity: 0.35; }
  .kb-catalog__filters.is-open .kb-catalog__filter-panel { transform: translateY(0); }

  .kb-catalog__filter-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .kb-catalog__filter-title { font-size: var(--kb-fs-h3); margin: 0; }
  .kb-catalog__filter-close { display: inline-flex; }

  .kb-catalog__filter-panel form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding-top: calc(var(--kb-space) * 1.5);
  }

  .kb-catalog-filter { border-bottom: 0.5px solid var(--kb-line); padding: 0; }
  .kb-catalog-filter__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--kb-ink);
    display: flex;
    font: inherit;
    font-weight: 700;
    justify-content: space-between;
    min-height: 48px;
    padding: 0;
    text-align: left;
    width: 100%;
  }

  .kb-catalog-filter__toggle .kb-icon { transition: transform var(--kb-motion-fast) var(--kb-ease); }
  .kb-catalog-filter__toggle[aria-expanded="false"] .kb-icon { transform: rotate(-90deg); }
  .kb-catalog-filter__options { padding-bottom: var(--kb-space); }
  .kb-catalog-filter ul { gap: calc(var(--kb-space) * 0.5); }

  .kb-catalog-filter label {
    align-items: center;
    background: var(--kb-surface-alt);
    border: 0.5px solid var(--kb-line);
    border-radius: var(--kb-radius);
    color: var(--kb-ink);
    min-height: 44px;
    padding: 0 var(--kb-space);
  }

  .kb-catalog-filter__actions {
    background: var(--kb-surface);
    border-top: 0.5px solid var(--kb-line);
    bottom: 0;
    margin: auto calc(var(--kb-space) * -2) calc(var(--kb-space) * -2);
    padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
    position: sticky;
  }

  .kb-catalog-filter__actions .kb-button { flex: 1; }
  .kb-catalog__results ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :where(.kb-hero h1, .kb-section h2, .kb-catalog h1, .kb-pdp__info h1, .kb-cart-drawer h2, .kb-search-overlay h2) {
    line-height: 1.24;
  }

  .kb-pdp-gallery { grid-template-columns: 1fr; }
  .kb-pdp-gallery__main,
  .kb-pdp-gallery__pending { grid-column: 1; grid-row: 1; }
  .kb-pdp-gallery__thumbs { grid-column: 1; grid-row: 2; height: 76px; width: 100%; }
  .kb-pdp-gallery__thumbs .splide__list { flex-direction: row !important; }
  .kb-pdp-gallery__main .splide__arrows { display: none; }
  .kb-pdp-gallery__main .splide__pagination { display: flex; }

  .kb-pdp__purchase,
  .kb-pdp__purchase .cart,
  .kb-pdp__cart,
  .kb-pdp__cart form.cart {
    min-width: 0;
    width: 100%;
  }

  .kb-pdp__cart form.cart {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--kb-space);
  }

  .kb-pdp__cart .quantity.kb-product-quantity {
    flex: 0 0 142px;
    min-width: 142px;
  }

  .kb-pdp__cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
  }

  .kb-pdp__info :is(.kb-pdp__price, .kb-pdp__badges, .kb-pdp__tags) { max-width: 100%; }
}

@media (max-width: 359px) {
  .kb-pdp__cart form.cart { flex-wrap: wrap; }
  .kb-pdp__cart .single_add_to_cart_button { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kb-catalog__filter-scrim,
  .kb-catalog__filter-panel,
  .kb-catalog-filter__toggle .kb-icon { transition-duration: 0ms; }
}

@media (prefers-reduced-motion: reduce) {
  .kb-splide .splide__arrow {
    transition: none;
  }

  .kb-skeleton-card::after {
    animation: none;
  }
}

.kb-image-tile {
  align-items: end;
  aspect-ratio: 1.2 / 1;
  background:
    linear-gradient(135deg, var(--kb-surface), var(--kb-surface-alt)),
    var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink);
  display: grid;
  min-height: 190px;
  overflow: hidden;
  padding: calc(var(--kb-space) * 2.5);
  position: relative;
}

.kb-categories .kb-tile-grid--categories {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.kb-categories .kb-image-tile {
  align-items: end;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: calc(var(--kb-space) * 1.5);
  text-align: center;
}

.kb-categories .kb-image-tile span {
  font-size: var(--kb-fs-meta);
  justify-self: center;
}

.kb-image-tile::before {
  background: var(--kb-accent-tint);
  border-radius: 999px 999px var(--kb-radius-control) var(--kb-radius-control);
  bottom: calc(var(--kb-space) * 6);
  content: "";
  height: 42%;
  position: absolute;
  right: calc(var(--kb-space) * 3);
  width: 22%;
}

.kb-image-tile span {
  font-size: var(--kb-fs-h3);
  font-weight: 650;
  line-height: 1.2;
  position: relative;
}

.kb-product-card,
.kb-info-card,
.kb-routine-step,
.kb-pdp__info,
.kb-pdp-panel,
.kb-pdp-related,
.kb-pdp-tile {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
}

.kb-product-card {
  overflow: hidden;
}

.kb-product-card__image {
  background: var(--kb-surface-alt);
  display: block;
  position: relative;
}

.kb-product-card__image img {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.kb-product-card__image .kb-product-card__img--default,
.kb-product-card__image .kb-product-card__img--hover {
  height: 100%;
  transition:
    opacity calc(var(--kb-motion-base) * 4) var(--kb-ease),
    transform calc(var(--kb-motion-base) * 4) var(--kb-ease);
}

.kb-product-card__image .kb-product-card__img--hover {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

@media (hover: hover) and (pointer: fine) {
  .kb-product-card:hover .kb-product-card__img--default,
  .kb-product-card:focus-within .kb-product-card__img--default {
    opacity: 0;
    transform: scale(1.015);
  }

  .kb-product-card:hover .kb-product-card__img--hover,
  .kb-product-card:focus-within .kb-product-card__img--hover {
    opacity: 1;
    transform: scale(1.045);
  }
}

@media (hover: none) {
  .kb-product-card__image .kb-product-card__img--hover {
    display: none;
  }
}

.kb-product-card__image--pending {
  align-items: center;
  aspect-ratio: 1 / 1;
  color: var(--kb-ink-faint);
  display: flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  justify-content: center;
  padding: calc(var(--kb-space) * 3);
  text-align: center;
}

.kb-product-card__body {
  padding: calc(var(--kb-space) * 2.5);
}

.kb-product-card h3,
.kb-pdp-tile h3 {
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-card);
  font-weight: 550;
  line-height: 1.45;
  margin: 0 0 var(--kb-space);
}

.kb-product-card h3 a,
.kb-pdp-tile h3 a {
  color: var(--kb-ink);
}

.kb-product-card__size,
.kb-product-card__reviews,
.kb-stars {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
}

.kb-product-card__meta {
  display: grid;
  gap: calc(var(--kb-space) * 0.75);
  margin: calc(var(--kb-space) * 1.5) 0;
}

.kb-product-card__price,
.kb-pdp-tile__price {
  font-size: var(--kb-fs-body);
  font-weight: 700;
}

.star-rating,
.kb-stars {
  color: var(--kb-star);
}

.kb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 0.75);
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-badges span {
  background: var(--kb-accent-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent-strong);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 650;
  padding: calc(var(--kb-space) * 0.55) calc(var(--kb-space) * 0.85);
}

.kb-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.kb-card-grid--four {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.kb-card-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.kb-info-card,
.kb-routine-step {
  color: var(--kb-ink);
  min-height: 140px;
  padding: calc(var(--kb-space) * 2.5);
}

.kb-info-card strong,
.kb-routine-step__title {
  color: var(--kb-ink);
  display: block;
  font-size: var(--kb-fs-h3);
  font-weight: 650;
  line-height: 1.2;
  margin-bottom: var(--kb-space);
}

.kb-info-card span {
  color: var(--kb-ink-soft);
  display: block;
}

.kb-routine__steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kb-routine-step {
  background: var(--kb-surface);
}

.kb-routine-step__products {
  display: grid;
  gap: var(--kb-space);
}

.kb-routine-step__products a {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  line-height: 1.4;
  text-decoration: underline;
}

.kb-brand-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 3.25);
  justify-content: center;
}

.kb-brand-row a {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  text-align: center;
}

.kb-trust-strip {
  align-items: center;
  background: var(--kb-surface-alt);
  border-bottom: 0.5px solid var(--kb-line);
  border-top: 0.5px solid var(--kb-line);
  color: var(--kb-ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 4.5);
  justify-content: center;
  padding: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 2);
}

.kb-review-strip {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: 0.7fr repeat(3, 1fr);
  padding: calc(var(--kb-space) * 4);
}

.kb-review-strip blockquote {
  border-left: 0.5px solid var(--kb-line-strong);
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  margin: 0;
  padding-left: calc(var(--kb-space) * 2);
}

/* Full-bleed band: no padding, radius, or outer margin, so the ticker strips
   sit flush against the top, bottom, and both viewport edges. Specificity
   (0,3,0) must beat the later `.kb-home > .kb-section` padding-block rule and
   the generic .kb-section padding/max-width rules (incl. media). */
.kb-home > .kb-section.kb-newsletter,
.kb-section.kb-newsletter {
  background: var(--kb-accent-tint);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--kb-space) * 4.5);
  margin-bottom: 0;
  max-width: none;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.kb-section.kb-newsletter > .kb-newsletter__inner {
  align-items: center;
  display: grid;
  gap: calc(var(--kb-space) * 3);
  justify-items: center;
  margin-inline: auto;
  max-width: 680px;
  padding-inline: calc(var(--kb-space) * 2.5);
  text-align: center;
  width: 100%;
}

/* Decorative marquee rows framing the newsletter; opposite directions. Rows
   span the full band edge to edge (overrides the even-section child cap). */
.kb-section.kb-newsletter > .kb-newsletter__ticker {
  margin-inline: 0;
  max-width: none;
  overflow: hidden;
  padding-block: 0;
  width: 100%;
}

.kb-newsletter__track {
  animation: kb-ticker-left 48s linear infinite;
  display: flex;
  gap: calc(var(--kb-space) * 1.75);
  width: max-content;
}

.kb-newsletter__ticker--bottom .kb-newsletter__track { animation-name: kb-ticker-right; }

/* Tilt the tiles (not the rows), alternating for a scattered look. */
.kb-newsletter__tile {
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  flex: 0 0 auto;
  height: 220px;
  overflow: hidden;
  width: 176px;
}


.kb-newsletter__tile img { display: block; height: 100%; object-fit: cover; width: 100%; }

@keyframes kb-ticker-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes kb-ticker-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 860px) {
  .kb-newsletter__inner { grid-template-columns: 1fr; }
  .kb-newsletter__tile { height: 160px; width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .kb-newsletter__track { animation: none; }
}

.kb-pdp-empty {
  color: var(--kb-ink-soft);
}

.kb-pdp {
  margin: 0 auto;
  max-width: var(--kb-maxw);
  padding: calc(var(--kb-space) * 6) calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 10);
}

/* Blocksy's #main-container sets overflow: clip, which silently disables the
   sticky PDP gallery. Restore vertical overflow (keep horizontal clipped, so
   full-bleed sections still cannot cause sideways scroll). */
#main-container {
  overflow-x: clip;
  overflow-y: visible;
}

.kb-pdp__top {
  display: grid;
  gap: calc(var(--kb-space) * 6);
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}

.kb-pdp-gallery {
  display: grid;
  gap: calc(var(--kb-space) * 2);
}

.kb-pdp-gallery img,
.kb-pdp-gallery__pending {
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
}

.kb-pdp-gallery img {
  display: block;
  height: auto;
  width: 100%;
}

.kb-pdp-gallery img:first-child {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 981px) {
  .kb-pdp-gallery {
    align-self: start;
    position: sticky;
    top: calc(var(--kb-space) * 14);
  }
}

.kb-pdp-gallery__pending {
  align-items: center;
  aspect-ratio: 1 / 1;
  color: var(--kb-ink-faint);
  display: flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  justify-content: center;
  padding: calc(var(--kb-space) * 4);
  text-align: center;
}

.kb-pdp-gallery__pending span,
.kb-pdp-tile__image span,
.kb-product-card__image--pending span {
  line-height: 1.4;
  max-width: 260px;
}

.kb-pdp__info {
  align-self: start;
  display: grid;
  gap: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 4);
}

.kb-pdp__brand a {
  color: var(--kb-accent);
}

.kb-pdp__info h1 {
  font-size: var(--kb-fs-pdp-title);
  line-height: 1.12;
  margin: 0;
}

.kb-pdp__rating,
.kb-pdp__size,
.kb-pdp__delivery,
.kb-pdp__free-ship {
  color: var(--kb-ink-soft);
}

.kb-pdp__rating {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
}

.kb-pdp__price {
  font-size: 1.35rem;
  font-weight: 750;
}

.kb-pdp__hook {
  color: var(--kb-ink);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  margin: 0;
}

.kb-pdp__benefits {
  color: var(--kb-ink-soft);
  display: grid;
  font-size: var(--kb-fs-body);
  gap: var(--kb-space);
  line-height: var(--kb-lh-body);
  margin: 0;
  padding-left: calc(var(--kb-space) * 2.5);
}

.kb-pdp__cart form.cart {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
  margin: 0;
}

.kb-pdp__cart .quantity input {
  min-height: 42px;
}

.kb-pdp__cart .single_add_to_cart_button {
  min-height: 42px;
  padding-inline: calc(var(--kb-space) * 3);
}

/* headShake from animate.style (animate.css, MIT licensed) — only this one
   animation is imported to keep the page lightweight. The shake motion is
   compressed into the first ~13% of the cycle; the rest is idle, so the button
   shakes briefly, waits a few seconds, then shakes again to draw the eye.
   Pauses on hover so it is calm while the shopper interacts. */
@keyframes kb-headShake {
  0% { transform: translateX(0); }
  1.7% { transform: translateX(-6px) rotateY(-9deg); }
  4.8% { transform: translateX(5px) rotateY(7deg); }
  8.2% { transform: translateX(-3px) rotateY(-5deg); }
  11.3% { transform: translateX(2px) rotateY(3deg); }
  13% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

.kb-pdp__cart .single_add_to_cart_button {
  animation: kb-headShake 3.6s ease-in-out infinite;
}

.kb-pdp__cart .single_add_to_cart_button:hover,
.kb-pdp__cart .single_add_to_cart_button:focus-visible {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .kb-pdp__cart .single_add_to_cart_button { animation: none; }
}

.kb-pdp__details {
  display: grid;
  gap: calc(var(--kb-space) * 4.25);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(var(--kb-space) * 5.5);
}

.kb-pdp-panel,
.kb-pdp-related,
.kb-pdp-reviews {
  padding: calc(var(--kb-space) * 3);
}

.kb-pdp-panel h2,
.kb-pdp-related h2,
.kb-pdp-reviews h2 {
  font-size: var(--kb-fs-h2);
  line-height: 1.15;
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-pdp-panel p,
.kb-pdp-panel #comments {
  color: var(--kb-ink-soft);
}

.kb-pdp-related {
  margin-top: calc(var(--kb-space) * 5);
}

.kb-pdp-related__grid {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Reviews sit between the related rows and the routine builder, so they use
   the same card width and rhythm as their siblings (no footer bleed). */
.kb-pdp-reviews {
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  margin: calc(var(--kb-space) * 5) 0 0;
  padding: calc(var(--kb-space) * 4);
}

.kb-pdp-tile {
  padding: calc(var(--kb-space) * 2);
}

.kb-pdp-tile__image {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink-faint);
  display: flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  justify-content: center;
  margin-bottom: calc(var(--kb-space) * 2);
  overflow: hidden;
  text-align: center;
}

.kb-pdp-tile__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kb-free-ship {
  background: var(--kb-accent-tint);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: var(--kb-space);
  margin: 0 0 calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 2);
}

.kb-free-ship__copy {
  align-items: center;
  color: var(--kb-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
  justify-content: space-between;
}

.kb-free-ship__copy span {
  color: var(--kb-ink-soft);
}

.kb-free-ship__track {
  background: color-mix(in srgb, var(--kb-surface), transparent 18%);
  border-radius: 999px;
  height: calc(var(--kb-space) * 0.8);
  overflow: hidden;
}

.kb-free-ship__track span {
  background: var(--kb-accent);
  display: block;
  height: 100%;
}

.kb-trust-footer {
  background: var(--kb-surface-alt);
  border-top: 0.5px solid var(--kb-line);
  color: var(--kb-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 2);
  justify-content: center;
  padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
  text-align: center;
}

.kb-trust-footer span {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 0.75);
}

.kb-trust-footer strong {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
}

.kb-site-footer {
  background: var(--kb-ink);
  color: var(--kb-button-ink);
  margin-top: calc(var(--kb-space) * 6);
}

.kb-site-footer__inner {
  display: grid;
  gap: calc(var(--kb-space) * 4);
  grid-template-columns: 1.2fr repeat(3, 0.8fr);
  margin-inline: auto;
  max-width: var(--kb-maxw);
  padding: calc(var(--kb-space) * 5) calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 3);
}

.kb-site-footer h2 {
  color: var(--kb-button-ink);
  font-size: var(--kb-fs-body);
  margin: 0 0 calc(var(--kb-space) * 1.5);
}

.kb-site-footer p {
  color: color-mix(in srgb, var(--kb-button-ink), transparent 25%);
  font-size: var(--kb-fs-meta);
  line-height: 1.6;
  margin: 0 0 var(--kb-space);
}

.kb-site-footer a {
  color: color-mix(in srgb, var(--kb-button-ink), transparent 18%);
  display: block;
  font-size: var(--kb-fs-meta);
  line-height: 1.6;
  margin-bottom: var(--kb-space);
  text-decoration: none;
}

.kb-site-footer a:hover,
.kb-site-footer a:focus-visible {
  color: var(--kb-button-ink);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.kb-site-footer .kb-eyebrow {
  color: var(--kb-button-ink);
}

.kb-site-footer__bar {
  align-items: center;
  border-top: 0.5px solid color-mix(in srgb, var(--kb-button-ink), transparent 78%);
  color: color-mix(in srgb, var(--kb-button-ink), transparent 45%);
  display: flex;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 2);
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--kb-maxw);
  padding: calc(var(--kb-space) * 2.25) calc(var(--kb-space) * 2.75);
}

.kb-payment-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
}

.kb-payment-pills span {
  border: 0.5px solid color-mix(in srgb, var(--kb-button-ink), transparent 72%);
  border-radius: var(--kb-radius-control);
  color: color-mix(in srgb, var(--kb-button-ink), transparent 30%);
  padding: calc(var(--kb-space) * 0.35) calc(var(--kb-space) * 0.9);
}

.kb-whatsapp {
  background: var(--kb-button);
  border-radius: 999px;
  bottom: calc(var(--kb-space) * 3);
  color: var(--kb-button-ink);
  font-weight: 700;
  padding: calc(var(--kb-space) * 1.35) calc(var(--kb-space) * 2.25);
  position: fixed;
  right: calc(var(--kb-space) * 3);
  text-decoration: none;
  z-index: 50;
}

.kb-catalog {
  margin-inline: auto;
  max-width: var(--kb-maxw);
  padding: calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 6.5);
}

.kb-catalog__header {
  margin-bottom: calc(var(--kb-space) * 2.75);
}

.kb-catalog__header h1 {
  font-size: var(--kb-fs-h1);
  line-height: 1.05;
  margin: 0 0 calc(var(--kb-space) * 1.5);
  max-width: 760px;
}

.kb-catalog__intro {
  color: var(--kb-ink-soft);
  max-width: 720px;
}

.kb-catalog__intro p {
  margin: 0;
}

.kb-catalog__toolbar {
  align-items: center;
  border-bottom: 0.5px solid var(--kb-line);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 2);
  justify-content: space-between;
  margin-bottom: calc(var(--kb-space) * 3);
  padding: calc(var(--kb-space) * 2.5) 0 calc(var(--kb-space) * 1.75);
}

.kb-catalog__toolbar .woocommerce-result-count {
  color: var(--kb-ink-soft);
  margin: 0;
}

.kb-catalog__toolbar select {
  min-height: 42px;
  padding: 0 calc(var(--kb-space) * 1.5);
}

.kb-catalog__layout {
  align-items: start;
  display: grid;
  gap: calc(var(--kb-space) * 4);
  grid-template-columns: minmax(190px, 240px) 1fr;
}

.kb-catalog__filters {
  position: sticky;
  top: 112px;
}

.kb-catalog__filter-title {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  margin: 0 0 calc(var(--kb-space) * 2.25);
}

.kb-catalog-filter {
  padding: 0 0 calc(var(--kb-space) * 2.75);
}

.kb-catalog-filter h2 {
  font-size: var(--kb-fs-eyebrow);
  letter-spacing: var(--kb-ls-eyebrow);
  margin: 0 0 calc(var(--kb-space) * 1.25);
  text-transform: uppercase;
}

.kb-catalog-filter ul {
  display: grid;
  gap: calc(var(--kb-space) * 0.75);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-catalog-filter label,
.kb-catalog-filter p,
.kb-catalog-filter__actions a {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  text-decoration: none;
}

.kb-catalog-filter label {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--kb-space);
}

.kb-catalog-filter input {
  accent-color: var(--kb-accent);
  min-height: auto;
}

.kb-catalog-filter label:hover,
.kb-catalog-filter__actions a:hover {
  color: var(--kb-accent);
}

.kb-catalog-filter__actions {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 1.5);
}

.kb-catalog__results ul.products {
  display: grid;
  gap: calc(var(--kb-space) * 3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-catalog__results ul.products::before,
.kb-catalog__results ul.products::after {
  content: none;
}

.kb-catalog__results ul.products li.product {
  float: none;
  margin: 0;
  width: auto;
}

.kb-catalog__controls {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--kb-space) * 4);
}

.kb-load-more {
  min-width: min(100%, 15rem);
  text-align: center;
}

.kb-load-more[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}

.kb-catalog-end {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink-soft);
  margin: 0;
  max-width: 42rem;
  padding: calc(var(--kb-space) * 2) calc(var(--kb-space) * 3);
  text-align: center;
}

.kb-skeleton-card {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: calc(var(--kb-space) * 1.25);
  grid-template-rows: minmax(12rem, 1fr) 1rem 1rem 2.75rem;
  min-height: 29rem;
  overflow: hidden;
  padding: calc(var(--kb-space) * 1.25);
  position: relative;
}

.kb-skeleton-card > * {
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  display: block;
}

.kb-skeleton-card i {
  inline-size: 72%;
}

.kb-skeleton-card b {
  inline-size: 44%;
}

.kb-skeleton-card em {
  inline-size: 52%;
}

.kb-skeleton-card::after {
  animation: kb-skeleton-shimmer calc(var(--kb-motion-base) * 5) var(--kb-ease) infinite;
  background: linear-gradient(90deg, transparent, var(--kb-surface), transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-100%);
}

@keyframes kb-skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

.kb-catalog-empty {
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  padding: calc(var(--kb-space) * 4);
  text-align: center;
}

.kb-catalog-empty h2 {
  margin-top: 0;
}

.woocommerce-breadcrumb {
  display: none;
}

.kb-breadcrumb {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-meta);
  line-height: 1.5;
  margin-bottom: calc(var(--kb-space) * 2);
}

.kb-breadcrumb .woocommerce-breadcrumb {
  display: block;
  margin: 0;
}

.kb-breadcrumb a {
  color: var(--kb-ink-faint);
  text-decoration: none;
}

@media (max-width: 980px) {
  .admin-bar .kb-site-header {
    top: 46px;
  }

  .kb-site-header__inner {
    grid-template-columns: 42px 1fr auto;
    min-height: 64px;
  }

  .kb-site-header .kb-menu-toggle {
    display: inline-flex;
  }

  .kb-site-header__nav {
    display: none;
  }

  .kb-site-header__logo {
    justify-self: center;
    min-width: 0;
  }

  .kb-site-header__logo-image {
    max-height: 36px;
    max-width: 180px;
  }

  .kb-hero,
  .kb-newsletter,
  .kb-pdp__top,
  .kb-pdp__details {
    grid-template-columns: 1fr;
  }

  .kb-pdp__info {
    position: static;
  }

  .kb-hero {
    min-height: auto;
  }

  .kb-review-strip {
    grid-template-columns: 1fr;
  }

  .kb-catalog__layout {
    grid-template-columns: 1fr;
  }

  .kb-catalog__filters {
    border: 0.5px solid var(--kb-line);
    border-radius: var(--kb-radius-card);
    padding: calc(var(--kb-space) * 2);
    position: static;
  }

  .kb-catalog__results ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-categories .kb-tile-grid--categories,
  .kb-product-grid,
  .kb-pdp-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-routine__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kb-site-footer__bar {
    align-items: start;
    flex-direction: column;
  }
}

/* Header commerce controls: drawer, search, and taxonomy mega menu. */
.kb-site-header__nav {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 3);
}

.kb-site-header__nav > a,
.kb-mega-menu__trigger,
.kb-header-icon {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--kb-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-body);
  font-weight: 550;
  gap: calc(var(--kb-space) * 0.5);
  line-height: 1;
  padding: var(--kb-space);
  text-decoration: none;
}

.kb-site-header__nav > a:hover,
.kb-site-header__nav > a:focus-visible,
.kb-mega-menu__trigger:hover,
.kb-mega-menu__trigger:focus-visible,
.kb-header-icon:hover,
.kb-header-icon:focus-visible {
  color: var(--kb-accent);
}

/* Sale link: shown only while a verified sale is live (kb_header_sale_active). */
.kb-site-header__nav > a.kb-site-header__sale,
.kb-mobile-menu .kb-mobile-menu__top.kb-mobile-menu__sale {
  color: var(--kb-sale-red);
}

.kb-header-icon {
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  position: relative;
}

.kb-header-icon svg,
.kb-mega-menu__trigger svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 18px;
}

.kb-mega-menu__trigger svg {
  height: 14px;
  transition: transform var(--kb-motion-fast) var(--kb-ease);
  width: 14px;
}

.kb-mega-menu.is-open .kb-mega-menu__trigger svg {
  transform: rotate(180deg);
}

.kb-cart-count,
.kb-wishlist-count {
  align-items: center;
  background: var(--kb-accent-tint);
  border-radius: 999px;
  color: var(--kb-accent-strong);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  justify-content: center;
  min-width: 18px;
  padding: 2px 5px;
}

.kb-cart-count {
  position: absolute;
  right: 2px;
  top: 2px;
}

.kb-wishlist-count {
  margin-left: -4px;
  margin-top: -18px;
}

.kb-mega-menu {
  position: static;
}

.kb-mega-menu__panel {
  background: var(--kb-surface);
  border-top: 0.5px solid var(--kb-line);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--kb-ink) 8%, transparent);
  left: 0;
  opacity: 0;
  padding: calc(var(--kb-space) * 4) calc(var(--kb-space) * 3);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(-4px);
  transition: opacity var(--kb-motion-base) var(--kb-ease), transform var(--kb-motion-base) var(--kb-ease);
  z-index: 120;
}

.kb-mega-menu.is-open .kb-mega-menu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.kb-mega-menu__inner {
  display: grid;
  gap: calc(var(--kb-space) * 4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--kb-maxw);
}

.kb-mega-menu__inner section {
  min-width: 0;
}

.kb-mega-menu__inner .kb-eyebrow {
  color: var(--kb-accent);
  margin: 0 0 calc(var(--kb-space) * 1.5);
}

.kb-mega-menu__inner ul {
  display: grid;
  gap: calc(var(--kb-space) * 1.25);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-mega-menu__inner a {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  text-decoration: none;
}

.kb-mega-menu__inner a:hover,
.kb-mega-menu__inner a:focus-visible,
.kb-mega-menu__all {
  color: var(--kb-accent-strong);
}

.kb-mega-menu__all {
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  margin-top: calc(var(--kb-space) * 2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-mega-menu__empty {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-meta);
  margin: 0;
}

.kb-cart-drawer,
.kb-search-overlay {
  align-items: stretch;
  background: color-mix(in srgb, var(--kb-ink) 28%, transparent);
  display: flex;
  inset: 0;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity var(--kb-motion-base) var(--kb-ease);
  z-index: 9999;
}

.kb-cart-drawer {
  transition:
    opacity var(--kb-motion-base) var(--kb-ease),
    visibility 0s var(--kb-motion-base);
  visibility: hidden;
}

.kb-cart-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity var(--kb-motion-base) var(--kb-ease),
    visibility 0s 0s;
  visibility: visible;
}

.kb-cart-drawer__panel {
  background: var(--kb-surface);
  box-shadow: -10px 0 28px color-mix(in srgb, var(--kb-ink) 10%, transparent);
  display: flex;
  flex-direction: column;
  max-width: 440px;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--kb-motion-base) var(--kb-ease);
  width: min(440px, 100vw);
}

.kb-cart-drawer.is-open .kb-cart-drawer__panel {
  transform: translateX(0);
}

.kb-cart-drawer__header {
  align-items: center;
  border-bottom: 0.5px solid var(--kb-line);
  display: flex;
  justify-content: space-between;
  padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
}

.kb-cart-drawer__header .kb-eyebrow,
.kb-cart-drawer__header h2 {
  margin: 0;
}

.kb-cart-drawer__header h2 {
  font-size: var(--kb-fs-h2);
}

.kb-cart-drawer__header button,
.kb-cart-drawer__remove,
.kb-search-overlay__panel > button {
  background: transparent;
  border: 0;
  color: var(--kb-ink);
  cursor: pointer;
  font-size: 1.125rem;
  min-height: 40px;
  min-width: 40px;
}

.kb-cart-drawer__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Empty-state content keeps its own padding since it has no scroll region. */
.kb-cart-drawer__empty {
  padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
}

/* Only the items/upsells region scrolls; the subtotal + buttons stay pinned. */
.kb-cart-drawer__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
}

.kb-cart-drawer__foot {
  background: var(--kb-surface);
  border-top: 0.5px solid var(--kb-line);
  display: grid;
  flex: none;
  gap: calc(var(--kb-space) * 1.5);
  padding: calc(var(--kb-space) * 2) calc(var(--kb-space) * 3) calc(var(--kb-space) * 2.5);
}

.kb-cart-drawer__content .kb-free-ship {
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  margin: 0 0 calc(var(--kb-space) * 2.5);
}

.kb-cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-cart-drawer__item {
  border-bottom: 0.5px solid var(--kb-line);
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: 68px minmax(0, 1fr) 32px;
  padding: calc(var(--kb-space) * 2) 0;
}

.kb-cart-drawer__image {
  align-items: center;
  aspect-ratio: 1;
  background: var(--kb-surface-alt);
  display: flex;
  justify-content: center;
}

.kb-cart-drawer__image img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.kb-cart-drawer__image-pending {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  text-align: center;
}

.kb-cart-drawer__item-copy {
  min-width: 0;
}

.kb-cart-drawer__item-name {
  color: var(--kb-ink);
  display: block;
  font-size: var(--kb-fs-body);
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.kb-cart-drawer__item-copy p {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-meta);
  margin: calc(var(--kb-space) * 0.5) 0 var(--kb-space);
}

.kb-cart-drawer__item-bottom,
.kb-cart-drawer__subtotal,
.kb-cart-drawer__actions,
.kb-cart-drawer__upsell,
.kb-cart-drawer__upsell > div {
  align-items: center;
  display: flex;
}

.kb-cart-drawer__item-bottom {
  gap: var(--kb-space);
  justify-content: space-between;
}

.kb-cart-drawer__quantity {
  align-items: center;
  border: 0.5px solid var(--kb-line-strong);
  display: inline-flex;
}

.kb-cart-drawer__quantity button {
  background: transparent;
  border: 0;
  color: var(--kb-ink);
  cursor: pointer;
  font-size: var(--kb-fs-body);
  height: 28px;
  width: 28px;
}

.kb-cart-drawer__quantity input {
  appearance: textfield;
  border: 0;
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-meta);
  padding: 0;
  text-align: center;
  width: 24px;
}

.kb-cart-drawer__quantity input::-webkit-inner-spin-button,
.kb-cart-drawer__quantity input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.kb-cart-drawer__price {
  color: var(--kb-ink);
  font-size: var(--kb-fs-body);
  font-weight: 700;
  white-space: nowrap;
}

.kb-cart-drawer__remove {
  align-self: start;
  font-size: var(--kb-fs-meta);
  min-height: 28px;
  min-width: 28px;
}

.kb-cart-drawer__upsells {
  border-bottom: 0.5px solid var(--kb-line);
  padding: calc(var(--kb-space) * 2.5) 0;
}

.kb-cart-drawer__upsells > .kb-eyebrow {
  margin: 0 0 var(--kb-space);
}

.kb-cart-drawer__upsell {
  gap: var(--kb-space);
  padding: var(--kb-space) 0;
}

.kb-cart-drawer__upsell > a:first-child {
  background: var(--kb-surface-alt);
  flex: 0 0 40px;
  height: 40px;
}

.kb-cart-drawer__upsell img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.kb-cart-drawer__upsell > a:first-child .kb-cart-drawer__image-pending {
  align-items: center;
  display: flex;
  font-size: var(--kb-fs-meta);
  height: 100%;
  justify-content: center;
  padding: calc(var(--kb-space) / 2);
}

.kb-cart-drawer__upsell > div {
  align-items: flex-start;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.kb-cart-drawer__upsell > div a {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  font-weight: 650;
  text-decoration: none;
}

.kb-cart-drawer__upsell > div span {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
}

.kb-cart-drawer__upsell-add {
  align-items: center;
  background: var(--kb-button);
  border: 1px solid var(--kb-button);
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  min-height: 32px;
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.5);
  text-decoration: none;
}

.kb-cart-drawer__upsell-add:hover,
.kb-cart-drawer__upsell-add:focus-visible,
.kb-cart-drawer__upsell-add.loading,
.kb-cart-drawer__upsell-add.is-added {
  background: var(--kb-button-hover);
  border-color: var(--kb-button-hover);
  color: var(--kb-button-ink);
}

.kb-cart-drawer__subtotal {
  font-size: var(--kb-fs-body);
  justify-content: space-between;
}

.kb-cart-drawer__subtotal strong {
  font-size: var(--kb-fs-body);
}

.kb-cart-drawer__actions {
  gap: var(--kb-space);
}

.kb-cart-drawer__actions .kb-button {
  flex: 1;
  padding-inline: var(--kb-space);
  text-align: center;
}

.kb-button--secondary {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-button);
  color: var(--kb-button);
}

.kb-button--secondary:hover,
.kb-button--secondary:focus-visible {
  background: var(--kb-surface-alt);
  color: var(--kb-button);
}

.kb-cart-drawer__empty {
  margin: auto 0;
  text-align: center;
}

.kb-cart-drawer__empty h2 {
  font-size: var(--kb-fs-h2);
  margin: var(--kb-space) 0;
}

.kb-cart-drawer__empty p:not(.kb-eyebrow) {
  color: var(--kb-ink-soft);
  margin: 0 0 calc(var(--kb-space) * 3);
}

.kb-search-overlay {
  align-items: flex-start;
  justify-content: center;
  opacity: 1;
  padding: min(16vh, calc(var(--kb-space) * 10)) calc(var(--kb-space) * 2);
  pointer-events: auto;
}

.kb-search-overlay[hidden] {
  display: none;
}

.kb-search-overlay__panel {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--kb-ink) 10%, transparent);
  max-width: 640px;
  padding: calc(var(--kb-space) * 3);
  position: relative;
  width: 100%;
}

.kb-search-overlay__panel > button {
  position: absolute;
  right: var(--kb-space);
  top: var(--kb-space);
}

.kb-search-overlay__panel .dgwt-wcas-search-wrapp {
  margin-top: calc(var(--kb-space) * 2);
}

html.kb-drawer-open,
html.kb-menu-open {
  overflow: hidden;
  overflow-x: hidden;
}

@media (max-width: 1023px) {
  .kb-mega-menu {
    display: none;
  }
}

@media (max-width: 980px) {
  .kb-site-header__nav {
    display: none;
  }

  .kb-cart-drawer__panel {
    max-width: 440px;
    width: min(440px, 100vw);
  }

  .kb-cart-drawer__header,
  .kb-cart-drawer__content {
    padding-left: calc(var(--kb-space) * 2);
    padding-right: calc(var(--kb-space) * 2);
  }
}

@media (max-width: 480px) {
  .kb-cart-drawer__panel {
    border-radius: 0;
    max-width: none;
    width: 100vw;
  }

  .kb-cart-drawer__header,
  .kb-cart-drawer__content {
    padding-left: calc(var(--kb-space) * 2);
    padding-right: calc(var(--kb-space) * 2);
  }

  .kb-cart-drawer__item {
    grid-template-columns: 60px minmax(0, 1fr) 40px;
  }
}

@media (max-width: 640px) {
  .kb-announcement {
    font-size: var(--kb-fs-meta);
    padding-inline: var(--kb-space);
  }

  .kb-hero,
  .kb-section,
  .kb-pdp {
    padding-left: calc(var(--kb-space) * 2);
    padding-right: calc(var(--kb-space) * 2);
  }

  .kb-hero,
  .kb-section {
    padding-bottom: calc(var(--kb-space) * 3);
    padding-top: calc(var(--kb-space) * 3);
  }

  .kb-hero h1 {
    font-size: 2rem;
  }

  .kb-section__heading {
    align-items: start;
    display: grid;
  }

  .kb-hero__image {
    min-height: 260px;
    padding: calc(var(--kb-space) * 3);
  }

  .kb-pdp__info,
  .kb-pdp-panel,
  .kb-pdp-related,
  .kb-pdp-reviews {
    padding: calc(var(--kb-space) * 2.5);
  }

  .kb-categories .kb-tile-grid--categories,
  .kb-product-grid,
  .kb-pdp-related__grid,
  .kb-routine__steps {
    grid-template-columns: 1fr;
  }

  .kb-trust-footer {
    display: grid;
  }

  .kb-site-footer__inner {
    grid-template-columns: 1fr;
    padding: calc(var(--kb-space) * 5) calc(var(--kb-space) * 2);
  }

  .kb-site-footer__bar {
    padding-inline: calc(var(--kb-space) * 2);
  }

  .kb-whatsapp {
    bottom: calc(var(--kb-space) * 2);
    right: calc(var(--kb-space) * 2);
  }

  .kb-catalog {
    padding: calc(var(--kb-space) * 5) calc(var(--kb-space) * 2);
  }

  .kb-catalog__header h1 {
    font-size: 2rem;
  }
}

/* Final rhythm overrides: keep the gallery and info column aligned tightly after the card system. */
.kb-pdp {
  padding-top: calc(var(--kb-space) * 2.5);
}

.kb-pdp__top {
  align-items: start;
  gap: calc(var(--kb-space) * 3.25);
  grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
}

.kb-pdp__info {
  align-self: start;
  gap: calc(var(--kb-space) * 1.1);
  padding: calc(var(--kb-space) * 3.25);
  position: static;
}

.kb-pdp__info h1 {
  line-height: 1.08;
}

/* Production interaction layer: calm motion, visible focus, and recoverable busy states. */
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: 3px;
}

:where(
  .button,
  button,
  input[type="button"],
  input[type="submit"],
  .kb-button,
  .kb-header-action,
  .kb-cart-drawer__qty button,
  .kb-cart-drawer__remove,
  .kb-pdp-wishlist,
  .kb-skin-test__options label > span
) {
  transition:
    background-color var(--kb-motion-fast) var(--kb-ease),
    border-color var(--kb-motion-fast) var(--kb-ease),
    color var(--kb-motion-fast) var(--kb-ease),
    opacity var(--kb-motion-fast) var(--kb-ease),
    transform var(--kb-motion-fast) var(--kb-ease);
}

:where(.kb-product-card, .kb-routine-card, .kb-ingredient-card, .kb-how-to-card) {
  transition:
    border-color var(--kb-motion-base) var(--kb-ease),
    box-shadow var(--kb-motion-base) var(--kb-ease),
    transform var(--kb-motion-base) var(--kb-ease);
}

@media (hover: hover) {
  :where(.button, button, input[type="button"], input[type="submit"], .kb-button):not(:disabled):hover {
    transform: translateY(-1px);
  }

  :where(.button, button, input[type="button"], input[type="submit"], .kb-button):not(:disabled):active {
    transform: translateY(0);
  }

  :where(.kb-product-card, .kb-routine-card, .kb-ingredient-card, .kb-how-to-card):hover {
    border-color: var(--kb-accent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--kb-ink) 8%, transparent);
    transform: translateY(-2px);
  }

  .kb-header-action:hover {
    background: var(--kb-accent-tint);
    color: var(--kb-accent);
  }

  .kb-header-icon:hover {
    background: var(--kb-accent-tint);
    color: var(--kb-accent);
  }
}

body .single_add_to_cart_button,
body .woocommerce .button,
body .wc-block-components-button {
  transition:
    background-color var(--kb-motion-fast) var(--kb-ease),
    border-color var(--kb-motion-fast) var(--kb-ease),
    color var(--kb-motion-fast) var(--kb-ease),
    opacity var(--kb-motion-fast) var(--kb-ease),
    transform var(--kb-motion-fast) var(--kb-ease);
}

@media (hover: hover) {
  body .single_add_to_cart_button:not(:disabled):hover,
  body .woocommerce .button:not(:disabled):hover,
  body .wc-block-components-button:not(:disabled):hover {
    transform: translateY(-1px);
  }

  body .single_add_to_cart_button:not(:disabled):active,
  body .woocommerce .button:not(:disabled):active,
  body .wc-block-components-button:not(:disabled):active {
    transform: translateY(0);
  }
}

.kb-mega-menu {
  transition: opacity var(--kb-motion-fast) var(--kb-ease), transform var(--kb-motion-fast) var(--kb-ease);
}

.kb-cart-drawer__overlay {
  transition: opacity var(--kb-motion-base) var(--kb-ease);
}

.kb-cart-drawer__panel {
  transition: transform var(--kb-motion-base) var(--kb-ease);
  will-change: transform;
}

.kb-cart-drawer__item.is-updating,
.kb-cart-drawer__item[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

:where(button, input, select)[disabled],
:where(button, input, select)[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.62;
}

html.kb-overlay-open,
html.kb-cart-open,
body.kb-overlay-open,
body.kb-cart-open {
  overflow: hidden;
  overflow-x: hidden;
}

.kb-commerce-notice {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  bottom: calc(var(--kb-space) * 3);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--kb-ink) 12%, transparent);
  color: var(--kb-ink);
  font-size: var(--kb-fs-body);
  left: 50%;
  max-width: min(90vw, 520px);
  opacity: 0;
  padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 2.25);
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, calc(var(--kb-space) * 2));
  transition: opacity var(--kb-motion-fast) var(--kb-ease), transform var(--kb-motion-fast) var(--kb-ease);
  z-index: 10020;
}

.kb-commerce-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.kb-commerce-notice.is-error {
  border-color: var(--kb-accent);
  color: var(--kb-accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  :where(.button, button, .kb-button, .kb-product-card, .kb-routine-card, .kb-ingredient-card, .kb-how-to-card):hover {
    transform: none !important;
  }
}

/* Polish pass: token-driven motion, hover/focus clarity, and add-to-cart feedback. */
:where(a, button, input, select, textarea, summary, [role="button"]) {
  transition:
    background-color var(--kb-motion-fast) var(--kb-ease),
    border-color var(--kb-motion-fast) var(--kb-ease),
    box-shadow var(--kb-motion-fast) var(--kb-ease),
    color var(--kb-motion-fast) var(--kb-ease),
    opacity var(--kb-motion-fast) var(--kb-ease),
    transform var(--kb-motion-fast) var(--kb-ease);
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus,
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--kb-accent) !important;
  outline-offset: 3px !important;
}

.kb-site-header :where(a, button, summary):focus,
.kb-site-header :where(a, button, summary):focus-visible,
.kb-site-footer :where(a, button):focus,
.kb-site-footer :where(a, button):focus-visible,
.kb-cart-drawer :where(a, button, input):focus,
.kb-cart-drawer :where(a, button, input):focus-visible {
  outline: 2px solid var(--kb-accent) !important;
  outline-offset: 3px !important;
}

.kb-site-header__menu a:hover,
.kb-site-header__menu a:focus-visible,
.kb-site-header__nav > a:hover,
.kb-site-header__nav > a:focus-visible,
.kb-mobile-menu__list a:hover,
.kb-mobile-menu__list a:focus-visible,
.kb-section__link:hover,
.kb-section__link:focus-visible,
.kb-product-card h3 a:hover,
.kb-product-card h3 a:focus-visible,
.kb-pdp-tile h3 a:hover,
.kb-pdp-tile h3 a:focus-visible,
.kb-cart-drawer__item-name:hover,
.kb-cart-drawer__item-name:focus-visible,
.kb-catalog-filter label:hover,
.kb-catalog-filter label:focus-within,
.kb-catalog-filter__actions a:hover,
.kb-catalog-filter__actions a:focus-visible {
  color: var(--kb-accent);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.kb-product-card,
.kb-pdp-tile,
.kb-info-card,
.kb-routine-step {
  transition:
    border-color var(--kb-motion-base) var(--kb-ease),
    box-shadow var(--kb-motion-base) var(--kb-ease),
    transform var(--kb-motion-base) var(--kb-ease);
}

.kb-product-card__image img,
.kb-pdp-tile__image img,
.kb-cart-drawer__image img {
  transition: transform var(--kb-motion-base) var(--kb-ease);
  will-change: transform;
}

@media (hover: hover) {
  .kb-product-card:hover,
  .kb-product-card:focus-within,
  .kb-pdp-tile:hover,
  .kb-pdp-tile:focus-within,
  .kb-info-card:hover,
  .kb-info-card:focus-visible,
  .kb-routine-step:hover,
  .kb-routine-step:focus-within {
    border-color: var(--kb-accent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--kb-ink) 9%, transparent);
    transform: translateY(-3px);
  }

  .kb-product-card:hover .kb-product-card__image img,
  .kb-product-card:focus-within .kb-product-card__image img,
  .kb-pdp-tile:hover .kb-pdp-tile__image img,
  .kb-pdp-tile:focus-within .kb-pdp-tile__image img {
    transform: scale(1.035);
  }
}

.kb-button,
.button,
button,
input[type="button"],
input[type="submit"],
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce .single_add_to_cart_button,
body.woocommerce .checkout-button,
body.woocommerce #place_order,
body.woocommerce button[name="update_cart"],
body.woocommerce input[name="apply_coupon"],
.add_to_cart_button {
  transform-origin: center;
}

.kb-button:active,
.button:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
body.woocommerce a.button:active,
body.woocommerce button.button:active,
body.woocommerce input.button:active,
body.woocommerce .single_add_to_cart_button:active,
body.woocommerce .checkout-button:active,
body.woocommerce #place_order:active,
body.woocommerce button[name="update_cart"]:active,
body.woocommerce input[name="apply_coupon"]:active,
.add_to_cart_button:active {
  transform: scale(0.98);
}

.add_to_cart_button.loading,
.single_add_to_cart_button.loading,
.add_to_cart_button.is-added,
.single_add_to_cart_button.is-added {
  background: var(--kb-button-hover) !important;
  border-color: var(--kb-button-hover) !important;
  color: var(--kb-button-ink) !important;
}

.add_to_cart_button.loading,
.single_add_to_cart_button.loading {
  cursor: wait;
  opacity: 0.86;
  position: relative;
}

.add_to_cart_button.loading::after,
.single_add_to_cart_button.loading::after {
  animation: kb-spin var(--kb-motion-base) linear infinite;
  border: 2px solid color-mix(in srgb, var(--kb-button-ink) 45%, transparent);
  border-radius: var(--kb-radius-control);
  border-top-color: var(--kb-button-ink);
  content: "";
  display: inline-block;
  height: 0.9em;
  margin-left: var(--kb-space);
  vertical-align: -0.12em;
  width: 0.9em;
}

@keyframes kb-spin {
  to {
    transform: rotate(1turn);
  }
}

.kb-mega-menu__panel {
  transform: translateY(calc(var(--kb-space) * -1));
  transition:
    opacity var(--kb-motion-base) var(--kb-ease),
    transform var(--kb-motion-base) var(--kb-ease);
}

.kb-search-overlay {
  transition: opacity var(--kb-motion-base) var(--kb-ease);
}

.kb-cart-drawer__panel,
.kb-search-overlay__panel {
  transition: transform var(--kb-motion-base) var(--kb-ease);
  will-change: transform;
}

.kb-search-overlay__panel {
  transform: translateY(calc(var(--kb-space) * 1.5));
}

.kb-search-overlay:not([hidden]) .kb-search-overlay__panel {
  transform: translateY(0);
}

.kb-motion-ready .kb-home .kb-section,
.kb-motion-ready .kb-home .kb-trust-strip {
  opacity: 0;
  transform: translateY(calc(var(--kb-space) * 2));
  transition:
    opacity var(--kb-motion-base) var(--kb-ease),
    transform var(--kb-motion-base) var(--kb-ease);
}

.kb-motion-ready .kb-home .kb-section.is-visible,
.kb-motion-ready .kb-home .kb-trust-strip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .kb-product-card__image img,
  .kb-pdp-tile__image img,
  .kb-cart-drawer__image img,
  .kb-cart-drawer__panel,
  .kb-search-overlay__panel,
  .kb-mega-menu__panel,
  .kb-motion-ready .kb-home .kb-section,
  .kb-motion-ready .kb-home .kb-trust-strip {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .kb-motion-ready .kb-home .kb-section,
  .kb-motion-ready .kb-home .kb-trust-strip {
    opacity: 1 !important;
  }
}

html,
body {
  overflow-x: hidden;
}

.kb-pdp-description {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  margin-top: calc(var(--kb-space) * 3.25);
  padding: calc(var(--kb-space) * 4);
}

.kb-pdp-description__body {
  max-width: 900px;
}

.kb-pdp-description__body p {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-lead);
  line-height: var(--kb-lh-lead);
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-pdp-description__body p:last-child {
  margin-bottom: 0;
}

.kb-pdp-description__body strong {
  color: var(--kb-ink);
}

@media (max-width: 640px) {
  .kb-pdp-description {
    padding: calc(var(--kb-space) * 2.5);
  }
}

/* WooCommerce controls: keep plugin defaults inside the rounded rose system. */
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit,
body.woocommerce .single_add_to_cart_button,
body.woocommerce .checkout-button,
body.woocommerce #place_order,
body.woocommerce button[name="update_cart"],
body.woocommerce input[name="apply_coupon"],
body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart button[name="apply_coupon"] {
  background: var(--kb-button) !important;
  border: 1px solid var(--kb-button) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-button-ink) !important;
  font-size: var(--kb-fs-meta) !important;
  line-height: 1.2 !important;
  min-height: 44px;
}

body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce input.button:hover,
body.woocommerce #respond input#submit:hover,
body.woocommerce .single_add_to_cart_button:hover,
body.woocommerce .checkout-button:hover,
body.woocommerce #place_order:hover,
body.woocommerce button[name="update_cart"]:hover,
body.woocommerce input[name="apply_coupon"]:hover,
body.woocommerce-cart button[name="update_cart"]:hover,
body.woocommerce-cart button[name="apply_coupon"]:hover {
  background: var(--kb-button-hover) !important;
  border-color: var(--kb-button-hover) !important;
  color: var(--kb-button-ink) !important;
}

body.woocommerce .quantity .qty,
body.woocommerce form.cart .quantity input,
body.woocommerce-cart table.cart .quantity input,
body.woocommerce-checkout .quantity input {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-line-strong) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-ink) !important;
  font-size: var(--kb-fs-body) !important;
  line-height: var(--kb-lh-body) !important;
  min-height: 44px;
  text-align: center;
}

.kb-pdp {
  padding-top: calc(var(--kb-space) * 2.5);
}

.kb-pdp .kb-breadcrumb {
  margin-bottom: calc(var(--kb-space) * 1.25);
}

.kb-pdp__top {
  gap: calc(var(--kb-space) * 3.25);
  grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
}

.kb-pdp__info {
  align-self: start;
  gap: calc(var(--kb-space) * 1.1);
  padding: calc(var(--kb-space) * 3.25);
  position: static;
}

.kb-pdp__info > h1,
.kb-pdp__info > p,
.kb-pdp__info > ul,
.kb-pdp__info > .kb-badges,
.kb-pdp__info > .kb-pdp__purchase,
.kb-pdp__info > .kb-pdp__fulfilment,
.kb-pdp__info > .kb-pdp__taxonomy-links {
  margin-bottom: 0;
  margin-top: 0;
}

.kb-pdp__info h1 {
  line-height: 1.08;
}

.kb-pdp__hook {
  margin-top: calc(var(--kb-space) * 0.75) !important;
}

.kb-pdp__benefits {
  gap: calc(var(--kb-space) * 0.5);
  margin-top: calc(var(--kb-space) * 0.5) !important;
}

.kb-pdp__purchase {
  margin-top: calc(var(--kb-space) * 0.75) !important;
}

.kb-language-switcher {
  align-items: center;
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  min-width: 46px;
  position: relative;
}

.trp-floating-switcher {
  display: none !important;
}

.kb-cart-drawer {
  overflow: hidden;
}

.kb-language-switcher .trp-language-switcher,
.kb-language-switcher .trp-language-switcher-container {
  background: transparent;
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.kb-language-switcher a,
.kb-language-switcher .trp-ls-shortcode-current-language a,
.kb-language-switcher .trp-ls-shortcode-language a {
  color: var(--kb-ink-soft) !important;
  font-size: var(--kb-fs-meta);
  text-decoration: none;
}

.kb-language-switcher a:hover,
.kb-language-switcher a:focus-visible {
  color: var(--kb-accent) !important;
}

/* Trigger: plain text-style control (flag + label + chevron), no box, no
   hover/active background. */
.kb-language-switcher__trigger {
  align-items: center;
  background: transparent !important;
  border: 0;
  color: var(--kb-ink);
  cursor: pointer;
  display: inline-flex;
  flex-wrap: nowrap;
  font: inherit;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  gap: calc(var(--kb-space) * 0.6);
  line-height: 1;
  padding: calc(var(--kb-space) * 0.5);
  transition: color var(--kb-motion-fast) var(--kb-ease);
  white-space: nowrap;
}

.kb-language-switcher__label { white-space: nowrap; }
.kb-language-switcher__flag { flex: 0 0 auto; }

/* Header instance must not be squeezed so the flag + label + chevron wrap. */
.kb-site-header .kb-language-switcher { min-width: auto !important; white-space: nowrap; }

.kb-language-switcher__trigger:hover,
.kb-language-switcher__trigger:focus-visible,
.kb-language-switcher.is-open .kb-language-switcher__trigger {
  color: var(--kb-accent);
}

.kb-language-switcher__flag {
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kb-ink) 12%, transparent);
  display: block;
  height: var(--kb-icon);
  object-fit: cover;
  width: var(--kb-icon);
}

/* Menu flags slightly larger, still circular. */
.kb-language-switcher__menu .kb-language-switcher__flag {
  height: calc(var(--kb-icon) * 1.05);
  width: calc(var(--kb-icon) * 1.05);
}

.kb-language-switcher__icon,
.kb-language-switcher__chevron { align-items: center; display: inline-flex; }
.kb-language-switcher__icon .kb-icon,
.kb-language-switcher__chevron .kb-icon { height: 16px; width: 16px; }
.kb-language-switcher__chevron { transition: transform var(--kb-motion-fast) var(--kb-ease); }
.kb-language-switcher.is-open .kb-language-switcher__chevron { transform: rotate(180deg); }

/* Menu: a rounded white block that slides down under the trigger, roomy padding. */
.kb-language-switcher__menu {
  animation: kb-slide-down var(--kb-motion-base) var(--kb-ease);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--kb-ink) 16%, transparent);
  display: grid;
  gap: calc(var(--kb-space) * 0.35);
  left: auto;
  min-width: 190px;
  padding: calc(var(--kb-space) * 0.85);
  position: absolute;
  right: 0;
  top: calc(100% + var(--kb-space) * 0.75);
  z-index: 60;
}

.kb-language-switcher__menu[hidden] { display: none; }

.kb-language-switcher__menu a {
  align-items: center;
  border-radius: calc(var(--kb-radius) - 6px);
  color: var(--kb-ink) !important;
  display: flex;
  font-weight: 600;
  gap: calc(var(--kb-space) * 0.85);
  padding: calc(var(--kb-space) * 1) calc(var(--kb-space) * 1.25);
  text-decoration: none;
  white-space: nowrap;
}

.kb-language-switcher__menu a:hover,
.kb-language-switcher__menu a:focus-visible {
  background: var(--kb-surface-alt);
  color: var(--kb-accent) !important;
}

@keyframes kb-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-language-switcher__menu { animation: none; }
}

.kb-site-footer__bar .kb-language-switcher {
  margin-left: auto;
}

/* In the footer the menu opens upward to avoid clipping below the fold. */
.kb-site-footer__bar .kb-language-switcher__menu {
  bottom: calc(100% + var(--kb-space) * 0.6);
  top: auto;
}

@media (max-width: 980px) {
  .kb-pdp__top {
    gap: calc(var(--kb-space) * 3);
    grid-template-columns: 1fr;
  }

  .kb-pdp__info {
    position: static;
  }
}

/* Rounded rose revision: PDP, skin test, and theme-wide commerce surfaces. */
.kb-product-card__image,
.kb-product-card__image img,
.kb-pdp-tile__image,
.kb-pdp-tile__image img,
.kb-catalog__results .kb-product-card,
.kb-cart-drawer__image,
.kb-cart-drawer__image img {
  border-radius: var(--kb-radius);
}

.kb-product-card__image {
  margin: var(--kb-space);
  overflow: hidden;
}

.kb-product-card__body {
  padding-top: calc(var(--kb-space) * 1.5);
}

.kb-badges span {
  background: var(--kb-sale-tint);
  color: var(--kb-accent-strong);
  padding: calc(var(--kb-space) * 0.7) calc(var(--kb-space) * 1.25);
}

.kb-badges span.kb-badge--success {
  background: var(--kb-success);
  color: var(--kb-button-ink);
}

.kb-cart-drawer__panel {
  border-radius: var(--kb-radius-card) 0 0 var(--kb-radius-card);
  overflow: hidden;
}

.kb-cart-drawer__quantity {
  border-radius: var(--kb-radius-control);
}

.kb-mega-menu__quiz {
  color: var(--kb-accent);
  display: inline-block;
  font-size: var(--kb-fs-meta);
  font-weight: 750;
  margin-bottom: var(--kb-space);
  text-decoration: none;
}

.kb-pdp {
  padding-top: calc(var(--kb-space) * 4);
}

.kb-pdp__top {
  align-items: start;
  gap: calc(var(--kb-space) * 7);
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
}

.kb-pdp-gallery {
  align-content: start;
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: 84px minmax(0, 1fr);
}

.kb-pdp-gallery__main,
.kb-pdp-gallery__pending {
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
}

.kb-pdp-gallery__main img {
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border: 0;
  border-radius: var(--kb-radius-card);
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.kb-pdp-gallery__thumbs {
  display: grid;
  gap: var(--kb-space);
  grid-column: 1;
  grid-row: 1;
}

.kb-pdp-gallery__thumb {
  aspect-ratio: 1;
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--kb-space) / 2);
}

.kb-pdp-gallery__thumb.is-active {
  border-color: var(--kb-accent);
}

.kb-pdp-gallery__thumb img {
  border: 0;
  border-radius: calc(var(--kb-radius) - 4px);
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.kb-pdp-gallery__pending {
  align-items: center;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
}

.kb-pdp__info {
  border-radius: var(--kb-radius-card);
  gap: calc(var(--kb-space) * 1.75);
  padding: calc(var(--kb-space) * 4.5);
  top: calc(var(--kb-space) * 11);
}

.kb-pdp__info h1 {
  font-size: var(--kb-fs-pdp-title);
}

.kb-pdp__rating a,
.kb-pdp__size {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
}

.kb-pdp__price-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
}

.kb-pdp__price del {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-body);
  font-weight: 500;
}

.kb-pdp__price ins {
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-pdp__discount {
  background: var(--kb-sale-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent-strong);
  font-size: var(--kb-fs-meta);
  font-weight: 750;
  padding: calc(var(--kb-space) * 0.65) calc(var(--kb-space) * 1.25);
}

/* Introductory launch price terms (inc/intro-price.php). */
.kb-pdp__intro {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: calc(var(--kb-space) * 0.75) 0 0;
}

.kb-pdp__benefits {
  list-style: none;
  padding: 0;
}

.kb-pdp__benefits li {
  align-items: flex-start;
  display: flex;
  font-size: var(--kb-fs-body);
  gap: calc(var(--kb-space) * 0.75);
  line-height: var(--kb-lh-body);
  padding-left: 0;
}

.kb-pdp__benefits li > .kb-icon {
  color: var(--kb-accent);
  flex: 0 0 auto;
  margin-top: 0.28em;
}

.kb-pdp__purchase,
.kb-pdp__purchase .cart {
  align-items: stretch;
  display: flex;
  gap: var(--kb-space);
}

.kb-pdp__cart {
  flex: 1;
}

.kb-pdp__cart form.cart {
  flex-wrap: nowrap;
}

.kb-pdp__cart .quantity input {
  border-radius: var(--kb-radius-control);
  min-height: 48px;
  width: 64px;
}

.kb-pdp__cart .single_add_to_cart_button {
  flex: 1;
  min-height: 48px;
}

.kb-pdp__wishlist,
.kb-pdp__wishlist > div,
.kb-pdp__wishlist .tinv-wraper {
  align-items: stretch;
  display: flex;
}

.kb-pdp__wishlist .tinvwl_add_to_wishlist_button,
.kb-pdp__heart {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  min-width: 48px;
  padding: 0;
  text-decoration: none;
}

.kb-pdp__heart svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 21px;
}

.kb-pdp__wishlist .tinvwl_add_to_wishlist_button::before {
  margin: 0;
}

.kb-pdp__wishlist .tinvwl_add_to_wishlist-text {
  display: none;
}

.kb-pdp__fulfilment {
  border-top: 0.5px solid var(--kb-line);
  display: grid;
  gap: calc(var(--kb-space) * 0.75);
  padding-top: calc(var(--kb-space) * 1.5);
}

.kb-pdp__fulfilment p {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: 0;
}

.kb-pdp__stock span {
  color: var(--kb-success);
}

.kb-skin-test-banner {
  align-items: center;
  background: var(--kb-blush-tint);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-body);
  justify-content: space-between;
  margin-top: calc(var(--kb-space) * 6);
  padding: calc(var(--kb-space) * 3.5) calc(var(--kb-space) * 4);
  text-decoration: none;
}

.kb-skin-test-banner strong {
  display: block;
  font-size: var(--kb-fs-h3);
  margin-bottom: calc(var(--kb-space) * 0.5);
}

.kb-skin-test-banner > span:last-child {
  color: var(--kb-accent);
  font-size: 1.5rem;
}

.kb-pdp-section,
.kb-pdp-related {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  margin-top: calc(var(--kb-space) * 5);
  padding: calc(var(--kb-space) * 4);
}

.kb-how-to-grid,
.kb-ingredient-grid {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kb-how-to-grid article,
.kb-ingredient-grid article {
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  padding: calc(var(--kb-space) * 3);
}

.kb-how-to-grid article > span {
  align-items: center;
  background: var(--kb-sale-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent-strong);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.kb-how-to-grid p,
.kb-ingredient-grid p {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  margin: calc(var(--kb-space) * 2) 0 0;
}

.kb-ingredient-grid h3,
.kb-inci-block h3 {
  font-size: var(--kb-fs-h3);
  margin: 0;
}

.kb-inci-block {
  background: var(--kb-blush-tint);
  border-radius: var(--kb-radius-card);
  margin-top: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 3);
}

.kb-inci-block p {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.kb-inci-block__notice {
  font-size: var(--kb-fs-meta);
  font-weight: 700;
}

.kb-pdp-reviews {
  border-radius: var(--kb-radius-card);
}

.kb-skin-test {
  margin: 0 auto;
  max-width: 1080px;
  padding: calc(var(--kb-space) * 8) calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 10);
}

.kb-skin-test__header {
  margin: 0 auto calc(var(--kb-space) * 6);
  max-width: 720px;
  text-align: center;
}

.kb-skin-test__header h1 {
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.08;
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-skin-test__header > p:last-child {
  color: var(--kb-ink-soft);
  margin-inline: auto;
  max-width: 620px;
}

.kb-skin-test__form {
  display: grid;
  gap: calc(var(--kb-space) * 3);
}

.kb-skin-test__question {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  margin: 0;
  padding: calc(var(--kb-space) * 4);
}

.kb-skin-test__question legend {
  align-items: center;
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-h3);
  font-weight: 750;
  gap: calc(var(--kb-space) * 1.5);
  padding: 0 var(--kb-space);
}

.kb-skin-test__question legend span {
  align-items: center;
  background: var(--kb-blush-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  height: 32px;
  justify-content: center;
  width: 32px;
}

.kb-skin-test__options {
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(var(--kb-space) * 2.5);
}

.kb-skin-test__options label {
  cursor: pointer;
  display: block;
  position: relative;
}

.kb-skin-test__options input {
  opacity: 0;
  position: absolute;
}

.kb-skin-test__options label > span {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: var(--kb-space);
  min-height: 116px;
  padding: calc(var(--kb-space) * 2.5);
}

.kb-skin-test__options input:checked + span {
  background: var(--kb-blush-tint);
  border-color: var(--kb-accent);
}

.kb-skin-test__options input:focus-visible + span {
  outline: 2px solid var(--kb-accent);
  outline-offset: 2px;
}

.kb-skin-test__options strong {
  font-size: var(--kb-fs-body);
}

.kb-skin-test__options small {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  line-height: 1.5;
}

.kb-skin-test__submit {
  text-align: center;
}

.kb-skin-test__submit p {
  color: var(--kb-accent);
  font-size: var(--kb-fs-meta);
  min-height: 1.5em;
}

@media (max-width: 980px) {
  .kb-pdp-gallery {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .kb-skin-test__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kb-pdp-gallery {
    grid-template-columns: 1fr;
  }

  .kb-pdp-gallery__main,
  .kb-pdp-gallery__pending {
    grid-column: 1;
    grid-row: 1;
  }

  .kb-pdp-gallery__thumbs {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    overflow-x: auto;
  }

  .kb-pdp-gallery__thumb {
    flex: 0 0 64px;
  }

  .kb-pdp__info {
    padding: calc(var(--kb-space) * 2.5);
  }

  .kb-pdp__purchase,
  .kb-pdp__purchase .cart {
    width: 100%;
  }

  .kb-skin-test-banner {
    padding: calc(var(--kb-space) * 2.5);
  }

  .kb-pdp-section,
  .kb-pdp-related {
    padding: calc(var(--kb-space) * 2.5);
  }

  .kb-how-to-grid,
  .kb-ingredient-grid,
  .kb-skin-test__options {
    grid-template-columns: 1fr;
  }

  .kb-skin-test {
    padding: calc(var(--kb-space) * 5) calc(var(--kb-space) * 2) calc(var(--kb-space) * 7);
  }

  .kb-skin-test__question {
    padding: calc(var(--kb-space) * 2.5);
  }
}

/* Final rhythm overrides: keep the gallery and info column aligned tightly. */
.kb-pdp {
  padding-top: calc(var(--kb-space) * 2.5);
}

.kb-pdp__top {
  align-items: start;
  gap: calc(var(--kb-space) * 3.25);
  grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
}

.kb-pdp__info {
  align-self: start;
  gap: calc(var(--kb-space) * 1.1);
  padding: calc(var(--kb-space) * 3.25);
  position: static;
}

.kb-pdp__info h1 {
  line-height: 1.08;
}

/* Keep late desktop rhythm overrides from leaking into the compact layout. */
@media (max-width: 980px) {
  .kb-pdp__top {
    gap: calc(var(--kb-space) * 2.5);
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-pdp-gallery,
  .kb-pdp__info {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .kb-site-header__inner {
    gap: calc(var(--kb-space) * 0.5);
    grid-template-columns: 28px minmax(72px, 1fr) auto;
    padding-inline: var(--kb-space);
  }

  .kb-site-header__logo-image {
    max-width: 106px;
  }

  .kb-site-header__actions {
    gap: 0;
  }

  .kb-header-icon {
    min-height: 36px;
    min-width: 34px;
    padding: calc(var(--kb-space) * 0.75);
  }

  .kb-site-header .kb-language-switcher {
    min-width: 38px;
    width: 38px;
  }

  .kb-site-header .trp-current-language-item__wrapper > .trp-language-item .trp-language-item-name {
    display: none;
  }

  .kb-site-header .trp-current-language-item__wrapper .trp-shortcode-arrow {
    height: 14px;
    width: 14px;
  }

  .kb-cart-drawer__content {
    overflow-x: hidden;
  }

  .kb-pdp__info h1 {
    font-size: var(--kb-fs-pdp-title-mobile);
    overflow-wrap: anywhere;
  }
}

/* Wide, compact storefront shell based on the measured Rossi desktop rhythm. */
body.home .ct-container-full,
body.single-product .ct-container-full {
  padding-block: 0;
}

body.home .hero-section,
body.single-product .hero-section {
  display: none;
}

.entry-content.is-layout-constrained > .kb-home {
  margin-inline: 0 !important;
  max-width: none !important;
  width: 100%;
}

@media (min-width: 981px) {
  .kb-site-header__inner {
    max-width: var(--kb-maxw);
    padding-inline: var(--kb-page-gutter);
  }

  .kb-hero,
  .kb-section {
    max-width: var(--kb-maxw);
    padding: calc(var(--kb-space) * 6) var(--kb-page-gutter);
  }

  .kb-section:nth-of-type(even) > * {
    max-width: var(--kb-contentw);
  }

  .kb-hero {
    gap: calc(var(--kb-space) * 4);
    min-height: 0;
  }

  .kb-hero__image {
    aspect-ratio: auto;
    height: 420px;
    min-height: 0;
  }

  .kb-pdp {
    max-width: var(--kb-maxw);
    padding: calc(var(--kb-space) * 2) var(--kb-page-gutter) calc(var(--kb-space) * 8);
  }

  .kb-pdp .kb-breadcrumb {
    margin-bottom: calc(var(--kb-space) * 1.5);
  }

  .kb-pdp__top {
    gap: calc(var(--kb-space) * 3.75);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-pdp-gallery {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .kb-pdp__info {
    padding: calc(var(--kb-space) * 3);
  }
}

@media (min-width: 1440px) {
  .kb-categories .kb-tile-grid--categories {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .kb-bestsellers .kb-product-grid {
    gap: calc(var(--kb-space) * 3.75);
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ==========================================================================
   2026-10-15 Shopify-style checkout (owner request): the form on white at the
   left (contact, delivery, shipping method, payment) and a full-height tinted
   panel at the right with a sticky order summary. Below 1000px: one column with
   a collapsible "Show order summary — €X" bar on top. Presentation only.
   ========================================================================== */
body.woocommerce-checkout {
  --kb-co-field-line: color-mix(in srgb, var(--kb-ink) 18%, var(--kb-surface));
  --kb-co-radius: calc(var(--kb-radius) * 0.625);
  --kb-co-card-radius: calc(var(--kb-radius) * 0.75);
  --kb-co-maxw: 1200px;
  --kb-co-gutter: calc(var(--kb-space) * 4);
}

/* The sitewide html/body overflow-x: hidden makes body a scroll container, which
   disables position: sticky. clip keeps the no-sideways-scroll guarantee without it. */
html:has(body.woocommerce-checkout:not(.kb-overlay-open):not(.kb-cart-open)),
body.woocommerce-checkout:not(.kb-overlay-open):not(.kb-cart-open) {
  overflow-x: clip;
  overflow-y: visible;
}

/* Focused header: centred logo only (owner request 2026-10-16). */
body.woocommerce-checkout .kb-announcement,
body.woocommerce-checkout .kb-site-header__nav,
body.woocommerce-checkout .kb-site-header__actions,
body.woocommerce-checkout .kb-header-search,
body.woocommerce-checkout .kb-menu-toggle,
body.woocommerce-checkout .kb-mobile-menu,
body.woocommerce-checkout .hero-section,
body.woocommerce-checkout .kb-site-footer {
  display: none !important;
}

body.woocommerce-checkout .kb-site-header {
  border-bottom: 1px solid var(--kb-line);
  position: static;
}

/* The checkout header never pins, so the sticky-bar spacer would only add a second
   header-height gap (the page jumped ~65px on scroll, CLS 0.07-0.1). */
body.woocommerce-checkout .kb-site-header-spacer {
  display: none;
}

body.woocommerce-checkout .kb-site-header__inner {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin-inline: auto;
  max-width: var(--kb-co-maxw);
  min-height: 76px;
  padding-inline: var(--kb-co-gutter);
}

body.woocommerce-checkout .ct-container-full {
  padding-block: 0;
}

body.woocommerce-checkout {
  background: var(--kb-surface);
}

/* WordPress's constrained layout narrows .woocommerce; the shell owns the width. */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .entry-content > .woocommerce {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: none;
  width: 100%;
}

body.woocommerce-checkout form.kb-checkout {
  display: block !important;
  width: 100%;
}

body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout .woocommerce-notices-wrapper > *,
body.woocommerce-checkout form.kb-checkout > .woocommerce-NoticeGroup {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--kb-co-maxw);
  padding-inline: var(--kb-co-gutter);
}

body.woocommerce-checkout form.kb-checkout > .woocommerce-NoticeGroup {
  padding-top: calc(var(--kb-space) * 3);
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  background: transparent;
  border: 0;
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  padding: calc(var(--kb-space) * 1.5) 0 0;
}

body.woocommerce-checkout form.checkout_coupon {
  align-items: end;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-co-card-radius);
  display: grid;
  gap: var(--kb-space);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: calc(var(--kb-space) * 2);
}

/* Split layout. */
.kb-checkout__shell {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 36vw, 460px);
  margin-inline: auto;
  max-width: var(--kb-co-maxw);
  min-height: calc(100vh - 77px);
  padding-inline: var(--kb-co-gutter);
}

.kb-checkout__main,
.kb-checkout__summary {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.kb-checkout__main {
  padding: calc(var(--kb-space) * 4.5) calc(var(--kb-space) * 7) calc(var(--kb-space) * 10) 0;
}

/* The tinted panel bleeds to the right edge and to the page bottom without
   creating horizontal scroll (shadow + clip-path, not a wider box). */
.kb-checkout__summary {
  background: var(--kb-surface-alt);
  border-left: 1px solid var(--kb-line);
  box-shadow: 0 0 0 100vmax var(--kb-surface-alt);
  clip-path: inset(0 -100vmax 0 0);
  padding: calc(var(--kb-space) * 4.5) 0 calc(var(--kb-space) * 10) calc(var(--kb-space) * 6);
}

.kb-checkout__summary-body {
  position: sticky;
  top: calc(var(--kb-space) * 3);
}

.kb-checkout__summary .ct-order-review {
  background: transparent;
  border: 0;
  padding: 0;
}

.kb-checkout__summary-toggle {
  display: none;
}

/* Breadcrumb and section headings. */
.kb-checkout__intro {
  margin-bottom: calc(var(--kb-space) * 3.5);
}

.kb-checkout__crumbs {
  align-items: center;
  color: var(--kb-ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 0.75);
}

.kb-checkout__crumbs a {
  color: var(--kb-accent);
  text-decoration: none;
}

.kb-checkout__crumbs a:hover {
  text-decoration: underline;
}

.kb-checkout__crumbs [aria-current] {
  color: var(--kb-ink);
  font-weight: 600;
}

.kb-checkout__section {
  border: 0;
  margin: 0 0 calc(var(--kb-space) * 5);
  padding: 0;
}

.kb-checkout .kb-checkout__heading {
  color: var(--kb-ink);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-checkout h2.kb-checkout__heading--delivery {
  grid-column: 1 / -1;
  margin: calc(var(--kb-space) * 3.5) 0 calc(var(--kb-space) * 0.5);
}

.kb-checkout__lede {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: calc(var(--kb-space) * -1.25) 0 calc(var(--kb-space) * 2);
}

/* Fields: consistent 48px inputs. */
.kb-checkout #customer_details,
.kb-checkout #customer_details .col-1,
.kb-checkout #customer_details .col-2 {
  float: none;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

.kb-checkout .woocommerce-billing-fields > h3 {
  display: none;
}

.kb-checkout .woocommerce-billing-fields__field-wrapper,
.kb-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  gap: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-checkout .form-row {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.kb-checkout .form-row-wide,
.kb-checkout #billing_email_field,
.kb-checkout #billing_phone_field,
.kb-checkout #billing_country_field,
.kb-checkout #billing_address_1_field,
.kb-checkout #shipping_country_field,
.kb-checkout #shipping_address_1_field {
  grid-column: 1 / -1;
}

.kb-checkout .form-row label {
  color: var(--kb-ink-soft);
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: calc(var(--kb-space) * 0.6);
}

.kb-checkout .form-row label .required {
  color: var(--kb-accent);
  text-decoration: none;
}

.kb-checkout .form-row label .optional {
  color: var(--kb-ink-faint);
  font-weight: 500;
}

.kb-checkout .input-text,
.kb-checkout select,
.kb-checkout .select2-container .select2-selection--single {
  background: var(--kb-surface);
  border: 1px solid var(--kb-co-field-line) !important;
  border-radius: var(--kb-co-radius) !important;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--kb-ink);
  font-size: 1rem;
  height: 48px;
  min-height: 48px;
  padding: 0 calc(var(--kb-space) * 1.75);
  width: 100%;
}

.kb-checkout textarea.input-text {
  height: auto;
  min-height: 96px;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 1.75);
}

.kb-checkout .input-text::placeholder {
  color: var(--kb-ink-faint);
}

.kb-checkout .select2-container .select2-selection--single {
  align-items: center;
  display: flex;
}

.kb-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--kb-ink);
  line-height: 46px;
  padding: 0;
}

.kb-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: calc(var(--kb-space) * 1.25);
  top: 0;
}

.kb-checkout .woocommerce-invalid .input-text,
.kb-checkout .woocommerce-invalid .select2-selection {
  border-color: var(--kb-sale-red) !important;
}

.kb-checkout input[type="checkbox"],
.kb-checkout input[type="radio"] {
  accent-color: var(--kb-accent);
}

.kb-checkout .woocommerce-billing-fields > .woocommerce-form__label-for-checkbox,
.kb-checkout .woocommerce-billing-fields label.checkbox,
.kb-checkout #ship-to-different-address label {
  align-items: center;
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-meta);
  font-weight: 500;
  gap: var(--kb-space);
  margin: calc(var(--kb-space) * 1.75) 0 0;
}

.kb-checkout .woocommerce-billing-fields input[type="checkbox"],
.kb-checkout #ship-to-different-address input[type="checkbox"] {
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}

.kb-checkout .woocommerce-shipping-fields {
  margin-top: calc(var(--kb-space) * 2);
}

.kb-checkout .woocommerce-shipping-fields > h3,
.kb-checkout #ship-to-different-address {
  font-size: var(--kb-fs-meta);
  margin: 0;
}

.kb-checkout .woocommerce-shipping-fields .shipping_address {
  margin-top: calc(var(--kb-space) * 2);
}

.kb-checkout .woocommerce-additional-fields {
  margin-top: calc(var(--kb-space) * 2.5);
}

.kb-checkout .woocommerce-additional-fields > h3 {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 calc(var(--kb-space) * 0.6);
}

.kb-checkout .woocommerce-additional-fields .form-row label {
  display: none;
}

/* Shipping method: bordered radio cards (WooCommerce's own rate markup). */
.kb-checkout-shipping-table,
.kb-checkout-shipping-table tbody,
.kb-checkout-shipping-table tr,
.kb-checkout-shipping-table td {
  background: transparent;
  border: 0;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

.kb-checkout-shipping-table th,
.kb-checkout-shipping-table .ct-shipping-heading {
  display: none;
}

.kb-checkout #shipping_method {
  display: grid;
  gap: calc(var(--kb-space) * 1.25);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-checkout #shipping_method li {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-co-field-line);
  border-radius: var(--kb-co-card-radius);
  display: flex;
  gap: calc(var(--kb-space) * 1.5);
  margin: 0;
  min-height: 60px;
  overflow: visible;
  padding: 0 calc(var(--kb-space) * 2);
  position: relative;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), background-color var(--kb-motion-fast) var(--kb-ease), box-shadow var(--kb-motion-fast) var(--kb-ease);
}

.kb-checkout #shipping_method li:hover {
  border-color: var(--kb-accent);
}

.kb-checkout #shipping_method li:has(input:checked),
.kb-checkout #shipping_method li:has(input[type="hidden"]) {
  background: var(--kb-surface-alt);
  border-color: var(--kb-accent);
  box-shadow: inset 0 0 0 1px var(--kb-accent);
}

.kb-checkout #shipping_method input[type="radio"] {
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}

.kb-checkout #shipping_method label {
  align-items: center;
  color: var(--kb-ink);
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: calc(var(--kb-space) * 1.5);
  justify-content: space-between;
  margin: 0;
  min-width: 0;
  overflow: visible;
  padding: calc(var(--kb-space) * 2) 0;
  white-space: normal;
}

/* The whole card is the hit area. */
.kb-checkout #shipping_method label::after {
  content: "";
  inset: 0;
  position: absolute;
}

.kb-checkout #shipping_method .kb-rate__cost {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

.kb-checkout-shipping-methods__empty {
  background: var(--kb-surface-alt);
  border-radius: var(--kb-co-card-radius);
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: 0;
  padding: calc(var(--kb-space) * 2);
}

/* LP EXPRESS locker picker sits under the rate cards. Scoped here (theme.css is
   versioned by filename) so it beats lpexpress-checkout.css without a cache bust. */
.kb-checkout .kb-lpex-picker {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-co-card-radius);
  gap: var(--kb-space);
  margin: calc(var(--kb-space) * 1.5) 0 0;
  padding: calc(var(--kb-space) * 2.25);
}

.kb-checkout .kb-lpex-picker[hidden] {
  display: none;
}

.kb-checkout .kb-lpex-picker h3 {
  font-size: 1rem;
  font-weight: 650;
}

.kb-checkout .kb-lpex-picker > p:not(#kb-lpex-message) {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
}

.kb-checkout .kb-lpex-picker label {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: calc(var(--kb-space) * 0.75);
}

.kb-checkout .kb-lpex-picker select,
.kb-checkout .kb-lpex-picker input[type="search"] {
  border: 1px solid var(--kb-co-field-line) !important;
  border-radius: var(--kb-co-radius) !important;
  box-sizing: border-box;
  font-size: 1rem;
  height: 48px;
  min-height: 48px;
}

/* Payment: Paysera inside one neat bordered card, bank list as compact tiles. */
.kb-checkout__payment #payment {
  background: transparent;
  border-radius: 0;
  margin: 0 !important;
  width: 100%;
}

.kb-checkout__payment #payment ul.payment_methods {
  border: 0;
  display: grid;
  gap: calc(var(--kb-space) * 1.25);
  margin: 0;
  padding: 0;
}

.kb-checkout__payment #payment ul.payment_methods > li {
  background: var(--kb-surface);
  border: 1px solid var(--kb-co-field-line);
  border-radius: var(--kb-co-card-radius);
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.kb-checkout__payment #payment ul.payment_methods > li:has(input:checked) {
  background: var(--kb-surface);
  border-color: var(--kb-accent);
  box-shadow: inset 0 0 0 1px var(--kb-accent);
}

.kb-checkout__payment #payment ul.payment_methods > li > label {
  align-items: center;
  color: var(--kb-ink);
  display: flex;
  flex-wrap: nowrap;
  font-size: 0.9375rem;
  font-weight: 650;
  gap: calc(var(--kb-space) * 1.5);
  justify-content: space-between;
  margin: 0;
  padding: calc(var(--kb-space) * 2);
}

.kb-checkout__payment #payment ul.payment_methods > li > label img {
  flex: 0 0 auto;
  height: 18px;
  margin: 0 0 0 auto;
  max-width: 5rem;
  width: auto;
}

.kb-checkout__payment #payment div.payment_box {
  background: var(--kb-surface-alt);
  border-top: 1px solid var(--kb-line);
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0;
  padding: calc(var(--kb-space) * 2);
}

.kb-checkout__payment #payment div.payment_box::before {
  display: none;
}

.kb-checkout__payment #payment div.payment_box > br {
  display: none;
}

.kb-checkout__payment #payment div.payment_box a {
  color: var(--kb-ink-soft);
  text-decoration: underline;
}

.kb-checkout__payment #payment #paysera_country {
  background: var(--kb-surface);
  border: 1px solid var(--kb-co-field-line) !important;
  border-radius: var(--kb-co-radius) !important;
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  height: 44px;
  margin: 0 0 calc(var(--kb-space) * 2);
  min-height: 44px;
  padding: 0 calc(var(--kb-space) * 1.5);
  width: min(100%, 240px);
}

.kb-checkout__payment .paysera-payments {
  margin-bottom: calc(var(--kb-space) * 2);
}

.kb-checkout__payment .paysera-payments .payment-group-wrapper {
  display: grid;
  gap: var(--kb-space);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: calc(var(--kb-space) * 2);
}

.kb-checkout__payment .paysera-payments .payment-group-wrapper:last-child {
  margin-bottom: 0;
}

.kb-checkout__payment .paysera-payments div.payment-group-title {
  color: var(--kb-ink);
  font-size: 0.75rem;
  font-weight: 700;
  grid-column: 1 / -1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kb-checkout__payment .paysera-payments div.paysera-payment-method {
  margin: 0;
  min-width: 0;
}

.kb-checkout__payment .paysera-payments .paysera-payment-method-label {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-co-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  gap: var(--kb-space);
  height: 100%;
  justify-content: space-between;
  margin: 0;
  min-height: 52px;
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.5);
  transition: border-color var(--kb-motion-fast) var(--kb-ease), box-shadow var(--kb-motion-fast) var(--kb-ease);
  width: 100%;
}

.kb-checkout__payment .paysera-payments .paysera-payment-method-label:hover {
  border-color: var(--kb-accent);
}

.kb-checkout__payment .paysera-payments .paysera-payment-method-label:has(input:checked) {
  border-color: var(--kb-accent);
  box-shadow: inset 0 0 0 1px var(--kb-accent);
}

.kb-checkout__payment .paysera-payments .paysera-payment-method-label > div:first-child {
  align-items: center;
  display: flex;
  gap: var(--kb-space);
  min-width: 0;
}

.kb-checkout__payment .paysera-payments .paysera-payment-method-label input {
  flex: 0 0 auto;
  height: 16px;
  margin: 0;
  width: 16px;
}

.kb-checkout__payment .paysera-payments span.paysera-text {
  color: var(--kb-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.kb-checkout__payment .paysera-payments .paysera-image {
  flex: 0 0 auto;
}

.kb-checkout__payment .paysera-payments .paysera-image img {
  display: block;
  height: auto;
  max-height: 22px;
  max-width: 72px;
  object-fit: contain;
  width: auto;
}

/* Consent and legal text grouped and quiet; one strong full-width action. */
.kb-checkout__payment #payment .place-order {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(var(--kb-space) * 1.75);
  margin: 0;
  padding: calc(var(--kb-space) * 3) 0 0;
  width: 100%;
}

.kb-checkout__payment .woocommerce-terms-and-conditions-wrapper {
  display: contents;
}

.kb-checkout__payment .woocommerce-privacy-policy-text { order: 1; }
.kb-checkout__payment .kb-checkout-legal-notice { order: 2; }
.kb-checkout__payment .woocommerce-terms-and-conditions { order: 3; }
.kb-checkout__payment .woocommerce-terms-and-conditions-wrapper > .form-row { order: 4; }
.kb-checkout__payment #place_order { order: 5; }

.kb-checkout__payment .woocommerce-privacy-policy-text,
.kb-checkout__payment .kb-checkout-legal-notice {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0;
}

.kb-checkout__payment .woocommerce-privacy-policy-text p,
.kb-checkout__payment .kb-checkout-legal-notice p {
  margin: 0 0 calc(var(--kb-space) * 0.75);
}

.kb-checkout__payment .woocommerce-privacy-policy-text p:last-child,
.kb-checkout__payment .kb-checkout-legal-notice p:last-child {
  margin-bottom: 0;
}

.kb-checkout__payment .woocommerce-privacy-policy-text {
  border-top: 1px solid var(--kb-line);
  padding-top: calc(var(--kb-space) * 2.5);
}

.kb-checkout__payment :is(.woocommerce-privacy-policy-text, .kb-checkout-legal-notice) a {
  color: var(--kb-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kb-checkout__payment .woocommerce-terms-and-conditions {
  background: var(--kb-surface-alt);
  border-radius: var(--kb-co-radius);
  font-size: var(--kb-fs-meta);
  padding: calc(var(--kb-space) * 2);
}

.kb-checkout__payment .woocommerce-terms-and-conditions-wrapper > .form-row {
  background: var(--kb-surface-alt);
  border-radius: var(--kb-co-radius);
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
}

.kb-checkout__payment .woocommerce-terms-and-conditions-wrapper > .form-row label {
  align-items: flex-start;
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  gap: calc(var(--kb-space) * 1.25);
  margin: 0;
}

.kb-checkout__payment .woocommerce-terms-and-conditions-wrapper > .form-row label .required {
  margin-left: calc(var(--kb-space) * -1);
}

.kb-checkout__payment .woocommerce-terms-and-conditions-wrapper > .form-row input[type="checkbox"] {
  flex: 0 0 auto;
  height: 18px;
  margin: 1px 0 0;
  width: 18px;
}

body.woocommerce-checkout .kb-checkout__payment #place_order {
  background: var(--kb-button) !important;
  border: 1px solid var(--kb-button) !important;
  border-radius: var(--kb-radius-control) !important;
  box-shadow: none;
  color: var(--kb-button-ink) !important;
  font-size: var(--kb-fs-body) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 56px;
  opacity: 1;
  width: 100%;
}

body.woocommerce-checkout .kb-checkout__payment #place_order:hover,
body.woocommerce-checkout .kb-checkout__payment #place_order:focus-visible {
  background: var(--kb-button-hover) !important;
  border-color: var(--kb-button-hover) !important;
}

.kb-checkout__payment .kb-checkout__commerce-marks {
  border-top: 0;
  margin-top: calc(var(--kb-space) * 2.5);
  opacity: 0.85;
  padding-top: 0;
}

.kb-checkout .cr-customer-consent {
  display: none;
}

/* Order summary. */
.kb-checkout__summary-heading {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(var(--kb-space) * 2);
}

.kb-checkout__summary-heading h2 {
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.25;
  margin: 0;
}

.kb-checkout__summary-heading h2 small {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  font-weight: 500;
}

.kb-checkout__summary-heading a {
  color: var(--kb-accent);
  font-size: var(--kb-fs-meta);
}

.kb-checkout__summary table.shop_table {
  background: transparent;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0;
  table-layout: auto;
  width: 100%;
}

.kb-checkout__summary table.shop_table thead {
  display: none;
}

.kb-checkout__summary table.shop_table th,
.kb-checkout__summary table.shop_table td {
  background: transparent;
  border: 0;
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  padding: calc(var(--kb-space) * 0.75) 0;
  vertical-align: middle;
}

.kb-checkout__summary table.shop_table tbody td {
  padding: calc(var(--kb-space) * 1) 0;
}

.kb-checkout__summary table.shop_table tbody tr:first-child td {
  padding-top: calc(var(--kb-space) * 1.25);
}

.kb-checkout__summary table.shop_table tbody tr:last-child td {
  padding-bottom: calc(var(--kb-space) * 2.5);
}

.kb-checkout__summary table.shop_table .product-name {
  padding-right: calc(var(--kb-space) * 2);
}

.kb-checkout__summary table.shop_table .product-total,
.kb-checkout__summary table.shop_table tfoot td {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.kb-checkout__summary table.shop_table tfoot tr:first-child th,
.kb-checkout__summary table.shop_table tfoot tr:first-child td {
  border-top: 1px solid var(--kb-line);
  padding-top: calc(var(--kb-space) * 2.5);
}

.kb-checkout__summary table.shop_table tfoot th {
  font-weight: 500;
  text-align: left;
}

.kb-checkout__summary .kb-summary-shipping__pending {
  color: var(--kb-ink-soft);
  font-weight: 500;
}

.kb-checkout__summary table.shop_table .order-total th,
.kb-checkout__summary table.shop_table .order-total td {
  font-size: 1.25rem;
  font-weight: 750;
  padding-top: calc(var(--kb-space) * 2);
}

.kb-checkout__summary .order-total td strong {
  font-weight: inherit;
}

.kb-checkout__summary .product-quantity {
  display: none;
}

.kb-checkout-product {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 1.75);
}

/* Tall 4:5 frame, like the product cards and cart thumbnails. */
.kb-checkout-product__image {
  aspect-ratio: 4 / 5;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-co-radius);
  box-sizing: border-box;
  display: block;
  flex: 0 0 64px;
  height: 80px;
  position: relative;
  width: 64px;
}

.kb-checkout-product__image img {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kb-checkout-product__image b {
  align-items: center;
  background: var(--kb-ink-soft);
  border-radius: var(--kb-radius-control);
  box-sizing: border-box;
  color: var(--kb-button-ink);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  line-height: 1;
  min-width: 22px;
  padding-inline: calc(var(--kb-space) * 0.75);
  position: absolute;
  right: -9px;
  top: -9px;
}

.kb-checkout-product__placeholder {
  align-items: center;
  color: var(--kb-ink-faint);
  display: flex;
  font-size: var(--kb-fs-meta);
  height: 100%;
  justify-content: center;
}

.kb-checkout-product__copy {
  display: grid;
  gap: calc(var(--kb-space) * 0.25);
  min-width: 0;
}

.kb-checkout-product__copy strong {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.kb-checkout-product__copy small {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
}

/* Free-shipping progress: compact, under the totals. */
.kb-checkout__summary .kb-free-ship {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-co-card-radius);
  gap: calc(var(--kb-space) * 0.75);
  margin: calc(var(--kb-space) * 2.5) 0 0;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 1.75);
}

.kb-checkout__summary .kb-free-ship__copy {
  font-size: 0.8125rem;
  gap: calc(var(--kb-space) * 0.5) var(--kb-space);
}

.kb-checkout__summary .kb-free-ship__copy strong {
  font-weight: 600;
}

.kb-checkout__summary .kb-free-ship__track {
  background: var(--kb-line);
  height: 6px;
}

/* Phone and tablet: one column, collapsible summary bar on top. */
@media (max-width: 999px) {
  body.woocommerce-checkout {
    --kb-co-gutter: calc(var(--kb-space) * 2);
  }

  body.woocommerce-checkout .kb-site-header__inner {
    justify-content: center;
    min-height: 64px;
  }

  /* The summary comes after the form in the HTML but sits on top here, so its 60px bar is
     reserved up front (shell padding, summary pulled back by the same amount): the form does
     not move when the browser paints before the summary has arrived. */
  .kb-checkout__shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 60px;
  }

  /* Full-bleed tint plus a full-bleed bottom rule (second shadow, 1px lower). */
  .kb-checkout__summary {
    border-left: 0;
    box-shadow: 0 0 0 100vmax var(--kb-surface-alt), 0 1px 0 100vmax var(--kb-line);
    clip-path: inset(0 -100vmax -1px);
    margin-top: -60px;
    order: -1;
    padding: 0;
  }

  .kb-checkout__summary-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--kb-accent);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: calc(var(--kb-space) * 2);
    justify-content: space-between;
    min-height: 60px;
    padding: 0;
    width: 100%;
  }

  .kb-checkout__summary-toggle:hover,
  .kb-checkout__summary-toggle:focus {
    background: transparent;
    color: var(--kb-accent);
  }

  .kb-checkout__summary-toggle-label {
    align-items: center;
    display: inline-flex;
    font-size: var(--kb-fs-meta);
    font-weight: 600;
    gap: var(--kb-space);
  }

  .kb-checkout__summary-chevron {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    display: inline-block;
    height: 7px;
    margin-top: -4px;
    transform: rotate(45deg);
    transition: transform var(--kb-motion-fast) var(--kb-ease);
    width: 7px;
  }

  .kb-checkout__summary.is-open .kb-checkout__summary-chevron {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  .kb-checkout__summary-toggle-total {
    color: var(--kb-ink);
    font-size: var(--kb-fs-body);
    font-weight: 750;
  }

  .kb-checkout__summary-body {
    padding: calc(var(--kb-space) * 0.5) 0 calc(var(--kb-space) * 3);
    position: static;
  }

  /* Collapsed from the first paint, not when commerce-ui.js runs: waiting for the script made
     the whole form jump ~520px (CLS 0.5-1.2). form-checkout.php has a <noscript> override. */
  .kb-checkout__summary:not(.is-open) .kb-checkout__summary-body {
    display: none;
  }

  .kb-checkout__summary-heading h2 {
    font-size: var(--kb-fs-body);
  }

  .kb-checkout__main {
    padding: calc(var(--kb-space) * 3) 0 calc(var(--kb-space) * 7);
  }
}

@media (max-width: 640px) {
  body.woocommerce-checkout form.checkout_coupon,
  .kb-checkout .woocommerce-billing-fields__field-wrapper,
  .kb-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-checkout .form-row,
  .kb-checkout .form-row-first,
  .kb-checkout .form-row-last {
    grid-column: 1;
  }

  .kb-checkout__payment .paysera-payments .payment-group-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-checkout__section {
    margin-bottom: calc(var(--kb-space) * 4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-checkout #shipping_method li,
  .kb-checkout__payment .paysera-payments .paysera-payment-method-label,
  .kb-checkout__summary-chevron {
    transition-duration: 0s;
  }
}

/* Storefront fix pass: sales, commerce feedback, quantity controls, and review states. */
.kb-product-card--sale {
  border-color: var(--kb-sale-tint);
  box-shadow: inset 3px 0 0 var(--kb-sale-red);
}

.kb-product-card__image {
  position: relative;
}

.kb-sale-badge {
  background: var(--kb-sale-red);
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 800;
  left: calc(var(--kb-space) * 1.25);
  letter-spacing: 0.04em;
  line-height: 1;
  padding: calc(var(--kb-space) * 0.8) calc(var(--kb-space) * 1.25);
  position: absolute;
  top: calc(var(--kb-space) * 1.25);
  z-index: 2;
}

/* Product-card sale badge: 1.25x the base size, flush in the image's top-left
   corner as a tab (owner 2026-10-19). The image clips the outer corner. */
.kb-product-card .kb-sale-badge {
  border-radius: 0 0 var(--kb-radius) 0;
  font-size: calc(var(--kb-fs-eyebrow) * 1.25);
  left: 0;
  padding: calc(var(--kb-space) * 1) calc(var(--kb-space) * 1.5625);
  top: 0;
}

/* Launch-price tab: ink, not sale red, because it is not a reduction. */
.kb-sale-badge--intro {
  background: var(--kb-ink);
}

.kb-product-card__price del,
.kb-pdp-tile__price del,
.kb-pdp__price del,
.kb-rb__opt-price del,
.kb-rb__price del {
  color: var(--kb-ink-faint);
  font-weight: 550;
}

.kb-product-card__price ins,
.kb-pdp-tile__price ins,
.kb-pdp__price ins,
.kb-rb__opt-price ins,
.kb-rb__price ins {
  color: var(--kb-sale-red);
  font-weight: 800;
  text-decoration: none;
}

.kb-pdp__discount {
  background: var(--kb-sale-tint);
  color: var(--kb-sale-red);
}

.kb-mega-menu__trigger,
.kb-mega-menu__panel {
  margin-block: 0;
}

.kb-mega-menu__panel {
  top: 100%;
}

body .added_to_cart {
  display: none !important;
}

body .add_to_cart_button,
body .single_add_to_cart_button,
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce .checkout-button,
body.woocommerce #place_order,
body.woocommerce button[name="update_cart"],
body.woocommerce button[name="apply_coupon"] {
  background-color: var(--kb-button) !important;
  border-color: var(--kb-button) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-button-ink) !important;
}

body .add_to_cart_button:hover,
body .single_add_to_cart_button:hover,
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce input.button:hover,
body.woocommerce .checkout-button:hover,
body.woocommerce #place_order:hover,
body.woocommerce button[name="update_cart"]:hover,
body.woocommerce button[name="apply_coupon"]:hover {
  background-color: var(--kb-button-hover) !important;
  border-color: var(--kb-button-hover) !important;
  color: var(--kb-button-ink) !important;
}

body.woocommerce :where(input, select, textarea):focus,
body.woocommerce :where(input, select, textarea):focus-visible {
  border-color: var(--kb-accent) !important;
  box-shadow: 0 0 0 3px var(--kb-accent-tint) !important;
  outline: 2px solid var(--kb-accent);
  outline-offset: 2px;
}

body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error {
  background: var(--kb-surface-alt);
  border-top-color: var(--kb-accent);
  color: var(--kb-ink);
}

body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-info::before,
body.woocommerce .woocommerce-error::before,
body.woocommerce .woocommerce-message a,
body.woocommerce .woocommerce-info a,
body.woocommerce .woocommerce-error a,
body.woocommerce .woocommerce-breadcrumb a {
  color: var(--kb-accent);
}

/* WordPress and consent-plugin fallbacks must not leak their default blue into the storefront. */
body:not(.wp-admin) :is(button.wp-element-button, input.submit, #submit, .comment-form .submit, .cmplz-cookiebanner .cmplz-btn) {
  background-color: var(--kb-button) !important;
  border-color: var(--kb-button) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-button-ink) !important;
}

body:not(.wp-admin) :is(button.wp-element-button, input.submit, #submit, .comment-form .submit, .cmplz-cookiebanner .cmplz-btn):hover,
body:not(.wp-admin) :is(button.wp-element-button, input.submit, #submit, .comment-form .submit, .cmplz-cookiebanner .cmplz-btn):focus-visible {
  background-color: var(--kb-button-hover) !important;
  border-color: var(--kb-button-hover) !important;
  color: var(--kb-button-ink) !important;
}

body:not(.wp-admin) :where(input, select, textarea):focus,
body:not(.wp-admin) :where(input, select, textarea):focus-visible {
  border-color: var(--kb-accent) !important;
  box-shadow: 0 0 0 3px var(--kb-accent-tint) !important;
  outline: 2px solid var(--kb-accent);
  outline-offset: 2px;
}

.kb-pdp__cart .quantity {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  display: inline-flex;
  min-height: 48px;
  overflow: hidden;
}

.kb-pdp__cart .quantity :is(button, [data-kb-product-quantity]) {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--kb-accent);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--kb-fs-body);
  font-weight: 800;
  height: 46px;
  justify-content: center;
  min-width: 36px;
}

.kb-pdp__cart .quantity :is(button, [data-kb-product-quantity]):hover,
.kb-pdp__cart .quantity :is(button, [data-kb-product-quantity]):focus-visible {
  background: var(--kb-accent-tint);
  color: var(--kb-accent-strong);
}

.kb-pdp__cart .quantity input.qty {
  appearance: textfield;
  color: var(--kb-ink) !important;
  display: block !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 46px;
  min-width: 46px;
  outline: 0 !important;
  padding: 0 !important;
  width: 42px;
}

.kb-pdp__cart .quantity input.qty::-webkit-inner-spin-button,
.kb-pdp__cart .quantity input.qty::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

/* Server-rendered PDP stepper: Blocksy cannot replace or hide these controls after the page paints. */
.kb-pdp__cart .quantity.kb-product-quantity {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 52px;
  min-height: 52px;
  min-width: 156px;
}

.kb-pdp__cart .quantity.kb-product-quantity .kb-product-quantity__button {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--kb-ink) !important;
  display: inline-flex !important;
  flex: 0 0 50px;
  height: 50px;
  justify-content: center;
  min-height: 50px;
  min-width: 50px;
  padding: 0 !important;
}

.kb-pdp__cart .quantity.kb-product-quantity .kb-product-quantity__button svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
  width: 18px;
}

.kb-pdp__cart .quantity.kb-product-quantity .kb-product-quantity__button:hover,
.kb-pdp__cart .quantity.kb-product-quantity .kb-product-quantity__button:focus-visible {
  background: var(--kb-accent-tint) !important;
  color: var(--kb-accent-strong) !important;
}

.kb-pdp__cart .quantity.kb-product-quantity .kb-product-quantity__button:disabled {
  color: var(--kb-ink-faint) !important;
  cursor: not-allowed;
  opacity: 0.55;
}

.kb-pdp__cart .quantity.kb-product-quantity input.qty {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  display: block !important;
  flex: 0 0 54px;
  font-size: var(--kb-fs-body) !important;
  height: 50px;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 50px;
  min-width: 54px;
  padding: 0 !important;
  text-align: center;
  width: 54px;
}

.kb-pdp__cart .single_add_to_cart_button {
  font-size: var(--kb-fs-body) !important;
  font-weight: 750 !important;
  min-height: 52px !important;
}

.kb-pdp__fulfilment {
  gap: var(--kb-space);
}

.kb-pdp__fulfilment p {
  align-items: center;
  color: var(--kb-ink-soft);
  display: flex;
  font-size: var(--kb-fs-body);
  gap: calc(var(--kb-space) * 1.25);
  line-height: var(--kb-lh-body);
}

.kb-pdp__fulfilment-icon {
  align-items: center;
  color: var(--kb-accent);
  display: inline-flex;
  flex: 0 0 22px;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.kb-pdp__fulfilment-icon svg {
  height: 20px;
  width: 20px;
}

.kb-quantity-promo {
  align-items: flex-start;
  background: var(--kb-sale-tint);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink);
  display: grid;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 0.5);
  line-height: var(--kb-lh-body);
  margin: calc(var(--kb-space) * 1.25) 0 0;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
}

.kb-quantity-promo strong {
  color: var(--kb-sale-red);
  font-size: var(--kb-fs-body);
}

.kb-quantity-breaks {
  border-top: 1px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 2.5);
  padding-top: calc(var(--kb-space) * 2.5);
}

.kb-quantity-breaks__heading {
  align-items: baseline;
  display: flex;
  gap: var(--kb-space);
  justify-content: space-between;
  margin-bottom: calc(var(--kb-space) * 1.25);
}

.kb-quantity-breaks__heading .kb-eyebrow,
.kb-quantity-breaks__heading h2 {
  margin: 0;
}

.kb-quantity-breaks__heading h2 {
  color: var(--kb-ink);
  font-size: var(--kb-fs-body);
}

.kb-quantity-breaks__options {
  display: grid;
  gap: var(--kb-space);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-quantity-break {
  align-content: start;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  cursor: pointer;
  display: grid;
  gap: calc(var(--kb-space) * 0.4);
  min-height: 94px;
  padding: calc(var(--kb-space) * 1.25);
  position: relative;
  text-align: left;
  transition: background-color var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), transform var(--kb-motion-fast) var(--kb-ease);
}

.kb-quantity-break:hover,
.kb-quantity-break:focus-visible {
  border-color: var(--kb-accent);
  transform: translateY(-1px);
}

.kb-quantity-break[aria-checked="true"] {
  background: var(--kb-sale-tint);
  border-color: var(--kb-button);
  box-shadow: inset 0 0 0 1px var(--kb-button);
}

.kb-quantity-break__quantity {
  font-size: var(--kb-fs-meta);
  font-weight: 800;
}

.kb-quantity-break__total {
  color: var(--kb-ink);
  font-size: var(--kb-fs-body);
  font-weight: 800;
}

.kb-quantity-break__was {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-meta);
  text-decoration: line-through;
}

.kb-quantity-break__discount {
  color: var(--kb-sale-red);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 750;
  line-height: 1.35;
}

.kb-quantity-break__badge {
  background: var(--kb-sale-red);
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 800;
  left: 50%;
  padding: calc(var(--kb-space) * 0.45) calc(var(--kb-space) * 0.9);
  position: absolute;
  top: calc(var(--kb-space) * -1);
  transform: translateX(-50%);
  white-space: nowrap;
}

.kb-quantity-breaks__note {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-eyebrow);
  line-height: var(--kb-lh-body);
  margin: var(--kb-space) 0 0;
}

.kb-social-proof {
  display: grid;
  gap: var(--kb-space);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: calc(var(--kb-space) * 2.5);
}

.kb-social-proof > .kb-social-proof__item {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  color: var(--kb-ink-soft);
  display: flex;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 0.75);
  min-height: 52px;
  padding: calc(var(--kb-space) * 1.25);
}

.kb-social-proof > .kb-social-proof__item > .kb-icon {
  color: var(--kb-success);
  flex: 0 0 auto;
}

.kb-review-toggle {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-button) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-button) !important;
  font-size: var(--kb-fs-body) !important;
  padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 2.5) !important;
}

.kb-review-toggle:hover,
.kb-review-toggle:focus-visible {
  background: var(--kb-button-hover) !important;
  border-color: var(--kb-button-hover) !important;
  color: var(--kb-button-ink) !important;
}

.kb-review-first {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin-bottom: 0;
}

[data-kb-review-form] {
  margin-top: calc(var(--kb-space) * 2.5);
}

.kb-contact {
  margin-block: calc(var(--kb-space) * 2);
  max-width: 44rem;
}

.kb-contact__form {
  display: grid;
  gap: calc(var(--kb-space) * 1.1);
}

.kb-contact__form p {
  margin: 0;
}

.kb-contact__form label {
  color: var(--kb-ink);
  display: grid;
  font-size: var(--kb-fs-body);
  gap: calc(var(--kb-space) * 0.4);
}

.kb-contact__form label span {
  color: var(--kb-muted);
}

.kb-contact__form input,
.kb-contact__form textarea {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  font: inherit;
  min-height: 3rem;
  padding: calc(var(--kb-space) * 0.75) var(--kb-space);
}

.kb-contact__form textarea {
  min-height: 10rem;
  resize: vertical;
}

.kb-contact__form .kb-contact__consent label {
  align-items: start;
  display: flex;
  line-height: var(--kb-lh-body);
}

.kb-contact__form .kb-contact__consent input {
  min-height: auto;
  margin-top: 0.3rem;
}

.kb-contact__honeypot {
  display: none;
}

.kb-contact__whatsapp a {
  color: var(--kb-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 640px) {
  .kb-pdp__purchase {
    display: grid;
    grid-template-columns: 1fr;
  }

  .kb-pdp__cart,
  .kb-pdp__cart form.cart {
    min-width: 0;
    width: 100%;
  }

  .kb-pdp__cart form.cart {
    align-items: stretch;
    display: flex !important;
    gap: var(--kb-space);
    justify-content: stretch;
  }

  .kb-pdp__cart .quantity.kb-product-quantity {
    min-width: 142px;
    order: 1;
  }

  .kb-pdp__cart .quantity.kb-product-quantity .kb-product-quantity__button {
    flex-basis: 44px;
    min-width: 44px;
  }

  .kb-pdp__cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    min-width: 0;
    order: 2;
    padding-inline: var(--kb-space) !important;
    width: auto !important;
  }

  .kb-pdp__wishlist {
    justify-self: end;
  }

  .kb-pdp__wishlist .tinvwl_add_to_wishlist_button,
  .kb-pdp__wishlist .kb-pdp__heart {
    font-size: 0 !important;
    min-width: 48px;
    width: 48px;
  }

  .kb-pdp__wishlist .tinvwl_add_to_wishlist_button::before {
    font-size: var(--kb-fs-h3);
    margin: 0;
  }

  html body.single-product .kb-pdp__wishlist .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text,
  html body.single-product .kb-pdp__wishlist .tinvwl-tooltip {
    display: none !important;
    font-size: 0 !important;
  }

  .kb-quantity-breaks {
    box-sizing: border-box;
    max-width: calc(100vw - (var(--kb-space) * 6));
    width: calc(100vw - (var(--kb-space) * 6));
  }

  .kb-quantity-breaks__heading {
    align-items: start;
    display: grid;
    gap: calc(var(--kb-space) * 0.5);
    justify-content: start;
  }

  .kb-quantity-breaks__options {
    grid-template-columns: 1fr;
  }

  .kb-quantity-break {
    grid-template-columns: minmax(0, 1fr);
    min-height: 64px;
    width: 100%;
  }

  .kb-quantity-break__total {
    justify-self: start;
  }

  .kb-quantity-break__discount {
    grid-column: 1 / -1;
  }

  .kb-social-proof {
    grid-template-columns: 1fr;
  }
}

/* Final storefront overrides: compact gallery and contrast-safe interactions. */
.kb-site-header__inner {
  grid-template-columns: auto max-content minmax(10rem, 14rem) auto;
}

.kb-site-header__nav {
  min-width: 0;
}

.kb-site-header__nav > a,
.kb-mega-menu__trigger {
  white-space: nowrap;
}

.kb-header-search {
  min-width: 0;
  position: relative;
  width: clamp(10rem, 13vw, 14rem);
}

.kb-header-search .dgwt-wcas-search-wrapp,
.kb-header-search .dgwt-wcas-search-form {
  margin: 0;
  width: 100%;
}

.kb-header-search .dgwt-wcas-suggestions-wrapp {
  min-width: min(27rem, calc(100vw - (var(--kb-space) * 4))) !important;
}

.kb-header-search .dgwt-wcas-search-input {
  background: var(--kb-surface-alt) !important;
  border: 1px solid var(--kb-line) !important;
  border-radius: var(--kb-radius-control) !important;
  box-shadow: none !important;
  color: var(--kb-ink) !important;
  font-size: var(--kb-fs-meta) !important;
  min-height: 2.75rem !important;
  padding-inline: calc(var(--kb-space) * 1.25) 2.75rem !important;
}

.kb-header-search .dgwt-wcas-search-input:focus {
  background: var(--kb-surface) !important;
  border-color: var(--kb-accent) !important;
}

.kb-header-search .dgwt-wcas-search-input::placeholder {
  color: var(--kb-ink-soft) !important;
  opacity: 1;
}

.kb-header-search .dgwt-wcas-search-submit {
  align-items: center !important;
  display: flex !important;
  height: 3.25rem !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  right: 0 !important;
  top: 0.625rem !important;
  transform: none !important;
  width: 2.75rem !important;
}

.kb-header-search .dgwt-wcas-search-submit :is(svg, span) {
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

.kb-header-search__spinner {
  border: 2px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  border-top-color: var(--kb-accent);
  height: 1rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: calc(var(--kb-space) * 1.1);
  top: 50%;
  transform: translateY(-50%);
  transition: opacity var(--kb-motion-fast) var(--kb-ease);
  width: 1rem;
}

.kb-header-search.is-searching .kb-header-search__spinner {
  animation: kb-header-search-spin 640ms linear infinite;
  opacity: 1;
}

@keyframes kb-header-search-spin {
  to {
    transform: translateY(-50%) rotate(1turn);
  }
}

.kb-header-icon--search-overlay {
  display: none;
}

@media (max-width: 1279px) {
  .kb-site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .kb-header-search {
    display: none;
  }

  .kb-header-icon--search-overlay {
    display: inline-flex;
  }
}

.kb-site-header__actions {
  gap: 0;
  padding-right: calc(var(--kb-space) * 1.25);
}

.kb-site-header__utility-group {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 1.1);
}

.kb-site-header__utility-group + .kb-site-header__utility-group {
  border-left: 1px solid var(--kb-line);
  margin-left: calc(var(--kb-space) * 1.25);
  padding-left: calc(var(--kb-space) * 1.25);
}

.kb-header-icon {
  border-radius: var(--kb-radius-control);
  min-height: 44px;
  min-width: 44px;
}

.kb-header-icon svg {
  height: 21px;
  stroke-width: 1.5;
  width: 21px;
}

.kb-site-header__utility-group--cart .kb-header-icon {
  background: var(--kb-surface-alt);
  min-height: 46px;
  min-width: 46px;
}

.kb-site-header__cart span,
.kb-wishlist-count {
  background: var(--kb-accent);
  border: 1px solid var(--kb-surface);
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  font-size: 0.625rem;
  height: 1rem;
  margin: 0;
  min-width: 1rem;
  padding: 0 0.18rem;
  position: absolute;
  right: 0.12rem;
  top: 0.12rem;
}

/* Owner-selected desktop icon treatment B: search-first commerce rail. */
@media (min-width: 1280px) {
  .kb-site-header__utility-group.kb-site-header__utility-group--cart {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .kb-site-header__utility-group--cart .kb-header-icon {
    background: var(--kb-button);
    color: var(--kb-button-ink);
  }

  .kb-site-header__utility-group--cart .kb-header-icon:hover,
  .kb-site-header__utility-group--cart .kb-header-icon:focus-visible {
    background: var(--kb-button-hover);
    color: var(--kb-button-ink);
  }

  .kb-site-header__cart .kb-cart-count {
    background: var(--kb-surface);
    border-color: var(--kb-button);
    color: var(--kb-accent-strong);
  }
}

.kb-pdp-gallery {
  align-items: start;
  gap: 10px;
  grid-template-columns: 76px minmax(0, 1fr);
}

.kb-pdp-gallery__main,
.kb-pdp-gallery__pending {
  aspect-ratio: 1;
  padding: calc(var(--kb-space) * 0.75);
}

.kb-pdp-gallery__main img {
  aspect-ratio: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kb-pdp-gallery__thumbs {
  align-self: start;
  gap: 10px;
  grid-auto-rows: 76px;
  height: auto;
}

.kb-pdp-gallery__thumb {
  aspect-ratio: 1 / 1;
  block-size: 76px;
  box-sizing: border-box;
  display: block;
  inline-size: 76px;
  padding: 0;
}

.kb-pdp-gallery__thumb.is-active {
  border: 2px solid var(--kb-accent);
}

.kb-pdp-gallery__thumb img {
  border-radius: calc(var(--kb-radius) - 2px);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kb-quantity-break[aria-checked="true"] {
  background: var(--kb-blush-tint);
  border-color: var(--kb-accent);
  box-shadow: inset 0 0 0 1px var(--kb-accent);
  color: var(--kb-ink) !important;
}

.kb-quantity-break__badge {
  background: var(--kb-sale-tint);
  border: 1px solid var(--kb-line);
  color: var(--kb-accent-strong);
  line-height: 1.2;
  max-width: calc(100% - (var(--kb-space) * 2));
  overflow-wrap: anywhere;
  text-align: center;
}

.kb-quantity-break__gift {
  color: var(--kb-accent-strong);
  font-size: var(--kb-fs-meta);
  font-weight: 750;
  line-height: 1.35;
}

/* Pale interactive surfaces always keep dark, readable text. */
.kb-site-header__nav > a:hover,
.kb-site-header__nav > a:focus-visible,
.kb-mega-menu__trigger:hover,
.kb-mega-menu__trigger:focus-visible,
.kb-mobile-menu__list a:hover,
.kb-mobile-menu__list a:focus-visible {
  background: transparent !important;
  color: var(--kb-accent-strong) !important;
}

.kb-language-switcher .trp-ls-shortcode-language a:hover,
.kb-language-switcher .trp-ls-shortcode-language a:focus-visible,
.kb-language-switcher .trp-ls-shortcode-current-language a:hover,
.kb-language-switcher .trp-ls-shortcode-current-language a:focus-visible {
  background: var(--kb-accent-tint) !important;
  color: var(--kb-ink) !important;
}

.kb-language-switcher .trp-current-language-item__wrapper:hover .trp-language-item__current,
.kb-language-switcher .trp-current-language-item__wrapper:focus-within .trp-language-item__current,
.kb-language-switcher .trp-switcher-dropdown-list a:hover,
.kb-language-switcher .trp-switcher-dropdown-list a:focus-visible {
  background: var(--kb-accent-tint) !important;
  color: var(--kb-ink) !important;
}

.kb-quantity-break:hover,
.kb-quantity-break:focus-visible,
.kb-quantity-break[aria-checked="true"] {
  background: var(--kb-blush-tint);
  color: var(--kb-ink) !important;
}

.kb-quantity-break:hover :is(.kb-quantity-break__quantity, .kb-quantity-break__total, .kb-quantity-break__gift),
.kb-quantity-break:focus-visible :is(.kb-quantity-break__quantity, .kb-quantity-break__total, .kb-quantity-break__gift),
.kb-quantity-break[aria-checked="true"] :is(.kb-quantity-break__quantity, .kb-quantity-break__total, .kb-quantity-break__gift) {
  color: var(--kb-ink) !important;
}

.kb-mega-menu__inner a:hover,
.kb-mega-menu__inner a:focus-visible,
.kb-catalog-filter label:hover,
.kb-catalog-filter label:focus-within,
.kb-catalog-filter__actions a:hover,
.kb-catalog-filter__actions a:focus-visible,
.kb-product-card h3 a:hover,
.kb-product-card h3 a:focus-visible,
.kb-pdp-tile h3 a:hover,
.kb-pdp-tile h3 a:focus-visible {
  color: var(--kb-accent-strong) !important;
}

@media (max-width: 640px) {
  .kb-header-search {
    display: none;
  }

  .kb-header-icon--search-overlay {
    display: inline-flex;
  }

  .kb-site-header__actions {
    padding-right: 0;
  }

  .kb-site-header__utility-group--language,
  .kb-site-header__utility-group--utilities {
    display: none;
  }

  .kb-site-header__utility-group--cart {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .kb-pdp-gallery {
    grid-template-columns: 1fr;
  }

  .kb-pdp-gallery__thumbs {
    display: flex;
    gap: 10px;
    grid-auto-rows: auto;
    height: auto;
  }

  .kb-pdp-gallery__thumb {
    block-size: 76px;
    flex: 0 0 76px;
    inline-size: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-header-search.is-searching .kb-header-search__spinner {
    animation: none;
  }
}

/* Approved F header: search-led discovery with a full-width desktop search rail. */
@media (min-width: 1280px) {
  .kb-site-header__inner {
    column-gap: calc(var(--kb-space) * 3);
    grid-template-areas:
      "logo search actions"
      "nav nav nav";
    grid-template-columns: minmax(10rem, auto) minmax(0, 1fr) auto;
    min-height: 0;
    padding-block: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 1.25);
    row-gap: calc(var(--kb-space) * 1.25);
  }

  .kb-site-header__logo {
    grid-area: logo;
  }

  .kb-header-search {
    grid-area: search;
    justify-self: center;
    width: clamp(32rem, 44vw, 48rem);
  }

  .kb-site-header__actions {
    grid-area: actions;
  }

  .kb-site-header__nav {
    grid-area: nav;
    justify-self: center;
    min-height: 2.5rem;
  }
}

/* Approved F control treatment: a deliberate search trigger and compact utility trio. */
@media (min-width: 1280px) {
  .kb-header-search {
    align-items: center;
    background: var(--kb-surface-alt);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-control);
    color: var(--kb-ink-soft);
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 34rem;
    font-family: var(--kb-font-body);
    font-size: var(--kb-fs-meta);
    font-weight: 500;
    gap: calc(var(--kb-space) * 1.25);
    height: 3.25rem;
    justify-content: flex-start;
    margin-inline: calc(var(--kb-space) * 3);
    max-width: 52rem;
    min-width: 0;
    padding: 0 calc(var(--kb-space) * 2);
    text-align: left;
    transition: background var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
    width: auto;
  }

  .kb-header-search:hover,
  .kb-header-search:focus-visible {
    background: var(--kb-surface);
    border-color: var(--kb-accent);
    color: var(--kb-ink);
  }

  .kb-header-search .kb-icon {
    fill: none;
    flex: 0 0 auto;
    height: var(--kb-icon-sm);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: var(--kb-icon-sm);
  }

  .kb-site-header__actions {
    align-items: center;
    gap: calc(var(--kb-space) * 0.5);
    margin-left: auto;
    padding-right: 0;
  }

  .kb-site-header__utility-group {
    gap: calc(var(--kb-space) * 0.5);
  }

  .kb-site-header__utility-group + .kb-site-header__utility-group {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .kb-site-header__utility-group--language {
    border-right: 1px solid var(--kb-line);
    margin-right: calc(var(--kb-space) * 0.75);
    padding-right: calc(var(--kb-space) * 0.75);
  }

  .kb-site-header .kb-language-switcher {
    height: 2.75rem;
    min-width: 2.75rem;
    position: relative;
    width: 2.75rem;
  }

  .kb-site-header .kb-language-switcher::before {
    align-items: center;
    color: var(--kb-ink);
    content: attr(data-kb-language-label);
    display: flex;
    font-size: var(--kb-fs-meta);
    font-weight: 700;
    inset: 0;
    justify-content: center;
    letter-spacing: 0.04em;
    pointer-events: none;
    position: absolute;
  }

  .kb-site-header .kb-language-switcher .trp-language-switcher,
  .kb-site-header .kb-language-switcher .trp-language-switcher-container,
  .kb-site-header .kb-language-switcher .trp-ls-shortcode-current-language {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }

  .kb-site-header .kb-language-switcher .trp-ls-shortcode-current-language > a,
  .kb-site-header .kb-language-switcher .trp-current-language-item__wrapper > .trp-language-item {
    font-size: 0 !important;
    height: 100%;
    opacity: 0;
    width: 100%;
  }

  .kb-site-header .kb-language-switcher :is(.trp-language-item__current img, .trp-shortcode-arrow) {
    display: none !important;
  }

  .kb-site-header .kb-language-switcher .trp-switcher-dropdown-list {
    background: var(--kb-surface);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--kb-ink) 10%, transparent);
    overflow: hidden;
  }

  .kb-site-header .kb-language-switcher .trp-switcher-dropdown-list a {
    color: var(--kb-ink) !important;
    font-size: var(--kb-fs-meta) !important;
    opacity: 1;
  }

  .kb-site-header__utility-group--utilities .kb-header-icon {
    background: transparent;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  .kb-site-header__utility-group--cart .kb-header-icon {
    border-radius: var(--kb-radius-control);
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
}

/* FiboSearch overlay: one border, one 56px icon hit area, centered at every viewport. */
.kb-search-overlay__panel > .dgwt-wcas-search-wrapp,
.kb-search-overlay__panel .dgwt-wcas-search-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  position: relative !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-input {
  box-sizing: border-box !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  padding: 0 calc(var(--kb-space) * 2) 0 3.5rem !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit {
  align-items: center !important;
  display: flex !important;
  height: 3.5rem !important;
  justify-content: center !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  right: auto !important;
  top: 0 !important;
  transform: none !important;
  width: 3.5rem !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit :is(svg, span, .dgwt-wcas-ico-magnifier) {
  display: block !important;
  height: 1.25rem !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  width: 1.25rem !important;
}

@media (min-width: 981px) and (max-width: 1279px) {
  .kb-site-header__inner {
    grid-template-areas: "logo nav actions";
  }

  .kb-site-header__logo {
    grid-area: logo;
  }

  .kb-site-header__nav {
    grid-area: nav;
  }

  .kb-site-header__actions {
    grid-area: actions;
  }
}

@media (max-width: 980px) {
  .kb-site-header__inner {
    grid-template-areas: "menu logo actions";
  }

  .kb-mobile-menu {
    grid-area: menu;
  }

  .kb-site-header__logo {
    grid-area: logo;
  }

  .kb-site-header__actions {
    grid-area: actions;
  }
}

/* Search discovery keeps FiboSearch as the query engine and gives it a marketplace surface. */
.kb-search-overlay {
  overflow-y: auto;
}

.kb-search-overlay__panel {
  border-radius: var(--kb-radius-card);
  max-width: 68rem;
  padding: calc(var(--kb-space) * 4);
}

.kb-search-overlay__panel h2 {
  font-size: var(--kb-fs-h2);
  line-height: 1.18;
  margin: 0;
  max-width: 28rem;
}

.kb-search-overlay__panel > .dgwt-wcas-search-wrapp {
  margin-top: calc(var(--kb-space) * 2);
}

.kb-search-overlay__panel .dgwt-wcas-search-form {
  margin: 0;
}

.kb-search-overlay__panel .dgwt-wcas-search-input {
  background: var(--kb-surface-alt) !important;
  border: 1px solid var(--kb-line) !important;
  border-radius: var(--kb-radius-control) !important;
  box-shadow: none !important;
  color: var(--kb-ink) !important;
  font-size: var(--kb-fs-body) !important;
  min-height: 3.5rem !important;
  padding-inline: calc(var(--kb-space) * 2) 3.5rem !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-input:focus {
  background: var(--kb-surface) !important;
  border-color: var(--kb-accent) !important;
}

.kb-search-overlay__panel .dgwt-wcas-suggestions-wrapp {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  left: auto !important;
  margin-top: calc(var(--kb-space) * 3) !important;
  max-height: none !important;
  position: static !important;
  right: auto !important;
  width: 100% !important;
}

.kb-search-overlay__panel .dgwt-wcas-suggestions {
  display: grid !important;
  gap: calc(var(--kb-space) * 1.5) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kb-search-overlay__panel .dgwt-wcas-suggestion {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-line) !important;
  border-radius: var(--kb-radius) !important;
  min-width: 0;
  overflow: hidden;
  padding: calc(var(--kb-space) * 1.25) !important;
}

.kb-search-overlay__panel .dgwt-wcas-suggestion:hover,
.kb-search-overlay__panel .dgwt-wcas-suggestion:focus-within {
  border-color: var(--kb-accent) !important;
}

.kb-search-overlay__panel .dgwt-wcas-suggestion a {
  color: var(--kb-ink) !important;
  text-decoration: none !important;
}

.kb-search-overlay__panel .dgwt-wcas-suggestion :is(.dgwt-wcas-st-title, .dgwt-wcas-suggestion-title) {
  color: var(--kb-ink) !important;
  font-family: var(--kb-font-body) !important;
  font-size: var(--kb-fs-meta) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.kb-search-discovery {
  display: grid;
  gap: calc(var(--kb-space) * 4);
  grid-template-columns: minmax(16rem, 0.82fr) minmax(0, 1.18fr);
  margin-top: calc(var(--kb-space) * 3);
}

.kb-search-discovery__title {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  font-weight: 750;
  margin: 0 0 calc(var(--kb-space) * 0.75);
}

.kb-search-discovery__copy {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: 0 0 calc(var(--kb-space) * 1.75);
}

.kb-search-discovery__skin-types {
  display: grid;
  gap: var(--kb-space);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-search-discovery__skin-types a {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  padding: calc(var(--kb-space) * 1.5);
  text-decoration: none;
  transition: background var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}

.kb-search-discovery__skin-types a:hover,
.kb-search-discovery__skin-types a:focus-visible {
  background: var(--kb-blush-tint);
  border-color: var(--kb-accent);
  color: var(--kb-accent-strong);
}

.kb-search-discovery__title--terms {
  margin-top: calc(var(--kb-space) * 2.5);
}

.kb-search-discovery__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
}

.kb-search-discovery__terms button {
  background: var(--kb-blush-tint);
  border: 1px solid transparent;
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  cursor: pointer;
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-meta);
  padding: calc(var(--kb-space) * 0.9) calc(var(--kb-space) * 1.25);
  transition: border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease), transform var(--kb-motion-fast) var(--kb-ease);
}

.kb-search-discovery__terms button:hover,
.kb-search-discovery__terms button:focus-visible {
  border-color: var(--kb-accent);
  color: var(--kb-accent-strong);
  transform: translateY(-1px);
}

.kb-search-discovery__product-grid,
.kb-search-skeletons {
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kb-search-discovery__product {
  color: var(--kb-ink);
  min-width: 0;
  text-decoration: none;
}

.kb-search-discovery__image {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.kb-search-discovery__image img {
  height: 100%;
  object-fit: contain;
  transition: transform var(--kb-motion-base) var(--kb-ease);
  width: 100%;
}

.kb-search-discovery__product:hover .kb-search-discovery__image img,
.kb-search-discovery__product:focus-visible .kb-search-discovery__image img {
  transform: scale(1.035);
}

.kb-search-discovery__brand {
  color: var(--kb-accent-strong);
  display: block;
  font-size: var(--kb-fs-eyebrow);
  font-weight: 750;
  letter-spacing: var(--kb-ls-eyebrow);
  margin-top: calc(var(--kb-space) * 1.25);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.kb-search-discovery__product strong {
  display: -webkit-box;
  font-size: var(--kb-fs-meta);
  line-height: 1.4;
  margin-top: calc(var(--kb-space) * 0.5);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kb-search-skeletons {
  display: none;
  margin-top: calc(var(--kb-space) * 3);
}

.kb-search-skeletons span {
  animation: kb-search-skeleton 1.1s linear infinite;
  background: linear-gradient(100deg, var(--kb-surface-alt), var(--kb-blush-tint), var(--kb-surface-alt));
  background-size: 200% 100%;
  border-radius: var(--kb-radius);
  min-height: 14rem;
}

.kb-search-overlay.is-loading .kb-search-discovery,
.kb-search-overlay.is-results .kb-search-discovery {
  display: none;
}

.kb-search-overlay.is-loading .kb-search-skeletons {
  display: grid;
}

.kb-search-overlay.is-loading .dgwt-wcas-suggestions-wrapp {
  display: none !important;
}

@keyframes kb-search-skeleton {
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 767px) {
  .kb-search-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .kb-search-overlay__panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 92vh;
    overflow-y: auto;
    padding: calc(var(--kb-space) * 3) calc(var(--kb-space) * 2.5);
  }

  .kb-search-overlay__panel h2 {
    font-size: var(--kb-fs-h3);
    max-width: 17rem;
    padding-right: calc(var(--kb-space) * 4);
  }

  .kb-search-discovery {
    grid-template-columns: 1fr;
  }

  .kb-search-discovery__product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-search-overlay__panel .dgwt-wcas-suggestions,
  .kb-search-skeletons {
    grid-template-columns: 1fr;
  }

  .kb-search-overlay__panel .dgwt-wcas-suggestion a {
    align-items: center;
    display: grid !important;
    gap: calc(var(--kb-space) * 1.5);
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .kb-search-skeletons span {
    min-height: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-search-skeletons span {
    animation: none;
  }
}

/* F search-led header refinements: one calm, correctly aligned search control. */
@media (min-width: 1280px) {
  .kb-site-header__inner {
    column-gap: calc(var(--kb-space) * 3.5);
    grid-template-columns: minmax(11rem, auto) minmax(34rem, 1fr) auto;
    padding-block: calc(var(--kb-space) * 2) 0;
    row-gap: calc(var(--kb-space) * 1.5);
  }

  .kb-header-search {
    max-width: 54rem;
    width: min(100%, 54rem);
  }

  .kb-site-header__nav {
    border-top: 1px solid var(--kb-line);
    justify-content: center;
    justify-self: stretch;
    padding-block: calc(var(--kb-space) * 1.25);
    width: 100%;
  }
}

.kb-header-search .dgwt-wcas-search-input {
  font-size: var(--kb-fs-body) !important;
  min-height: 3.25rem !important;
  padding-inline: 3.5rem calc(var(--kb-space) * 2) !important;
}

.kb-header-search .dgwt-wcas-search-submit {
  height: 3.25rem !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  width: 3.25rem !important;
}

.kb-header-search .dgwt-wcas-search-submit :is(svg, span) {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

.kb-search-overlay {
  padding: clamp(calc(var(--kb-space) * 5), 7vh, calc(var(--kb-space) * 8)) calc(var(--kb-space) * 3);
}

.kb-search-overlay__panel {
  max-width: 70rem;
}

.kb-search-overlay__panel > button {
  align-items: center;
  background: var(--kb-blush-tint);
  border: 0;
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  justify-content: center;
  right: calc(var(--kb-space) * 2);
  top: calc(var(--kb-space) * 2);
  transition: background var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease), transform var(--kb-motion-fast) var(--kb-ease);
}

.kb-search-overlay__panel > button:hover,
.kb-search-overlay__panel > button:focus-visible {
  background: var(--kb-accent);
  color: var(--kb-accent-ink);
  transform: scale(1.04);
}

.kb-search-overlay__panel .dgwt-wcas-search-input {
  padding-inline: 3.75rem calc(var(--kb-space) * 2) !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit {
  height: 3.5rem !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  width: 3.5rem !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit :is(svg, span) {
  height: 1.25rem !important;
  width: 1.25rem !important;
}

@media (max-width: 767px) {
  .kb-search-overlay {
    padding: 0;
  }

  .kb-search-overlay__panel > button {
    right: calc(var(--kb-space) * 1.5);
    top: calc(var(--kb-space) * 1.5);
  }
}

/* Reliable backdrop and compact F-style search geometry. */
.kb-search-overlay__backdrop {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: default;
  inset: 0;
  min-height: 0 !important;
  padding: 0 !important;
  position: absolute;
  z-index: 0;
}

.kb-search-overlay__backdrop:hover,
.kb-search-overlay__backdrop:focus,
.kb-search-overlay__backdrop:focus-visible,
.kb-search-overlay__backdrop:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  outline: 0;
  transform: none !important;
}

.kb-search-overlay__panel {
  position: relative;
  z-index: 1;
}

@media (min-width: 1280px) {
  .kb-site-header__inner {
    grid-template-columns: minmax(11rem, auto) minmax(30rem, 1fr) auto;
  }

  .kb-header-search {
    max-width: 44rem;
    width: clamp(30rem, 42vw, 44rem);
  }
}

.kb-header-search .dgwt-wcas-search-form {
  min-height: 3rem;
  position: relative;
}

.kb-header-search .dgwt-wcas-search-input {
  font-size: var(--kb-fs-meta) !important;
  min-height: 3rem !important;
  padding-inline: 3rem calc(var(--kb-space) * 1.75) !important;
}

.kb-header-search .dgwt-wcas-search-submit {
  align-items: center !important;
  display: flex !important;
  height: 3rem !important;
  justify-content: center !important;
  left: 0 !important;
  margin: 0 !important;
  right: auto !important;
  top: 0 !important;
  transform: none !important;
  width: 3rem !important;
}

.kb-header-search .dgwt-wcas-search-submit :is(svg, span, .dgwt-wcas-ico-magnifier) {
  display: block !important;
  height: 1.125rem !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  width: 1.125rem !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-input {
  font-size: var(--kb-fs-body) !important;
  min-height: 3.5rem !important;
  padding-inline: 3.75rem calc(var(--kb-space) * 2) !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit {
  height: 3.5rem !important;
  width: 3.5rem !important;
}

/* One authoritative F-style control: wide, low-profile, and icon-led. */
@media (min-width: 1280px) {
  .kb-site-header__inner {
    column-gap: calc(var(--kb-space) * 3);
    grid-template-columns: minmax(11rem, auto) minmax(34rem, 1fr) auto;
    padding-block: calc(var(--kb-space) * 1.75) 0;
  }

  .kb-header-search {
    max-width: 52rem;
    width: clamp(34rem, 46vw, 52rem);
  }

  .kb-site-header__nav {
    min-height: 2.75rem;
    padding-block: calc(var(--kb-space) * 1.25);
  }
}

.kb-header-search .dgwt-wcas-search-wrapp,
.kb-header-search .dgwt-wcas-search-form {
  min-height: 3.25rem !important;
  position: relative !important;
}

.kb-header-search .dgwt-wcas-search-input {
  box-sizing: border-box !important;
  font-size: var(--kb-fs-body) !important;
  height: 3.25rem !important;
  min-height: 3.25rem !important;
  padding-inline: 3.5rem calc(var(--kb-space) * 2) !important;
}

.kb-header-search .dgwt-wcas-search-submit {
  align-items: center !important;
  display: flex !important;
  height: 3.25rem !important;
  inset: 0 auto auto 0 !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  transform: none !important;
  width: 3.25rem !important;
}

.kb-header-search .dgwt-wcas-search-submit :is(svg, span, .dgwt-wcas-ico-magnifier) {
  display: block !important;
  height: 1.25rem !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  width: 1.25rem !important;
}

.kb-header-search__spinner {
  right: calc(var(--kb-space) * 1.5);
}

/* Keep the approved F composition intact: logo, search, and commerce share a single rail. */
@media (min-width: 1280px) {
  .kb-site-header__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: var(--kb-maxw);
    padding-block: calc(var(--kb-space) * 1.75) 0;
  }

  .kb-site-header__logo {
    flex: 0 0 11rem;
    min-width: 11rem;
  }

  .kb-header-search {
    flex: 1 1 34rem;
    margin-inline: calc(var(--kb-space) * 3);
    max-width: 52rem;
    width: auto;
  }

  .kb-site-header__actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .kb-site-header__nav {
    flex: 0 0 100%;
    justify-content: center;
    margin-top: calc(var(--kb-space) * 1.5);
    order: 4;
    padding-block: calc(var(--kb-space) * 1.25);
  }
}

/* Final mobile override: preserve the desktop F rail and give phones a two-row commerce header. */
.kb-header-icon--account {
  display: none;
}

@media (max-width: 767px) {
  .kb-site-header__inner {
    align-items: center;
    column-gap: calc(var(--kb-space) * 0.5);
    display: grid;
    grid-template-areas:
      "menu logo actions"
      "search search search";
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    min-height: 0;
    padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.5);
    row-gap: calc(var(--kb-space) * 1.125);
  }

  .kb-mobile-menu {
    display: block;
    grid-area: menu;
  }

  .kb-site-header__logo {
    grid-area: logo;
    justify-self: start;
    min-width: 0;
  }

  .kb-site-header__logo-image {
    max-height: 2rem;
    max-width: 8.75rem;
  }

  .kb-site-header__actions {
    align-items: center;
    display: flex;
    gap: 0;
    grid-area: actions;
    justify-self: end;
    margin: 0;
  }

  .kb-site-header__utility-group--language,
  .kb-header-icon--search-overlay {
    display: none !important;
  }

  .kb-site-header__utility-group--utilities,
  .kb-site-header__utility-group--cart {
    align-items: center;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .kb-header-icon--account {
    display: inline-flex;
  }

  .kb-site-header__utility-group + .kb-site-header__utility-group {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .kb-header-icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: calc(var(--kb-space) * 0.5);
  }

  .kb-header-icon svg {
    height: 1.125rem;
    width: 1.125rem;
  }

  .kb-site-header__cart.kb-header-icon {
    background: var(--kb-button);
    color: var(--kb-button-ink);
    min-height: 2.5rem;
    min-width: 2.5rem;
  }

  .kb-site-header__cart .kb-cart-count {
    background: var(--kb-surface);
    border-color: var(--kb-button);
    color: var(--kb-accent-strong);
  }

  .kb-header-search {
    align-items: center;
    background: var(--kb-surface-alt);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-control);
    color: var(--kb-ink-soft);
    display: flex !important;
    font-size: var(--kb-fs-body);
    grid-area: search;
    height: 3rem;
    justify-content: flex-start;
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 0 calc(var(--kb-space) * 1.25);
    text-align: left;
    width: 100%;
  }

  .kb-header-search:hover,
  .kb-header-search:focus-visible {
    background: var(--kb-surface-alt);
    border-color: var(--kb-accent);
    color: var(--kb-ink);
    transform: none;
  }

  .kb-header-search .kb-icon {
    flex: 0 0 auto;
    height: var(--kb-icon-sm);
    margin-right: calc(var(--kb-space) * 0.875);
    width: var(--kb-icon-sm);
  }

  .kb-site-header__nav {
    display: none;
  }
}

@media (max-width: 374px) {
  .kb-site-header__inner {
    padding-inline: var(--kb-space);
  }

  .kb-site-header__logo-image {
    max-width: 6.5rem;
  }

  .kb-header-icon,
  .kb-site-header__cart.kb-header-icon {
    min-height: 2.25rem;
    min-width: 2.25rem;
  }
}

/* Unified Lucide icon contract. Icons inherit colour, and only these token sizes are used. */
.kb-icon {
  display: block;
  fill: none;
  flex: 0 0 auto;
  height: var(--kb-icon);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: var(--kb-icon);
}

.kb-icon--sm {
  height: var(--kb-icon-sm);
  width: var(--kb-icon-sm);
}

.kb-header-icon .kb-icon,
.kb-site-header__nav .kb-icon:not(.kb-icon--sm),
.kb-search-overlay__panel > button .kb-icon,
.kb-cart-drawer__header [data-kb-cart-close] .kb-icon,
.kb-pdp__wishlist-icon .kb-icon {
  height: var(--kb-icon);
  stroke-width: 1.5;
  width: var(--kb-icon);
}

.kb-mega-menu__trigger .kb-icon--sm,
.kb-section__link .kb-icon--sm,
.kb-mega-menu__quiz .kb-icon--sm,
.kb-skin-test-banner .kb-icon--sm,
.kb-breadcrumb__separator .kb-icon--sm,
.kb-pdp__benefits .kb-icon--sm,
.kb-pdp__fulfilment-icon .kb-icon--sm,
.kb-cart-drawer__quantity .kb-icon--sm,
.kb-cart-drawer__remove .kb-icon--sm,
.kb-social-proof__item .kb-icon--sm {
  height: var(--kb-icon-sm);
  stroke-width: 1.5;
  width: var(--kb-icon-sm);
}

.kb-mobile-menu summary {
  align-items: center;
  display: inline-flex;
  gap: 0;
  justify-content: center;
  width: var(--kb-icon);
}

.kb-mobile-menu summary > .kb-icon {
  color: var(--kb-ink);
}

.kb-section__link,
.kb-mega-menu__quiz,
.kb-skin-test-banner {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 0.5);
}

.kb-breadcrumb__separator {
  display: inline-flex;
  margin-inline: calc(var(--kb-space) * 0.5);
  vertical-align: middle;
}

/* TranslatePress supplies the routes and click target; the visual chrome is theme-owned Lucide. */
.kb-language-switcher {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 0.375);
  position: relative;
}

.kb-language-switcher__icon,
.kb-language-switcher__chevron {
  align-items: center;
  display: inline-flex;
  pointer-events: none;
}

.kb-language-switcher :is(.trp-language-item__current img, .trp-shortcode-arrow) {
  display: none !important;
}

.kb-site-header .kb-language-switcher {
  height: 2.75rem;
  min-width: auto;
  pointer-events: none;
  padding-inline: calc(var(--kb-space) * 0.75);
  width: auto;
}

.kb-site-header .kb-language-switcher::before {
  content: attr(data-kb-language-label);
  font-size: var(--kb-fs-meta);
  inset: auto;
  margin: 0;
  order: 2;
  position: static;
}

.kb-site-header .kb-language-switcher__icon {
  order: 1;
}

.kb-site-header .kb-language-switcher__chevron {
  order: 3;
}

.kb-site-header .kb-language-switcher .trp-language-switcher,
.kb-site-header .kb-language-switcher .trp-language-switcher-container,
.kb-site-header .kb-language-switcher .trp-ls-shortcode-current-language {
  inset: 0;
  order: 0;
  position: absolute;
}

/* Keep TranslatePress' real control above the decorative Lucide/text shell. */
.kb-site-header .kb-language-switcher .trp-shortcode-overlay {
  inset: 0;
  position: absolute;
  z-index: 2;
}

.kb-site-header .kb-language-switcher .trp-shortcode-overlay .trp-language-item[role="button"] {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  pointer-events: auto !important;
  width: 100%;
}

/* Theme-owned language menu; TranslatePress supplies its route before this markup is rendered. */
.kb-language-switcher,
.kb-site-header .kb-language-switcher {
  pointer-events: auto;
}

.kb-site-header .kb-language-switcher::before {
  content: none;
}

.kb-language-switcher__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: calc(var(--kb-space) * 0.375);
  min-height: 2.75rem;
  padding: 0 calc(var(--kb-space) * 0.75);
}

.kb-language-switcher__trigger:hover,
.kb-language-switcher__trigger:focus-visible,
.kb-language-switcher.is-open .kb-language-switcher__trigger {
  background: var(--kb-accent-tint);
  color: var(--kb-ink);
}

.kb-language-switcher__label {
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.kb-language-switcher__menu {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--kb-ink) 10%, transparent);
  min-width: max-content;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
}

.kb-language-switcher__menu a {
  color: var(--kb-ink) !important;
  display: block;
  font-size: var(--kb-fs-meta);
  padding: calc(var(--kb-space) * 0.75) var(--kb-space);
  text-decoration: none;
}

.kb-language-switcher__menu a:hover,
.kb-language-switcher__menu a:focus-visible {
  background: var(--kb-accent-tint);
  color: var(--kb-ink) !important;
}

/* FiboSearch remains the search engine, but its magnifier is replaced with the local Lucide asset. */
.dgwt-wcas-search-submit :is(svg, span, .dgwt-wcas-ico-magnifier) {
  display: none !important;
}

.dgwt-wcas-search-submit::before {
  background: currentColor;
  content: "";
  display: block;
  height: var(--kb-icon-sm);
  mask: url("../icons/search.svg") center / contain no-repeat;
  -webkit-mask: url("../icons/search.svg") center / contain no-repeat;
  width: var(--kb-icon-sm);
}

/* TI Wishlist keeps its plugin action element, with a non-interactive Lucide overlay. */
.kb-pdp__wishlist-control {
  align-items: stretch;
  display: inline-flex;
  position: relative;
}

.kb-pdp__wishlist-control .tinvwl_add_to_wishlist_button {
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

.kb-pdp__wishlist-control .tinvwl_add_to_wishlist_button::before,
.kb-pdp__wishlist-control .tinvwl_add_to_wishlist_button :is(svg, i) {
  content: none !important;
  display: none !important;
}

.kb-pdp__wishlist-icon {
  color: var(--kb-accent);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.kb-pdp__cart .quantity.kb-product-quantity .kb-product-quantity__button .kb-icon,
.kb-pdp__heart .kb-icon {
  height: var(--kb-icon-sm);
  stroke-width: 1.5;
  width: var(--kb-icon-sm);
}

/* Shared contract for controls whose only visible content is a Lucide icon. */
:is(button, a).kb-icon-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
}

:is(button, a).kb-icon-button > .kb-icon {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .kb-cart-drawer__panel {
    border-radius: 0;
  }
}

.kb-pdp__fulfilment-icon {
  height: var(--kb-icon);
  width: var(--kb-icon);
}

.kb-social-proof > .kb-social-proof__item {
  align-items: center;
  display: flex;
  gap: calc(var(--kb-space) * 0.75);
}

.kb-product-rating {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 0.25);
}

.kb-product-rating__star {
  color: var(--kb-line-strong);
  display: inline-flex;
}

.kb-product-rating__star.is-filled {
  color: var(--kb-star);
}

.kb-quantity-break__gift {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 0.375);
}

/* Homepage alignment: product-led imagery, quiet cards, and a repeatable section rhythm. */
.kb-home > .kb-section {
  padding-block: calc(var(--kb-space) * 6);
}

.kb-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 2);
}

.kb-hero__image {
  background:
    radial-gradient(circle at 22% 22%, var(--kb-accent-tint), transparent 34%),
    linear-gradient(145deg, var(--kb-surface-alt), var(--kb-bg));
  position: relative;
}

.kb-hero__product {
  bottom: calc(var(--kb-space) * 3);
  height: 76%;
  object-fit: contain;
  position: absolute;
  width: auto;
}

.kb-hero__product--1 {
  left: 12%;
  transform: rotate(-7deg);
  z-index: 2;
}

.kb-hero__product--2 {
  bottom: calc(var(--kb-space) * 5);
  height: 60%;
  right: 11%;
  transform: rotate(7deg);
  z-index: 3;
}

.kb-hero__product--3 {
  bottom: calc(var(--kb-space) * 2);
  height: 48%;
  left: 48%;
  transform: translateX(-50%) rotate(2deg);
  z-index: 1;
}

.kb-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kb-product-card--sale {
  border-color: var(--kb-line);
  box-shadow: none;
}

.kb-product-card__image {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.kb-product-card__image img,
.kb-product-card__image .kb-product-card__img--default,
.kb-product-card__image .kb-product-card__img--hover {
  aspect-ratio: auto;
  box-sizing: border-box;
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

.kb-pdp-tile {
  display: flex;
  flex-direction: column;
}

.kb-pdp-tile__image {
  align-items: center;
  background: var(--kb-surface-alt);
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.kb-pdp-tile__image img {
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

/* Cart steppers are one bounded control; the general icon-button hit target
   must not expand their individual buttons beyond the pill. */
.kb-cart-drawer__quantity {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 112px;
  gap: 0;
  grid-template-columns: 32px minmax(34px, 1fr) 32px;
  height: 40px;
  min-width: 112px;
  overflow: hidden;
  width: 112px;
}

.kb-cart-drawer__quantity .kb-icon-button {
  align-items: center;
  display: flex;
  align-self: stretch;
  height: auto;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  width: 32px;
}

.kb-cart-drawer__quantity input {
  box-sizing: border-box;
  align-self: stretch;
  height: auto;
  min-width: 0;
  width: 100%;
}

.kb-pdp-tile__price {
  margin-top: auto;
}

.kb-product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.kb-product-card__body > .kb-button {
  margin-top: auto;
  width: 100%;
}

.kb-image-tile {
  align-items: center;
  aspect-ratio: 0.9 / 1;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: calc(var(--kb-space) * 1.25);
  justify-content: space-between;
  padding: calc(var(--kb-space) * 1.5);
}

.kb-image-tile::before {
  content: none;
}

.kb-image-tile__stage {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: transparent;
  border-radius: var(--kb-radius);
  display: grid;
  flex: 1;
  justify-items: center;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.kb-image-tile__products {
  align-items: end;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.kb-image-tile__product {
  height: 74%;
  mix-blend-mode: multiply;
  object-fit: contain;
  position: absolute;
  transform-origin: center bottom;
  width: 100%;
}

.kb-image-tile__product--1 { transform: translateX(-27%) rotate(-7deg) scale(0.8); }
.kb-image-tile__product--2 { transform: translateY(-2%) scale(0.95); z-index: 1; }
.kb-image-tile__product--3 { transform: translateX(27%) rotate(7deg) scale(0.8); }

.kb-image-tile__monogram {
  align-items: center;
  background: var(--kb-accent-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent-strong);
  display: inline-flex;
  font-size: var(--kb-fs-h2);
  font-weight: 700;
  height: calc(var(--kb-space) * 6);
  justify-content: center;
  width: calc(var(--kb-space) * 6);
}

.kb-image-tile__label {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  line-height: 1.35;
  min-height: calc(var(--kb-fs-meta) * 2.7);
  text-align: center;
}

.kb-categories .kb-tile-grid--categories {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.kb-trust-strip {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: calc(var(--kb-space) * 3) var(--kb-page-gutter);
}

.kb-trust-strip > span {
  align-items: center;
  color: var(--kb-ink-soft);
  display: inline-flex;
  font-size: var(--kb-fs-body);
  gap: calc(var(--kb-space) * 1);
  justify-content: center;
  text-align: center;
}

.kb-trust-strip .kb-icon {
  color: var(--kb-accent);
  flex: 0 0 auto;
}

.kb-routine__steps {
  align-items: stretch;
}

.kb-routine-step {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.kb-routine-step__number {
  color: var(--kb-accent);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kb-ls-eyebrow);
  margin: 0 0 calc(var(--kb-space) * 1.5);
}

.kb-routine-step__products {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}

.kb-routine-step__products li {
  border-top: 0.5px solid var(--kb-line);
}

.kb-routine-step__products a {
  color: var(--kb-ink-soft);
  display: block;
  padding: calc(var(--kb-space) * 1.1) 0;
  text-decoration: none;
}

.kb-routine-step__products a:hover,
.kb-routine-step__products a:focus-visible {
  color: var(--kb-accent);
}

.kb-brand-row {
  justify-content: center;
}

.kb-brand-row a {
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  min-height: 40px;
  padding: calc(var(--kb-space) * 1) calc(var(--kb-space) * 1.75);
}

.kb-brand-row a:hover,
.kb-brand-row a:focus-visible {
  background: var(--kb-accent-tint);
  border-color: var(--kb-accent);
  color: var(--kb-ink);
}

.kb-review-strip {
  background: transparent;
  border: 0;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
}

.kb-review-strip blockquote {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-left: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: flex;
  margin: 0;
  padding: calc(var(--kb-space) * 3);
}

@media (max-width: 1439px) {
  .kb-categories .kb-tile-grid--categories {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .kb-categories .kb-tile-grid--categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kb-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: calc(var(--kb-space) * 2);
  }
}

@media (max-width: 640px) {
  /* 24px phone section rhythm (owner mobile brief 2026-10-29; was 40px). */
  .kb-home > .kb-section {
    padding-block: calc(var(--kb-space) * 3);
  }

  .kb-hero__image {
    min-height: 300px;
  }

  .kb-hero__product--1 {
    left: 8%;
  }

  .kb-hero__product--2 {
    right: 7%;
  }

  .kb-categories .kb-tile-grid--categories {
    display: flex;
    gap: calc(var(--kb-space) * 1.5);
    margin-inline: calc(var(--kb-space) * -2);
    overflow-x: auto;
    padding-inline: calc(var(--kb-space) * 2);
    scroll-snap-type: x mandatory;
  }

  .kb-categories .kb-image-tile {
    flex: 0 0 min(68vw, 240px);
    scroll-snap-align: start;
  }

  .kb-review-strip {
    grid-template-columns: 1fr;
  }
}

/* Storefront polish: keyboard focus stays visible, mouse clicks stay clean. */
:where(a, button, summary, [role="button"]):focus:not(:focus-visible) {
  box-shadow: none !important;
  outline: 0 !important;
}

/* >=1280: both side columns share one floor wider than the actions group
   (about 18rem: LT/EN switcher, search, wishlist, account, cart), so the
   search pill stays centred and shrinks instead of running under the logo
   or the language switcher. */
@media (min-width: 1280px) {
  .kb-site-header__inner {
    align-items: center;
    column-gap: calc(var(--kb-space) * 3);
    display: grid;
    grid-template-areas:
      "logo search actions"
      "nav nav nav";
    grid-template-columns: minmax(19rem, 1fr) minmax(0, 52rem) minmax(19rem, 1fr);
    padding-block: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 1.25);
    row-gap: calc(var(--kb-space) * 1.25);
  }

  .kb-site-header__logo {
    grid-area: logo;
    min-width: 0;
    width: 13.25rem;
  }

  .kb-site-header__logo-image {
    height: auto;
    max-height: none;
    max-width: 13.25rem;
    width: 100%;
  }

  .kb-header-search {
    grid-area: search;
    justify-self: stretch;
    margin: 0;
    max-width: none;
    width: 100%;
  }

  .kb-site-header__actions {
    grid-area: actions;
    justify-self: end;
    margin: 0;
  }

  .kb-site-header__nav {
    grid-area: nav;
    margin: 0;
  }
}

.kb-header-search {
  align-items: center;
  display: inline-flex;
}

.kb-header-search .kb-icon {
  display: block;
  flex: 0 0 var(--kb-icon-sm);
  height: var(--kb-icon-sm);
  margin: 0 !important;
  width: var(--kb-icon-sm);
}

.kb-header-search__label--mobile {
  display: none;
}

@media (max-width: 1279px) {
  .kb-header-search__label--desktop {
    display: none;
  }

  .kb-header-search__label--mobile {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.kb-site-header__actions,
.kb-site-header__utility-group,
.kb-header-icon,
.kb-site-header__cart {
  align-items: center;
}

.kb-header-icon,
.kb-site-header__cart.kb-header-icon {
  background: transparent;
  border: 1px solid transparent;
  color: var(--kb-ink);
  height: 2.75rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  width: 2.75rem;
}

.kb-header-icon .kb-icon,
.kb-site-header__cart .kb-icon {
  height: var(--kb-icon);
  margin: 0;
  width: var(--kb-icon);
}

.kb-header-icon:hover,
.kb-header-icon:focus-visible,
.kb-site-header__cart.kb-header-icon:hover,
.kb-site-header__cart.kb-header-icon:focus-visible {
  background: var(--kb-blush-tint);
  border-color: var(--kb-line);
  color: var(--kb-accent);
}

.kb-site-header__cart .kb-cart-count,
.kb-header-icon .kb-wishlist-count {
  background: var(--kb-accent);
  border-color: var(--kb-surface);
  color: var(--kb-accent-ink);
}

.kb-search-discovery__image {
  display: block;
  overflow: hidden;
  position: relative;
}

.kb-search-discovery__image .kb-search-discovery__img {
  height: 100%;
  object-fit: contain;
  transition: opacity calc(var(--kb-motion-base) * 4) var(--kb-ease), transform calc(var(--kb-motion-base) * 4) var(--kb-ease);
  width: 100%;
}

.kb-search-discovery__img--hover {
  inset: 0;
  opacity: 0;
  position: absolute;
}

@media (hover: hover) and (pointer: fine) {
  .kb-search-discovery__product:hover .kb-search-discovery__image .kb-search-discovery__img--default,
  .kb-search-discovery__product:focus-visible .kb-search-discovery__image .kb-search-discovery__img--default {
    opacity: 0;
    transform: scale(1.015);
  }

  .kb-search-discovery__product:hover .kb-search-discovery__image .kb-search-discovery__img--hover,
  .kb-search-discovery__product:focus-visible .kb-search-discovery__image .kb-search-discovery__img--hover {
    opacity: 1;
    transform: scale(1.03);
  }
}

.kb-pdp-gallery__main {
  cursor: grab;
  position: relative;
  touch-action: pan-y;
}

.kb-pdp-gallery__main:active {
  cursor: grabbing;
}

.kb-pdp-gallery__swipe-hint {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  bottom: calc(var(--kb-space) * 1.5);
  color: var(--kb-ink-soft);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 0.5);
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.25);
  pointer-events: none;
  position: absolute;
  right: calc(var(--kb-space) * 1.5);
}

.kb-pdp-gallery__swipe-hint .kb-icon {
  height: var(--kb-icon-sm);
  margin: 0;
  width: var(--kb-icon-sm);
}

.kb-site-footer__trust,
.kb-pdp__commerce-marks,
.kb-checkout__commerce-marks,
.kb-payment-marks,
.kb-shipping-partners {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 0.75);
}

.kb-site-footer__trust {
  justify-content: center;
}

.kb-payment-marks img {
  border-radius: calc(var(--kb-radius) / 2);
  display: block;
  height: 1.85rem;
  object-fit: contain;
  width: auto;
}

.kb-shipping-partners {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
}

.kb-shipping-partners strong {
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  font-weight: 700;
  padding: calc(var(--kb-space) * 0.45) calc(var(--kb-space) * 0.9);
}

.kb-pdp__commerce-marks,
.kb-checkout__commerce-marks {
  border-top: 0.5px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 1.25);
  padding-top: calc(var(--kb-space) * 1.25);
}

.kb-pdp__commerce-marks {
  align-items: flex-start;
  flex-direction: column;
}

.kb-checkout__commerce-marks {
  justify-content: space-between;
}

@media (max-width: 767px) {
  .kb-pdp-gallery__swipe-hint {
    bottom: var(--kb-space);
    right: var(--kb-space);
  }

  .kb-site-footer__trust,
  .kb-checkout__commerce-marks {
    justify-content: flex-start;
  }
}

/* Final mobile/PDP UX overrides: deliberately last to win over legacy theme rules. */
.kb-splide .splide__track,
.kb-pdp-gallery .splide__track { touch-action: pan-y; }
.kb-pdp-gallery { align-items: start; display: grid; gap: 10px; grid-template-columns: 76px minmax(0, 1fr); }
.kb-pdp-gallery__main { aspect-ratio: 1 / 1; background: var(--kb-surface-alt); border: 0.5px solid var(--kb-line); border-radius: var(--kb-radius-card); grid-column: 2; min-width: 0; overflow: hidden; padding: calc(var(--kb-space) * 0.75); position: relative; }
.kb-pdp-gallery__main .splide__track, .kb-pdp-gallery__main .splide__list, .kb-pdp-gallery__main .splide__slide { height: 100%; }
.kb-pdp-gallery__main .splide__slide { align-items: center; display: flex; justify-content: center; }
.kb-pdp-gallery__main .splide__slide img { aspect-ratio: auto; border: 0; border-radius: calc(var(--kb-radius-card) - 4px); display: block; height: 100%; max-height: 100%; object-fit: contain; width: 100%; }
.kb-pdp-gallery__main .splide__pagination { bottom: calc(var(--kb-space) * 1.25); }
.kb-pdp-gallery__main .splide__pagination__page { background: var(--kb-line); height: 8px; margin: 4px; opacity: 1; width: 8px; }
.kb-pdp-gallery__main .splide__pagination__page.is-active { background: var(--kb-accent); transform: scale(1); }
.kb-pdp-gallery__arrows .splide__arrow { align-items: center; background: var(--kb-surface); border: 0.5px solid var(--kb-line); border-radius: var(--kb-radius-control); color: var(--kb-ink); display: inline-flex; height: 40px; justify-content: center; opacity: 1; width: 40px; }
.kb-pdp-gallery__arrows .splide__arrow:hover, .kb-pdp-gallery__arrows .splide__arrow:focus-visible { background: var(--kb-blush-tint); color: var(--kb-accent-strong); }
.kb-pdp-gallery__arrows .splide__arrow--prev { left: calc(var(--kb-space) * 1.25); }
.kb-pdp-gallery__arrows .splide__arrow--next { right: calc(var(--kb-space) * 1.25); }
.kb-pdp-gallery__arrows .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }
.kb-pdp-gallery__thumbs { align-self: start; display: grid; gap: 10px; grid-auto-rows: 76px; grid-column: 1; grid-row: 1; height: min(100%, 31rem); min-width: 0; overflow: hidden; }
.kb-pdp-gallery__thumbs .splide__track { height: 100%; }
.kb-pdp-gallery__thumbs .splide__list { gap: 10px !important; }
.kb-pdp-gallery__thumbs .splide__slide { height: 76px !important; width: 76px !important; }
.kb-pdp-gallery__thumb { aspect-ratio: 1 / 1; background: var(--kb-surface-alt); border: 1px solid var(--kb-line); border-radius: var(--kb-radius); box-sizing: border-box; display: block; height: 76px; overflow: hidden; padding: 0; width: 76px; }
.kb-pdp-gallery__thumb.is-active, .kb-pdp-gallery__thumb:focus-visible { border: 2px solid var(--kb-accent); }
.kb-pdp-gallery__thumb img { border: 0; border-radius: calc(var(--kb-radius) - 2px); display: block; height: 100%; object-fit: cover; width: 100%; }
.kb-pdp-gallery__pending { grid-column: 2; }
.kb-site-footer .kb-shipping-partners { color: var(--kb-surface-alt); }
.kb-site-footer .kb-shipping-partners strong { align-items: center; border-color: var(--kb-surface-alt); color: var(--kb-surface-alt); display: inline-flex; min-height: 2rem; }
.kb-site-footer__bar { align-items: center; gap: calc(var(--kb-space) * 1.5); }
.kb-site-footer__bar :is(.kb-payment-marks, .kb-shipping-partners) { margin: 0; }
.kb-search-overlay__panel .dgwt-wcas-search-wrapp, .kb-search-overlay__panel .dgwt-wcas-sf-wrapp { position: relative; }
.kb-search-overlay__panel .dgwt-wcas-search-submit, .kb-search-overlay__panel .dgwt-wcas-search-submit::before { align-items: center; display: inline-flex; height: 100%; justify-content: center; line-height: 1; margin: 0; top: 0; }
.kb-search-overlay__panel .dgwt-wcas-search-submit { inset: 0 auto 0 0; min-height: 44px; min-width: 44px; position: absolute; width: 44px; }
.kb-search-overlay__panel .dgwt-wcas-search-submit::before { background-position: center; background-size: var(--kb-icon-sm) var(--kb-icon-sm); width: var(--kb-icon-sm); }
.dgwt-wcas-search-input { overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; }
.kb-catalog__toolbar-actions { align-items: center; display: flex; gap: var(--kb-space); }
.kb-catalog__filter-trigger, .kb-catalog__filter-close, .kb-catalog__filter-scrim { display: none; }

@media (max-width: 1023px) {
  .kb-catalog__toolbar { align-items: center; gap: var(--kb-space); margin-bottom: calc(var(--kb-space) * 2); }
  .kb-catalog__toolbar > :first-child { display: none; }
  .kb-catalog__toolbar-actions { justify-content: space-between; width: 100%; }
  .kb-catalog__toolbar .woocommerce-ordering, .kb-catalog__toolbar .woocommerce-ordering select { margin: 0; max-width: 100%; }
  .kb-catalog__filter-trigger { align-items: center; background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-radius-control); color: var(--kb-ink); display: inline-flex; flex: 0 0 auto; font: inherit; gap: calc(var(--kb-space) * 0.75); justify-content: center; min-height: 44px; padding: 0 calc(var(--kb-space) * 1.5); }
  .kb-catalog__filter-count { align-items: center; background: var(--kb-accent); border-radius: var(--kb-radius-control); color: var(--kb-accent-ink); display: inline-flex; font-size: var(--kb-fs-meta); font-weight: 700; height: 1.35rem; justify-content: center; min-width: 1.35rem; }
  .kb-catalog__filters { background: transparent; border: 0; border-radius: 0; bottom: 0; display: block; inset: 0; padding: 0; pointer-events: none; position: fixed; top: 0; z-index: 100001; }
  .kb-catalog__filter-scrim { background: var(--kb-ink); border: 0; display: block; inset: 0; opacity: 0; padding: 0; position: absolute; transition: opacity var(--kb-motion-base) var(--kb-ease); width: 100%; }
  .kb-catalog__filter-panel { background: var(--kb-surface); border-radius: var(--kb-radius-card) var(--kb-radius-card) 0 0; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; max-height: min(82vh, 46rem); overflow: hidden; padding: calc(var(--kb-space) * 2); position: absolute; transform: translateY(100%); transition: transform var(--kb-motion-base) var(--kb-ease); width: 100%; }
  .kb-catalog__filters.is-open { pointer-events: auto; }
  .kb-catalog__filters.is-open .kb-catalog__filter-scrim { opacity: 0.35; }
  .kb-catalog__filters.is-open .kb-catalog__filter-panel { transform: translateY(0); }
  .kb-catalog__filter-header { align-items: center; display: flex; justify-content: space-between; }
  .kb-catalog__filter-title { font-size: var(--kb-fs-h3); margin: 0; }
  .kb-catalog__filter-close { display: inline-flex; }
  .kb-catalog__filter-panel form { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; padding-top: calc(var(--kb-space) * 1.5); }
  .kb-catalog-filter { border-bottom: 0.5px solid var(--kb-line); padding: 0; }
  .kb-catalog-filter__toggle { align-items: center; background: transparent; border: 0; color: var(--kb-ink); display: flex; font: inherit; font-weight: 700; justify-content: space-between; min-height: 48px; padding: 0; text-align: left; width: 100%; }
  .kb-catalog-filter__toggle .kb-icon { transition: transform var(--kb-motion-fast) var(--kb-ease); }
  .kb-catalog-filter__toggle[aria-expanded="false"] .kb-icon { transform: rotate(-90deg); }
  .kb-catalog-filter__options { padding-bottom: var(--kb-space); }
  .kb-catalog-filter ul { gap: calc(var(--kb-space) * 0.5); }
  .kb-catalog-filter label { align-items: center; background: var(--kb-surface-alt); border: 0.5px solid var(--kb-line); border-radius: var(--kb-radius); color: var(--kb-ink); min-height: 44px; padding: 0 var(--kb-space); }
  .kb-catalog-filter__actions { background: var(--kb-surface); border-top: 0.5px solid var(--kb-line); bottom: 0; margin: auto calc(var(--kb-space) * -2) calc(var(--kb-space) * -2); padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2); position: sticky; }
  .kb-catalog-filter__actions .kb-button { flex: 1; }
  .kb-catalog__results ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :where(.kb-hero h1, .kb-section h2, .kb-catalog h1, .kb-pdp__info h1, .kb-cart-drawer h2, .kb-search-overlay h2) { line-height: 1.24; }
  .kb-pdp-gallery { grid-template-columns: 1fr; }
  .kb-pdp-gallery__main, .kb-pdp-gallery__pending { grid-column: 1; grid-row: 1; }
  .kb-pdp-gallery__thumbs { display: flex; gap: 10px; grid-auto-rows: auto; grid-column: 1; grid-row: 2; height: 76px; overflow-x: auto; width: 100%; }
  .kb-pdp-gallery__thumbs .splide__list { flex-direction: row !important; }
  .kb-pdp-gallery__main .splide__arrows { display: none; }
  .kb-pdp-gallery__main .splide__pagination { display: flex; }
  .kb-pdp__purchase, .kb-pdp__purchase .cart, .kb-pdp__cart, .kb-pdp__cart form.cart { min-width: 0; width: 100%; }
  .kb-pdp__cart form.cart { align-items: center; display: flex; flex-wrap: nowrap; gap: var(--kb-space); }
  .kb-pdp__cart .quantity.kb-product-quantity { flex: 0 0 142px; min-width: 142px; }
  .kb-pdp__cart .single_add_to_cart_button { flex: 1 1 auto; min-height: 48px; min-width: 0; }
  .kb-pdp__info :is(.kb-pdp__price, .kb-pdp__badges, .kb-pdp__tags) { max-width: 100%; }
}
@media (max-width: 359px) {
  .kb-pdp__cart form.cart { flex-wrap: wrap; }
  .kb-pdp__cart .single_add_to_cart_button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-catalog__filter-scrim, .kb-catalog__filter-panel, .kb-catalog-filter__toggle .kb-icon { transition-duration: 0ms; }
}

/* Mobile PDP controls: Blocksy's float-clearing pseudo-elements become flex items. */
.kb-pdp__cart form.cart::before,
.kb-pdp__cart form.cart::after {
  content: none !important;
  display: none !important;
}

/* FiboSearch offsets its input within the wrapper; center the real SVG to that input. */
.kb-search-overlay__panel .dgwt-wcas-search-submit {
  align-items: center !important;
  bottom: auto !important;
  display: flex !important;
  height: 56px !important;
  inset: auto auto auto 0 !important;
  justify-content: center !important;
  left: 0 !important;
  margin: 0 !important;
  min-height: 56px !important;
  min-width: 56px !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
}

.kb-search-overlay__panel .dgwt-wcas-search-submit svg {
  display: block;
  flex: 0 0 var(--kb-icon-sm);
  height: var(--kb-icon-sm);
  margin: 0;
  width: var(--kb-icon-sm);
}

@media (min-width: 768px) {
  .kb-search-overlay__panel .dgwt-wcas-search-submit {
    min-width: 85px !important;
    width: 85px !important;
  }

  .kb-search-overlay__panel .dgwt-wcas-search-input {
    padding-left: calc(85px + var(--kb-space)) !important;
  }
}

@media (max-width: 640px) {
  /* Keep the PDP gutter outside the component so children cannot consume it. */
  body.single-product .kb-pdp {
    box-sizing: border-box;
    margin-inline: calc(var(--kb-space) * 2);
    padding-inline: 0 !important;
    width: auto;
  }

  body.single-product .kb-quantity-breaks {
    max-width: 100%;
    width: 100%;
  }

  /* Let catalogue cards use the same deliberate phone gutter as the PDP. */
  .ct-container:has(.kb-catalog) {
    max-width: none;
    width: 100%;
  }

  .kb-catalog {
    padding-inline: calc(var(--kb-space) * 2);
  }

  .kb-catalog__results ul.products {
    gap: calc(var(--kb-space) * 1.5);
  }

  .kb-product-card__body {
    padding: calc(var(--kb-space) * 1.5);
  }

  .kb-product-card h3 {
    display: -webkit-box;
    line-height: 1.35;
    min-block-size: 5.4em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .kb-product-card__meta {
    gap: calc(var(--kb-space) * 0.5);
    margin: var(--kb-space) 0;
  }

  .kb-product-card__body > .kb-button {
    font-size: var(--kb-fs-meta);
    min-height: 44px;
    padding-inline: var(--kb-space);
    white-space: nowrap;
  }
}

.kb-product-slider .splide__track {
  cursor: grab;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
}

.kb-product-slider .splide__track:active {
  cursor: grabbing;
}

.kb-pdp-gallery__wishlist {
  height: 44px;
  line-height: 0;
  position: absolute;
  right: calc(var(--kb-space) * 1.5);
  top: calc(var(--kb-space) * 1.5);
  z-index: 5;
}

.kb-pdp-gallery__wishlist :is(.kb-pdp__wishlist-control, .tinv-wraper) {
  display: block;
  height: 44px;
  line-height: 0;
}

.kb-pdp-gallery__wishlist .tinv-wishlist-clear {
  display: none;
}

.kb-pdp-gallery__wishlist :is(.tinvwl_add_to_wishlist_button, .kb-pdp__heart) {
  align-items: center;
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: transparent !important;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  width: 44px;
}

.kb-pdp-gallery__wishlist :is(.tinvwl_add_to_wishlist_button, .kb-pdp__heart):hover,
.kb-pdp-gallery__wishlist :is(.tinvwl_add_to_wishlist_button, .kb-pdp__heart):focus-visible {
  background: var(--kb-blush-tint);
  border-color: var(--kb-accent);
}

.kb-pdp-gallery__wishlist .kb-pdp__wishlist-icon {
  color: var(--kb-accent);
}

.kb-pdp-gallery__pending {
  position: relative;
}

/* Responsive audit: containment, touch targets, and checkout completion polish. */

body.woocommerce-order-received .woocommerce-order :is(
  .woocommerce-thankyou-order-received,
  .woocommerce-order-details,
  .woocommerce-customer-details,
  table.shop_table,
  table.shop_table th,
  table.shop_table td,
  address
) {
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
}

body.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
}

body.woocommerce-order-received .woocommerce-verify-email {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  box-sizing: border-box;
  margin: calc(var(--kb-space) * 4) auto;
  max-width: 40rem;
  padding: calc(var(--kb-space) * 3);
}

body.woocommerce-order-received .woocommerce-verify-email .form-row {
  margin: calc(var(--kb-space) * 2) 0 0;
  padding: 0;
}

body.woocommerce-order-received .woocommerce-verify-email .input-text {
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius);
  box-sizing: border-box;
  font-size: var(--kb-fs-body);
  min-height: 50px;
  width: 100%;
}

body.woocommerce-order-received .woocommerce-verify-email .button {
  background: var(--kb-button) !important;
  border-color: var(--kb-button) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-button-ink) !important;
  min-height: 48px;
  padding-inline: calc(var(--kb-space) * 3);
}

body.woocommerce-order-received .woocommerce-verify-email .button:hover,
body.woocommerce-order-received .woocommerce-verify-email .button:focus-visible {
  background: var(--kb-button-hover) !important;
  border-color: var(--kb-button-hover) !important;
}

@media (max-width: 640px) {
  .kb-hero__image {
    min-width: 0;
    width: 100%;
  }

  .kb-section__link,
  .kb-site-footer__inner a,
  .kb-mobile-menu a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .kb-catalog__toolbar .woocommerce-ordering select,
  body.woocommerce-cart table.cart .quantity {
    min-height: 44px;
  }
}

/* Complete-your-routine bundle builder. Namespaced `kb-rb`: the theme already
   defines .kb-routine__* for the homepage section, so this component must not
   reuse those class names. */
.kb-rb {
  border-top: 1px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 2.5);
  padding-top: calc(var(--kb-space) * 2.5);
}

.kb-rb__head {
  align-items: center;
  border-bottom: 1px solid var(--kb-line);
  display: flex;
  gap: var(--kb-space);
  justify-content: space-between;
  margin-bottom: calc(var(--kb-space) * 1.5);
  padding-bottom: calc(var(--kb-space) * 1.25);
}

.kb-rb__title {
  color: var(--kb-ink);
  font-size: var(--kb-fs-h3);
  margin: 0;
}

.kb-rb__head-badge {
  background: var(--kb-sale-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-sale-red);
  flex: none;
  font-size: var(--kb-fs-meta);
  font-weight: 800;
  padding: calc(var(--kb-space) * 0.4) calc(var(--kb-space) * 0.9);
  text-transform: lowercase;
}

.kb-rb__steps { display: grid; gap: calc(var(--kb-space) * 1.1); grid-template-columns: minmax(0, 1fr); }
.kb-rb__step { min-width: 0; position: relative; }

/* Each step is a radio-style block button. */
.kb-rb__card {
  align-items: center;
  background: var(--kb-surface);
  border: 1.5px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-card);
  cursor: pointer;
  display: grid;
  gap: calc(var(--kb-space) * 1.1);
  grid-template-columns: auto 56px minmax(0, 1fr) auto auto;
  padding: calc(var(--kb-space) * 1.1);
  text-align: left;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), background-color var(--kb-motion-fast) var(--kb-ease);
  width: 100%;
}

/* Override the global button:hover (dark fill + white text): keep the block
   light so its dark inner text stays readable. */
.kb-rb__card:hover,
.kb-rb__card:focus-visible { background: var(--kb-surface); border-color: var(--kb-accent); color: var(--kb-ink); transform: none; }
.kb-rb__step.is-filled .kb-rb__card,
.kb-rb__step.is-filled .kb-rb__card:hover,
.kb-rb__step.is-filled .kb-rb__card:focus-visible { background: var(--kb-blush-tint); border-color: var(--kb-accent); }
.kb-rb__step.is-empty .kb-rb__card { border-style: dashed; }
.kb-rb__step.is-picking .kb-rb__card { border-color: var(--kb-button); box-shadow: inset 0 0 0 1px var(--kb-button); }

.kb-rb__radio {
  background: var(--kb-surface);
  border: 2px solid var(--kb-line-strong);
  border-radius: 50%;
  flex: none;
  height: 20px;
  position: relative;
  width: 20px;
}

.kb-rb__step.is-filled .kb-rb__radio { border-color: var(--kb-accent); }

.kb-rb__step.is-filled .kb-rb__radio::after {
  background: var(--kb-accent);
  border-radius: 50%;
  content: "";
  inset: 3px;
  position: absolute;
}

.kb-rb__thumb {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: 10px;
  color: var(--kb-ink-faint);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.kb-rb__thumb img { height: 100%; object-fit: contain; width: 100%; }
.kb-rb__thumb-empty { align-items: center; display: flex; justify-content: center; }

.kb-rb__meta { display: grid; gap: 2px; min-width: 0; }

.kb-rb__eyebrow {
  color: var(--kb-ink);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kb-ls-eyebrow);
  text-transform: uppercase;
}


.kb-rb__name {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-rb__step.is-empty .kb-rb__name { color: var(--kb-ink-soft); font-weight: 700; }

.kb-rb__price { color: var(--kb-ink); font-size: var(--kb-fs-meta); font-weight: 800; white-space: nowrap; }

/* Edit (pencil) and remove (trash) sit side by side at the card's right edge. */
.kb-rb__actions { align-items: center; display: inline-flex; flex: none; gap: calc(var(--kb-space) * 0.5); }

.kb-rb__pill {
  align-items: center;
  background: transparent;
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 0;
  padding: calc(var(--kb-space) * 0.55) calc(var(--kb-space) * 1);
  transition: border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease), background-color var(--kb-motion-fast) var(--kb-ease);
  white-space: nowrap;
}

.kb-rb__pill:hover,
.kb-rb__pill:focus-visible { border-color: var(--kb-accent); color: var(--kb-accent); }

/* Filled steps show a compact pencil (edit) icon; empty steps show the CTA text. */
.kb-rb__pill-change { align-items: center; display: inline-flex; }
.kb-rb__pill-change .kb-icon { height: 16px; width: 16px; }
.kb-rb__step.is-filled .kb-rb__pill { padding: calc(var(--kb-space) * 0.6); }
.kb-rb__step.is-empty .kb-rb__pill-change { display: none; }
.kb-rb__step.is-filled .kb-rb__pill-choose { display: none; }

.kb-rb__step.is-empty .kb-rb__pill { background: var(--kb-button); border-color: var(--kb-button); color: var(--kb-button-ink); }
.kb-rb__step.is-empty .kb-rb__pill:hover,
.kb-rb__step.is-empty .kb-rb__pill:focus-visible { background: var(--kb-button-hover); border-color: var(--kb-button-hover); color: var(--kb-button-ink); }

/* Remove an optional routine item so the shopper can order just one product.
   Sits right-aligned below the filled card; shown by JS only once the step is
   filled. Kept inside the step width because a PDP ancestor uses overflow:clip. */
.kb-rb__remove {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink-soft);
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 0;
  padding: calc(var(--kb-space) * 0.5);
  transition: color var(--kb-motion-fast) var(--kb-ease), background-color var(--kb-motion-fast) var(--kb-ease);
}

.kb-rb__remove:hover,
.kb-rb__remove:focus-visible { background: var(--kb-sale-tint); color: var(--kb-sale-red); }
.kb-rb__remove[hidden] { display: none; }
.kb-rb__remove .kb-icon { height: 18px; width: 18px; }

/* Popup: a fixed centered overlay (an ancestor of the PDP column uses
   overflow:clip, which would clip an absolutely positioned dropdown). */
.kb-rb__picker {
  background: #ffffff;
  border: 1px solid var(--kb-line);
  border-radius: calc(var(--kb-radius-card) + 4px);
  box-shadow:
    0 32px 80px color-mix(in srgb, var(--kb-ink) 26%, transparent),
    0 6px 18px color-mix(in srgb, var(--kb-ink) 9%, transparent);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: min(88vh, 760px);
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 40px));
  z-index: 1200;
}

.kb-rb__picker[hidden] { display: none; }

/* Full-screen overlay that blurs the page content behind the open picker.
   Created/toggled by JS (see commerce-ui.js). Sits below the picker panel. */
.kb-rb__overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  inset: 0;
  position: fixed;
  z-index: 1190;
}

.kb-rb__overlay[hidden] { display: none; }

.kb-rb__picker-head {
  align-items: center;
  border-bottom: 1px solid var(--kb-line);
  display: flex;
  flex: none;
  justify-content: space-between;
  padding: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 2.25);
}

.kb-rb__picker-title { color: var(--kb-ink); font-size: var(--kb-fs-h3); font-weight: 800; letter-spacing: -0.01em; }

.kb-rb__picker-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--kb-ink);
  cursor: pointer;
  display: flex;
  flex: none;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.kb-rb__picker-close:hover { background: var(--kb-surface-alt); color: var(--kb-ink); }
/* Match the site-header icon size. */
.kb-rb__picker-close .kb-icon { height: var(--kb-icon); width: var(--kb-icon); }

/* Scrollable, but the scrollbar is hidden for a cleaner sheet (content still
   scrolls via wheel/touch/keyboard). */
.kb-rb__picker-body {
  -ms-overflow-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 2.25) calc(var(--kb-space) * 2.25);
  scrollbar-width: none;
}

.kb-rb__picker-body::-webkit-scrollbar { display: none; }

.kb-rb__group {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kb-ls-eyebrow);
  margin: calc(var(--kb-space) * 1.25) 0 calc(var(--kb-space) * 0.75);
  text-transform: uppercase;
}

.kb-rb__group:first-child { margin-top: 0; }

/* Both the recommended and the full lists render as a 3-up grid of product
   cards on desktop (2-up on mobile), matching the shop's card design. */
.kb-rb__grid { display: grid; gap: var(--kb-space); grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kb-rb__opt {
  background: var(--kb-surface);
  border: 1.5px solid var(--kb-line);
  border-radius: var(--kb-radius);
  cursor: pointer;
  position: relative;
  text-align: left;
  transition:
    border-color var(--kb-motion-fast) var(--kb-ease),
    background-color var(--kb-motion-fast) var(--kb-ease),
    box-shadow var(--kb-motion-fast) var(--kb-ease),
    transform var(--kb-motion-fast) var(--kb-ease);
  width: 100%;
}

.kb-rb__opt:hover,
.kb-rb__opt:focus-visible {
  background: var(--kb-surface);
  border-color: var(--kb-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--kb-ink) 12%, transparent);
  color: var(--kb-ink);
  transform: translateY(-3px);
}
.kb-rb__opt.is-selected,
.kb-rb__opt.is-selected:hover { background: var(--kb-blush-tint); border-color: var(--kb-button); box-shadow: 0 0 0 1px var(--kb-button); color: var(--kb-ink); transform: none; }

/* Mirrors the shop product card: image with hover crossover on top, then brand /
   name / price / reviews. The card clips the square image via overflow so it
   reads as a rounded card like the shop grid. */
.kb-rb__opt--card { display: grid; gap: 0; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; }

.kb-rb__opt-image {
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  display: block;
  position: relative;
  width: 100%;
}

.kb-rb__opt-img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: opacity calc(var(--kb-motion-base) * 1.4) var(--kb-ease), transform calc(var(--kb-motion-base) * 1.4) var(--kb-ease);
  width: 100%;
}

.kb-rb__opt-img--hover { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .kb-rb__opt:hover .kb-rb__opt-img--default { opacity: 0; transform: scale(1.04); }
  .kb-rb__opt:hover .kb-rb__opt-img--hover { opacity: 1; transform: scale(1.04); }
}

/* "Most popular" + "Sale" badges stack at the image's top-left. */
.kb-rb__opt-badges {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: calc(var(--kb-space) * 0.4);
  left: calc(var(--kb-space) * 0.7);
  position: absolute;
  right: calc(var(--kb-space) * 0.7);
  top: calc(var(--kb-space) * 0.7);
  z-index: 2;
}

.kb-rb__opt-badges:empty { display: none; }

.kb-rb__opt-badges .kb-sale-badge,
.kb-rb__opt-badge {
  border-radius: var(--kb-radius-control);
  font-size: calc(var(--kb-fs-eyebrow) - 1px);
  font-weight: 800;
  left: auto;
  letter-spacing: 0.03em;
  line-height: 1;
  max-width: 100%;
  padding: calc(var(--kb-space) * 0.5) calc(var(--kb-space) * 0.85);
  position: static;
  top: auto;
}

.kb-rb__opt-badge--popular { background: var(--kb-ink); color: var(--kb-button-ink); }

.kb-rb__opt-info { display: grid; gap: 3px; min-width: 0; padding: calc(var(--kb-space) * 0.85); }

.kb-rb__opt-brand {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kb-ls-eyebrow);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.kb-rb__opt-name {
  color: var(--kb-ink);
  display: -webkit-box;
  font-size: var(--kb-fs-eyebrow);
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.kb-rb__opt-price { color: var(--kb-ink); font-size: var(--kb-fs-meta); font-weight: 800; }

.kb-rb__opt-reviews { align-items: center; color: var(--kb-ink-faint); display: flex; font-size: var(--kb-fs-eyebrow); gap: calc(var(--kb-space) * 0.4); }
.kb-rb__opt-reviews .kb-icon { height: 13px; width: 13px; }

/* Select CTA at the bottom of each card; flips to a filled "Selected" state. */
.kb-rb__opt-select {
  align-items: center;
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  justify-content: center;
  margin-top: calc(var(--kb-space) * 0.7);
  padding: calc(var(--kb-space) * 0.7) var(--kb-space);
  transition: background-color var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}

.kb-rb__opt:hover .kb-rb__opt-select,
.kb-rb__opt.is-selected .kb-rb__opt-select { background: var(--kb-button); border-color: var(--kb-button); color: var(--kb-button-ink); }

.kb-rb__opt-select-active { align-items: center; display: none; gap: calc(var(--kb-space) * 0.3); }
.kb-rb__opt-select .kb-icon { height: 15px; width: 15px; }
.kb-rb__opt.is-selected .kb-rb__opt-select-default { display: none; }
.kb-rb__opt.is-selected .kb-rb__opt-select-active { display: inline-flex; }

.kb-rb__summary {
  align-items: baseline;
  border-top: 1px dashed var(--kb-line);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 0.5) var(--kb-space);
  justify-content: space-between;
  margin-top: calc(var(--kb-space) * 1.5);
  padding-top: calc(var(--kb-space) * 1.25);
}

.kb-rb__summary[hidden] { display: none; }
.kb-rb__summary.kb-slide-in { animation: kb-slide-down var(--kb-motion-base) var(--kb-ease); }

@media (prefers-reduced-motion: reduce) {
  .kb-rb__summary.kb-slide-in { animation: none; }
}

.kb-rb__totals { align-items: baseline; display: flex; flex-wrap: wrap; gap: calc(var(--kb-space) * 0.75); }
.kb-rb__total-label { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); }
.kb-rb__total { color: var(--kb-ink); font-size: var(--kb-fs-h3); font-weight: 800; }
.kb-rb__regular { color: var(--kb-ink-soft); font-size: var(--kb-fs-card); font-weight: 600; text-decoration-color: var(--kb-sale-red); text-decoration-thickness: 2px; }
.kb-rb__regular[hidden] { display: none; }

.kb-rb__save {
  background: var(--kb-sale-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-sale-red);
  display: inline-block;
  font-size: var(--kb-fs-meta);
  font-weight: 800;
  padding: calc(var(--kb-space) * 0.35) calc(var(--kb-space) * 0.9);
}

.kb-rb__save[hidden] { display: none; }

/* Rubber-band the "you save" badge the moment the routine becomes complete. */
.kb-rb__save.kb-pop { animation: kb-rubberband 0.9s var(--kb-ease) both; transform-origin: center; }

@keyframes kb-rubberband {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-rb__save.kb-pop { animation: none; }
}
.kb-rb__add { margin-top: calc(var(--kb-space) * 1.25); width: 100%; }
.kb-rb__add:disabled { cursor: not-allowed; opacity: 0.55; }
.kb-rb__add.is-loading { opacity: 0.7; pointer-events: none; }
.kb-rb__note { color: var(--kb-ink-faint); font-size: var(--kb-fs-eyebrow); margin: calc(var(--kb-space) * 0.85) 0 0; text-align: center; }

@media (max-width: 620px) {
  .kb-rb__card { gap: calc(var(--kb-space) * 0.85); grid-template-columns: auto 48px minmax(0, 1fr) auto; }
  .kb-rb__card .kb-rb__price { display: none; }
  /* Keep the recommended card design on mobile, just two per row. */
  .kb-rb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kb-rb__picker {
    border-radius: var(--kb-radius-card) var(--kb-radius-card) 0 0;
    bottom: 0;
    left: 0;
    max-height: 86vh;
    top: auto;
    transform: none;
    width: 100%;
  }
}

/* ============================================================
   My Account — login, register, and the post-login dashboard.
   WooCommerce ships default markup here (no template override),
   so everything is themed via these rules.
   ============================================================ */
.woocommerce-account .woocommerce {
  margin-inline: auto;
  max-width: var(--kb-contentw, 1100px);
}

.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  color: var(--kb-ink);
  font-size: var(--kb-fs-h3);
  margin: 0 0 calc(var(--kb-space) * 2);
}

/* Login / register / lost-password forms as centered cards. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--kb-ink) 7%, transparent);
  margin: 0 auto;
  max-width: 460px;
  padding: calc(var(--kb-space) * 3.5);
}

.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  margin: 0 auto calc(var(--kb-space) * 2);
  max-width: 460px;
}

/* Two-column login+register (when registration is enabled). */
.woocommerce-account .u-columns.col2-set {
  display: grid;
  gap: calc(var(--kb-space) * 3);
  margin: 0 auto;
  max-width: 960px;
}

@media (min-width: 768px) {
  .woocommerce-account .u-columns.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  padding: calc(var(--kb-space) * 3.5);
  width: 100%;
}

/* Inputs. */
.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  padding: calc(var(--kb-space) * 1.35) calc(var(--kb-space) * 1.5);
  width: 100%;
}

.woocommerce-account .woocommerce form .input-text:focus,
.woocommerce-account .woocommerce-Input:focus {
  border-color: var(--kb-accent);
  outline: none;
}

.woocommerce-account .woocommerce-form-row > label,
.woocommerce-account .woocommerce-form__label {
  color: var(--kb-ink);
  display: inline-block;
  font-weight: 600;
  margin-bottom: calc(var(--kb-space) * 0.6);
}

/* Buttons — theme colour (was default blue). */
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button {
  background: var(--kb-button) !important;
  border: 0 !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-button-ink) !important;
  cursor: pointer;
  font-weight: 700 !important;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2.75) !important;
  transition: background-color var(--kb-motion-fast) var(--kb-ease);
  width: auto;
}

.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover {
  background: var(--kb-button-hover) !important;
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
  display: block;
  margin-top: calc(var(--kb-space) * 1.5);
  width: 100%;
}

/* WooCommerce renders one password toggle per field; reserve a real icon target for it. */
.woocommerce-account .password-input {
  display: block;
  position: relative;
}
.woocommerce-account .password-input > input[type="password"],
.woocommerce-account .password-input > input[type="text"] {
  padding-right: calc(var(--kb-space) * 5.5) !important;
}
.woocommerce-account .password-input > .show-password-input {
  align-items: center;
  background: var(--kb-surface-alt) !important;
  border: 1px solid var(--kb-line) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-ink) !important;
  display: inline-flex !important;
  height: 36px !important;
  justify-content: center;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  position: absolute !important;
  right: calc(var(--kb-space) * 0.5) !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 36px !important;
  z-index: 1;
}
.woocommerce-account .password-input > .show-password-input .kb-icon {
  height: var(--kb-icon);
  pointer-events: none;
  width: var(--kb-icon);
}
.woocommerce-account .password-input > .show-password-input:hover,
.woocommerce-account .password-input > .show-password-input:focus-visible {
  background: var(--kb-blush-tint) !important;
  color: var(--kb-accent) !important;
  transform: translateY(-50%);
}

/* Compact action buttons inside tables (e.g. order "View"). */
.woocommerce-account .shop_table .button,
.woocommerce-account .woocommerce-orders-table .button {
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.5) !important;
  white-space: nowrap;
}

/* The language switcher now uses custom markup (kb-language-switcher__trigger /
   __menu), not TranslatePress .trp-* DOM. Release the header instance from the
   legacy fixed-square + ::before-label rules so the new padded pill + slide-down
   menu apply. */
.kb-site-header .kb-language-switcher {
  height: auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.kb-site-header .kb-language-switcher::before { content: none !important; }

.kb-site-header .kb-language-switcher__menu { z-index: 200; }

/* Homepage brand row: SVG logos (official drop-ins or wordmark placeholders).
   Placeholders use currentColor; official color logos show grayscale, full
   colour on hover. */
.kb-brand-row a {
  border: 0;
  min-height: 0;
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1);
}

.kb-brand-row__logo {
  color: var(--kb-ink-soft);
  display: block;
  height: 30px;
  max-width: 150px;
  transition: color var(--kb-motion-fast) var(--kb-ease), opacity var(--kb-motion-fast) var(--kb-ease), filter var(--kb-motion-fast) var(--kb-ease);
  width: auto;
}

.kb-brand-row__logo:not(.kb-brand-row__logo--placeholder) { filter: grayscale(1); }

.kb-brand-row a:hover .kb-brand-row__logo,
.kb-brand-row a:focus-visible .kb-brand-row__logo {
  color: var(--kb-accent);
  filter: none;
  opacity: 1;
}

/* Header language switcher: circular flag matched to icon size, single-line
   order (flag · label · chevron), no legacy ::before label. */
.kb-site-header .kb-language-switcher::before { content: none !important; }

.kb-site-header .kb-language-switcher__flag {
  border-radius: 50% !important;
  flex: 0 0 auto;
  height: var(--kb-icon) !important;
  object-fit: cover !important;
  width: var(--kb-icon) !important;
}

.kb-site-header .kb-language-switcher__icon { order: 0; }
.kb-site-header .kb-language-switcher__label { order: 1; white-space: nowrap; }
.kb-site-header .kb-language-switcher__chevron { order: 2; }

/* ---- Category archive: hidden entry-header, suggestions, accordion filters ---- */
.screen-reader-text {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.kb-catalog__header--min { margin: 0 !important; }

/* Hide the parent-theme entry-header / hero on shop + category pages (the kb h1
   stays in the DOM, visually hidden, so the page keeps a single SEO heading). */
body.post-type-archive-product .hero-section,
body.post-type-archive-product .entry-header,
body.tax-product_cat .hero-section,
body.tax-product_cat .entry-header { display: none !important; }

.kb-catalog__suggestions { margin-bottom: calc(var(--kb-space) * 3); }
.kb-catalog__suggestions ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-catalog__suggestion {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: inline-block;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  padding: calc(var(--kb-space) * 0.9) calc(var(--kb-space) * 1.6);
  text-decoration: none;
  transition: background-color var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
  white-space: nowrap;
}

.kb-catalog__suggestion:hover,
.kb-catalog__suggestion:focus-visible { border-color: var(--kb-accent); color: var(--kb-accent); }
.kb-catalog__suggestion.is-active { background: var(--kb-button); border-color: var(--kb-button); color: var(--kb-button-ink); }

/* Filters: plain full-width accordion rows, thin dividers, +/- affordance. */
.kb-catalog-filter {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kb-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: visible;
  padding: 0 !important;
}
.kb-catalog-filter:first-of-type { border-top: 1px solid var(--kb-line) !important; }

.kb-catalog-filter__toggle {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--kb-ink) !important;
  display: flex !important;
  font-size: var(--kb-fs-body);
  font-weight: 700 !important;
  gap: var(--kb-space);
  justify-content: space-between !important;
  min-height: 0 !important;
  padding: calc(var(--kb-space) * 2) 0 !important;
  transform: none !important;
  width: 100%;
}
.kb-catalog-filter__toggle:hover,
.kb-catalog-filter__toggle:focus-visible { background: transparent !important; color: var(--kb-accent) !important; }

/* Chevron replaced with a +/- glyph. */
.kb-catalog-filter__toggle .kb-icon { display: none !important; }
.kb-catalog-filter__toggle::after {
  color: currentColor;
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.kb-catalog-filter__toggle[aria-expanded="true"]::after { content: "\2212"; }

.kb-catalog-filter__options[hidden] { display: none; }
.kb-catalog-filter__options { padding: 0 0 calc(var(--kb-space) * 2); }
.kb-catalog-filter__count { color: var(--kb-ink-faint); font-size: 0.75rem; margin-left: auto; padding-left: var(--kb-space); }
.kb-catalog-filter label.is-empty { cursor: default; opacity: 0.45; }
.kb-catalog-filter label.is-empty:hover { color: var(--kb-ink-soft); }

.kb-catalog-empty {
  align-items: center;
  background: var(--kb-surface);
  border: 1px dashed var(--kb-line);
  display: flex;
  flex-direction: column;
  gap: var(--kb-space);
  padding: calc(var(--kb-space) * 6) calc(var(--kb-space) * 3);
}
.kb-catalog-empty h2 { font-size: var(--kb-fs-h3); line-height: 1.3; margin: 0; max-width: 28ch; }
.kb-catalog-empty p { color: var(--kb-ink-soft); margin: 0 0 var(--kb-space); }

.kb-catalog__loading { opacity: 0.55; pointer-events: none; }

/* Desktop: no in-panel "Filters" header (that chrome is for the mobile sheet). */
@media (min-width: 1024px) {
  .kb-catalog__filter-header { display: none; }
}

/* Language menu item: flag + name always on one line. */
.kb-language-switcher__menu a { flex-wrap: nowrap !important; white-space: nowrap; }
.kb-language-switcher__menu a > span { white-space: nowrap; }
.kb-language-switcher__menu .kb-language-switcher__flag { flex: 0 0 auto; }

/* Enhanced sort-by dropdown. */
.kb-catalog__toolbar .woocommerce-ordering select.orderby,
.kb-catalog__toolbar select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--kb-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2333292B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right calc(var(--kb-space) * 1.75) center;
  background-repeat: no-repeat;
  background-size: 14px;
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  padding: 0 calc(var(--kb-space) * 4.5) 0 calc(var(--kb-space) * 2);
  transition: border-color var(--kb-motion-fast) var(--kb-ease);
}

.kb-catalog__toolbar .woocommerce-ordering select.orderby:hover,
.kb-catalog__toolbar select:hover { border-color: var(--kb-accent); }
.kb-catalog__toolbar .woocommerce-ordering select.orderby:focus-visible,
.kb-catalog__toolbar select:focus-visible { border-color: var(--kb-accent); outline: none; }

/* Force language menu item onto a single row (flag then name). */
.kb-language-switcher__menu a {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.kb-language-switcher__menu a > span { white-space: nowrap !important; }
.kb-language-switcher__menu a > .kb-language-switcher__flag { flex: 0 0 auto !important; }

/* ============================================================
   My Account (logged in) and the standalone wishlist, v2 (2026-10-27).
   One shell: card navigation with icons, shared page header, card content.
   New account features (rewards, referrals) add a menu item + icon in
   inc/account.php and a tile on the dashboard; no layout changes needed.
   ============================================================ */
.woocommerce-account.logged-in .woocommerce,
.kb-account-wishlist {
  display: block;
  margin-inline: auto;
  max-width: 1200px !important;
  width: min(1200px, calc(100% - (var(--kb-page-gutter) * 2)));
}

body:has(.kb-account-wishlist) .entry-header,
.woocommerce-account .entry-header { display: none; }

.kb-account-shell {
  align-items: start;
  display: grid;
  gap: calc(var(--kb-space) * 5);
  grid-template-columns: 264px minmax(0, 1fr);
}

.kb-account-sidebar { min-width: 0; }

/* Desktop: sidebar follows the scroll like the PDP gallery (sticky needs no clipping ancestor). */
@media (min-width: 981px) {
  html:has(.kb-account-shell),
  body:has(.kb-account-shell),
  body:has(.kb-account-shell) #main-container {
    overflow: visible !important;
  }

  .kb-account-sidebar {
    align-self: start;
    position: sticky;
    top: 15px;
  }
}

/* Navigation card */
.kb-account-nav {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: var(--kb-space);
  padding: calc(var(--kb-space) * 1.25);
}

.kb-account-nav__profile {
  align-items: center;
  border-bottom: 1px solid var(--kb-line);
  display: flex;
  gap: calc(var(--kb-space) * 1.25);
  min-width: 0;
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.5);
}

.kb-account-nav__profile > div { display: grid; gap: 2px; min-width: 0; }
.kb-account-nav__profile strong { color: var(--kb-ink); font-size: var(--kb-fs-body); font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-account-nav__profile span:not(.kb-account-nav__avatar) { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kb-account-nav__avatar {
  align-items: center;
  background: var(--kb-ink);
  border-radius: 50%;
  color: var(--kb-blush-tint);
  display: inline-flex;
  flex: 0 0 46px;
  font-size: var(--kb-fs-meta);
  font-weight: 750;
  height: 46px;
  justify-content: center;
  letter-spacing: 0.04em;
  width: 46px;
}

.kb-account-nav__list {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-account-nav__item { margin: 0; }

.kb-account-nav__item a {
  align-items: center;
  border-radius: calc(var(--kb-radius) - 4px);
  color: var(--kb-ink) !important;
  display: flex;
  font-size: var(--kb-fs-body);
  font-weight: 600;
  gap: calc(var(--kb-space) * 1.25);
  min-height: 46px;
  padding: 0 calc(var(--kb-space) * 1.25);
  position: relative;
  text-decoration: none !important;
  transition: background-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}

.kb-account-nav__item a .kb-icon { color: var(--kb-ink-soft); flex: 0 0 auto; height: var(--kb-icon-sm); width: var(--kb-icon-sm); }

.kb-account-nav__item a:hover,
.kb-account-nav__item a:focus-visible { background: var(--kb-surface-alt); }

.kb-account-nav__item.is-active a {
  background: var(--kb-ink);
  color: var(--kb-surface) !important;
  font-weight: 700;
}

.kb-account-nav__item.is-active a::before {
  background: var(--kb-button);
  border-radius: 0 3px 3px 0;
  content: '';
  height: 22px;
  left: calc(var(--kb-space) * -1.25);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
}

.kb-account-nav__item.is-active a .kb-icon { color: var(--kb-blush-tint); }

.kb-account-nav__item--customer-logout {
  border-top: 1px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 0.75);
  padding-top: calc(var(--kb-space) * 0.75);
}

.kb-account-nav__item--customer-logout a { color: var(--kb-ink-soft) !important; }

/* Content column and shared header */
.woocommerce-MyAccount-content.kb-account-content,
.kb-account-content {
  background: transparent;
  border: 0;
  border-radius: 0;
  min-width: 0;
  padding: 0;
}

.kb-account-content p { color: var(--kb-ink-soft); }

.kb-account-head {
  border-bottom: 1px solid var(--kb-line);
  margin-bottom: calc(var(--kb-space) * 3);
  padding-bottom: calc(var(--kb-space) * 2.5);
}

.kb-account-head .kb-eyebrow { margin: 0 0 calc(var(--kb-space) * 0.75); }
.kb-account-head h1,
.kb-account-hero h1 { color: var(--kb-ink); font-size: var(--kb-fs-h2); line-height: 1.15; margin: 0; }

.kb-account-head__back {
  align-items: center;
  color: var(--kb-ink-soft) !important;
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.4);
  margin: 0 0 calc(var(--kb-space) * 1.25) calc(var(--kb-space) * -0.4);
  min-height: 36px;
  text-decoration: none !important;
}

.kb-account-head__back:hover,
.kb-account-head__back:focus-visible { color: var(--kb-accent) !important; }

/* Dashboard: dark ink hero with Yuna standing in its right side, her head above the card. */
.kb-account-hero {
  background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--kb-surface) 14%, var(--kb-ink)) 0%, var(--kb-ink) 58%);
  border-radius: var(--kb-radius-card);
  color: var(--kb-surface);
  isolation: isolate;
  margin: calc(var(--kb-space) * 7) 0 calc(var(--kb-space) * 2);
  min-height: 236px;
  padding: calc(var(--kb-space) * 3.5) calc(var(--kb-space) * 4 + 236px) calc(var(--kb-space) * 3.5) calc(var(--kb-space) * 4);
  position: relative;
}

.kb-account-hero .kb-eyebrow { color: var(--kb-blush-tint) !important; margin: 0 0 calc(var(--kb-space) * 0.75); }
.kb-account-hero h1 { color: var(--kb-surface) !important; }
.kb-account-hero__lead { color: color-mix(in srgb, var(--kb-surface) 76%, var(--kb-ink)) !important; margin: calc(var(--kb-space) * 0.9) 0 0 !important; max-width: 46ch; }
.kb-account-hero .kb-button { margin-top: calc(var(--kb-space) * 2.25); min-height: 46px; }

/* Inside the dark heroes the accents are white with ink text, not rose (owner 2026-10-27). */
:is(.kb-account-hero, .kb-points-hero) .kb-button {
  background: var(--kb-surface) !important;
  border-color: var(--kb-surface) !important;
  color: var(--kb-ink) !important;
}

:is(.kb-account-hero, .kb-points-hero) .kb-button:hover,
:is(.kb-account-hero, .kb-points-hero) .kb-button:focus-visible {
  background: var(--kb-blush-tint) !important;
  border-color: var(--kb-blush-tint) !important;
  color: var(--kb-ink) !important;
}

.kb-account-hero__art {
  bottom: 0;
  filter: drop-shadow(0 18px 28px color-mix(in srgb, var(--kb-ink) 55%, transparent));
  height: auto;
  pointer-events: none;
  position: absolute;
  right: calc(var(--kb-space) * 4);
  width: 236px;
  z-index: 1;
}

.kb-account-tiles {
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 calc(var(--kb-space) * 2);
  padding: 0;
}

.kb-account-tiles li { margin: 0; min-width: 0; }

.kb-account-tile {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink) !important;
  display: flex;
  gap: calc(var(--kb-space) * 1.5);
  height: 100%;
  padding: calc(var(--kb-space) * 2);
  text-decoration: none !important;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), box-shadow var(--kb-motion-base) var(--kb-ease), transform var(--kb-motion-base) var(--kb-ease);
}

.kb-account-tile:hover,
.kb-account-tile:focus-visible {
  border-color: var(--kb-ink);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--kb-ink) 7%, transparent);
  transform: translateY(-2px);
}

.kb-account-tile__icon {
  align-items: center;
  background: var(--kb-ink);
  border-radius: 50%;
  color: var(--kb-blush-tint);
  display: inline-flex;
  flex: 0 0 46px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.kb-account-tile__body { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.kb-account-tile__label { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); }
.kb-account-tile strong { color: var(--kb-ink); font-size: var(--kb-fs-body); font-weight: 700; line-height: 1.35; }
.kb-account-tile > .kb-icon--sm { color: var(--kb-ink-faint); flex: 0 0 auto; }
.kb-account-tile:hover > .kb-icon--sm { color: var(--kb-ink); }

.kb-account-panel {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  margin-bottom: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 2.5);
}

.kb-account-panel__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space) calc(var(--kb-space) * 2);
  justify-content: space-between;
  margin-bottom: calc(var(--kb-space) * 2);
}

.woocommerce-account .kb-account-panel__head h2 { color: var(--kb-ink); font-size: var(--kb-fs-lead); font-weight: 700; margin: 0; }

.kb-account-panel__head a {
  align-items: center;
  color: var(--kb-accent) !important;
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.35);
  min-height: 36px;
  text-decoration: none !important;
}

.kb-account-order {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
}

.kb-account-order__thumbs { align-items: center; display: flex; padding-left: 10px; }

.kb-account-order__thumbs > span {
  align-items: center;
  background: var(--kb-surface-alt);
  border: 2px solid var(--kb-surface);
  border-radius: 12px;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  margin-left: -10px;
  overflow: hidden;
  width: 56px;
}

.kb-account-order__thumbs img { height: 100%; object-fit: cover; width: 100%; }
.kb-account-order__more { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); font-weight: 700; }
.kb-account-order__meta { display: grid; flex: 1 1 200px; gap: 2px; min-width: 0; }
.kb-account-order__meta strong { color: var(--kb-ink); font-size: var(--kb-fs-body); }
.kb-account-order__meta span { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); }
.kb-account-order .kb-button { min-height: 44px; white-space: nowrap; }

.kb-account-empty {
  align-items: center;
  background: var(--kb-surface-alt);
  border: 1px dashed var(--kb-line);
  border-radius: var(--kb-radius);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 2.5);
}

.kb-account-empty p { flex: 1 1 260px; margin: 0 !important; }

.kb-account-products {
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-account-products li { margin: 0; min-width: 0; }

.kb-account-products a {
  color: var(--kb-ink) !important;
  display: grid;
  gap: calc(var(--kb-space) * 0.6);
  text-decoration: none !important;
}

.kb-account-products__media {
  aspect-ratio: 1;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius);
  display: block;
  overflow: hidden;
}

.kb-account-products__media img { height: 100%; object-fit: cover; transition: transform var(--kb-motion-base) var(--kb-ease); width: 100%; }
.kb-account-products a:hover img { transform: scale(1.04); }

.kb-account-products__name {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: var(--kb-fs-meta);
  font-weight: 650;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.4;
  overflow: hidden;
}

.kb-account-products a:hover .kb-account-products__name { color: var(--kb-accent); }
.kb-account-products__price { font-size: var(--kb-fs-meta); font-weight: 750; }
.kb-account-products__price del { color: var(--kb-ink-soft); font-weight: 500; }
.kb-account-products__price ins { color: var(--kb-sale-red); text-decoration: none; }

/* Order status pills: dashboard marks and the orders-table status cell share one look. */
.kb-status,
.woocommerce-orders-table__cell-order-status,
.kb-account-endpoint-view-order mark.order-status {
  --kb-pill-bg: var(--kb-blush-tint);
  --kb-pill-ink: var(--kb-accent);
  --kb-pill-dot: var(--kb-accent);
  align-items: center;
  background: var(--kb-pill-bg) !important;
  border-radius: var(--kb-radius-control);
  color: var(--kb-pill-ink) !important;
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.5);
  line-height: 1;
  min-height: 30px;
  padding: 0 calc(var(--kb-space) * 1.1);
  white-space: nowrap;
  width: fit-content;
}

.kb-status::before,
.woocommerce-orders-table__cell-order-status::before,
.kb-account-endpoint-view-order mark.order-status::before {
  background: var(--kb-pill-dot);
  border-radius: 50%;
  content: '';
  flex: 0 0 7px;
  height: 7px;
  width: 7px;
}

.kb-status--completed,
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
  --kb-pill-bg: color-mix(in srgb, var(--kb-success) 12%, var(--kb-surface));
  --kb-pill-ink: var(--kb-success);
  --kb-pill-dot: var(--kb-success);
}

.kb-status:is(.kb-status--on-hold, .kb-status--pending, .kb-status--checkout-draft),
.woocommerce-orders-table__row:is(.woocommerce-orders-table__row--status-on-hold, .woocommerce-orders-table__row--status-pending) .woocommerce-orders-table__cell-order-status {
  --kb-pill-bg: var(--kb-surface-alt);
  --kb-pill-ink: var(--kb-ink);
  --kb-pill-dot: var(--kb-ink-faint);
}

.kb-status:is(.kb-status--cancelled, .kb-status--failed, .kb-status--refunded),
.woocommerce-orders-table__row:is(.woocommerce-orders-table__row--status-cancelled, .woocommerce-orders-table__row--status-failed, .woocommerce-orders-table__row--status-refunded) .woocommerce-orders-table__cell-order-status {
  --kb-pill-bg: var(--kb-surface-alt);
  --kb-pill-ink: var(--kb-ink-soft);
  --kb-pill-dot: var(--kb-sale-red);
}

/* Orders: native WooCommerce table data shown as one card per order. */
.kb-account-content .woocommerce-orders-table,
.kb-account-content .woocommerce-orders-table tbody {
  background: transparent;
  border: 0;
  display: grid;
  gap: calc(var(--kb-space) * 1.25);
  margin: 0;
  width: 100%;
}

.kb-account-content .woocommerce-orders-table thead {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.kb-account-content .woocommerce-orders-table tbody tr {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: var(--kb-space) calc(var(--kb-space) * 2);
  grid-template-areas: "num date status total actions";
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto minmax(0, 1fr) auto;
  padding: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 2);
  transition: border-color var(--kb-motion-fast) var(--kb-ease);
}

.kb-account-content .woocommerce-orders-table tbody tr:hover { border-color: var(--kb-line-strong); }

.kb-account-content .woocommerce-orders-table :is(th, td) {
  background: transparent;
  border: 0;
  color: var(--kb-ink);
  display: block;
  font-size: var(--kb-fs-meta);
  min-width: 0;
  padding: 0;
  text-align: left;
}

.kb-account-content .woocommerce-orders-table :is(th, td)::before { content: none !important; }
.kb-account-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-status::before { content: '' !important; }
.kb-account-content .woocommerce-orders-table__cell-order-number { grid-area: num; }
.kb-account-content .woocommerce-orders-table__cell-order-number a { color: var(--kb-ink) !important; font-size: var(--kb-fs-body); font-weight: 750; text-decoration: none !important; }
.kb-account-content .woocommerce-orders-table__cell-order-number a:hover { color: var(--kb-accent) !important; }
.kb-account-content .woocommerce-orders-table__cell-order-date { color: var(--kb-ink-soft) !important; grid-area: date; }
.kb-account-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-status { display: inline-flex; grid-area: status; padding: 0 calc(var(--kb-space) * 1.1); }
.kb-account-content .woocommerce-orders-table__cell-order-total { grid-area: total; }
.kb-account-content .woocommerce-orders-table__cell-order-total .amount { font-weight: 750; }

.kb-account-content .woocommerce-orders-table__cell-order-actions {
  display: flex !important;
  gap: var(--kb-space);
  grid-area: actions;
  justify-content: flex-end;
}

.woocommerce-account .kb-account-content .woocommerce-orders-table .button {
  margin: 0 !important;
  min-height: 40px;
  width: auto;
  padding: calc(var(--kb-space) * 0.6) calc(var(--kb-space) * 1.75) !important;
}

.woocommerce-account .kb-account-content .woocommerce-orders-table .button.view {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-line-strong) !important;
  color: var(--kb-ink) !important;
}

.woocommerce-account .kb-account-content .woocommerce-orders-table .button.view:hover,
.woocommerce-account .kb-account-content .woocommerce-orders-table .button.view:focus-visible {
  background: var(--kb-blush-tint) !important;
  border-color: var(--kb-accent) !important;
  color: var(--kb-accent) !important;
}

.kb-account-content .woocommerce-pagination { display: flex; gap: var(--kb-space); justify-content: center; margin-top: calc(var(--kb-space) * 2.5); }

/* Empty states printed by WooCommerce and TI Wishlist. */
.kb-account-content .woocommerce-info,
.kb-account-wishlist .cart-empty {
  align-items: center;
  background: var(--kb-surface-alt) !important;
  border: 1px dashed var(--kb-line) !important;
  border-radius: var(--kb-radius-card) !important;
  color: var(--kb-ink) !important;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 1.5);
  justify-content: space-between;
  margin: 0 0 calc(var(--kb-space) * 2) !important;
  padding: calc(var(--kb-space) * 2.5) !important;
}

.kb-account-content .woocommerce-info::before,
.kb-account-wishlist .cart-empty::before { content: none !important; }
.kb-account-content .woocommerce-info .button { margin: 0 !important; order: 2; }

/* View order */
.kb-account-endpoint-view-order .kb-account-content > p:first-of-type {
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius);
  color: var(--kb-ink-soft);
  line-height: 2;
  margin: 0 0 calc(var(--kb-space) * 2.5);
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
}

.kb-account-endpoint-view-order .kb-account-content > p:first-of-type mark:not(.order-status) { background: transparent; color: var(--kb-ink); font-weight: 700; }

.kb-account-content :is(.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-OrderUpdates) {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  margin: 0 0 calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 2.5);
}

.woocommerce-account .kb-account-content :is(.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2) {
  font-size: var(--kb-fs-lead);
  font-weight: 700;
  margin: 0 0 calc(var(--kb-space) * 1.5);
}

.kb-account-content .order_details {
  border: 0 !important;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0;
  width: 100%;
}

.kb-account-content .order_details :is(th, td) {
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--kb-line);
  color: var(--kb-ink);
  padding: calc(var(--kb-space) * 1.25) 0;
  text-align: left;
  vertical-align: top;
}

.kb-account-content .order_details thead th { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); font-weight: 700; padding-top: 0; }
.kb-account-content .order_details :is(td.product-total, thead th.product-total, tfoot td) { text-align: right; }
.kb-account-content .order_details td.product-name a { color: var(--kb-ink) !important; font-weight: 650; text-decoration: none; }
.kb-account-content .order_details td.product-name a:hover { color: var(--kb-accent) !important; }
.kb-account-content .order_details .product-quantity { color: var(--kb-ink-soft); font-weight: 600; }
.kb-account-content .order_details tfoot th { color: var(--kb-ink-soft); font-weight: 600; }
.kb-account-content .order_details tfoot tr:last-child :is(th, td) { border-bottom: 0; color: var(--kb-ink); font-size: var(--kb-fs-lead); font-weight: 750; padding-bottom: 0; }
.kb-account-content .order-again { margin: calc(var(--kb-space) * 2) 0 0; }

.kb-account-content .woocommerce-customer-details .col2-set {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}

.woocommerce-account .kb-account-content .woocommerce-customer-details :is(.col-1, .col-2) {
  background: var(--kb-surface-alt);
  border: 0;
  border-radius: var(--kb-radius);
  float: none;
  padding: calc(var(--kb-space) * 2);
  width: auto;
}

.kb-account-content address {
  border: 0 !important;
  color: var(--kb-ink);
  font-style: normal;
  line-height: 1.7;
  padding: 0 !important;
}

.kb-account-content .woocommerce-OrderUpdates { list-style: none; }
.kb-account-content .woocommerce-OrderUpdate-meta { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); margin: 0; }

/* Addresses */
.kb-account-content .woocommerce-Addresses {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: calc(var(--kb-space) * 2) 0 0;
  max-width: none;
}

.woocommerce-account .kb-account-content .woocommerce-Address {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  float: none;
  padding: calc(var(--kb-space) * 2.5);
  width: auto;
}

.kb-account-content .woocommerce-Address-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space) calc(var(--kb-space) * 1.5);
  justify-content: space-between;
  margin-bottom: calc(var(--kb-space) * 1.5);
}

.kb-account-content .woocommerce-Address-title::before,
.kb-account-content .woocommerce-Address-title::after { content: none; }
.woocommerce-account .kb-account-content .woocommerce-Address-title h2 { font-size: var(--kb-fs-lead); font-weight: 700; margin: 0; }

.kb-account-content .woocommerce-Address-title .edit {
  align-items: center;
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink) !important;
  display: inline-flex;
  float: none;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.5);
  min-height: 38px;
  padding: 0 calc(var(--kb-space) * 1.5);
  text-decoration: none !important;
}

.kb-account-content .woocommerce-Address-title .edit::before {
  background-color: currentColor;
  content: '';
  height: 15px;
  /* Icon files have no xmlns, so a CSS mask needs this inline copy of pencil.svg. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 15px;
}

.kb-account-content .woocommerce-Address-title .edit:hover,
.kb-account-content .woocommerce-Address-title .edit:focus-visible { background: var(--kb-blush-tint); border-color: var(--kb-accent); color: var(--kb-accent) !important; }

/* Address and profile forms: one card, two-column field grid. */
.kb-account-content .woocommerce-address-fields,
.kb-account-content .woocommerce-EditAccountForm {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  padding: calc(var(--kb-space) * 3);
}

.kb-account-content form > h2 { font-size: var(--kb-fs-lead) !important; font-weight: 700; margin: 0 0 calc(var(--kb-space) * 2) !important; }

.kb-account-content .woocommerce-address-fields__field-wrapper,
.kb-account-content .woocommerce-EditAccountForm,
.kb-account-content .woocommerce-EditAccountForm fieldset {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-account-content :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-EditAccountForm fieldset) > * { grid-column: 1 / -1; }
.kb-account-content :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm) > :is(.form-row-first, .form-row-last) { grid-column: auto; }
.kb-account-content .woocommerce-EditAccountForm > .clear { display: none; }

.kb-account-content :is(.woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row {
  float: none;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.kb-account-content .woocommerce-EditAccountForm fieldset {
  border: 0;
  border-top: 1px solid var(--kb-line);
  margin: calc(var(--kb-space) * 0.5) 0 0;
  padding: calc(var(--kb-space) * 2.5) 0 0;
}

.kb-account-content .woocommerce-EditAccountForm legend {
  color: var(--kb-ink);
  float: left;
  font-size: var(--kb-fs-lead);
  font-weight: 700;
  margin: 0 0 calc(var(--kb-space) * 0.5);
  padding: 0;
  width: 100%;
}

.kb-account-content #account_display_name_description { color: var(--kb-ink-soft); display: block; font-size: var(--kb-fs-meta); margin-top: calc(var(--kb-space) * 0.6); }
.kb-account-content #account_display_name_description em { font-style: normal; }
.kb-account-content .woocommerce-address-fields > p:last-child,
.kb-account-content .woocommerce-EditAccountForm > p:last-of-type { margin: calc(var(--kb-space) * 0.5) 0 0; }
.kb-account-content .woocommerce-address-fields > p:last-child { margin-top: calc(var(--kb-space) * 2.5); }

/* Loyalty points (inc/loyalty.php): dashboard tile and the rewards endpoint. */
.kb-account-tiles .kb-account-tiles__wide { grid-column: 1 / -1; }
.kb-account-tiles__wide .kb-account-tile__icon { background: var(--kb-button); color: var(--kb-button-ink); }

.kb-points-hero {
  background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--kb-surface) 14%, var(--kb-ink)) 0%, var(--kb-ink) 60%);
  border: 0;
  color: var(--kb-surface);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: calc(var(--kb-space) * 1.75);
  margin-bottom: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 3);
}

.kb-points-hero__balance { align-items: center; display: flex; gap: calc(var(--kb-space) * 2); }
.kb-points-hero__balance .kb-account-tile__icon { flex-basis: 60px; height: 60px; width: 60px; }
.kb-points-hero__balance > div { display: grid; gap: 2px; }
.kb-points-hero__balance strong { color: var(--kb-surface); font-size: var(--kb-fs-h2); line-height: 1.15; }
.kb-points-hero .kb-account-tile__icon { background: var(--kb-surface); color: var(--kb-ink); }
.kb-points-hero__balance span:not(.kb-account-tile__icon),
.kb-points-hero__label { color: color-mix(in srgb, var(--kb-surface) 76%, var(--kb-ink)); font-size: var(--kb-fs-meta); }
.kb-points-hero :is(.kb-points-progress p, .kb-points-hero__soon) { color: color-mix(in srgb, var(--kb-surface) 76%, var(--kb-ink)) !important; }

.kb-points-progress { display: grid; gap: calc(var(--kb-space) * 0.75); }
.kb-points-progress p,
.kb-points-hero__pending,
.kb-points-hero__soon,
.kb-points-note { font-size: var(--kb-fs-meta); margin: 0 !important; }
.kb-points-hero__pending { color: var(--kb-surface) !important; font-weight: 650; }

.kb-points-progress__bar {
  background: color-mix(in srgb, var(--kb-surface) 16%, var(--kb-ink));
  border: 0;
  border-radius: var(--kb-radius-control);
  display: block;
  height: 12px;
  overflow: hidden;
}

.kb-points-progress__bar > span { background: var(--kb-surface); border-radius: inherit; display: block; height: 100%; min-width: 6px; }

.kb-points-steps {
  counter-reset: none;
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 calc(var(--kb-space) * 1.75);
  padding: 0;
}

.kb-points-steps li {
  align-content: start;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius);
  display: grid;
  gap: calc(var(--kb-space) * 0.75);
  margin: 0;
  padding: calc(var(--kb-space) * 2);
}

.kb-points-steps strong { color: var(--kb-ink); font-size: var(--kb-fs-body); }
.kb-points-steps p { font-size: var(--kb-fs-meta); line-height: 1.55; margin: 0 !important; }

.kb-points-history { display: grid; list-style: none; margin: 0; padding: 0; }

.kb-points-history li {
  align-items: center;
  border-bottom: 1px solid var(--kb-line);
  display: flex;
  gap: calc(var(--kb-space) * 2);
  justify-content: space-between;
  margin: 0;
  padding: calc(var(--kb-space) * 1.25) 0;
}

.kb-points-history li:first-child { padding-top: 0; }
.kb-points-history li:last-child { border-bottom: 0; padding-bottom: 0; }
.kb-points-history li > div { display: grid; gap: 2px; min-width: 0; }
.kb-points-history strong { color: var(--kb-ink); font-size: var(--kb-fs-body); font-weight: 650; }
.kb-points-history strong a { color: var(--kb-ink) !important; text-decoration: none !important; }
.kb-points-history strong a:hover { color: var(--kb-accent) !important; }
.kb-points-history li > div span { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); }
.kb-points-history__delta { color: var(--kb-success); flex: 0 0 auto; font-size: var(--kb-fs-body); font-weight: 750; white-space: nowrap; }
.kb-points-history__delta.is-negative { color: var(--kb-ink-soft); }

.kb-points-hero__cta { justify-self: start; }

/* Cart totals / checkout review: the one-click points box. */
.kb-points-redeem {
  align-items: center;
  background: var(--kb-blush-tint);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  color: var(--kb-accent);
  display: flex;
  gap: calc(var(--kb-space) * 1.25);
  margin: 0 0 calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 1.75);
}

.kb-points-redeem > .kb-icon { flex: 0 0 auto; height: var(--kb-icon); width: var(--kb-icon); }
.kb-points-redeem__body { align-items: center; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: var(--kb-space) calc(var(--kb-space) * 1.5); justify-content: space-between; }
.kb-points-redeem p { color: var(--kb-ink) !important; flex: 1 1 220px; font-size: var(--kb-fs-meta); line-height: 1.5; margin: 0 !important; }
.kb-points-redeem .kb-button { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }

/* Rewards page: birthday and referral cards. */
.kb-reward-card { align-items: flex-start; display: flex; gap: calc(var(--kb-space) * 2); }
.kb-reward-card__body { display: grid; flex: 1 1 auto; gap: calc(var(--kb-space) * 1); justify-items: start; min-width: 0; }
.woocommerce-account .kb-reward-card h2 { color: var(--kb-ink); font-size: var(--kb-fs-lead); font-weight: 700; margin: 0; }
.kb-reward-card p { margin: 0 !important; }

.kb-reward-card__code {
  background: var(--kb-surface-alt);
  border: 1px dashed var(--kb-ink-faint);
  border-radius: 10px;
  color: var(--kb-ink) !important;
  font-weight: 750;
  letter-spacing: 0.08em;
  padding: calc(var(--kb-space) * 0.6) calc(var(--kb-space) * 1.25);
}

.kb-referral-share { align-items: center; display: flex; flex-wrap: wrap; gap: calc(var(--kb-space) * 1.25); }
.kb-referral-share .kb-button { gap: calc(var(--kb-space) * 0.5); }
.kb-reward-codes { display: grid; gap: var(--kb-space); list-style: none; margin: 0; padding: 0; width: 100%; }
.kb-reward-codes li { background: var(--kb-surface-alt); border-radius: 10px; display: grid; gap: 2px; margin: 0; padding: var(--kb-space) calc(var(--kb-space) * 1.25); }
.kb-reward-codes strong { color: var(--kb-ink); letter-spacing: 0.06em; }
.kb-reward-codes span { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); }

/* Profile: birthday (day + month only). */
.kb-birthday-field__inputs { display: grid; gap: var(--kb-space); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.kb-birthday-field__hint { color: var(--kb-ink-soft); display: block; font-size: var(--kb-fs-meta); margin-top: calc(var(--kb-space) * 0.6); }

/* Product page: points this product earns. */
.kb-pdp__points { align-items: center; color: var(--kb-ink); display: flex; font-size: var(--kb-fs-meta); gap: calc(var(--kb-space) * 0.6); margin: calc(var(--kb-space) * 0.75) 0 0; }
.kb-pdp__points .kb-icon { color: var(--kb-accent); flex: 0 0 auto; }
.kb-pdp__points a { color: var(--kb-accent) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }

/* Wishlist (TI Wishlist owns the data and actions). Its public.min.css sizes these cells
   (thumbnail min-width 100px, action 135px/60px, remove padding, phone td width 100% !important),
   so every rule here is prefixed with .tinv-wishlist to out-rank it. */
.kb-account-wishlist .tinv-wishlist { margin: 0; }
.kb-account-wishlist .tinv-wishlist :is(.tinv-header, .social-buttons) { display: none; }

.kb-account-wishlist .tinv-wishlist table.tinvwl-table-manage-list,
.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list tbody { display: grid; gap: calc(var(--kb-space) * 1.25); width: 100%; }

.kb-account-wishlist .tinv-wishlist table.tinvwl-table-manage-list {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
}

.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list :is(thead, tfoot) { display: none !important; }

.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list tr.wishlist_item {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: calc(var(--kb-space) * 0.4) calc(var(--kb-space) * 2);
  grid-template-columns: 80px minmax(0, 1fr) auto 44px;
  margin: 0;
  padding: calc(var(--kb-space) * 1.5);
}

.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list tr.wishlist_item > td {
  background: transparent;
  border: 0;
  display: block;
  max-width: none;
  min-width: 0;
  padding: 0;
  text-align: left;
  vertical-align: middle;
  width: auto !important;
}

.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list tr.wishlist_item > :is(td.product-cb, td.product-date, td.product-stock) { display: none; }
.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list td.product-thumbnail { grid-column: 1; grid-row: 1 / span 2; }
.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list td.product-name { align-self: end; grid-column: 2; grid-row: 1; line-height: 1.4; }
.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list td.product-price { align-self: start; grid-column: 2; grid-row: 2; }
.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list td.product-action { grid-column: 3; grid-row: 1 / span 2; }
.kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list td.product-remove { grid-column: 4; grid-row: 1 / span 2; }

.kb-account-wishlist .tinv-wishlist .product-thumbnail a {
  aspect-ratio: 1;
  background: var(--kb-surface-alt);
  border-radius: 12px;
  display: block;
  overflow: hidden;
}

.kb-account-wishlist .tinv-wishlist .product-thumbnail img { display: block; height: 100%; margin: 0 !important; max-width: none; object-fit: cover; width: 100% !important; }

.kb-account-wishlist .tinv-wishlist .product-name a {
  color: var(--kb-ink) !important;
  font-size: var(--kb-fs-body);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none !important;
}

.kb-account-wishlist .tinv-wishlist .product-name a:hover,
.kb-account-wishlist .tinv-wishlist .product-name a:focus-visible { color: var(--kb-accent) !important; }
.kb-account-wishlist .tinv-wishlist .product-name .variation { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); margin: 2px 0 0; }
.kb-account-wishlist .tinv-wishlist .product-price { color: var(--kb-ink); font-size: var(--kb-fs-body); font-weight: 750; white-space: nowrap; }
.kb-account-wishlist .tinv-wishlist .product-price del { color: var(--kb-ink-soft); font-weight: 500; margin-right: calc(var(--kb-space) * 0.5); }
.kb-account-wishlist .tinv-wishlist .product-price ins { color: var(--kb-sale-red); text-decoration: none; }

.kb-account-wishlist .tinv-wishlist .product-remove button {
  align-items: center;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 50%;
  color: var(--kb-ink-soft) !important;
  display: inline-flex;
  font-size: 0;
  height: 44px;
  justify-content: center;
  margin: 0;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  width: 44px;
}

.kb-account-wishlist .tinv-wishlist .product-remove button .kb-icon { display: block; height: var(--kb-icon-sm); width: var(--kb-icon-sm); }
.kb-account-wishlist .tinv-wishlist .product-remove button:hover,
.kb-account-wishlist .tinv-wishlist .product-remove button:focus-visible { background: var(--kb-blush-tint) !important; color: var(--kb-accent) !important; }

.kb-account-wishlist .tinv-wishlist .product-action .button,
.kb-account-wishlist .tinv-wishlist .return-to-shop .button {
  align-items: center;
  background: var(--kb-button) !important;
  border: 1px solid var(--kb-button) !important;
  border-radius: var(--kb-radius-control) !important;
  box-shadow: none !important;
  color: var(--kb-button-ink) !important;
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 750;
  gap: calc(var(--kb-space) * 0.65);
  justify-content: center;
  margin: 0;
  min-height: 44px;
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.75);
  text-decoration: none;
  white-space: nowrap;
  width: auto;
}

.kb-account-wishlist .tinv-wishlist .product-action .button :is(.kb-icon, span) { display: inline-block; }
.kb-account-wishlist .tinv-wishlist .product-action .button .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }
.kb-account-wishlist .tinv-wishlist .product-action .button:hover,
.kb-account-wishlist .tinv-wishlist .product-action .button:focus-visible,
.kb-account-wishlist .tinv-wishlist .return-to-shop .button:hover { background: var(--kb-button-hover) !important; border-color: var(--kb-button-hover) !important; }

/* TI Wishlist owns its button markup; use the same local basket asset on drawer removal. */
.kb-cart-drawer__remove .kb-icon--x { display: none; }
.kb-cart-drawer__remove::after {
  background-color: currentColor;
  content: '';
  display: block;
  height: var(--kb-icon-sm);
  mask: url('../icons/trash-2.svg') center / contain no-repeat;
  -webkit-mask: url('../icons/trash-2.svg') center / contain no-repeat;
  width: var(--kb-icon-sm);
}

@media (max-width: 1100px) {
  .kb-account-shell { gap: calc(var(--kb-space) * 3.5); grid-template-columns: 236px minmax(0, 1fr); }
  .kb-account-content .woocommerce-orders-table tbody tr {
    grid-template-areas: "num status actions" "date total actions";
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  }
  .kb-account-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-status { justify-self: start; }
}

/* Tablet and phone: navigation becomes a swipeable row of chips above the content. */
@media (max-width: 980px) {
  .woocommerce-account.logged-in .woocommerce,
  .kb-account-wishlist { width: calc(100% - (var(--kb-space) * 4)); }
  .woocommerce-account.logged-in .ct-container-full,
  body:has(.kb-account-wishlist) .ct-container-full { padding-top: calc(var(--kb-space) * 2.5); }
  .kb-account-shell { gap: calc(var(--kb-space) * 2.5); grid-template-columns: minmax(0, 1fr); }
  .kb-account-nav { background: transparent; border: 0; padding: 0; }
  .kb-account-nav__profile { display: none; }

  .kb-account-nav__list {
    display: flex;
    gap: var(--kb-space);
    margin-inline: calc(var(--kb-space) * -2);
    overflow-x: auto;
    padding: 2px calc(var(--kb-space) * 2) calc(var(--kb-space) * 0.75);
    scroll-padding-inline: calc(var(--kb-space) * 2);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .kb-account-nav__list::-webkit-scrollbar { display: none; }
  .kb-account-nav__item { flex: 0 0 auto; scroll-snap-align: start; }
  .kb-account-nav__item a {
    background: var(--kb-surface);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-control);
    font-size: var(--kb-fs-meta);
    gap: calc(var(--kb-space) * 0.75);
    min-height: 44px;
    padding: 0 calc(var(--kb-space) * 1.6);
    white-space: nowrap;
  }
  .kb-account-nav__item.is-active a { border-color: var(--kb-ink); }
  .kb-account-nav__item.is-active a::before { content: none; }
  .kb-account-nav__item--customer-logout { border: 0; margin: 0; padding: 0; }
  .kb-account-head { margin-bottom: calc(var(--kb-space) * 2.5); padding-bottom: calc(var(--kb-space) * 2); }
}

@media (max-width: 640px) {
  .kb-account-hero { margin-top: calc(var(--kb-space) * 9); min-height: 0; padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 2.5 + 108px) calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 2.5); }
  /* Phones: Yuna stands at the top right, head above the card, and fades out above the button row. */
  .kb-account-hero__art { -webkit-mask-image: linear-gradient(to bottom, var(--kb-ink) 72%, transparent); bottom: auto; mask-image: linear-gradient(to bottom, var(--kb-ink) 72%, transparent); filter: none; right: calc(var(--kb-space) * 1.25); top: calc(var(--kb-space) * -8); width: 128px; }
  .kb-account-hero .kb-button { width: auto; }
  .kb-reward-card { flex-direction: column; }
  .kb-account-tiles { gap: var(--kb-space); grid-template-columns: minmax(0, 1fr); }
  .kb-account-tile { padding: calc(var(--kb-space) * 1.5); }
  .kb-account-panel,
  .kb-account-content :is(.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-OrderUpdates, .woocommerce-address-fields, .woocommerce-EditAccountForm) { padding: calc(var(--kb-space) * 2); }
  .kb-account-order__thumbs { flex: 1 1 100%; }
  .kb-account-order .kb-button { width: 100%; }
  .kb-account-empty .kb-button { width: 100%; }
  .kb-account-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-points-hero { padding: calc(var(--kb-space) * 2.25); }
  .kb-points-steps { grid-template-columns: minmax(0, 1fr); }
  .kb-account-content .woocommerce-orders-table tbody tr {
    grid-template-areas: "num status" "date total" "actions actions";
    grid-template-columns: minmax(0, 1fr) auto;
    padding: calc(var(--kb-space) * 1.75);
  }
  .kb-account-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-status { justify-self: end; }
  .kb-account-content .woocommerce-orders-table__cell-order-total { text-align: right !important; }
  .kb-account-content .woocommerce-orders-table__cell-order-actions { justify-content: stretch; padding-top: calc(var(--kb-space) * 0.5) !important; }
  .woocommerce-account .kb-account-content .woocommerce-orders-table .button { flex: 1 1 auto; min-height: 44px; }
  .kb-account-content :is(.woocommerce-Addresses, .woocommerce-customer-details .col2-set, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-EditAccountForm fieldset) { grid-template-columns: minmax(0, 1fr); }
  .kb-account-content :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm) > :is(.form-row-first, .form-row-last) { grid-column: 1 / -1; }
  .kb-account-content :is(.woocommerce-address-fields, .woocommerce-EditAccountForm) .button { width: 100%; }
  .kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list tr.wishlist_item {
    gap: calc(var(--kb-space) * 0.4) calc(var(--kb-space) * 1.25);
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    padding: calc(var(--kb-space) * 1.25);
  }
  .kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list td.product-remove { grid-column: 3; grid-row: 1 / span 2; }
  .kb-account-wishlist .tinv-wishlist .tinvwl-table-manage-list td.product-action { grid-column: 1 / -1; grid-row: 3; padding-top: calc(var(--kb-space) * 0.75); }
  .kb-account-wishlist .tinv-wishlist .product-action .button { width: 100%; }
  .kb-account-wishlist .tinv-wishlist .product-name a { font-size: var(--kb-fs-meta); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-account-nav__item a,
  .kb-account-tile,
  .kb-account-products__media img,
  .kb-account-content .woocommerce-orders-table tbody tr { transition-duration: 0s; }
  .kb-account-tile:hover,
  .kb-account-tile:focus-visible { transform: none; }
  .kb-account-products a:hover img { transform: none; }
}

/* Account access: native WooCommerce forms in a routine-builder-style dialog. */
html.kb-account-overlay-open { overflow: hidden; }

.kb-account-overlay {
  align-items: center;
  background: color-mix(in srgb, var(--kb-ink) 34%, transparent);
  display: grid;
  inset: 0;
  justify-items: center;
  opacity: 0;
  padding: calc(var(--kb-space) * 3);
  position: fixed;
  transition: opacity var(--kb-motion-base) var(--kb-ease), visibility 0s var(--kb-motion-base);
  visibility: hidden;
  z-index: 1300;
}

.kb-account-overlay[hidden] { display: none; }

.kb-account-overlay.is-open {
  opacity: 1;
  transition: opacity var(--kb-motion-base) var(--kb-ease), visibility 0s;
  visibility: visible;
}

.kb-account-overlay__backdrop {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  inset: 0;
  min-height: 0 !important;
  padding: 0 !important;
  position: absolute;
  width: 100%;
}

.kb-account-overlay__panel {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: calc(var(--kb-radius-card) + 4px);
  box-shadow: 0 32px 80px color-mix(in srgb, var(--kb-ink) 26%, transparent), 0 6px 18px color-mix(in srgb, var(--kb-ink) 9%, transparent);
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 740px);
  max-height: min(88dvh, 740px);
  max-width: 32rem;
  opacity: 0;
  overflow: hidden;
  position: relative;
  transform: translateY(calc(var(--kb-space) * 1.5)) scale(0.98);
  transition: opacity var(--kb-motion-base) var(--kb-ease), transform var(--kb-motion-base) var(--kb-ease);
  width: min(100%, 32rem);
  z-index: 1;
}

.kb-account-overlay.is-open .kb-account-overlay__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Head and tabs stay pinned; only the form body scrolls, so Close is always reachable. */
.kb-account-overlay__head {
  align-items: start;
  background: var(--kb-surface);
  border-bottom: 1px solid var(--kb-line);
  display: flex;
  flex: 0 0 auto;
  gap: calc(var(--kb-space) * 2);
  justify-content: space-between;
  padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 2);
}

.kb-account-overlay__head .kb-eyebrow { margin: 0 0 calc(var(--kb-space) * 0.65); }
.kb-account-overlay__head h2 { color: var(--kb-ink); font-size: var(--kb-fs-h2); line-height: 1.15; margin: 0; }

.kb-account-overlay__close {
  background: var(--kb-blush-tint) !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--kb-ink) !important;
  flex: 0 0 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  width: 44px;
}

.kb-account-overlay__close:hover,
.kb-account-overlay__close:focus-visible { background: var(--kb-accent) !important; color: var(--kb-accent-ink) !important; }

.kb-account-overlay__tabs {
  background: var(--kb-surface);
  border-bottom: 1px solid var(--kb-line);
  display: grid;
  flex: 0 0 auto;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding-inline: calc(var(--kb-space) * 2.75);
}

.kb-account-overlay__tabs button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--kb-ink-soft) !important;
  font: inherit;
  font-size: var(--kb-fs-body);
  font-weight: 750;
  min-height: 52px;
  padding: calc(var(--kb-space) * 1.25) var(--kb-space);
}

.kb-account-overlay__tabs button[aria-selected="true"] { border-bottom-color: var(--kb-accent) !important; color: var(--kb-ink) !important; }
.kb-account-overlay__tabs button:hover,
.kb-account-overlay__tabs button:focus-visible { color: var(--kb-accent) !important; }

.kb-account-overlay__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 2.75);
  -webkit-overflow-scrolling: touch;
}

.kb-account-modal__form { display: grid; gap: calc(var(--kb-space) * 1.5); }
.kb-account-modal__form .form-row { margin: 0 !important; padding: 0 !important; width: 100% !important; }
.kb-account-modal__form label { color: var(--kb-ink); display: block; font-size: var(--kb-fs-meta); font-weight: 750; margin-bottom: calc(var(--kb-space) * 0.65); }
.kb-account-modal__form :is(input[type="text"], input[type="email"], input[type="password"]) { background: var(--kb-surface-alt); border: 1px solid var(--kb-line); border-radius: var(--kb-radius-control); color: var(--kb-ink); font: inherit; font-size: var(--kb-fs-body); min-height: 48px; padding: calc(var(--kb-space) * 1.1) calc(var(--kb-space) * 1.5); width: 100%; }
.kb-account-modal__form :is(input[type="text"], input[type="email"], input[type="password"]):focus { border-color: var(--kb-accent); outline: 0; }
.kb-account-modal__form .kb-button { margin-top: calc(var(--kb-space) * 0.5); min-height: 48px; width: 100%; }

.kb-account-modal__password { display: block; position: relative; }
.kb-account-modal__password input { padding-right: calc(var(--kb-space) * 6.5) !important; }
.kb-account-modal__password button {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-line) !important;
  border-radius: 50% !important;
  color: var(--kb-ink) !important;
  height: 36px;
  min-height: 36px;
  min-width: 36px;
  padding: 0 !important;
  position: absolute;
  right: calc(var(--kb-space) * 0.75);
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
}
.kb-account-modal__password button:hover,
.kb-account-modal__password button:focus-visible { background: var(--kb-blush-tint) !important; color: var(--kb-accent) !important; transform: translateY(-50%); }
.kb-account-modal__password-hide { display: none; }
.kb-account-modal__password button[aria-pressed="true"] .kb-account-modal__password-show { display: none; }
.kb-account-modal__password button[aria-pressed="true"] .kb-account-modal__password-hide { display: inline-flex; }

.kb-account-modal__options { align-items: center; display: flex; flex-wrap: wrap; font-size: var(--kb-fs-meta); gap: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.25); justify-content: space-between; }
.kb-account-modal__options label { align-items: center; display: inline-flex; font-weight: 600; margin: 0; }
.kb-account-modal__options input { accent-color: var(--kb-accent); height: 1rem; margin: 0 calc(var(--kb-space) * 0.65) 0 0; width: 1rem; }
.kb-account-modal__options a { color: var(--kb-accent) !important; font-weight: 700; text-decoration: none; }
.kb-account-modal__options a:hover,
.kb-account-modal__options a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.kb-account-modal__hint,
.kb-account-modal__form .woocommerce-privacy-policy-text { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); line-height: var(--kb-lh-body); margin: 0; }
.kb-account-modal__form .woocommerce-privacy-policy-text a { color: var(--kb-accent) !important; }

/* One plugin-owned provider action, centered beneath each native account form. */
.kb-account-modal__social {
  display: grid;
  gap: var(--kb-space);
  margin-top: calc(var(--kb-space) * 2);
}
.kb-account-modal__divider {
  align-items: center;
  color: var(--kb-ink-soft);
  display: flex;
  font-size: var(--kb-fs-meta);
  gap: var(--kb-space);
}
.kb-account-modal__divider::before,
.kb-account-modal__divider::after { background: var(--kb-line); content: ''; flex: 1; height: 1px; }
.kb-account-modal__social .nsl-container {
  margin: calc(var(--kb-space) * 0.5) auto 0 !important;
  max-width: 340px;
  width: 100% !important;
}
.kb-account-modal__social .nsl-button {
  border-radius: var(--kb-radius-control) !important;
  min-height: 48px;
  width: 100% !important;
}

/* Coarse pointers need a 44px reveal control without it sitting on the value. */
@media (pointer: coarse) {
  .kb-account-modal__password input { padding-right: calc(var(--kb-space) * 7.5) !important; }
  .kb-account-modal__password button { height: 44px; min-height: 44px; min-width: 44px; width: 44px; }
}

@media (max-width: 640px) {
  .kb-account-overlay { align-items: end; padding: 0; }
  .kb-account-overlay__panel { border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 92vh; max-height: 92dvh; max-width: none; transform: translateY(100%); width: 100%; }
  .kb-account-overlay.is-open .kb-account-overlay__panel { transform: translateY(0); }
  .kb-account-overlay__head,
  .kb-account-overlay__body { padding-inline: calc(var(--kb-space) * 2); }
  .kb-account-overlay__tabs { padding-inline: calc(var(--kb-space) * 2); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-account-overlay,
  .kb-account-overlay__panel { transition-duration: 0s; }
}

/* Phone/tablet header logo: one size, 40px tall, at every width up to 980px (it was 53px
   from 400-767px, so it jumped 39% at 414px). It shrinks only when its grid cell is
   narrower than the logo (320px), so it never runs under the menu button. */
@media (max-width: 980px) {
  .kb-site-header__logo {
    align-self: center;
    height: 2.5rem;
    max-height: 2.5rem;
    max-width: 100%;
    min-width: 0;
    width: auto;
  }

  .kb-site-header__logo-image {
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
  }

  /* 44px tap area around the 40px header buttons and logo without changing their look or the row. */
  .kb-site-header .kb-header-icon,
  .kb-site-header .kb-menu-toggle,
  .kb-site-header .kb-site-header__logo {
    position: relative;
  }

  .kb-site-header .kb-header-icon::after,
  .kb-site-header .kb-menu-toggle::after,
  .kb-site-header .kb-site-header__logo::after {
    content: "";
    inset: -2px;
    position: absolute;
  }
}

/* Compact drawer rhythm: the progress strip deliberately reaches the panel edge. */
.kb-cart-drawer__content {
  padding-inline: 0;
}

.kb-cart-drawer__header,
.kb-cart-drawer__empty,
.kb-cart-drawer__scroll {
  padding-inline: calc(var(--kb-space) * 2);
}

.kb-cart-drawer__foot {
  padding-inline: calc(var(--kb-space) * 2);
}

.kb-cart-drawer__content .kb-free-ship {
  margin-inline: calc(var(--kb-space) * -2);
  width: calc(100% + (var(--kb-space) * 4));
}

.kb-cart-drawer__price.is-sale {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 0.5);
  justify-content: flex-end;
}

.kb-cart-drawer__price.is-sale del {
  color: var(--kb-ink-faint);
  font-size: var(--kb-fs-meta);
  font-weight: 550;
}

.kb-cart-drawer__sale-price {
  color: var(--kb-sale-red);
  font-weight: 800;
}

.kb-cart-drawer__discount {
  background: var(--kb-sale-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-sale-red);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 800;
  line-height: 1;
  padding: calc(var(--kb-space) * 0.55) calc(var(--kb-space) * 0.75);
}

.kb-cart-drawer__checkout {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 0.6);
  justify-content: center;
}

.kb-cart-drawer__checkout .kb-icon {
  flex: 0 0 auto;
}

/* Keep the gallery below the sticky header instead of pinning it at the viewport edge. */
@media (min-width: 981px) {
  .kb-pdp__sticky-flow {
    display: block;
  }

  .kb-pdp__top {
    align-items: start;
    gap: calc(var(--kb-space) * 3.25);
    grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
    position: relative;
  }

  .kb-pdp-gallery {
    position: relative;
    scroll-margin-top: calc(var(--kb-space) * 16);
    top: auto;
    will-change: transform;
  }

  .kb-pdp__content-flow {
    min-width: 0;
  }

  .kb-pdp__content-flow .kb-pdp-description {
    margin-top: calc(var(--kb-space) * 3.25);
  }

}

/* Drawer motion: a calm panel entrance, then a short cascading reveal. */
@keyframes kb-mobile-menu-item-enter {
  from { opacity: 0; transform: translate3d(-0.75rem, 0, 0) rotate(-0.6deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes kb-mobile-menu-sub-enter {
  from { opacity: 0; transform: translate3d(0.65rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 980px) {
  .kb-mobile-menu {
    transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s 500ms;
  }

  .kb-mobile-menu.is-open {
    transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }

  .kb-mobile-menu__panel {
    transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }

  .kb-mobile-menu__main,
  .kb-mobile-menu__sub-screen {
    transition-duration: 460ms;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
  }

  .kb-mobile-menu.is-submenu-open .kb-mobile-menu__main { transform: translateX(-14%); }

  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li,
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__footer {
    animation: kb-mobile-menu-item-enter 360ms both cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li:nth-child(1) { animation-delay: 90ms; }
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li:nth-child(2) { animation-delay: 140ms; }
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li:nth-child(3) { animation-delay: 190ms; }
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li:nth-child(4) { animation-delay: 240ms; }
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li:nth-child(5) { animation-delay: 290ms; }
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li:nth-child(6) { animation-delay: 340ms; }
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__list > li:nth-child(7) { animation-delay: 390ms; }
  .kb-mobile-menu.is-open:not(.is-submenu-open) .kb-mobile-menu__footer { animation-delay: 440ms; }

  .kb-mobile-menu__sub-screen.is-active .kb-mobile-menu__sub-head,
  .kb-mobile-menu__sub-screen.is-active .kb-mobile-menu__sub-list > li {
    animation: kb-mobile-menu-sub-enter 300ms both cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .kb-mobile-menu__sub-screen.is-active .kb-mobile-menu__sub-list > li:nth-child(1) { animation-delay: 130ms; }
  .kb-mobile-menu__sub-screen.is-active .kb-mobile-menu__sub-list > li:nth-child(2) { animation-delay: 175ms; }
  .kb-mobile-menu__sub-screen.is-active .kb-mobile-menu__sub-list > li:nth-child(3) { animation-delay: 220ms; }
  .kb-mobile-menu__sub-screen.is-active .kb-mobile-menu__sub-list > li:nth-child(4) { animation-delay: 265ms; }
  .kb-mobile-menu__sub-screen.is-active .kb-mobile-menu__sub-list > li:nth-child(n + 5) { animation-delay: 310ms; }

  .kb-mobile-menu__top,
  .kb-mobile-menu__account,
  .kb-mobile-menu__language {
    font-size: var(--kb-fs-body);
    font-weight: 600;
  }

  .kb-mobile-menu__item-label > .kb-icon,
  .kb-mobile-menu__account > .kb-icon,
  .kb-mobile-menu__language .kb-language-switcher__flag {
    height: 1.375rem;
    width: 1.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-mobile-menu,
  .kb-mobile-menu__panel,
  .kb-mobile-menu__main,
  .kb-mobile-menu__sub-screen,
  .kb-mobile-menu__list > li,
  .kb-mobile-menu__footer,
  .kb-mobile-menu__sub-head,
  .kb-mobile-menu__sub-list > li {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 480px) {
  .kb-cart-drawer__header,
  .kb-cart-drawer__empty,
  .kb-cart-drawer__scroll,
  .kb-cart-drawer__foot {
    padding-inline: calc(var(--kb-space) * 1.25);
  }

  .kb-cart-drawer__content .kb-free-ship {
    margin-inline: calc(var(--kb-space) * -1.25);
    width: calc(100% + (var(--kb-space) * 2.5));
  }
}

/* Homepage phone refinement: the category collection is a compact 3 x 3
   browse grid, not a wide scroller with oversized partial cards. */
@media (max-width: 640px) {
  .kb-categories .kb-tile-grid--categories {
    display: grid;
    gap: calc(var(--kb-space) * 1.25);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: 0;
    overflow: visible;
    padding-inline: 0;
    scroll-snap-type: none;
  }

  .kb-categories .kb-image-tile {
    aspect-ratio: 0.86 / 1;
    box-sizing: border-box;
    flex: initial;
    gap: var(--kb-space);
    min-width: 0;
    padding: var(--kb-space);
  }

  .kb-categories .kb-image-tile__label {
    font-size: var(--kb-fs-eyebrow);
    line-height: var(--kb-lh-snug);
    min-height: 0;
  }
}

/* Splide's content must use the section gutter once, rather than adding a
   second, uneven inset inside the track on either side. */
.kb-splide {
  --kb-splide-padding: 0px;
}

/* ==========================================================================
   Branded loading mark
   Uses the animated logo icon (logo-loader.svg) as the waiting state.
   Only applied where the mark renders at ~40px or more: the loader is a
   four-piece build, and below that size it is illegible, so the small inline
   spinners (buttons, header search) deliberately keep their ring.
   ========================================================================== */

.kb-logo-loader {
  align-items: center;
  color: var(--kb-ink-soft);
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--kb-space) * 0.75);
  justify-content: center;
}

.kb-logo-loader svg {
  display: block;
  height: auto;
  width: var(--kb-logo-loader-size, 4.5rem);
}

.kb-logo-loader__label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kb-logo-loader--bare .kb-logo-loader__label {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.kb-logo-loader--sm {
  --kb-logo-loader-size: 2.75rem;
}

.kb-logo-loader--lg {
  --kb-logo-loader-size: 7rem;
}

/* WooCommerce blocking overlay (cart quantity updates, checkout, payment).
   Woo paints a generic spinner GIF in ::before; swap it for the mark. The SVG
   animates itself, so Woo's own spin animation is removed rather than stacked
   on top of it. */
.woocommerce .blockUI.blockOverlay::before,
.woocommerce .loader::before,
.woocommerce-checkout .blockUI.blockOverlay::before {
  animation: none;
  background: url("../images/logo-loader.svg") center center / contain no-repeat;
  border: 0;
  font-size: 1em;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  width: 3.5rem;
}

.woocommerce .blockUI.blockOverlay {
  background-color: var(--kb-surface, #fff) !important;
  opacity: 0.72 !important;
}

/* A frozen loader reads as a broken page, so under reduce-motion the mark stays
   but stops rebuilding; the overlay itself still communicates the wait. */
@media (prefers-reduced-motion: reduce) {
  .woocommerce .blockUI.blockOverlay::before,
  .woocommerce .loader::before,
  .woocommerce-checkout .blockUI.blockOverlay::before {
    opacity: 0.85;
  }
}

/* Final mobile-navigation cascade: this theme has legacy responsive layers above,
   so the owner-approved drawer behavior intentionally resolves at file end. */
.kb-announcement__track > span + span { display: none; }

@media (max-width: 767px) {
  .kb-announcement__track > span + span { display: inline; }

  .kb-mobile-menu {
    inset: var(--kb-mobile-menu-top, 7.5rem) 0 0;
    z-index: 90;
  }

  .kb-mobile-menu__panel {
    max-width: min(22rem, 92vw);
    overflow: hidden;
    width: 100%;
  }

  .kb-mobile-menu__list {
    align-content: start;
    flex: 1 1 auto;
    grid-auto-rows: min-content;
    min-height: 0;
    overflow-y: auto;
  }

  .kb-mobile-menu__acc-head { width: 100%; }
  .kb-mobile-menu__acc-head > .kb-icon--plus { transition: transform var(--kb-motion-fast) var(--kb-ease); }
  .kb-mobile-menu__acc[open] .kb-mobile-menu__acc-head > .kb-icon--plus { transform: rotate(45deg); }
  .kb-mobile-menu__acc[open] .kb-mobile-menu__acc-head > .kb-icon:not(.kb-icon--plus) { transform: none; }

  .kb-header-search { gap: calc(var(--kb-space) * 1.25); }
  .kb-header-search .kb-icon { margin-right: 0; }

  .kb-splide:not(.is-initialized) .splide__slide { flex-basis: calc(44% - var(--kb-space)); }

  .kb-mobile-menu__panel { position: relative; }
  .kb-mobile-menu__main {
    display: flex;
    flex-direction: column;
    height: 100%;
    transform: translateX(0);
    transition: transform var(--kb-motion-base) var(--kb-ease);
  }
  .kb-mobile-menu.is-submenu-open .kb-mobile-menu__main { transform: translateX(-18%); }
  .kb-mobile-menu__item-label { justify-content: flex-start; }
  .kb-mobile-menu__top { background: transparent; border: 0; font: inherit; text-align: left; }
  .kb-mobile-menu__drill-trigger { cursor: pointer; }

  .kb-mobile-menu__sub-screen {
    background: var(--kb-surface);
    display: flex;
    flex-direction: column;
    inset: 0;
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
    position: absolute;
    transform: translateX(100%);
    transition: opacity var(--kb-motion-base) var(--kb-ease), transform var(--kb-motion-base) var(--kb-ease);
    visibility: hidden;
  }
  .kb-mobile-menu__sub-screen.is-active { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
  .kb-mobile-menu__sub-head {
    align-items: center;
    border-bottom: 0.5px solid var(--kb-line);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(var(--kb-space) * 1.25);
    min-height: 60px;
    padding: 0 calc(var(--kb-space) * 1.5);
  }
  .kb-mobile-menu__sub-head button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--kb-ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--kb-fs-meta);
    font-weight: 700;
    gap: calc(var(--kb-space) * 0.5);
    min-height: 44px;
    padding: 0;
  }
  .kb-mobile-menu__sub-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kb-mobile-menu__sub-list { list-style: none; margin: 0; padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.5); }
  .kb-mobile-menu__sub-list a {
    align-items: center;
    border-bottom: 0.5px solid var(--kb-line);
    color: var(--kb-ink);
    display: flex;
    font-size: var(--kb-fs-body);
    font-weight: 600;
    justify-content: space-between;
    min-height: 52px;
    text-decoration: none;
  }
  .kb-mobile-menu__sub-list .kb-icon { color: var(--kb-ink-soft); }
}

@media (max-width: 399px) {
  .kb-site-header__inner { grid-template-columns: 2.5rem minmax(0, 1fr) max-content; }
  .kb-site-header__logo { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kb-mobile-menu__main,
  .kb-mobile-menu__sub-screen { transition-duration: 0s; }
}

/* Final phone drawer geometry must override legacy 92vw panel sizing. */
@media (max-width: 767px) {
  .kb-mobile-menu__panel {
    height: 100vh;
    max-width: none !important;
    width: 100vw !important;
  }

  .kb-mobile-menu__footer { margin-top: auto; }
}

/* Tablet keeps same navigation model as phone. Never combine drawer with the
   desktop utility header between phone and the 981px desktop breakpoint. */
@media (min-width: 768px) and (max-width: 980px) {
  .kb-site-header__inner {
    align-items: center;
    column-gap: calc(var(--kb-space) * 0.75);
    display: grid;
    grid-template-areas:
      "menu logo actions"
      "search search search";
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 1.5);
    row-gap: calc(var(--kb-space) * 1.125);
  }

  .kb-site-header__logo { grid-area: logo; justify-self: start; }
  .kb-site-header__actions { align-items: center; display: flex; gap: 0; grid-area: actions; }
  .kb-site-header__utility-group--language,
  .kb-header-icon--search-overlay { display: none !important; }
  .kb-site-header__utility-group--utilities,
  .kb-site-header__utility-group--cart { align-items: center; display: flex; gap: 0; margin: 0; padding: 0; }
  .kb-header-icon--account { display: inline-flex; }
  .kb-site-header__nav { display: none; }

  .kb-header-search {
    align-items: center;
    background: var(--kb-surface-alt);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-control);
    color: var(--kb-ink-soft);
    display: flex !important;
    font-size: var(--kb-fs-body);
    grid-area: search;
    height: 3rem;
    margin: 0;
    max-width: none;
    padding: 0 calc(var(--kb-space) * 1.25);
    width: 100%;
  }

  .kb-mobile-menu {
    inset: var(--kb-mobile-menu-top, 9rem) 0 0;
    z-index: 90;
  }

  .kb-mobile-menu__panel {
    height: 100%;
    max-width: none;
    overflow: hidden;
    position: relative;
    width: min(26rem, 100vw);
  }

  .kb-mobile-menu__main { display: flex; flex-direction: column; height: 100%; transform: translateX(0); transition: transform var(--kb-motion-base) var(--kb-ease); }
  .kb-mobile-menu.is-submenu-open .kb-mobile-menu__main { transform: translateX(-18%); }
  .kb-mobile-menu__list { align-content: start; flex: 1 1 auto; grid-auto-rows: min-content; min-height: 0; overflow-y: auto; }
  .kb-mobile-menu__footer { margin-top: auto; }
  .kb-mobile-menu__item-label { justify-content: flex-start; }

  .kb-mobile-menu__sub-screen {
    background: var(--kb-surface);
    display: flex;
    flex-direction: column;
    inset: 0;
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
    position: absolute;
    transform: translateX(100%);
    transition: opacity var(--kb-motion-base) var(--kb-ease), transform var(--kb-motion-base) var(--kb-ease);
    visibility: hidden;
  }
  .kb-mobile-menu__sub-screen.is-active { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
  .kb-mobile-menu__sub-head { align-items: center; border-bottom: 0.5px solid var(--kb-line); display: grid; gap: calc(var(--kb-space) * 1.25); grid-template-columns: auto minmax(0, 1fr); min-height: 60px; padding: 0 calc(var(--kb-space) * 1.5); }
  .kb-mobile-menu__sub-head button { align-items: center; background: transparent; border: 0; color: var(--kb-ink); display: inline-flex; font: inherit; font-size: var(--kb-fs-meta); font-weight: 700; gap: calc(var(--kb-space) * 0.5); min-height: 44px; padding: 0; }
  .kb-mobile-menu__sub-list { list-style: none; margin: 0; padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.5); }
  .kb-mobile-menu__sub-list a { align-items: center; border-bottom: 0.5px solid var(--kb-line); color: var(--kb-ink); display: flex; font-size: var(--kb-fs-body); font-weight: 600; justify-content: space-between; min-height: 52px; text-decoration: none; }
}

/* Phone and tablet drawer footer: account and language are plain, visible
   controls anchored together at the bottom of the panel. */
@media (max-width: 980px) {
  /* The drawer begins below the header, so its full available height is the
     overlay height, not a second viewport-height below that header. */
  .kb-mobile-menu__panel { height: 100%; }

  .kb-mobile-menu__footer {
    border-top: 0.5px solid var(--kb-line);
    display: grid;
    flex: 0 0 auto;
    gap: 0;
    padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.5);
  }

  .kb-mobile-menu__account,
  .kb-mobile-menu__language {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--kb-ink);
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    gap: calc(var(--kb-space) * 0.75);
    justify-content: flex-start;
    min-height: 44px;
    padding: 0;
    text-align: left;
    width: 100%;
  }

  .kb-mobile-menu__account:hover,
  .kb-mobile-menu__account:focus-visible,
  .kb-mobile-menu__language:hover,
  .kb-mobile-menu__language:focus-visible {
    background: transparent;
    color: var(--kb-accent);
  }

}

/* Keep the final responsive cascade on the same calm timing. */
@media (max-width: 980px) {
  .kb-mobile-menu__main {
    transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .kb-mobile-menu__sub-screen {
    transition: opacity 460ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .kb-mobile-menu.is-submenu-open .kb-mobile-menu__main { transform: translateX(-14%); }
}

/* Keep the menu surface visible while its panel slides out; no fade on close. */
@media (max-width: 980px) {
  .kb-mobile-menu {
    opacity: 1;
    transition: visibility 0s 480ms;
  }

  .kb-mobile-menu.is-open { transition: visibility 0s; }
}

/* The footer's link groups are plain navigation on desktop and only become
   disclosure controls when space is constrained on phones. */
@media (min-width: 768px) {
  .kb-site-footer__accordion > summary {
    pointer-events: none;
  }

  .kb-site-footer__accordion > nav {
    display: grid !important;
  }
}

/* A small visual cue makes each homepage routine step easier to scan without
   competing with the product links below it. */
.kb-routine-step__icon {
  align-items: center;
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent);
  display: inline-flex;
  height: calc(var(--kb-space) * 5.5);
  justify-content: center;
  margin: 0 0 calc(var(--kb-space) * 1.5);
  width: calc(var(--kb-space) * 5.5);
}

.kb-routine-step__icon .kb-icon {
  height: var(--kb-icon);
  width: var(--kb-icon);
}

/* Homepage routine cards use one shared 4:5 campaign-art stage. The image is
   decorative; the linked title and products remain the accessible content. */
.kb-routine-step {
  overflow: hidden;
  padding: 0;
}

.kb-routine-step__art {
  aspect-ratio: 4 / 5;
  background: var(--kb-surface-alt);
  display: block;
  overflow: hidden;
}

.kb-routine-step__art img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.kb-routine-step__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: calc(var(--kb-space) * 2.5);
}

/* Every official brand mark sits inside the same 200:80 optical stage. The
   artwork itself is constrained to a centered 150:40 safe area, so wide,
   square, and tall marks retain their proportions without visual jumping. */
.kb-brand-row {
  align-items: stretch;
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.kb-brand-row a {
  align-items: center;
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  display: grid;
  justify-items: center;
  min-height: 80px;
  padding: 20px 25px;
  width: 100%;
}

.kb-brand-row__logo {
  height: 40px;
  max-height: 40px;
  max-width: 150px;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.kb-brand-row a:hover,
.kb-brand-row a:focus-visible {
  background: var(--kb-accent-tint);
  border-color: var(--kb-accent);
}

/* Homepage assurance band: a full-width, number-led trust summary that stays
   equally scannable as a two-by-two grid on phone widths. */
.kb-trust-strip {
  background: var(--kb-surface);
  border-block: 0.5px solid var(--kb-line);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: calc(var(--kb-space) * 3) var(--kb-page-gutter);
}

.kb-trust-strip__item {
  align-items: center;
  color: var(--kb-ink);
  display: flex;
  gap: calc(var(--kb-space) * 1.25);
  justify-content: center;
  min-height: calc(var(--kb-space) * 7);
  padding: 0 calc(var(--kb-space) * 3);
  position: relative;
}

.kb-trust-strip__item + .kb-trust-strip__item::before {
  background: var(--kb-line);
  content: '';
  inset: calc(var(--kb-space) * 0.75) auto calc(var(--kb-space) * 0.75) 0;
  position: absolute;
  width: 0.5px;
}

.kb-trust-strip__item .kb-icon {
  color: var(--kb-accent);
  flex: 0 0 auto;
}

.kb-trust-strip__copy {
  display: grid;
  gap: calc(var(--kb-space) * 0.125);
  line-height: 1.3;
  text-align: left;
}

.kb-trust-strip__copy strong {
  color: var(--kb-ink);
  font-size: var(--kb-fs-h3);
  font-weight: 800;
  line-height: 1;
}

.kb-trust-strip__copy > span {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  font-weight: 650;
}

@media (max-width: 980px) {
  .kb-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: calc(var(--kb-space) * 2) var(--kb-page-gutter);
  }

  .kb-trust-strip__item {
    justify-content: flex-start;
    padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
  }

  .kb-trust-strip__item:nth-child(odd)::before {
    content: none;
  }

  .kb-trust-strip__item:nth-child(n + 3) {
    border-top: 0.5px solid var(--kb-line);
  }
}

@media (max-width: 640px) {
  .kb-trust-strip {
    padding-inline: calc(var(--kb-space) * 1.5);
  }

  .kb-trust-strip__item {
    gap: calc(var(--kb-space) * 0.875);
    min-height: calc(var(--kb-space) * 8);
    padding: calc(var(--kb-space) * 1.25);
  }

  .kb-trust-strip__copy strong {
    font-size: var(--kb-fs-h3);
  }

  .kb-trust-strip__copy > span {
    font-size: var(--kb-fs-meta);
  }
}

/* ---------------------------------------------------------------------------
   Non-purchasable catalogue mode (owner decision 2026-08-12).
   Removed together with inc/catalogue-mode.php when commerce is restored.
   --------------------------------------------------------------------------- */

.kb-catalogue-notice {
  background: var(--kb-blush-tint);
  border-bottom: 1px solid var(--kb-line);
  color: var(--kb-ink);
}

.kb-catalogue-notice p {
  margin: 0 auto;
  max-width: 1180px;
  padding: 10px 20px;
  font-size: 15px;
  line-height: 1.5;
}

.kb-catalogue-notice strong {
  margin-right: 6px;
}

.kb-catalogue-notice a {
  color: var(--kb-accent);
  text-decoration: underline;
  white-space: nowrap;
}

.kb-pdp__catalogue-note {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--kb-line);
  border-radius: 14px;
  background: var(--kb-surface-alt);
  color: var(--kb-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .kb-catalogue-notice p {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* ==========================================================================
   2026-10-14 storefront UX pass: catalogue header, chip strip, denser grid,
   calmer cards, compact homepage art grids. Tokens only; appended last so it
   wins equal-specificity ties against the older layered overrides above.
   ========================================================================== */

/* Catalogue: the parent hero is gone server-side, so trim the leftover top gap. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_brand, .tax-pa_skin-concern, .tax-pa_ingredient, .tax-pa_skin-type) .ct-container[data-vertical-spacing] {
  padding-top: calc(var(--kb-space) * 1.5);
}

.kb-catalog {
  padding-top: calc(var(--kb-space) * 1.5);
}

.kb-catalog .kb-breadcrumb {
  margin-bottom: calc(var(--kb-space) * 1.5);
}

.kb-catalog__header--visible {
  margin: 0 0 calc(var(--kb-space) * 2.5) !important;
}

.kb-catalog__header--visible .kb-catalog__title {
  color: var(--kb-ink);
  font-size: var(--kb-fs-h1);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 var(--kb-space);
}

.kb-catalog__header--visible .kb-catalog__intro {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  max-width: 760px;
}

.kb-catalog__header--visible .kb-catalog__intro p {
  margin: 0;
}

.kb-catalog__header--visible .kb-catalog__intro p + p {
  margin-top: var(--kb-space);
}

/* Category chips: one scrollable row on every width instead of 2-4 wrapped rows. */
.kb-catalog__suggestions {
  margin-bottom: calc(var(--kb-space) * 1.5);
  position: relative;
}

.kb-catalog__suggestions ul {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: calc(var(--kb-space) * 0.5);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

/* Fade the cut edge so a clipped chip reads as "scroll for more". */
.kb-catalog__suggestions.is-scrollable ul {
  -webkit-mask-image: linear-gradient(to right, var(--kb-ink) calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, var(--kb-ink) calc(100% - 56px), transparent);
}

.kb-catalog__suggestions.is-scrolled-end ul {
  -webkit-mask-image: none;
  mask-image: none;
}

.kb-catalog__suggestions ul::-webkit-scrollbar {
  display: none;
}

.kb-catalog__suggestions li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.kb-catalog__suggestion {
  align-items: center;
  display: inline-flex;
  min-height: 40px;
  white-space: nowrap;
}

/* Toolbar sits tight under the chips. */
.kb-catalog__toolbar {
  margin-bottom: calc(var(--kb-space) * 2.5);
  padding-block: calc(var(--kb-space) * 1.25);
}

/* Desktop: narrower filter rail, four product columns from 1280px. */
@media (min-width: 1024px) {
  .kb-catalog__layout {
    gap: calc(var(--kb-space) * 4);
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .kb-catalog__filters {
    max-height: calc(100vh - calc(var(--kb-space) * 4));
    overflow-y: auto;
    /* Wheel over the rail must still scroll the page once the rail has nothing left to scroll. */
    overscroll-behavior: auto;
    scrollbar-width: thin;
    top: calc(var(--kb-space) * 2);
  }

  .kb-catalog-filter__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--kb-ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--kb-fs-body);
    font-weight: 700;
    justify-content: space-between;
    min-height: 48px;
    padding: 0;
    width: 100%;
  }

  .kb-catalog-filter__actions {
    background: var(--kb-surface);
    bottom: 0;
    flex-direction: column;
    gap: var(--kb-space);
    padding: calc(var(--kb-space) * 1.5) 0;
    position: sticky;
  }

  .kb-catalog-filter__actions .kb-button {
    min-height: 44px;
    width: 100%;
  }

  .kb-catalog__results ul.products {
    gap: calc(var(--kb-space) * 2.5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .kb-catalog__results ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Product cards (every grid and slider): brand as a quiet uppercase label,
   titles held to three lines, and the price + action anchored at the bottom. */
.kb-product-card .kb-product-card__body > .kb-eyebrow {
  color: var(--kb-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 calc(var(--kb-space) * 0.75);
  text-transform: uppercase;
}

.kb-product-card h3 {
  line-height: 1.4;
  margin-bottom: calc(var(--kb-space) * 0.5);
}

.kb-product-card__meta {
  gap: calc(var(--kb-space) * 0.5);
  margin: auto 0 calc(var(--kb-space) * 1.5);
  padding-top: var(--kb-space);
}

.kb-product-card__meta:empty {
  display: none;
}

.kb-product-card__body > .kb-button {
  margin-top: 0;
}

.kb-product-card__reviews {
  align-items: center;
  display: inline-flex;
  gap: calc(var(--kb-space) * 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .kb-product-card {
    transition:
      border-color var(--kb-motion-base) var(--kb-ease),
      box-shadow var(--kb-motion-base) var(--kb-ease),
      transform var(--kb-motion-base) var(--kb-ease);
  }

  .kb-product-card:hover {
    border-color: var(--kb-accent-tint);
    box-shadow: 0 10px 28px -18px var(--kb-ink-faint);
    transform: translateY(-2px);
  }
}

/* PDP: how-to and ingredient grids adapt to however many real items exist. */
.kb-how-to-grid,
.kb-ingredient-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.kb-ingredient-grid article h3:last-child {
  margin-bottom: 0;
}

/* Homepage: the concern and routine art grids were two ~750px walls of
   near-identical imagery. Landscape crops halve their height; concern art is
   10:9 (20% taller than 4:3, owner request 2026-10-18) on every viewport. */
.kb-concerns[data-kb-section="concerns"] .kb-info-card__art,
.kb-concerns .kb-info-card__art {
  aspect-ratio: 10 / 9;
}

.kb-concerns .kb-info-card__art img {
  object-position: center 65%;
}

.kb-concerns .kb-info-card__copy {
  padding: calc(var(--kb-space) * 2);
}

.kb-routine-step__art {
  aspect-ratio: 16 / 9;
}

.kb-routine-step__art img {
  object-position: center 60%;
  padding: 0;
}

/* Phone */
@media (max-width: 767px) {
  .kb-catalog__header--visible .kb-catalog__title {
    font-size: var(--kb-fs-pdp-title-mobile);
    line-height: var(--kb-lh-tight);
  }

  .kb-catalog__header--visible .kb-catalog__intro {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 1rem;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* Let the chip row bleed to the screen edge so the scroll affordance is obvious. */
  .kb-catalog__suggestions {
    margin-inline: calc(var(--kb-space) * -2);
  }

  .kb-catalog__suggestions ul {
    padding-inline: calc(var(--kb-space) * 2);
    scroll-padding-inline: calc(var(--kb-space) * 2);
  }

  .kb-product-card .kb-product-card__body > .kb-eyebrow {
    font-size: 0.6875rem;
  }

  .kb-concerns .kb-info-card__art {
    aspect-ratio: 1 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-product-card,
  .kb-product-card:hover {
    transform: none;
    transition-duration: 0s;
  }
}

/* ==========================================================================
   PDP routine generator (inc/pdp-routine-generator.php), 2026-10-14.
   ========================================================================== */
.kb-pdp-rg {
  align-items: center;
  background: linear-gradient(135deg, var(--kb-dawn-glow) 0%, var(--kb-dawn-tint) 38%, var(--kb-dawn-blush) 100%);
  border: 1px solid var(--kb-line);
  isolation: isolate;
  position: relative;
  border-radius: calc(var(--kb-radius-card) + 8px);
  box-sizing: border-box;
  display: grid;
  gap: calc(var(--kb-space) * 5);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin: calc(var(--kb-space) * 5) 0 0;
  padding: calc(var(--kb-space) * 5);
}
.kb-pdp-rg *, .kb-pdp-rg *::before, .kb-pdp-rg *::after { box-sizing: border-box; }
/* Morning is the base dawn gradient; choosing evening fades in a twilight one. */
.kb-pdp-rg::before {
  background: linear-gradient(135deg, var(--kb-dusk-glow) 0%, var(--kb-dusk-tint) 45%, var(--kb-dusk-blush) 100%);
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 600ms var(--kb-ease);
  z-index: -1;
}
.kb-pdp-rg.is-evening::before { opacity: 1; }
.kb-pdp-rg [hidden] { display: none !important; }
.kb-pdp-rg .kb-icon { flex: none; height: var(--kb-icon-sm); width: var(--kb-icon-sm); }
.kb-pdp-rg__badge {
  align-items: center;
  background: var(--kb-ink);
  border-radius: var(--kb-radius-control);
  color: var(--kb-surface);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.08em;
  margin: 0 0 calc(var(--kb-space) * 2.5);
  padding: 6px 14px;
  text-transform: uppercase;
}
.kb-pdp-rg__intro h2 { color: var(--kb-ink); font-size: 2.25rem; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 calc(var(--kb-space) * 2); }
.kb-pdp-rg__intro > p { color: var(--kb-ink-soft); margin: 0 0 calc(var(--kb-space) * 2.5); }
.kb-pdp-rg__intro > p:last-child { margin-bottom: 0; }
/* Yuna marking November on her calendar: transparent 4:3 art above the badge. */
.kb-pdp-rg__art { display: block; height: auto; margin: 0 auto calc(var(--kb-space) * 2); max-width: 100%; width: 100%; }

.kb-pdp-rg__card { background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-radius-card); box-shadow: 0 24px 50px -36px var(--kb-ink-faint); padding: calc(var(--kb-space) * 3); }
.kb-pdp-rg__form { display: grid; gap: calc(var(--kb-space) * 2.5); }
.kb-pdp-rg__group, .kb-pdp-rg__row label { margin: 0; min-width: 0; }
.kb-pdp-rg__row label { display: block; font-weight: 400; }
.kb-pdp-rg__label { color: var(--kb-ink); display: block; font-family: var(--kb-font-body) !important; font-size: 0.75rem !important; font-weight: 800 !important; letter-spacing: 0.06em; line-height: 1.3; margin: 0 0 var(--kb-space); padding: 0; text-transform: uppercase; }
.kb-pdp-rg__time { display: grid; gap: var(--kb-space); grid-template-columns: 1fr 1fr; }
.kb-pdp-rg__time button, .kb-pdp-rg__step {
  align-items: center;
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  color: var(--kb-ink-soft);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: var(--kb-space);
  justify-content: center;
  min-height: 46px;
  padding: 0 calc(var(--kb-space) * 1.5);
  transition: background-color var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}
.kb-pdp-rg__step.is-on { background: var(--kb-blush-tint); border-color: var(--kb-accent); color: var(--kb-ink); }
.kb-pdp-rg__time button { background: var(--kb-surface); }
.kb-pdp-rg__time [data-kb-rg-time="morning"] .kb-icon { color: var(--kb-dawn-accent); }
.kb-pdp-rg__time [data-kb-rg-time="evening"] .kb-icon { color: var(--kb-dusk-accent); }
.kb-pdp-rg__time [data-kb-rg-time="morning"].is-active { background: linear-gradient(135deg, var(--kb-dawn-glow), var(--kb-dawn-blush)); border-color: var(--kb-dawn-line); box-shadow: 0 10px 24px -18px var(--kb-dawn-accent); color: var(--kb-ink); }
.kb-pdp-rg__time [data-kb-rg-time="evening"].is-active { background: linear-gradient(135deg, var(--kb-dusk-glow), var(--kb-dusk-blush)); border-color: var(--kb-dusk-line); box-shadow: 0 10px 24px -18px var(--kb-dusk-accent); color: var(--kb-ink); }
.kb-pdp-rg__steps { display: grid; gap: var(--kb-space); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kb-pdp-rg__step { justify-content: flex-start; line-height: 1.2; text-align: left; }
.kb-pdp-rg__step > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kb-pdp-rg__step small { color: var(--kb-accent); font-size: 0.6875rem; font-weight: 700; }
.kb-pdp-rg__step-num { align-items: center; background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: 50%; color: var(--kb-ink-soft); display: inline-flex; flex: none; font-size: 0.75rem; font-weight: 800; height: 24px; justify-content: center; width: 24px; }
.kb-pdp-rg__step.is-on .kb-pdp-rg__step-num { background: var(--kb-accent); border-color: var(--kb-accent); color: var(--kb-accent-ink); }
.kb-pdp-rg__step.is-current { cursor: default; opacity: 1; }
.kb-pdp-rg__step.is-blocked { cursor: not-allowed; opacity: 0.45; text-decoration: line-through; }
.kb-pdp-rg__row { display: grid; gap: calc(var(--kb-space) * 2); grid-template-columns: 1fr 1fr; }
.kb-pdp-rg__row select {
  background-color: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0;
  font-weight: 500;
  min-height: 46px;
  padding: 0 calc(var(--kb-space) * 4) 0 calc(var(--kb-space) * 1.5);
  text-transform: none;
  width: 100%;
}
.kb-pdp-rg__submit {
  align-items: center;
  background: var(--kb-ink);
  border: 0;
  border-radius: var(--kb-radius);
  color: var(--kb-surface);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  gap: var(--kb-space);
  justify-content: center;
  letter-spacing: 0.06em;
  min-height: 52px;
  text-transform: uppercase;
  transition: background-color var(--kb-motion-fast) var(--kb-ease);
  width: 100%;
}
.kb-pdp-rg__submit:hover { background: var(--kb-accent); }
.kb-pdp-rg__submit:disabled { cursor: not-allowed; opacity: 0.45; }
.kb-pdp-rg__status { color: var(--kb-accent); font-size: var(--kb-fs-meta); margin: 0; text-align: center; }
.kb-pdp-rg__status:empty { display: none; }

.kb-pdp-rg__result:focus { outline: none; }

/* Loading moment: animated logo, cycling headline, random words, thin progress. */
.kb-pdp-rg__loading { align-items: center; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--kb-space) * 3) 0; text-align: center; }
.kb-pdp-rg__loading .kb-logo-loader { --kb-logo-loader-size: 5.5rem; margin-bottom: calc(var(--kb-space) * 2); }
.kb-pdp-rg__loading-title { color: var(--kb-ink); font-size: var(--kb-fs-h3); font-weight: 700; margin: 0 0 6px; min-height: 1.4em; }
.kb-pdp-rg__loading-word { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); letter-spacing: 0.04em; margin: 0 0 calc(var(--kb-space) * 2.5); min-height: 1.5em; }
.kb-pdp-rg__loading-word.is-in { animation: kb-rg-word 620ms var(--kb-ease) both; }
@keyframes kb-rg-word {
  0% { opacity: 0; transform: translateY(6px); }
  20%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}
.kb-pdp-rg__loading-bar { background: var(--kb-line); border-radius: var(--kb-radius-control); height: 4px; max-width: 220px; overflow: hidden; width: 60%; }
.kb-pdp-rg__loading-bar span { background: var(--kb-accent); border-radius: inherit; display: block; height: 100%; transition-property: width; transition-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); width: 0; }

/* Result arrival: rows slide a short way in from the left, lightly staggered. */
.kb-pdp-rg__result.is-entering .kb-pdp-rg__result-head,
.kb-pdp-rg__result.is-entering .kb-pdp-rg__item,
.kb-pdp-rg__result.is-entering .kb-pdp-rg__total,
.kb-pdp-rg__result.is-entering [data-kb-rg-add] {
  animation: kb-rg-slide 360ms var(--kb-ease) both;
  animation-delay: calc(var(--kb-rg-i, 0) * 70ms + 60ms);
}
.kb-pdp-rg__result.is-entering .kb-pdp-rg__result-head { animation-delay: 0ms; }
.kb-pdp-rg__result.is-entering .kb-pdp-rg__total,
.kb-pdp-rg__result.is-entering [data-kb-rg-add] { animation-delay: 420ms; }
@keyframes kb-rg-slide {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}
.kb-pdp-rg__result-head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--kb-space); justify-content: space-between; margin-bottom: calc(var(--kb-space) * 1.5); }
.kb-pdp-rg__result-head h3 { font-size: var(--kb-fs-h3); margin: 0; }
.kb-pdp-rg__edit { align-items: center; background: transparent; border: 0; color: var(--kb-accent); cursor: pointer; display: inline-flex; font: inherit; font-size: var(--kb-fs-meta); font-weight: 700; gap: 6px; min-height: 44px; }
.kb-pdp-rg__list { display: grid; gap: var(--kb-space); list-style: none; margin: 0 0 calc(var(--kb-space) * 2); padding: 0; }
.kb-pdp-rg__item { align-items: center; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); display: grid; gap: calc(var(--kb-space) * 1.5); grid-template-columns: 64px minmax(0, 1fr) auto; padding: var(--kb-space); }
.kb-pdp-rg__item.is-empty { background: var(--kb-surface-alt); display: block; padding: calc(var(--kb-space) * 1.5); }
.kb-pdp-rg__item.is-empty p { color: var(--kb-ink-soft); font-size: var(--kb-fs-meta); margin: 4px 0 0; }
.kb-pdp-rg__item-media img { background: var(--kb-surface-alt); border-radius: 12px; display: block; height: 64px; object-fit: contain; width: 64px; }
.kb-pdp-rg__item-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; }
.kb-pdp-rg__item-step { color: var(--kb-accent); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.kb-pdp-rg__item-copy a { color: var(--kb-ink); font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.kb-pdp-rg__item-copy a:hover { color: var(--kb-accent); }
.kb-pdp-rg__item-copy strong { font-size: 0.9375rem; }
.kb-pdp-rg__item-actions { align-items: center; display: flex; gap: 4px; }
.kb-pdp-rg__swap { background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-radius-control); color: var(--kb-ink); cursor: pointer; font: inherit; font-size: 0.8125rem; font-weight: 700; min-height: 40px; padding: 0 calc(var(--kb-space) * 1.5); white-space: nowrap; }
.kb-pdp-rg__swap:hover, .kb-pdp-rg__swap:focus { background: var(--kb-surface); border-color: var(--kb-accent); color: var(--kb-accent); }
.kb-pdp-rg__step:hover, .kb-pdp-rg__step:focus { border-color: var(--kb-accent); color: var(--kb-ink); }
.kb-pdp-rg__time [data-kb-rg-time="morning"]:is(:hover, :focus) { border-color: var(--kb-dawn-line); color: var(--kb-ink); }
.kb-pdp-rg__time [data-kb-rg-time="evening"]:is(:hover, :focus) { border-color: var(--kb-dusk-line); color: var(--kb-ink); }
.kb-pdp-rg__edit:hover, .kb-pdp-rg__edit:focus { background: transparent; color: var(--kb-button-hover); }
.kb-pdp-rg__remove { background: transparent; border: 0; border-radius: 50%; color: var(--kb-ink-soft); cursor: pointer; font-size: 1.25rem; height: 44px; width: 44px; }
.kb-pdp-rg__remove:hover { background: var(--kb-blush-tint); color: var(--kb-accent); }
.kb-pdp-rg__current { background: var(--kb-blush-tint); border-radius: var(--kb-radius-control); color: var(--kb-accent); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; white-space: nowrap; }
.kb-pdp-rg__total { align-items: baseline; border-top: 1px solid var(--kb-line); display: flex; justify-content: space-between; margin-bottom: calc(var(--kb-space) * 1.5); padding-top: calc(var(--kb-space) * 1.5); }
.kb-pdp-rg__total strong { font-size: 1.25rem; }
.kb-pdp-rg__note { color: var(--kb-ink-faint); font-size: 0.8125rem; margin: var(--kb-space) 0 0; text-align: center; }
.kb-pdp-rg__note a { color: var(--kb-accent); font-weight: 700; }
.kb-pdp-rg :is(button, a, select):focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }

@media (max-width: 980px) {
  .kb-pdp-rg { gap: calc(var(--kb-space) * 3); grid-template-columns: 1fr; padding: calc(var(--kb-space) * 3); }
  .kb-pdp-rg__intro h2 { font-size: var(--kb-fs-pdp-title-mobile); }
  .kb-pdp-rg__art { max-width: 420px; }
}
@media (max-width: 599px) {
  .kb-pdp-rg { border-radius: var(--kb-radius-card); padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 2); }
  .kb-pdp-rg__card { padding: calc(var(--kb-space) * 2); }
  /* Steps wrap as chips sized to their label, so long LV/ET/PL step names stay
     whole instead of breaking mid-word in two fixed columns. */
  .kb-pdp-rg__steps { display: flex; flex-wrap: wrap; }
  .kb-pdp-rg__step { flex: 1 1 auto; font-size: 0.875rem; gap: 6px; padding: 6px 12px; }
  .kb-pdp-rg__step > span:last-child { white-space: nowrap; }
  .kb-pdp-rg__step-num { height: 20px; width: 20px; }
  .kb-pdp-rg__row { grid-template-columns: 1fr; }
  .kb-pdp-rg__item { grid-template-columns: 52px minmax(0, 1fr); }
  .kb-pdp-rg__item-media img { height: 52px; width: 52px; }
  .kb-pdp-rg__item-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .kb-pdp-rg__submit { letter-spacing: 0.02em; padding-inline: calc(var(--kb-space) * 1.5); }
  .kb-pdp-rg__edit { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-pdp-rg *, .kb-pdp-rg::before { transition-duration: 0s !important; }
  .kb-pdp-rg__loading-word.is-in,
  .kb-pdp-rg__result.is-entering * { animation: none !important; }
}

/* ==========================================================================
   2026-10-14 sitewide wide container: every desktop template shares the
   header's content box (50px gutters, max --kb-contentw), except checkout,
   which keeps the narrower Blocksy container for a focused payment flow.
   ========================================================================== */
@media (min-width: 1024px) {
  body:not(.woocommerce-checkout) {
    --theme-container-width: calc(100% - (var(--kb-page-gutter) * 2));
    --theme-normal-container-max-width: var(--kb-contentw);
  }

  body:not(.woocommerce-checkout) .kb-catalog {
    max-width: none;
    padding-inline: 0;
  }
}


/* Full-width text pages (legal, policies): TranslatePress wraps the content in
   an inline <trp-tag>, so WordPress's constrained layout never limited it and
   the copy ran edge to edge. Give it the header's content box; keep running
   text at a readable measure while tables use the full width. */
body:not(.home) .ct-container-full .entry-content > trp-tag {
  box-sizing: border-box;
  display: block;
  margin-inline: auto;
  max-width: var(--kb-maxw);
  padding-inline: calc(var(--kb-space) * 3);
  width: 100%;
}

@media (min-width: 1024px) {
  body:not(.home) .ct-container-full .entry-content > trp-tag {
    padding-inline: var(--kb-page-gutter);
  }
}

body:not(.home) .ct-container-full .entry-content > trp-tag > :is(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: 860px;
}

body:not(.home) .ct-container-full .entry-content > trp-tag .wp-block-table {
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   2026-10-15 catalogue grid pass: four desktop columns at every wide width,
   quiz / skin-type / routine tiles between product cards, no brand label on
   cards, and a compact phone grid with an icon add-to-cart on the image.
   ========================================================================== */
@media (min-width: 1280px) {
  body:not(.woocommerce-checkout) .kb-catalog__results ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Grid tiles share one product cell: an image slot on top (owner graphic or
   a quiet placeholder until it arrives), then eyebrow, title, short line and
   one action, centred. */
.kb-tile {
  align-items: center;
  background: var(--kb-blush-tint);
  border-radius: var(--kb-radius-card);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--kb-space);
  list-style: none;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
  text-align: center;
}

.kb-tile--skin {
  background: var(--kb-surface-alt);
  box-shadow: inset 0 0 0 1px var(--kb-line);
}

.kb-tile__media {
  align-items: center;
  aspect-ratio: 4 / 3;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0 0 calc(var(--kb-space) * 1.5);
  width: 100%;
}

.kb-tile__media img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.kb-tile__placeholder {
  align-items: center;
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  box-sizing: border-box;
  color: var(--kb-accent);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.kb-tile__placeholder .kb-icon {
  height: 44px;
  opacity: 0.55;
  stroke-width: 1.25;
  width: 44px;
}

.kb-tile__eyebrow {
  color: var(--kb-accent);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.kb-tile__title {
  color: var(--kb-ink);
  font-family: var(--kb-font-display);
  font-size: clamp(1.125rem, 1.5vw, var(--kb-fs-h3));
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}

.kb-tile__text {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  line-height: 1.55;
  margin: 0;
  max-width: 30ch;
}

.kb-tile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 0.75);
  justify-content: center;
  list-style: none;
  margin: calc(var(--kb-space) * 0.5) 0 0;
  padding: 0;
}

.kb-tile__chips a {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  min-height: 38px;
  padding: 0 calc(var(--kb-space) * 1.5);
  text-decoration: none;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}

.kb-tile__chips a:hover,
.kb-tile__chips a:focus-visible {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

.kb-tile__cta {
  margin-top: var(--kb-space);
}

.kb-tile__link {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-tile__link:hover {
  color: var(--kb-accent);
}

/* Image + phone quick add share one positioned box. */
.kb-product-card__media {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.kb-product-card__quick-add {
  display: none;
}

@media (max-width: 767px) {
  .kb-catalog__results ul.products {
    gap: var(--kb-space);
  }

  .kb-catalog__toolbar {
    gap: var(--kb-space);
    margin-bottom: calc(var(--kb-space) * 1.5);
    padding: 0 0 var(--kb-space);
  }

  .kb-catalog__toolbar-actions {
    gap: var(--kb-space);
  }

  .kb-catalog__toolbar .kb-catalog__filter-trigger,
  .kb-catalog__toolbar .woocommerce-ordering select.orderby,
  .kb-catalog__toolbar select {
    font-size: var(--kb-fs-meta);
    min-height: 38px;
  }

  .kb-catalog__toolbar .kb-catalog__filter-trigger {
    padding: 0 calc(var(--kb-space) * 1.25);
  }

  .kb-catalog__toolbar .kb-catalog__filter-count {
    font-size: 0.75rem;
    height: 1.15rem;
    min-width: 1.15rem;
  }

  .kb-catalog__toolbar .woocommerce-ordering select.orderby,
  .kb-catalog__toolbar select {
    background-position: right calc(var(--kb-space) * 1.25) center;
    padding: 0 calc(var(--kb-space) * 3.5) 0 calc(var(--kb-space) * 1.5);
  }

  .kb-product-card__body > .add_to_cart_button {
    display: none;
  }

  .kb-product-card__quick-add {
    /* Solid rose action disc: the sitewide add-to-cart rule already forces
       --kb-button with !important, so the disc follows it on purpose. */
    align-items: center;
    background: var(--kb-button);
    border: 0;
    border-radius: 50%;
    bottom: calc(var(--kb-space) * 2);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--kb-ink) 18%, transparent);
    color: var(--kb-button-ink);
    min-height: 0;
    padding: 0;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    position: absolute;
    right: calc(var(--kb-space) * 2);
    transition: background-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease), opacity var(--kb-motion-fast) var(--kb-ease);
    width: 40px;
    z-index: 3;
  }

  /* 44px touch target around the 40px disc. */
  .kb-product-card__quick-add::before {
    content: "";
    inset: -2px;
    position: absolute;
  }

  .kb-product-card__quick-add .kb-icon {
    height: 20px;
    width: 20px;
  }

  .kb-product-card__quick-add .kb-icon--check,
  .kb-product-card__quick-add.is-added .kb-icon--shopping-bag {
    display: none;
  }

  .kb-product-card__quick-add.is-added .kb-icon--check {
    display: block;
  }

  .kb-product-card__quick-add.is-added {
    background: var(--kb-success) !important;
    color: var(--kb-button-ink);
  }

  .kb-product-card__quick-add.loading {
    opacity: 0.55;
    pointer-events: none;
  }

  .kb-tile {
    gap: calc(var(--kb-space) * 0.75);
    padding: var(--kb-space) calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 2);
  }

  .kb-tile__media {
    aspect-ratio: 16 / 10;
    margin-bottom: calc(var(--kb-space) * 0.5);
  }

  /* Skin-aware tips are longer: keep the tile within its row. */
  .kb-tile__text {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }

  .kb-tile__link {
    display: none;
  }

  .kb-tile__placeholder .kb-icon {
    height: 32px;
    width: 32px;
  }

  /* The skin chips carry the message on phones; the helper line would make the tile taller than its row. */
  .kb-tile__text:has(+ .kb-tile__chips) {
    display: none;
  }

  .kb-tile__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  .kb-tile__title {
    font-size: 1rem;
  }

  .kb-tile__text {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .kb-tile__chips {
    gap: calc(var(--kb-space) * 0.5);
  }

  .kb-tile__chips a {
    font-size: 0.8125rem;
    min-height: 34px;
    padding: 0 var(--kb-space);
  }

  .kb-tile__cta {
    margin-top: calc(var(--kb-space) * 0.5);
    padding-inline: calc(var(--kb-space) * 1.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-product-card__quick-add,
  .kb-tile__chips a {
    transition-duration: 0s;
  }
}

/* 2026-10-15 taller card thumbnails: every catalogue image is a square with
   the grey studio backdrop baked in, and bottles use ~35% of the width but
   ~77% of the height. A 4:5 stage with cover sizing shows the product 25%
   larger and trims only empty backdrop at the sides (2 of 89 images lose a
   few edge pixels). */
.kb-product-card__image,
.kb-product-card__image--pending {
  aspect-ratio: 4 / 5;
}

.kb-product-card__image img,
.kb-product-card__image .kb-product-card__img--default,
.kb-product-card__image .kb-product-card__img--hover {
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   2026-10-15 cart drawer: 480px, relaxed spacing, live offers panel (free
   shipping bar + gift line), 80px item rows, an add-on slider with arrows
   (masks, patches, minis) and a single checkout action. Rounded left corners
   at every width. Scoped under .kb-cart-drawer to win over earlier layers.
   ========================================================================== */
.kb-cart-drawer .kb-cart-drawer__panel {
  border-radius: var(--kb-radius-card) 0 0 var(--kb-radius-card);
  max-width: 480px;
  overflow: hidden;
  width: min(480px, 100vw);
}

@media (max-width: 767px) {
  /* Phone: leave a 16px sliver of page so the rounded left edge reads as a sheet. */
  .kb-cart-drawer .kb-cart-drawer__panel {
    max-width: none;
    width: calc(100vw - (var(--kb-space) * 2));
  }
}

.kb-cart-drawer .kb-cart-drawer__header {
  border-bottom: 1px solid var(--kb-line);
  padding: calc(var(--kb-space) * 2.25) calc(var(--kb-space) * 3);
}

.kb-cart-drawer .kb-cart-drawer__header h2 {
  font-size: 1.375rem;
  margin: 0;
}

.kb-cart-drawer .kb-cart-drawer__offers {
  background: var(--kb-surface-alt);
  border-bottom: 1px solid var(--kb-line);
  display: grid;
  flex: none;
  gap: calc(var(--kb-space) * 1.25);
  padding: calc(var(--kb-space) * 2) calc(var(--kb-space) * 3);
}

.kb-cart-drawer .kb-cart-drawer__offer {
  align-items: center;
  color: var(--kb-ink);
  display: flex;
  font-size: 0.9375rem;
  gap: calc(var(--kb-space) * 1.25);
  line-height: 1.45;
}

.kb-cart-drawer .kb-cart-drawer__offer p {
  margin: 0;
}

.kb-cart-drawer .kb-cart-drawer__offer .kb-icon {
  color: var(--kb-accent);
  flex: 0 0 auto;
}

.kb-cart-drawer .kb-cart-drawer__offer.is-done .kb-icon {
  color: var(--kb-success);
}

.kb-cart-drawer .kb-cart-drawer__ship-track {
  background: var(--kb-line);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.kb-cart-drawer .kb-cart-drawer__ship-track span {
  background: var(--kb-accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width var(--kb-motion-base) var(--kb-ease);
}

.kb-cart-drawer .kb-cart-drawer__offer--shipping.is-done + .kb-cart-drawer__ship-track span {
  background: var(--kb-success);
}

.kb-cart-drawer .kb-cart-drawer__offer--gift {
  border-top: 1px dashed var(--kb-line-strong);
  padding-top: calc(var(--kb-space) * 1.25);
}

.kb-cart-drawer .kb-cart-drawer__scroll {
  padding: 0 calc(var(--kb-space) * 3);
}

.kb-cart-drawer .kb-cart-drawer__items {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-cart-drawer .kb-cart-drawer__item {
  align-items: start;
  border-bottom: 1px solid var(--kb-line);
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: 80px minmax(0, 1fr) 32px;
  margin: 0;
  padding: calc(var(--kb-space) * 2.25) 0;
}

.kb-cart-drawer .kb-cart-drawer__image {
  aspect-ratio: 4 / 5;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius);
  display: block;
  height: 100px;
  overflow: hidden;
  width: 80px;
}

.kb-cart-drawer .kb-cart-drawer__image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kb-cart-drawer .kb-cart-drawer__item-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kb-cart-drawer .kb-cart-drawer__item-name {
  -webkit-box-orient: vertical;
  color: var(--kb-ink);
  display: -webkit-box;
  font-size: 0.9375rem;
  font-weight: 600;
  -webkit-line-clamp: 2;
  line-height: 1.4;
  overflow: hidden;
  text-decoration: none;
}

.kb-cart-drawer .kb-cart-drawer__item-meta {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0;
}

.kb-cart-drawer .kb-cart-drawer__tag {
  background: var(--kb-success);
  border-radius: 999px;
  color: var(--kb-button-ink);
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 2px;
  padding: 1px 7px;
  text-transform: uppercase;
}

.kb-cart-drawer .kb-cart-drawer__item-bottom {
  align-items: center;
  display: flex;
  gap: var(--kb-space);
  justify-content: space-between;
  margin-top: var(--kb-space);
}

.kb-cart-drawer .kb-cart-drawer__quantity {
  align-items: center;
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  display: inline-flex;
  height: 36px;
  overflow: hidden;
}

.kb-cart-drawer .kb-cart-drawer__quantity .kb-icon-button {
  background: transparent;
  border: 0;
  height: 34px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  width: 34px;
}

.kb-cart-drawer .kb-cart-drawer__quantity input {
  -moz-appearance: textfield;
  appearance: textfield;
  background: transparent;
  border: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  height: 34px;
  min-height: 0;
  padding: 0;
  text-align: center;
  width: 32px;
}

.kb-cart-drawer .kb-cart-drawer__quantity input::-webkit-inner-spin-button,
.kb-cart-drawer .kb-cart-drawer__quantity input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kb-cart-drawer .kb-cart-drawer__price {
  align-items: baseline;
  color: var(--kb-ink);
  display: inline-flex;
  font-size: 1.0625rem;
  font-weight: 700;
  gap: 6px;
  white-space: nowrap;
}

.kb-cart-drawer .kb-cart-drawer__price del {
  color: var(--kb-ink-faint);
  font-size: 0.8125rem;
  font-weight: 500;
}

.kb-cart-drawer .kb-cart-drawer__price.is-sale > span {
  color: var(--kb-sale-red);
}

.kb-cart-drawer .kb-cart-drawer__price.is-free {
  color: var(--kb-success);
}

.kb-cart-drawer .kb-cart-drawer__qty-static {
  color: var(--kb-ink-soft);
  font-size: 0.875rem;
}

.kb-cart-drawer .kb-cart-drawer__remove {
  align-self: start;
  background: transparent;
  border: 0;
  color: var(--kb-ink-faint);
  height: 32px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  width: 32px;
}

.kb-cart-drawer .kb-cart-drawer__remove:hover,
.kb-cart-drawer .kb-cart-drawer__remove:focus-visible {
  color: var(--kb-sale-red);
}

/* Add-on slider: arrows, no scrollbar, price as the hook. */
.kb-cart-drawer .kb-cart-drawer__upsells {
  border: 0;
  margin: calc(var(--kb-space) * 3) 0;
  padding: 0;
}

.kb-cart-drawer .kb-cart-drawer__upsells-head {
  align-items: flex-end;
  display: flex;
  gap: calc(var(--kb-space) * 2);
  justify-content: space-between;
}

.kb-cart-drawer .kb-cart-drawer__upsells-head h3 {
  color: var(--kb-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.kb-cart-drawer .kb-cart-drawer__upsells-head h3 .amount {
  color: var(--kb-accent);
}

.kb-cart-drawer .kb-cart-drawer__upsells-head p {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 4px 0 0;
}

.kb-cart-drawer .kb-cart-drawer__upsell-nav {
  display: flex;
  flex: 0 0 auto;
  gap: calc(var(--kb-space) * 0.75);
}

.kb-cart-drawer .kb-cart-drawer__upsell-nav .kb-icon-button {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line-strong);
  border-radius: 50%;
  color: var(--kb-ink);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease), opacity var(--kb-motion-fast) var(--kb-ease);
  width: 36px;
}

.kb-cart-drawer .kb-cart-drawer__upsell-nav .kb-icon-button:hover:not(:disabled) {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

.kb-cart-drawer .kb-cart-drawer__upsell-nav .kb-icon-button:disabled {
  cursor: default;
  opacity: 0.35;
}

.kb-cart-drawer .kb-cart-drawer__upsell-row {
  display: flex;
  gap: calc(var(--kb-space) * 1.5);
  list-style: none;
  margin: calc(var(--kb-space) * 2) 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.kb-cart-drawer .kb-cart-drawer__upsell-row::-webkit-scrollbar {
  display: none;
}

.kb-cart-drawer .kb-cart-drawer__upsell {
  background: transparent;
  border: 0;
  display: flex;
  flex: 0 0 calc((100% - (var(--kb-space) * 3)) / 3);
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
  padding: 0;
  scroll-snap-align: start;
}

.kb-cart-drawer .kb-cart-drawer__upsell-media {
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius);
  overflow: hidden;
  position: relative;
}

.kb-cart-drawer .kb-cart-drawer__upsell-media > a:first-child,
.kb-cart-drawer .kb-cart-drawer__upsell-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kb-cart-drawer .kb-cart-drawer__upsell-flag {
  background: var(--kb-success);
  border-radius: 999px;
  color: var(--kb-button-ink);
  font-size: 0.625rem;
  font-weight: 700;
  left: 6px;
  line-height: 1.3;
  padding: 2px 6px;
  position: absolute;
  right: 6px;
  text-align: center;
  top: 6px;
}

.kb-cart-drawer .kb-cart-drawer__upsell-add {
  align-items: center;
  border: 0;
  border-radius: 50%;
  bottom: 8px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--kb-ink) 18%, transparent);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  position: absolute;
  right: 8px;
  width: 34px;
}

.kb-cart-drawer .kb-cart-drawer__upsell-add::before {
  content: "";
  inset: -5px;
  position: absolute;
}

.kb-cart-drawer .kb-cart-drawer__upsell-add .kb-icon--check,
.kb-cart-drawer .kb-cart-drawer__upsell-add.is-added .kb-icon--plus {
  display: none;
}

.kb-cart-drawer .kb-cart-drawer__upsell-add.is-added .kb-icon--check {
  display: block;
}

.kb-cart-drawer .kb-cart-drawer__upsell-add.is-added {
  background: var(--kb-success) !important;
}

.kb-cart-drawer .kb-cart-drawer__upsell-add.loading {
  opacity: 0.55;
  pointer-events: none;
}

.kb-cart-drawer .kb-cart-drawer__upsell-name {
  -webkit-box-orient: vertical;
  color: var(--kb-ink-soft);
  display: -webkit-box;
  font-size: 0.8125rem;
  -webkit-line-clamp: 2;
  line-height: 1.35;
  overflow: hidden;
  text-decoration: none;
}

/* Price is the hook: big, accent, with a quiet "Tik" in front. */
.kb-cart-drawer .kb-cart-drawer__upsell-price {
  align-items: baseline;
  color: var(--kb-accent);
  display: flex;
  font-size: 1.1875rem;
  font-weight: 800;
  gap: 4px;
  line-height: 1.1;
  order: -1;
}

.kb-cart-drawer .kb-cart-drawer__upsell-media {
  order: -2;
}

.kb-cart-drawer .kb-cart-drawer__upsell-price small {
  color: var(--kb-ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

/* One action: checkout. View cart stays as a quiet link. */
.kb-cart-drawer .kb-cart-drawer__foot {
  border-top: 1px solid var(--kb-line);
  box-shadow: 0 -8px 20px color-mix(in srgb, var(--kb-ink) 5%, transparent);
  display: grid;
  gap: var(--kb-space);
  padding: calc(var(--kb-space) * 2) calc(var(--kb-space) * 3) calc(var(--kb-space) * 2.5);
}

.kb-cart-drawer .kb-cart-drawer__subtotal {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.kb-cart-drawer .kb-cart-drawer__subtotal span {
  font-size: 0.9375rem;
  font-weight: 600;
}

.kb-cart-drawer .kb-cart-drawer__subtotal small {
  color: var(--kb-ink-soft);
  font-weight: 500;
}

.kb-cart-drawer .kb-cart-drawer__subtotal strong {
  font-size: 1.25rem;
}

.kb-cart-drawer .kb-cart-drawer__note {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  margin: 0;
}

.kb-cart-drawer .kb-cart-drawer__checkout {
  justify-content: center;
  margin-top: calc(var(--kb-space) * 0.5);
  min-height: 52px;
  width: 100%;
}

.kb-cart-drawer .kb-cart-drawer__view-cart {
  color: var(--kb-ink-soft);
  font-size: 0.875rem;
  justify-self: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-cart-drawer .kb-cart-drawer__view-cart:hover {
  color: var(--kb-accent);
}

@media (max-width: 767px) {
  .kb-cart-drawer .kb-cart-drawer__header,
  .kb-cart-drawer .kb-cart-drawer__offers,
  .kb-cart-drawer .kb-cart-drawer__foot {
    padding-inline: calc(var(--kb-space) * 2.5);
  }

  .kb-cart-drawer .kb-cart-drawer__scroll {
    padding: 0 calc(var(--kb-space) * 2.5);
  }

  .kb-cart-drawer .kb-cart-drawer__item {
    grid-template-columns: 72px minmax(0, 1fr) 32px;
  }

  .kb-cart-drawer .kb-cart-drawer__image {
    height: 90px;
    width: 72px;
  }

  /* Two and a bit cards on a phone, so the row visibly continues. */
  .kb-cart-drawer .kb-cart-drawer__upsell {
    flex-basis: 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-cart-drawer .kb-cart-drawer__ship-track span,
  .kb-cart-drawer .kb-cart-drawer__upsell-nav .kb-icon-button {
    transition-duration: 0s;
  }
}

/* 2026-10-15 cart page thumbnails: tall 4:5 stage with cover sizing, matching
   the product cards and the cart drawer (square images trim only backdrop). */
body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail {
  width: 112px;
}

body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail .ct-media-container {
  aspect-ratio: 4 / 5;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius);
  display: block;
  height: auto;
  overflow: hidden;
  width: 96px;
}

body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail img {
  aspect-ratio: 4 / 5;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 767px) {
  body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail .ct-media-container {
    width: 80px;
  }
}

/* 2026-10-15 drawer intro (first item in an empty cart; JS adds .is-intro):
   offers panel fades in from the left after the panel slides open, add-on
   cards slide up one by one, then the Next arrow shakes twice (.is-nudge).
   Delays mirror playDrawerIntro() in commerce-ui.js. */
@keyframes kb-drawer-fade-right {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kb-drawer-slide-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kb-drawer-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(5px);
  }

  45% {
    transform: translateX(-4px);
  }

  70% {
    transform: translateX(3px);
  }
}

.kb-cart-drawer .kb-cart-drawer__content.is-intro .kb-cart-drawer__offers {
  animation: kb-drawer-fade-right 520ms var(--kb-ease) 320ms both;
}

.kb-cart-drawer .kb-cart-drawer__content.is-intro .kb-cart-drawer__upsell {
  animation: kb-drawer-slide-up 450ms var(--kb-ease) calc(700ms + var(--kb-intro-i, 0) * 80ms) both;
}

.kb-cart-drawer .kb-cart-drawer__upsell-nav .kb-icon-button.is-nudge {
  animation: kb-drawer-nudge 480ms ease-in-out 2;
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

@media (prefers-reduced-motion: reduce) {
  .kb-cart-drawer .kb-cart-drawer__content.is-intro .kb-cart-drawer__offers,
  .kb-cart-drawer .kb-cart-drawer__content.is-intro .kb-cart-drawer__upsell,
  .kb-cart-drawer .kb-cart-drawer__upsell-nav .kb-icon-button.is-nudge {
    animation: none;
  }
}

/* ==========================================================================
   2026-10-16 Shopify-style cart page (owner request, same direction as the
   checkout): a 1200px shell, a theme heading with a continue-shopping link,
   quiet item rows with 4:5 thumbs, a tinted sticky totals card with rate
   cards, and one strong checkout action. Presentation only.
   ========================================================================== */
body.woocommerce-cart {
  background: var(--kb-surface);
  --kb-co-field-line: color-mix(in srgb, var(--kb-ink) 18%, var(--kb-surface));
  --kb-co-radius: calc(var(--kb-radius) * 0.625);
  --kb-co-card-radius: calc(var(--kb-radius) * 0.75);
}

/* Same no-sideways-scroll guarantee without breaking position: sticky. */
html:has(body.woocommerce-cart:not(.kb-overlay-open):not(.kb-cart-open)),
body.woocommerce-cart:not(.kb-overlay-open):not(.kb-cart-open) {
  overflow-x: clip;
  overflow-y: visible;
}

body.kb-cart-has-items .entry-header,
body.kb-cart-has-items .hero-section {
  display: none;
}

body.woocommerce-cart .entry-content > .woocommerce,
body.woocommerce-cart .woocommerce {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: calc(1200px + (var(--kb-space) * 8));
  padding-inline: calc(var(--kb-space) * 4);
  width: 100%;
}

@media (max-width: 767px) {
  body.woocommerce-cart .entry-content > .woocommerce,
  body.woocommerce-cart .woocommerce {
    padding-inline: calc(var(--kb-space) * 2);
  }
}

body.kb-cart-has-items .ct-container-full {
  padding-top: calc(var(--kb-space) * 5);
}

.kb-cart-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space) calc(var(--kb-space) * 3);
  justify-content: space-between;
  margin: 0 0 calc(var(--kb-space) * 3);
}

.kb-cart-head h1 {
  color: var(--kb-ink);
  font-size: var(--kb-fs-h2);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.kb-cart-head a {
  color: var(--kb-accent);
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-cart .ct-woocommerce-cart-form {
  align-items: start;
  column-gap: calc(var(--kb-space) * 7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
}

body.woocommerce-cart .woocommerce-cart-form {
  min-width: 0;
}

/* Free-shipping progress: compact strip above the items. */
body.woocommerce-cart .woocommerce-cart-form .kb-free-ship {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-co-card-radius);
  gap: calc(var(--kb-space) * 0.75);
  margin: 0 0 calc(var(--kb-space) * 3);
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
}

body.woocommerce-cart .woocommerce-cart-form .kb-free-ship__copy {
  font-size: var(--kb-fs-meta);
}

body.woocommerce-cart .woocommerce-cart-form .kb-free-ship__copy strong {
  font-weight: 600;
}

body.woocommerce-cart .woocommerce-cart-form .kb-free-ship__track {
  background: var(--kb-line);
  height: 6px;
}

/* Item rows. */
body.woocommerce-cart table.shop_table.cart {
  background: transparent;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0;
  width: 100%;
}

body.woocommerce-cart table.shop_table.cart thead th {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kb-line);
  color: var(--kb-ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0 0 calc(var(--kb-space) * 1.5);
  text-transform: uppercase;
}

body.woocommerce-cart table.shop_table.cart thead .product-quantity {
  text-align: center;
}

body.woocommerce-cart table.shop_table.cart thead .product-subtotal {
  text-align: right;
}

body.woocommerce-cart table.shop_table.cart tbody td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kb-line);
  padding: calc(var(--kb-space) * 3) 0;
  vertical-align: middle;
}

body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail {
  width: 96px;
}

body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail .ct-media-container {
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-co-radius);
  box-sizing: border-box;
  height: 120px;
  width: 96px;
}

body.woocommerce-cart table.shop_table.cart td.product-name {
  padding-left: calc(var(--kb-space) * 2.5);
  padding-right: calc(var(--kb-space) * 2);
}

body.woocommerce-cart table.shop_table.cart td.product-name > a {
  color: var(--kb-ink);
  font-size: var(--kb-fs-card);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

body.woocommerce-cart table.shop_table.cart td.product-name > a:hover {
  color: var(--kb-accent);
  text-decoration: underline;
}

body.woocommerce-cart table.shop_table.cart td.product-name .price {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  font-weight: 500;
  margin: calc(var(--kb-space) * 0.5) 0 0;
}

body.woocommerce-cart table.shop_table.cart td.product-name .variation,
body.woocommerce-cart table.shop_table.cart td.product-name dl {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  margin: calc(var(--kb-space) * 0.5) 0 0;
}

body.woocommerce-cart table.shop_table.cart td.product-quantity {
  text-align: center;
  width: 136px;
}

body.woocommerce-cart table.shop_table.cart .quantity {
  margin-inline: auto;
}

body.woocommerce-cart table.shop_table.cart td.product-subtotal {
  color: var(--kb-ink);
  font-size: var(--kb-fs-card);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  width: 96px;
}

body.woocommerce-cart table.shop_table.cart td.product-remove {
  padding-left: calc(var(--kb-space) * 1.5);
  text-align: right;
  width: 32px;
}

body.woocommerce-cart table.shop_table.cart a.remove {
  color: var(--kb-ink-faint);
  opacity: 1;
}

body.woocommerce-cart table.shop_table.cart a.remove:hover {
  color: var(--kb-accent);
}

/* Coupon and update: quiet, outlined, never competing with checkout. */
body.woocommerce-cart table.shop_table.cart td.actions {
  border-bottom: 0;
  padding: calc(var(--kb-space) * 2.5) 0 0;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon {
  align-items: center;
  display: flex;
  gap: var(--kb-space);
}

body.woocommerce-cart table.shop_table.cart td.actions #coupon_code {
  background: var(--kb-surface);
  border: 1px solid var(--kb-co-field-line) !important;
  border-radius: var(--kb-co-radius) !important;
  font-size: var(--kb-fs-meta);
  height: 44px;
  min-height: 44px;
  padding: 0 calc(var(--kb-space) * 1.5);
  width: 220px;
}

body.woocommerce-cart table.shop_table.cart td.actions button.button {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-co-field-line) !important;
  color: var(--kb-ink) !important;
  font-weight: 600;
  min-height: 44px;
  padding-inline: calc(var(--kb-space) * 2.25);
}

body.woocommerce-cart table.shop_table.cart td.actions button.button:hover:not(:disabled) {
  background: var(--kb-surface-alt) !important;
  border-color: var(--kb-accent) !important;
  color: var(--kb-accent) !important;
}

body.woocommerce-cart table.shop_table.cart td.actions button.button:disabled {
  opacity: 0.55;
}

/* Totals card: tinted, sticky, rate cards, one strong action. */
body.woocommerce-cart .cart_totals {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  box-sizing: border-box;
  padding: calc(var(--kb-space) * 3);
  position: sticky;
  top: calc(var(--kb-space) * 3);
  width: 100%;
}

body.woocommerce-cart .cart_totals > h2 {
  color: var(--kb-ink);
  font-size: 1.125rem;
  font-weight: 650;
  margin: 0 0 calc(var(--kb-space) * 1.5);
}

body.woocommerce-cart .cart_totals table.shop_table {
  background: transparent;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent;
  border: 0;
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  padding: var(--kb-space) 0;
  vertical-align: middle;
}

body.woocommerce-cart .cart_totals table.shop_table th {
  font-weight: 500;
  text-align: left;
}

body.woocommerce-cart .cart_totals table.shop_table td {
  font-weight: 600;
  text-align: right;
}

body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  border-bottom: 1px solid var(--kb-line);
  border-top: 1px solid var(--kb-line);
  padding: calc(var(--kb-space) * 2) 0;
  text-align: left;
}

body.woocommerce-cart .cart_totals .ct-shipping-heading {
  color: var(--kb-ink);
  font-size: var(--kb-fs-meta);
  font-weight: 650;
  margin: 0 0 calc(var(--kb-space) * 1.25);
}

body.woocommerce-cart .cart_totals #shipping_method {
  display: grid;
  gap: var(--kb-space);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart .cart_totals #shipping_method li {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-co-field-line);
  border-radius: var(--kb-co-radius);
  display: flex;
  gap: calc(var(--kb-space) * 1.25);
  margin: 0;
  min-height: 52px;
  overflow: visible;
  padding: 0 calc(var(--kb-space) * 1.75);
  position: relative;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), box-shadow var(--kb-motion-fast) var(--kb-ease);
}

body.woocommerce-cart .cart_totals #shipping_method li:hover {
  border-color: var(--kb-accent);
}

body.woocommerce-cart .cart_totals #shipping_method li:has(input:checked),
body.woocommerce-cart .cart_totals #shipping_method li:has(input[type="hidden"]) {
  border-color: var(--kb-accent);
  box-shadow: inset 0 0 0 1px var(--kb-accent);
}

body.woocommerce-cart .cart_totals #shipping_method input[type="radio"] {
  accent-color: var(--kb-accent);
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}

body.woocommerce-cart .cart_totals #shipping_method label {
  align-items: center;
  color: var(--kb-ink);
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  gap: var(--kb-space);
  justify-content: space-between;
  margin: 0;
  min-width: 0;
  padding: calc(var(--kb-space) * 1.5) 0;
  white-space: normal;
}

body.woocommerce-cart .cart_totals #shipping_method label::after {
  content: "";
  inset: 0;
  position: absolute;
}

body.woocommerce-cart .cart_totals #shipping_method .kb-rate__cost {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals .kb-cart-secure {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  margin: calc(var(--kb-space) * 1.25) 0 0;
}

body.woocommerce-cart .cart_totals .shipping-calculator-button {
  color: var(--kb-ink-soft);
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: calc(var(--kb-space) * 0.75);
  text-decoration: underline;
}

body.woocommerce-cart .cart_totals .shipping-calculator-form .input-text,
body.woocommerce-cart .cart_totals .shipping-calculator-form select {
  border: 1px solid var(--kb-co-field-line) !important;
  border-radius: var(--kb-co-radius) !important;
  font-size: 1rem;
  min-height: 44px;
}

body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  font-size: 1.25rem;
  font-weight: 750;
  padding-top: calc(var(--kb-space) * 2);
}

body.woocommerce-cart .cart_totals tr.order-total td strong {
  font-weight: inherit;
}

body.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  margin: calc(var(--kb-space) * 2) 0 0;
  padding: 0;
}

body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
  align-items: center;
  display: flex;
  font-size: var(--kb-fs-body) !important;
  font-weight: 700;
  justify-content: center;
  margin: 0;
  min-height: 56px;
  width: 100%;
}

body.woocommerce-cart .cart_totals .kb-cart-secure {
  text-align: center;
}

@media (max-width: 999px) {
  body.woocommerce-cart .ct-woocommerce-cart-form {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--kb-space) * 4);
  }

  body.woocommerce-cart .cart_totals {
    position: static;
  }
}

@media (max-width: 767px) {
  body.kb-cart-has-items .ct-container-full {
    padding-top: calc(var(--kb-space) * 3);
  }

  .kb-cart-head h1 {
    font-size: 1.5rem;
  }

  body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail {
    width: 80px;
  }

  body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail .ct-media-container {
    height: 100px;
    width: 80px;
  }

  body.woocommerce-cart table.shop_table.cart td.product-name {
    padding-left: calc(var(--kb-space) * 1.75);
    padding-right: 0;
  }

  body.woocommerce-cart table.shop_table.cart td.actions .coupon {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  body.woocommerce-cart table.shop_table.cart td.actions .coupon button.button {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
  }

  body.woocommerce-cart table.shop_table.cart td.actions #coupon_code {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  body.woocommerce-cart .cart_totals {
    padding: calc(var(--kb-space) * 2.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-cart .cart_totals #shipping_method li {
    transition-duration: 0s;
  }
}

/* ==========================================================================
   2026-10-16 cart polish (owner request): Blocksy's default blue no longer
   leaks into buttons, steppers, focus rings or selection; one centred logo
   loader; tokenized notices; quiet calculator button; Shopify-style coupon
   field in the checkout summary; cart upsell rows.
   ========================================================================== */

/* Blocksy prints its default palette inline on :root after tokens.css, so the
   interactive vars it derives from palette-1/2 resolve to blue. Re-point only
   those (doubled :root wins); text, heading and page colours are untouched. */
:root:root {
  --theme-button-background-initial-color: var(--kb-button);
  --theme-button-background-hover-color: var(--kb-button-hover);
  --theme-button-text-initial-color: var(--kb-button-ink);
  --theme-button-text-hover-color: var(--kb-button-ink);
  --theme-link-initial-color: var(--kb-accent);
  --theme-link-hover-color: var(--kb-accent);
  --theme-form-field-border-focus-color: var(--kb-accent);
  --theme-form-selection-field-active-color: var(--kb-accent);
  --theme-selection-background-color: var(--kb-accent);
}

/* Quantity steppers: soft ink arrows, a blush hover, never a filled blue square. */
div.quantity {
  --quantity-arrows-initial-color: var(--kb-ink-soft);
  --quantity-arrows-hover-color: var(--kb-accent);
  --quantity-hover-color: var(--kb-blush-tint);
}

div.quantity .ct-increase,
div.quantity .ct-decrease {
  border-radius: 50%;
}

div.quantity input.qty:focus,
div.quantity input.qty:focus-visible {
  border-color: var(--kb-accent) !important;
  box-shadow: 0 0 0 3px var(--kb-accent-tint) !important;
  outline: 0;
}

/* Loader: Blocksy centres the overlay's ::before with inset: 0 + margin: auto;
   the old negative margin pushed the mark into the corner. One mark per busy
   area, on a small white disc. */
.woocommerce .blockUI.blockOverlay::before,
.woocommerce .loader::before,
.woocommerce-checkout .blockUI.blockOverlay::before {
  background: var(--kb-surface) url("../images/logo-loader.svg") center / 44px auto no-repeat;
  border-radius: 50%;
  bottom: 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--kb-ink) 12%, transparent);
  height: 72px;
  left: 0;
  margin: auto;
  max-height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 72px;
}

.woocommerce .blockUI.blockOverlay {
  opacity: 0.8 !important;
}

/* The checkout summary column sits on the blush surface, so a white wash there
   flashed a white box while totals refreshed. Match the column instead. */
.woocommerce .kb-checkout__summary .blockUI.blockOverlay {
  background-color: var(--kb-surface-alt) !important;
}

/* While the item list is busy, only it shows the mark; the totals card just dims. */
.ct-woocommerce-cart-form:has(.woocommerce-cart-form.processing) .cart_totals .blockUI.blockOverlay::before {
  display: none;
}

/* Notices (removed item + undo, cart updated, coupon messages). */
body.woocommerce-page .woocommerce-notices-wrapper:empty {
  display: none;
}

body.woocommerce-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  align-items: center;
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: calc(var(--kb-radius) * 0.75);
  box-shadow: none;
  color: var(--kb-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--kb-fs-meta);
  gap: var(--kb-space) calc(var(--kb-space) * 1.5);
  line-height: 1.5;
  margin: 0 0 calc(var(--kb-space) * 2.5);
  max-width: none;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2);
}

body.woocommerce-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  color: var(--kb-accent);
  position: static;
}

body.woocommerce-page .woocommerce-error {
  background: var(--kb-sale-tint);
  border-color: var(--kb-sale-tint);
}

body.woocommerce-page .woocommerce-error::before {
  color: var(--kb-sale-red);
}

body.woocommerce-page :is(.woocommerce-message, .woocommerce-info) a.restore-item,
body.woocommerce-page :is(.woocommerce-message, .woocommerce-info) a.button {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-accent) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-accent) !important;
  font-size: 0.8125rem !important;
  font-weight: 700;
  margin-left: auto;
  min-height: 36px;
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 2);
  text-decoration: none;
}

body.woocommerce-page :is(.woocommerce-message, .woocommerce-info) a.restore-item:hover,
body.woocommerce-page :is(.woocommerce-message, .woocommerce-info) a.button:hover {
  background: var(--kb-accent) !important;
  color: var(--kb-button-ink) !important;
}

/* AJAX quantities: the update button is redundant once the script is running. */
body.kb-cart-ajax .woocommerce-cart-form button[name="update_cart"] {
  display: none !important;
}

body.kb-cart-ajax table.shop_table.cart td.actions .coupon {
  width: 100%;
}

/* Shipping calculator: a quiet outlined action, not a filled (blue) button. */
body.woocommerce-cart .cart_totals .shipping-calculator-form {
  display: grid;
  gap: calc(var(--kb-space) * 1.25);
  margin-top: calc(var(--kb-space) * 1.5);
}

body.woocommerce-cart .cart_totals .shipping-calculator-form p {
  margin: 0;
}

body.woocommerce-cart .cart_totals .shipping-calculator-form label {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"] {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-accent) !important;
  border-radius: var(--kb-radius-control) !important;
  color: var(--kb-accent) !important;
  font-size: var(--kb-fs-meta) !important;
  font-weight: 700;
  min-height: 44px;
  width: 100%;
}

body.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"]:hover {
  background: var(--kb-accent) !important;
  color: var(--kb-button-ink) !important;
}

/* Checkout: Shopify-style discount field between the items and the totals. */
.kb-checkout__summary table.shop_table tr.kb-coupon-row td {
  border-top: 1px solid var(--kb-line);
  padding: calc(var(--kb-space) * 2) 0;
}

.kb-coupon {
  display: flex;
  gap: var(--kb-space);
}

.kb-coupon input.kb-coupon__input {
  background: var(--kb-surface);
  border: 1px solid var(--kb-co-field-line) !important;
  border-radius: var(--kb-co-radius) !important;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--kb-ink);
  flex: 1 1 auto;
  font-size: 1rem;
  height: 48px;
  min-width: 0;
  padding: 0 calc(var(--kb-space) * 1.75);
}

.kb-coupon input.kb-coupon__input.has-error {
  border-color: var(--kb-sale-red) !important;
}

body.woocommerce-checkout .kb-coupon button.kb-coupon__apply {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-co-field-line) !important;
  border-radius: var(--kb-co-radius) !important;
  color: var(--kb-ink) !important;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: var(--kb-fs-meta) !important;
  font-weight: 700;
  height: 48px;
  min-height: 48px;
  padding: 0 calc(var(--kb-space) * 2.25);
}

body.woocommerce-checkout .kb-coupon button.kb-coupon__apply:hover:not(:disabled),
body.woocommerce-checkout .kb-coupon.has-value button.kb-coupon__apply {
  background: var(--kb-button) !important;
  border-color: var(--kb-button) !important;
  color: var(--kb-button-ink) !important;
}

body.woocommerce-checkout .kb-coupon button.kb-coupon__apply:disabled {
  opacity: 0.6;
}

.kb-coupon__msg {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: var(--kb-space) 0 0;
  text-align: left;
  white-space: normal;
}

.kb-coupon__msg:empty {
  display: none;
}

.kb-coupon__msg.is-error {
  color: var(--kb-sale-red);
}

.kb-coupon__msg.is-success {
  color: var(--kb-success);
}

.kb-coupon__msg :is(ul, li, p, div) {
  background: none;
  border: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-coupon__msg :is(ul, div)::before {
  display: none;
}

.kb-checkout__summary .cart-discount td a.woocommerce-remove-coupon {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-left: calc(var(--kb-space) * 0.5);
}

.kb-checkout__summary .cart-discount th,
.kb-checkout__summary .cart-discount td {
  color: var(--kb-success);
}

/* Cart upsell rows: top sellers and small-price add-ons, full product cards. */
.kb-cart-upsells {
  border-top: 1px solid var(--kb-line);
  margin-top: calc(var(--kb-space) * 6);
  padding-top: calc(var(--kb-space) * 5);
}

.kb-cart-upsell + .kb-cart-upsell {
  margin-top: calc(var(--kb-space) * 5);
}

.kb-cart-upsell__head {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space) calc(var(--kb-space) * 3);
  justify-content: space-between;
  margin-bottom: calc(var(--kb-space) * 2.5);
}

.kb-cart-upsell__head h2 {
  color: var(--kb-ink);
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.2;
  margin: 0;
}

.kb-cart-upsell__head p {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: calc(var(--kb-space) * 0.5) 0 0;
}

.kb-cart-upsell__head a {
  color: var(--kb-accent);
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .kb-cart-upsells {
    margin-top: calc(var(--kb-space) * 4);
    padding-top: calc(var(--kb-space) * 4);
  }

  .kb-cart-upsell__head h2 {
    font-size: 1.1875rem;
  }

  body.woocommerce-page :is(.woocommerce-message, .woocommerce-info) a.restore-item {
    margin-left: 0;
  }
}

/* 2026-10-16 row-level cart updates: only the changed row dims (or fades out
   when removed) while the totals card shows the logo loader; the toast can
   carry an undo link. */
body.woocommerce-cart .woocommerce-cart-form tr.cart_item {
  transition: opacity var(--kb-motion-base) var(--kb-ease);
}

body.woocommerce-cart .woocommerce-cart-form tr.cart_item.is-updating {
  opacity: 0.55;
}

body.woocommerce-cart .woocommerce-cart-form tr.cart_item.is-updating .quantity {
  pointer-events: none;
}

body.woocommerce-cart .woocommerce-cart-form tr.cart_item.is-removing {
  opacity: 0;
  pointer-events: none;
}

.kb-commerce-notice:has(.kb-commerce-notice__action) {
  pointer-events: auto;
}

.kb-commerce-notice__action {
  color: var(--kb-accent);
  font-weight: 700;
  margin-left: calc(var(--kb-space) * 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-commerce-notice__action:hover {
  color: var(--kb-accent-strong);
}

/* ==========================================================================
   2026-10-16 toast (owner request): fixed top-right just below the header,
   solid deep rose so it stands out on white pages, white copy, and a progress
   bar that runs out as it closes. Phones: full width under the header.
   ========================================================================== */
.kb-commerce-notice {
  align-items: center;
  background: var(--kb-accent);
  border: 0;
  border-radius: calc(var(--kb-radius) * 0.75);
  bottom: auto;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--kb-ink) 22%, transparent);
  box-sizing: border-box;
  color: var(--kb-accent-ink);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: calc(var(--kb-space) * 1.5);
  left: auto;
  line-height: 1.4;
  max-width: min(calc(100vw - 32px), 400px);
  min-width: min(calc(100vw - 32px), 280px);
  overflow: hidden;
  padding: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 2.25) calc(var(--kb-space) * 2);
  pointer-events: auto;
  position: fixed;
  right: calc(var(--kb-space) * 3);
  top: var(--kb-toast-top, calc(var(--kb-space) * 2));
  transform: translateX(calc(var(--kb-space) * 3));
  z-index: 10020;
}

.kb-commerce-notice[hidden] {
  display: none;
}

.kb-commerce-notice.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.kb-commerce-notice.is-error {
  background: var(--kb-sale-red);
  color: var(--kb-accent-ink);
}

.kb-commerce-notice__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Room for the wave under the copy. */
.kb-commerce-notice {
  padding-bottom: calc(var(--kb-space) * 2.75);
}

/* Progress bar: a flowing water wave (owner request 2026-10-16). The wave is a
   repeating SVG mask over a token-coloured strip; mask-position makes it flow,
   and a clip-path inset drains it from the right over --kb-toast-duration (a
   scaleX would squash the waves). Hover pauses both. The SVG only supplies the
   mask's alpha, so its stroke colour is irrelevant to the palette. */
.kb-commerce-notice::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0.6 12 4 T24 4' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 24px 8px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0.6 12 4 T24 4' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 24px 8px repeat-x;
  background: color-mix(in srgb, var(--kb-accent-ink) 85%, transparent);
  bottom: 3px;
  clip-path: inset(0 0 0 0);
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  right: 0;
  transform: none;
}

.kb-commerce-notice.is-running::after {
  animation:
    kb-toast-drain var(--kb-toast-duration, 3000ms) linear forwards,
    kb-toast-wave 0.9s linear infinite;
}

.kb-commerce-notice:hover::after {
  animation-play-state: paused;
}

@keyframes kb-toast-drain {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 100% 0 0); }
}

@keyframes kb-toast-wave {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: -24px 0; mask-position: -24px 0; }
}

.kb-commerce-notice .kb-commerce-notice__action {
  border: 1px solid color-mix(in srgb, var(--kb-accent-ink) 70%, transparent);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent-ink);
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0;
  padding: calc(var(--kb-space) * 0.5) calc(var(--kb-space) * 1.5);
  text-decoration: none;
}

.kb-commerce-notice .kb-commerce-notice__action:hover,
.kb-commerce-notice .kb-commerce-notice__action:focus-visible {
  background: var(--kb-accent-ink);
  color: var(--kb-accent);
}

@media (max-width: 767px) {
  .kb-commerce-notice {
    left: calc(var(--kb-space) * 2);
    max-width: none;
    min-width: 0;
    right: calc(var(--kb-space) * 2);
    transform: translateY(calc(var(--kb-space) * -1.5));
  }

  .kb-commerce-notice.is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-commerce-notice,
  .kb-commerce-notice.is-visible {
    transform: none;
  }

  .kb-commerce-notice.is-running::after {
    animation: none;
  }
}

/* 2026-10-16 drawer actions (owner request): "View cart" and "Checkout" share one
   row; checkout is the wider solid rose button, view cart a quiet outlined one. */
.kb-cart-drawer .kb-cart-drawer__actions {
  display: grid;
  gap: var(--kb-space);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  margin-top: calc(var(--kb-space) * 0.5);
}

.kb-cart-drawer .kb-cart-drawer__actions .kb-cart-drawer__checkout {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--kb-button) 35%, transparent);
  font-size: var(--kb-fs-body);
  font-weight: 700;
  margin: 0;
  min-height: 52px;
}

.kb-cart-drawer .kb-cart-drawer__actions .kb-cart-drawer__view-cart {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid color-mix(in srgb, var(--kb-ink) 18%, var(--kb-surface));
  border-radius: var(--kb-radius-control);
  box-sizing: border-box;
  color: var(--kb-ink);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  justify-content: center;
  justify-self: stretch;
  min-height: 52px;
  padding: 0 calc(var(--kb-space) * 1.5);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}

.kb-cart-drawer .kb-cart-drawer__actions .kb-cart-drawer__view-cart:hover,
.kb-cart-drawer .kb-cart-drawer__actions .kb-cart-drawer__view-cart:focus-visible {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

/* 2026-10-16 hover contrast: the footer is dark ink, so its language switcher
   reads in the same light ink as the footer links, never the header's dark ink. */
.kb-site-footer .kb-language-switcher__trigger {
  color: color-mix(in srgb, var(--kb-button-ink), transparent 18%);
}

.kb-site-footer .kb-language-switcher__trigger:hover,
.kb-site-footer .kb-language-switcher__trigger:focus-visible,
.kb-site-footer .kb-language-switcher.is-open .kb-language-switcher__trigger {
  background: color-mix(in srgb, var(--kb-button-ink) 10%, transparent) !important;
  color: var(--kb-button-ink);
}

/* Selected (solid) catalogue chip keeps white text on hover. */
.kb-catalog__suggestion.is-active:hover,
.kb-catalog__suggestion.is-active:focus-visible {
  background: var(--kb-button-hover);
  border-color: var(--kb-button-hover);
  color: var(--kb-button-ink);
}

/* Small desktop (981–1279px): logo, nav and utilities do not fit one row, so
   the nav drops to its own centred row under logo + actions, like the >=1280
   rail. Search stays behind the overlay icon here; the unscoped
   .kb-header-search display rule above would otherwise show a stray pill.
   The mega-menu triggers return at 981–1023 now that the nav row has room. */
@media (min-width: 981px) and (max-width: 1279px) {
  .kb-site-header__inner {
    grid-template-areas:
      "logo actions"
      "nav nav";
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding-block: calc(var(--kb-space) * 1.5) 0;
    row-gap: calc(var(--kb-space) * 1.25);
  }

  .kb-site-header__logo {
    justify-self: start;
  }

  .kb-header-search {
    display: none;
  }

  .kb-site-header__nav {
    border-top: 1px solid var(--kb-line);
    justify-content: center;
    justify-self: stretch;
    min-height: 2.5rem;
    padding-block: calc(var(--kb-space) * 1.25);
    width: 100%;
  }

  .kb-mega-menu {
    display: block;
  }
}

/* ==========================================================================
   2026-10-16 newsletter signup, homepage band and footer redesign.
   Kept last so it supersedes the earlier footer/newsletter layers. Markup:
   kb_newsletter_form() in inc/newsletter.php, kb_site_footer() in functions.php.
   ========================================================================== */

/* Shared signup form: one white pill holding the email field and the button. */
.kb-signup {
  display: grid;
  gap: calc(var(--kb-space) * 1.25);
  margin: 0;
  max-width: 560px;
  position: relative;
  width: 100%;
}

.kb-signup__field {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--kb-ink) 8%, transparent);
  display: flex;
  gap: calc(var(--kb-space) * 0.5);
  padding: 6px;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), box-shadow var(--kb-motion-fast) var(--kb-ease);
}

.kb-signup__field:focus-within {
  border-color: var(--kb-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kb-accent) 16%, transparent), 0 14px 36px color-mix(in srgb, var(--kb-ink) 8%, transparent);
}

.kb-signup__box {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.kb-signup__box > .kb-icon {
  color: var(--kb-ink-faint);
  flex: 0 0 auto;
  height: var(--kb-icon-sm);
  margin-left: calc(var(--kb-space) * 1.75);
  width: var(--kb-icon-sm);
}

.kb-signup .kb-signup__input,
.kb-signup .kb-signup__input:focus {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--kb-ink);
  flex: 1 1 auto;
  font-family: var(--kb-font-body);
  font-size: 1rem;
  height: 48px;
  min-height: 48px;
  min-width: 0;
  outline: none !important;
  padding: 0 calc(var(--kb-space) * 1.25) !important;
  text-align: left;
  width: 100%;
}

.kb-signup .kb-signup__input::placeholder { color: var(--kb-ink-faint); opacity: 1; }

.kb-signup .kb-signup__submit {
  align-items: center;
  background: var(--kb-button);
  border: 0;
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--kb-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  gap: var(--kb-space);
  justify-content: center;
  letter-spacing: 0.01em;
  margin: 0;
  min-height: 48px;
  padding: 0 calc(var(--kb-space) * 2.75);
  transition: background var(--kb-motion-fast) var(--kb-ease);
  white-space: nowrap;
}

.kb-signup .kb-signup__submit:hover,
.kb-signup .kb-signup__submit:focus-visible {
  background: var(--kb-button-hover);
  color: var(--kb-button-ink);
}

.kb-signup__submit .kb-icon {
  height: var(--kb-icon-sm);
  transition: transform var(--kb-motion-fast) var(--kb-ease);
  width: var(--kb-icon-sm);
}

.kb-signup__submit:hover .kb-icon { transform: translateX(2px); }

.kb-signup.is-busy .kb-signup__submit { opacity: 0.7; pointer-events: none; }

.kb-signup__hp {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.kb-signup .kb-signup__legal {
  color: var(--kb-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.kb-signup .kb-signup__legal a {
  color: inherit;
  display: inline;
  font-size: inherit;
  margin: 0;
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.kb-signup .kb-signup__status {
  color: var(--kb-success);
  font-size: var(--kb-fs-meta);
  font-weight: 650;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.kb-signup .kb-signup__status[hidden] { display: none; }
.kb-signup.is-error .kb-signup__status { color: var(--kb-accent-strong); }

/* After a successful signup the form gives way to the confirmation message. */
.kb-signup.is-done .kb-signup__field,
.kb-signup.is-done .kb-signup__legal { display: none; }

.kb-signup.is-done .kb-signup__status {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink);
  padding: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 2.25);
}

@media (max-width: 559px) {
  .kb-signup__field {
    background: transparent;
    border: 0;
    box-shadow: none;
    flex-direction: column;
    gap: var(--kb-space);
    padding: 0;
  }

  .kb-signup__field:focus-within { box-shadow: none; }

  .kb-signup__box {
    background: var(--kb-surface);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-control);
    width: 100%;
  }

  .kb-signup__box:focus-within {
    border-color: var(--kb-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kb-accent) 16%, transparent);
  }

  .kb-signup .kb-signup__submit { width: 100%; }
}

/* Homepage band: title and form only, framed by the image tickers. */
.kb-section.kb-newsletter > .kb-newsletter__inner {
  gap: calc(var(--kb-space) * 3);
  max-width: 720px;
  padding-block: calc(var(--kb-space) * 1.5);
}

.kb-newsletter .kb-newsletter__title {
  color: var(--kb-ink);
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.kb-newsletter__title em,
.kb-footer-signup__title em {
  color: var(--kb-accent);
  font-style: normal;
  white-space: nowrap;
}

.kb-newsletter .kb-signup { justify-items: center; margin-inline: auto; }
.kb-newsletter .kb-signup__field { width: 100%; }
.kb-newsletter .kb-signup__legal,
.kb-newsletter .kb-signup__status { text-align: center; }

/* Footer --------------------------------------------------------------- */
.kb-site-footer {
  --kb-ft-gutter: clamp(16px, 4vw, var(--kb-page-gutter));
  --kb-ft-ink-soft: color-mix(in srgb, var(--kb-button-ink), transparent 30%);
  --kb-ft-line: color-mix(in srgb, var(--kb-button-ink), transparent 84%);
  background: var(--kb-ink);
  color: var(--kb-button-ink);
}

.kb-site-footer :is(.kb-footer-trust__list, .kb-site-footer__main, .kb-site-footer__bar) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: calc(var(--kb-contentw) + 2 * var(--kb-ft-gutter));
  padding-inline: var(--kb-ft-gutter);
  width: 100%;
}

/* Trust strip: light band that bridges page content and the dark footer. */
.kb-footer-trust {
  background: var(--kb-surface-alt);
  border-top: 1px solid var(--kb-line);
  color: var(--kb-ink);
}

.kb-site-footer .kb-footer-trust__list {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin-block: 0;
  padding-block: calc(var(--kb-space) * 3.5);
}

.kb-footer-trust__item { margin: 0; min-width: 0; }

.kb-site-footer .kb-footer-trust__item > :is(a, span) {
  align-items: center;
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 1.5);
  margin: 0;
  min-height: 0;
  padding: var(--kb-space);
  text-decoration: none;
}

.kb-site-footer .kb-footer-trust__item > a:hover,
.kb-site-footer .kb-footer-trust__item > a:focus-visible {
  background: var(--kb-blush-tint);
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-footer-trust__icon {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: 50%;
  color: var(--kb-accent);
  display: inline-flex;
  flex: 0 0 auto;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.kb-footer-trust__icon .kb-icon { height: var(--kb-icon); width: var(--kb-icon); }

.kb-footer-trust__copy { display: grid; gap: 2px; line-height: 1.35; min-width: 0; }
.kb-footer-trust__copy strong { color: var(--kb-ink); font-size: 0.9375rem; font-weight: 700; }
.kb-footer-trust__copy span { color: var(--kb-ink-soft); font-size: 0.8125rem; }

/* Signup card at the top of the dark footer. */
.kb-site-footer__main { padding-block: calc(var(--kb-space) * 6) calc(var(--kb-space) * 3); }

.kb-footer-signup {
  align-items: center;
  background: color-mix(in srgb, var(--kb-button-ink) 6%, transparent);
  border: 1px solid var(--kb-ft-line);
  border-radius: calc(var(--kb-radius-card) + 6px);
  display: grid;
  gap: calc(var(--kb-space) * 3);
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  margin-bottom: calc(var(--kb-space) * 6);
  padding: calc(var(--kb-space) * 4) calc(var(--kb-space) * 4.5);
  scroll-margin-top: 120px;
}

.kb-site-footer .kb-footer-signup__eyebrow {
  align-items: center;
  color: color-mix(in srgb, var(--kb-blush-tint), var(--kb-button) 30%);
  display: inline-flex;
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.75);
  letter-spacing: var(--kb-ls-eyebrow);
  margin: 0 0 var(--kb-space);
  text-transform: uppercase;
}

.kb-footer-signup__eyebrow .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }

.kb-site-footer .kb-footer-signup__title {
  color: var(--kb-button-ink);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.kb-footer-signup__title em { color: color-mix(in srgb, var(--kb-blush-tint), var(--kb-button) 35%); }

.kb-footer-signup .kb-signup { justify-self: end; }
.kb-footer-signup .kb-signup__field { border-color: transparent; box-shadow: none; }
.kb-site-footer .kb-footer-signup .kb-signup__legal { color: var(--kb-ft-ink-soft); }
.kb-site-footer .kb-footer-signup .kb-signup__legal a { color: var(--kb-ft-ink-soft); }
.kb-site-footer .kb-footer-signup .kb-signup__legal a:hover { color: var(--kb-button-ink); }
.kb-site-footer .kb-footer-signup .kb-signup__status { color: var(--kb-blush-tint); }
.kb-site-footer .kb-footer-signup .kb-signup.is-error .kb-signup__status { color: var(--kb-blush-tint); }
.kb-site-footer .kb-footer-signup .kb-signup.is-done .kb-signup__status { color: var(--kb-ink); }

/* Link columns. */
.kb-site-footer .kb-site-footer__inner {
  gap: calc(var(--kb-space) * 4);
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  margin: 0;
  max-width: none;
  padding: 0 0 calc(var(--kb-space) * 4);
}

.kb-site-footer .kb-site-footer__wordmark {
  color: var(--kb-button-ink);
  display: inline-block;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--kb-space) * 1.25);
  text-decoration: none;
}

.kb-site-footer .kb-site-footer__brand p {
  color: var(--kb-ft-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: 0 0 calc(var(--kb-space) * 2);
  max-width: 320px;
}

.kb-site-footer__contact { display: grid; gap: calc(var(--kb-space) * 0.5); list-style: none; margin: 0; padding: 0; }

.kb-site-footer .kb-site-footer__contact a {
  align-items: center;
  color: var(--kb-button-ink);
  display: inline-flex;
  font-weight: 600;
  gap: var(--kb-space);
  margin: 0;
}

.kb-site-footer__contact .kb-icon {
  color: color-mix(in srgb, var(--kb-blush-tint), var(--kb-button) 30%);
  height: var(--kb-icon-sm);
  width: var(--kb-icon-sm);
}

.kb-site-footer .kb-site-footer__accordion > summary {
  color: var(--kb-button-ink);
  font-size: var(--kb-fs-eyebrow);
  letter-spacing: var(--kb-ls-eyebrow);
  text-transform: uppercase;
}

.kb-site-footer .kb-site-footer__accordion nav a { color: var(--kb-ft-ink-soft); width: fit-content; }
.kb-site-footer .kb-site-footer__accordion nav a:hover,
.kb-site-footer .kb-site-footer__accordion nav a:focus-visible { color: var(--kb-button-ink); }

/* Payment and delivery methods. */
.kb-site-footer__payments {
  border-top: 1px solid var(--kb-ft-line);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 2) calc(var(--kb-space) * 6);
  justify-content: space-between;
  padding-top: calc(var(--kb-space) * 3);
}

.kb-site-footer__pay-group {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space) calc(var(--kb-space) * 1.5);
}

.kb-site-footer__pay-label {
  align-items: center;
  min-height: 36px;
  color: var(--kb-ft-ink-soft);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  gap: calc(var(--kb-space) * 0.75);
}

.kb-site-footer__pay-label .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }

.kb-site-footer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 0.75);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-site-footer__chips li {
  background: var(--kb-surface);
  border-radius: 8px;
  color: var(--kb-ink);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 8px 10px;
  white-space: nowrap;
}

/* Same 36px height as the card-mark tiles (owner 2026-10-28: smaller). */
.kb-site-footer__chips li.kb-site-footer__bank {
  align-items: center;
  display: inline-flex;
  height: 36px;
  padding: 0 10px;
}

.kb-site-footer__bank img {
  display: block;
  height: 19px;
  width: 75px;
}

.kb-site-footer__pay-group .kb-payment-marks { margin: 0; }

/* Official card marks (2026-10-27): white tiles like the bank chips, artwork only scaled. */
.kb-payment-marks--footer {
  align-items: flex-start;
  flex-direction: column;
  gap: calc(var(--kb-space) * 0.5);
}

.kb-payment-marks__logos {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 0.75);
}

.kb-payment-marks--footer img {
  background: var(--kb-surface);
  border-radius: 8px;
  height: 36px;
  width: auto;
}

/* Visa stays at its 48px scale (23px wordmark, Visa's digital minimum); the 36px tile only trims
   the file's built-in clear space from ~0.53x to ~0.28x (minimum 0.25x). */
.kb-payment-marks--footer img[src*="visa-brand-mark"] {
  object-fit: cover;
  width: 98px;
}

.kb-payment-marks__note {
  color: var(--kb-ft-ink-soft);
  font-size: var(--kb-fs-meta);
  line-height: 1.3;
}

/* Bottom bar: seller identity and language. */
.kb-site-footer .kb-site-footer__bar {
  border-top: 1px solid var(--kb-ft-line);
  color: var(--kb-ft-ink-soft);
  gap: calc(var(--kb-space) * 2);
  padding-block: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
}

.kb-site-footer .kb-site-footer__legal {
  color: var(--kb-ft-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1100px) {
  .kb-site-footer .kb-footer-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-footer-signup { grid-template-columns: 1fr; }
  .kb-footer-signup .kb-signup { justify-self: stretch; max-width: none; }
  .kb-site-footer .kb-site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kb-site-footer .kb-site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .kb-site-footer .kb-footer-trust__list { gap: var(--kb-space); padding-block: calc(var(--kb-space) * 2); }
  .kb-site-footer .kb-footer-trust__item > :is(a, span) { align-items: flex-start; flex-direction: column; gap: var(--kb-space); padding: calc(var(--kb-space) * 1.25) var(--kb-space); }
  .kb-footer-trust__icon { height: 40px; width: 40px; }
  .kb-footer-trust__icon .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }
  .kb-site-footer__main { padding-block: calc(var(--kb-space) * 4) calc(var(--kb-space) * 2); }
  .kb-footer-signup { gap: calc(var(--kb-space) * 2.5); margin-bottom: calc(var(--kb-space) * 4); padding: calc(var(--kb-space) * 3) calc(var(--kb-space) * 2.5); }
  .kb-site-footer .kb-site-footer__inner { gap: 0; grid-template-columns: 1fr; padding-bottom: calc(var(--kb-space) * 3); }
  .kb-site-footer .kb-site-footer__brand { margin-bottom: calc(var(--kb-space) * 2); }
  .kb-site-footer__payments { flex-direction: column; gap: calc(var(--kb-space) * 2.5); }
  .kb-site-footer__pay-group { align-items: flex-start; flex-direction: column; }
  .kb-site-footer__pay-label { min-height: 0; }
  .kb-site-footer .kb-site-footer__bar { align-items: flex-start; flex-direction: column; }
  .kb-site-footer .kb-site-footer__bar .kb-language-switcher { margin-left: 0; }
}

/* MailPoet confirmation page: the welcome code card. */
.kb-welcome {
  background: var(--kb-surface-alt);
  border: 1px solid var(--kb-line);
  border-radius: calc(var(--kb-radius-card) + 6px);
  margin: calc(var(--kb-space) * 2) auto calc(var(--kb-space) * 6);
  max-width: 640px;
  padding: calc(var(--kb-space) * 5) calc(var(--kb-space) * 4);
  text-align: center;
}

.kb-welcome__eyebrow {
  align-items: center;
  color: var(--kb-success);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.75);
  margin: 0 0 var(--kb-space);
}

.kb-welcome__eyebrow .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }

.kb-welcome .kb-welcome__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 calc(var(--kb-space) * 3);
}

.kb-welcome__code {
  align-items: center;
  background: var(--kb-surface);
  border: 2px dashed var(--kb-button);
  border-radius: var(--kb-radius-card);
  display: flex;
  gap: calc(var(--kb-space) * 1.5);
  justify-content: space-between;
  margin: 0 auto calc(var(--kb-space) * 3);
  max-width: 420px;
  padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 2.5);
}

.kb-welcome__code code {
  background: none;
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0;
  user-select: all;
}

.kb-welcome .kb-welcome__copy {
  align-items: center;
  background: var(--kb-ink);
  border: 0;
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.75);
  min-height: 44px;
  padding: 0 calc(var(--kb-space) * 2);
}

.kb-welcome .kb-welcome__copy:hover,
.kb-welcome .kb-welcome__copy:focus-visible { background: var(--kb-accent); color: var(--kb-button-ink); }
.kb-welcome__copy .kb-icon { height: var(--kb-icon-sm); width: var(--kb-icon-sm); }

.kb-welcome__terms {
  color: var(--kb-ink-soft);
  display: grid;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 0.5);
  list-style: none;
  margin: 0 0 calc(var(--kb-space) * 2);
  padding: 0;
}

.kb-welcome__note { color: var(--kb-ink-soft); font-size: 0.8125rem; margin: 0 0 calc(var(--kb-space) * 3); }
.kb-welcome .kb-welcome__cta { display: inline-flex; }

@media (max-width: 767px) {
  .kb-site-footer__payments { border-top: 0; padding-top: calc(var(--kb-space) * 1.5); }
}

/* Collection buying guide, FAQ and related links below archive grids (2026-10-18).
   Structural text styling only; visual treatment is open for the design pass. */
.kb-collection-guide {
  border-top: 1px solid var(--kb-line);
  display: grid;
  gap: calc(var(--kb-space) * 4);
  margin-top: calc(var(--kb-space) * 6);
  max-width: 860px;
  padding-top: calc(var(--kb-space) * 5);
}

.kb-collection-guide h2 {
  color: var(--kb-ink);
  font-size: var(--kb-fs-h3);
  line-height: 1.25;
  margin: 0 0 calc(var(--kb-space) * 1.5);
}

.kb-collection-guide h3 {
  color: var(--kb-ink);
  font-size: var(--kb-fs-lead);
  margin: calc(var(--kb-space) * 2.5) 0 var(--kb-space);
}

.kb-collection-guide__body,
.kb-collection-faq__answer {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
}

.kb-collection-guide__body p,
.kb-collection-faq__answer p {
  margin: 0 0 calc(var(--kb-space) * 1.5);
}

.kb-collection-guide__body ul {
  margin: 0 0 calc(var(--kb-space) * 1.5);
  padding-left: calc(var(--kb-space) * 2.5);
}

.kb-collection-guide__body li {
  margin-bottom: var(--kb-space);
}

.kb-collection-guide a {
  color: var(--kb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-collection-faq__item {
  border-bottom: 1px solid var(--kb-line);
}

.kb-collection-faq__item summary {
  color: var(--kb-ink);
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  padding: calc(var(--kb-space) * 1.75) 0;
}

.kb-collection-faq__answer {
  padding-bottom: calc(var(--kb-space) * 1.5);
}

.kb-collection-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-collection-related a {
  align-items: center;
  border: 1px solid var(--kb-line-strong);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: inline-flex;
  min-height: 44px;
  padding: 0 calc(var(--kb-space) * 2);
  text-decoration: none;
}

.kb-collection-related a:hover,
.kb-collection-related a:focus-visible {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

/* Sticky bar header (2026-10-19). commerce-ui.js pins the header once its
   in-flow copy has scrolled away: .is-stuck parks a fixed one-row bar above
   the viewport, .is-shown slides it in, .is-sliding arms the transition a
   frame after pinning so the pin itself never animates. The spacer keeps the
   page from jumping. Desktop (>=981px) shows the bar once the first screen
   has scrolled past; the drawer model (<=980px) shows it on scroll up. */
.kb-site-header-spacer {
  height: 0;
}

.kb-site-header.is-stuck {
  box-shadow: 0 10px 24px -20px var(--kb-ink);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  visibility: hidden;
}

.admin-bar .kb-site-header.is-stuck {
  top: var(--wp-admin--admin-bar--height, 32px);
}

.kb-site-header.is-stuck.is-sliding {
  transition: transform calc(var(--kb-motion-base) * 1.5) var(--kb-ease), visibility 0s linear calc(var(--kb-motion-base) * 1.5);
}

.kb-site-header.is-stuck.is-shown {
  transform: none;
  transition-delay: 0s;
  visibility: visible;
}

@media (min-width: 981px) {
  .kb-site-header.is-stuck .kb-site-header__inner {
    column-gap: calc(var(--kb-space) * 2);
    grid-template-areas: "logo nav actions";
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 64px;
    padding: var(--kb-space) calc(var(--kb-space) * 3);
    row-gap: 0;
  }

  .kb-site-header.is-stuck .kb-site-header__logo {
    min-width: 0;
    width: auto;
  }

  .kb-site-header.is-stuck .kb-site-header__logo-image {
    max-height: 2.25rem;
    max-width: 9.5rem;
    width: auto;
  }

  .kb-site-header.is-stuck .kb-site-header__nav {
    border-top: 0;
    grid-area: nav;
    justify-self: center;
    min-width: 0;
    padding-block: 0;
  }

  .kb-site-header.is-stuck .kb-header-search {
    display: none;
  }

  .kb-site-header.is-stuck .kb-header-icon--search-overlay {
    display: inline-flex;
  }
}

/* The one-row bar needs about 1240px for the full menu and actions. Below
   that the language switcher (still in the in-flow header and footer) and
   then the Journal link step out, and the menu tightens. */
@media (min-width: 981px) and (max-width: 1279px) {
  .kb-site-header.is-stuck .kb-site-header__utility-group--language {
    display: none;
  }

  .kb-site-header.is-stuck .kb-site-header__utility-group--language + .kb-site-header__utility-group {
    border-left: 0;
    margin-left: 0;
  }

  .kb-site-header.is-stuck .kb-site-header__nav {
    gap: calc(var(--kb-space) * 1.5);
  }

  .kb-site-header.is-stuck .kb-site-header__nav > a,
  .kb-site-header.is-stuck .kb-mega-menu__trigger {
    font-size: var(--kb-fs-meta);
  }
}

@media (min-width: 981px) and (max-width: 1099px) {
  .kb-site-header.is-stuck .kb-site-header__nav > a:last-child {
    display: none;
  }
}

/* The phone/tablet search pill is display:flex !important; the bar trades it
   for the search icon. */
@media (max-width: 980px) {
  .kb-site-header.is-stuck .kb-site-header__inner {
    grid-template-areas: "menu logo actions";
    padding-block: var(--kb-space);
    row-gap: 0;
  }

  .kb-site-header.is-stuck .kb-header-search {
    display: none !important;
  }

  .kb-site-header.is-stuck .kb-site-header__logo {
    max-width: 100%;
    min-width: 0;
  }

  .kb-site-header.is-stuck .kb-site-header__logo-image {
    height: auto;
    max-width: min(7.25rem, 100%);
  }

  .kb-site-header.is-stuck .kb-header-icon--search-overlay {
    display: inline-flex !important;
  }
}

@media (max-width: 600px) {
  .admin-bar .kb-site-header.is-stuck {
    top: 0;
  }
}

/* Desktop sticky columns move down while the bar is in view. */
@media (min-width: 981px) {
  .kb-catalog__filters,
  .kb-checkout__summary-body,
  body.woocommerce-cart .cart_totals,
  .kb-pdp-gallery {
    transition: top calc(var(--kb-motion-base) * 1.5) var(--kb-ease);
  }

  html.kb-header-shown .kb-catalog__filters {
    top: calc(var(--kb-space) * 2 + var(--kb-header-offset, 0px));
  }

  html.kb-header-shown .kb-checkout__summary-body,
  html.kb-header-shown body.woocommerce-cart .cart_totals {
    top: calc(var(--kb-space) * 3 + var(--kb-header-offset, 0px));
  }

  html.kb-header-shown .kb-pdp-gallery {
    top: calc(var(--kb-space) * 2 + var(--kb-header-offset, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-site-header.is-stuck.is-sliding,
  .kb-catalog__filters,
  .kb-checkout__summary-body,
  body.woocommerce-cart .cart_totals,
  .kb-pdp-gallery {
    transition: none;
  }
}

/* Homepage v3 (2026-10-19): product-led order, tabbed category shelves, a
   new-arrivals grid, brand cards with an A-Z index, real-review cards (or the
   how-it-works fallback) and an editorial journal. Tokens only. */
.kb-home .kb-section__heading {
  align-items: end;
  column-gap: calc(var(--kb-space) * 3);
  grid-template-columns: minmax(0, 1fr) auto;
}

.kb-home .kb-section__heading > :not(.kb-section__link) {
  grid-column: 1;
}

.kb-home .kb-section__heading > .kb-section__link {
  grid-column: 2;
  grid-row: 1 / span 2;
  white-space: nowrap;
}

.kb-home .kb-section__heading .kb-eyebrow {
  margin-bottom: 0;
}

/* Tabbed category shelves */
.kb-shelves__tabs {
  display: flex;
  gap: var(--kb-space);
  margin: 0 0 calc(var(--kb-space) * 3);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.kb-shelves__tabs::-webkit-scrollbar {
  display: none;
}

.kb-shelves__tab {
  appearance: none;
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  min-height: 44px;
  padding: 0 calc(var(--kb-space) * 2.5);
  transition: background-color var(--kb-motion-fast) var(--kb-ease), border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}

.kb-shelves__tab:hover {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

.kb-shelves__tab[aria-selected="true"] {
  background: var(--kb-ink);
  border-color: var(--kb-ink);
  color: var(--kb-surface);
}

.kb-shelves__tab:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: 2px;
}

.kb-shelves__panel {
  position: relative;
}

.kb-shelves__panel[hidden] {
  display: none;
}

.kb-shelves__all {
  align-items: center;
  border: 0.5px solid var(--kb-ink);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: var(--kb-space);
  justify-content: center;
  margin: calc(var(--kb-space) * 3) 0 0;
  min-height: 44px;
  padding: 0 calc(var(--kb-space) * 3);
  text-decoration: none;
  width: fit-content;
}

/* Desktop: the "shop all" link shares the row with the slider arrows. */
@media (min-width: 1024px) {
  .kb-shelves__all {
    bottom: 0;
    left: 0;
    margin: 0;
    min-height: 40px;
    position: absolute;
  }
}

.kb-shelves__all:hover,
.kb-shelves__all:focus-visible {
  background: var(--kb-ink);
  color: var(--kb-surface);
}

/* New-arrivals grid: 5 across on wide screens (2 rows); 4 across shows 8; phones show 6 */
.kb-home-grid {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1439px) {
  .kb-home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kb-home-grid > :nth-child(n + 9) {
    display: none;
  }
}

@media (max-width: 767px) {
  .kb-home-grid {
    gap: calc(var(--kb-space) * 1.5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-home-grid > :nth-child(n + 7) {
    display: none;
  }
}

/* Brand cards + A-Z index */
.kb-brand-cards {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kb-brand-card {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink);
  display: grid;
  gap: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 2.5);
  text-decoration: none;
  transition: border-color var(--kb-motion-base) var(--kb-ease), box-shadow var(--kb-motion-base) var(--kb-ease), transform var(--kb-motion-base) var(--kb-ease);
}

.kb-brand-card:hover,
.kb-brand-card:focus-visible {
  border-color: var(--kb-accent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--kb-ink) 8%, transparent);
  transform: translateY(-2px);
}

.kb-brand-card__logo {
  align-items: center;
  color: var(--kb-ink);
  display: flex;
  height: 40px;
  justify-content: center;
}

.kb-brand-card__logo .kb-brand-row__logo {
  height: 40px;
  max-width: 170px;
  object-fit: contain;
  width: 100%;
}

.kb-brand-card__products {
  display: grid;
  gap: var(--kb-space);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kb-brand-card__products img {
  aspect-ratio: 1 / 1;
  background: var(--kb-surface-alt);
  border-radius: calc(var(--kb-radius) * 0.75);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.kb-brand-card__meta {
  align-items: center;
  border-top: 0.5px solid var(--kb-line);
  color: var(--kb-ink-soft);
  display: flex;
  font-size: var(--kb-fs-meta);
  justify-content: space-between;
  padding-top: calc(var(--kb-space) * 1.5);
}

.kb-brand-card:hover .kb-brand-card__meta,
.kb-brand-card:focus-visible .kb-brand-card__meta {
  color: var(--kb-accent);
}

.kb-brand-index {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
  margin-top: calc(var(--kb-space) * 3);
}

.kb-brand-index__label {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kb-ls-eyebrow);
  margin-right: var(--kb-space);
  text-transform: uppercase;
}

.kb-brand-index a {
  align-items: center;
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  gap: calc(var(--kb-space) * 0.75);
  min-height: 40px;
  padding: 0 calc(var(--kb-space) * 2);
  text-decoration: none;
}

.kb-brand-index a:hover,
.kb-brand-index a:focus-visible {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

/* Below desktop the brand cards and shelf tabs become edge-to-edge swipe rows.
   The selectors out-rank `.kb-section:nth-of-type(even) > *` (margin-inline: auto). */
@media (max-width: 1024px) {
  .kb-home .kb-section .kb-shelves__tabs {
    margin-inline: calc(var(--kb-space) * -2.75);
    padding-inline: calc(var(--kb-space) * 2.75);
  }

  .kb-home .kb-section .kb-brand-cards {
    display: flex;
    gap: calc(var(--kb-space) * 1.5);
    margin-inline: calc(var(--kb-space) * -2.75);
    overflow-x: auto;
    padding-inline: calc(var(--kb-space) * 2.75);
    scroll-padding-inline: calc(var(--kb-space) * 2.75);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .kb-brand-cards::-webkit-scrollbar {
    display: none;
  }

  .kb-brand-card {
    flex: 0 0 40%;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .kb-brand-card {
    flex-basis: 72%;
  }

  .kb-brand-index__label {
    flex-basis: 100%;
  }
}

/* Real-review cards */
.kb-review-cards {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kb-review-card {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: flex;
  flex-direction: column;
  gap: calc(var(--kb-space) * 2);
  margin: 0;
  padding: calc(var(--kb-space) * 3);
}

.kb-review-card__stars {
  color: var(--kb-star);
  display: inline-flex;
  gap: 2px;
}

.kb-review-card__stars svg {
  fill: currentColor;
}

.kb-review-card blockquote {
  color: var(--kb-ink);
  flex: 1;
  font-size: var(--kb-fs-lead);
  line-height: var(--kb-lh-lead);
  margin: 0;
}

.kb-review-card figcaption {
  border-top: 0.5px solid var(--kb-line);
  display: grid;
  gap: var(--kb-space);
  padding-top: calc(var(--kb-space) * 2);
}

.kb-review-card__product {
  align-items: center;
  color: var(--kb-ink-soft);
  display: flex;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 1.25);
  text-decoration: none;
}

.kb-review-card__product img {
  background: var(--kb-surface-alt);
  border-radius: calc(var(--kb-radius) * 0.5);
  flex: 0 0 auto;
  height: 44px;
  object-fit: cover;
  width: 44px;
}

/* How-it-works fallback (shown until three real reviews exist) */
.kb-how__steps {
  counter-reset: kb-how;
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-how__step {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  counter-increment: kb-how;
  display: flex;
  flex-direction: column;
  gap: var(--kb-space);
  padding: calc(var(--kb-space) * 3);
  position: relative;
}

.kb-how__step::after {
  color: var(--kb-blush-tint);
  content: "0" counter(kb-how);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  position: absolute;
  right: calc(var(--kb-space) * 2.5);
  top: calc(var(--kb-space) * 2);
}

.kb-how__icon {
  align-items: center;
  background: var(--kb-accent-tint);
  border-radius: 50%;
  color: var(--kb-accent);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  margin-bottom: var(--kb-space);
  position: relative;
  width: 48px;
  z-index: 1;
}

.kb-how__step strong {
  font-size: var(--kb-fs-h3);
  line-height: 1.3;
  position: relative;
}

.kb-how__step > span:not(.kb-how__icon) {
  color: var(--kb-ink-soft);
  flex: 1;
}

.kb-how__step .kb-section__link {
  margin-top: var(--kb-space);
}

/* Editorial journal: one lead story, two stacked */
.kb-journal-features {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.kb-journal-feature {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--kb-motion-base) var(--kb-ease), box-shadow var(--kb-motion-base) var(--kb-ease);
}

.kb-journal-feature--lead {
  grid-row: 1 / span 2;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
}

.kb-journal-feature:hover,
.kb-journal-feature:focus-visible {
  border-color: var(--kb-accent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--kb-ink) 8%, transparent);
}

.kb-journal-feature__media {
  background: var(--kb-surface-alt);
  display: block;
  min-height: 220px;
  overflow: hidden;
  position: relative;
}

.kb-journal-feature--lead .kb-journal-feature__media {
  min-height: 320px;
}

.kb-journal-feature__img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 0.88s var(--kb-ease);
  width: 100%;
}

.kb-journal-feature:hover .kb-journal-feature__img {
  transform: scale(1.04);
}

.kb-journal-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--kb-space);
  justify-content: center;
  padding: calc(var(--kb-space) * 3);
}

.kb-journal-feature__meta {
  color: var(--kb-ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--kb-fs-eyebrow);
  gap: calc(var(--kb-space) * 1.5);
}

.kb-journal-feature__meta span:first-child {
  color: var(--kb-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kb-journal-feature__body strong {
  font-size: var(--kb-fs-h3);
  line-height: 1.3;
}

.kb-journal-feature--lead .kb-journal-feature__body strong {
  font-size: var(--kb-fs-h2);
  line-height: 1.2;
}

.kb-journal-feature__excerpt {
  color: var(--kb-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.kb-journal-feature__more {
  align-items: center;
  color: var(--kb-accent);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  gap: calc(var(--kb-space) * 0.75);
  margin-top: var(--kb-space);
}

@media (max-width: 980px) {
  .kb-review-cards,
  .kb-how__steps {
    grid-template-columns: 1fr;
  }

  .kb-journal-features {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .kb-journal-feature--lead {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .kb-home .kb-section__heading {
    grid-template-columns: 1fr;
  }

  .kb-home .kb-section__heading > .kb-section__link {
    grid-column: 1;
    grid-row: auto;
  }

  .kb-journal-feature {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .kb-journal-feature--lead {
    grid-template-columns: 1fr;
  }

  .kb-journal-feature:not(.kb-journal-feature--lead) .kb-journal-feature__media {
    min-height: 0;
  }

  .kb-journal-feature--lead .kb-journal-feature__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .kb-journal-feature__body {
    padding: calc(var(--kb-space) * 2);
  }

  .kb-journal-feature:not(.kb-journal-feature--lead) .kb-journal-feature__excerpt {
    display: none;
  }

  .kb-how__step::after {
    font-size: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-brand-card,
  .kb-journal-feature,
  .kb-journal-feature__img,
  .kb-shelves__tab {
    transition: none;
  }

  .kb-brand-card:hover,
  .kb-journal-feature:hover .kb-journal-feature__img {
    transform: none;
  }
}


/* Week sale (2026-10-19): hero slide, PDP prior-price note, /akcijos/ grid. Tokens only. */
.kb-hero__image--sale {
  align-items: center;
  background:
    radial-gradient(circle at 78% 22%, var(--kb-sale-tint), transparent 42%),
    linear-gradient(140deg, var(--kb-blush-tint), var(--kb-surface-alt));
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--kb-space) * 4);
}

.kb-hero-sale__stamp {
  background: var(--kb-sale-red);
  border-radius: 50%;
  color: var(--kb-button-ink);
  display: grid;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  height: clamp(96px, 10vw, 140px);
  letter-spacing: -0.02em;
  place-items: center;
  position: absolute;
  right: calc(var(--kb-space) * 3);
  top: calc(var(--kb-space) * 3);
  transform: rotate(-8deg);
  width: clamp(96px, 10vw, 140px);
  z-index: 2;
}

.kb-hero-sale__products {
  align-items: end;
  display: flex;
  gap: calc(var(--kb-space) * 2);
  justify-content: center;
  width: 100%;
}

.kb-hero-sale__products img {
  aspect-ratio: 1 / 1;
  background: var(--kb-surface);
  border-radius: var(--kb-radius-card);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--kb-ink) 12%, transparent);
  height: auto;
  object-fit: cover;
  width: 30%;
}

.kb-hero-sale__products img:nth-child(2) {
  transform: translateY(calc(var(--kb-space) * -3));
  width: 36%;
}

/* Sale slide art (2026-10-19): Zuri, Yuna and Maria unboxing; the art has no text, the stamp stays HTML. */
.kb-hero__image--sale-art {
  padding: 0;
}

.kb-hero__media--sale-art {
  object-position: 50% 40%;
}

.kb-hero__image--sale-art .kb-hero-sale__stamp {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--kb-ink) 22%, transparent);
}

.kb-pdp__price ins,
.kb-product-card__price ins {
  color: var(--kb-sale-red);
  text-decoration: none;
}

.kb-sale-page {
  display: grid;
  gap: calc(var(--kb-space) * 3);
}

.kb-sale-page__lead {
  font-size: var(--kb-fs-lead);
  margin: 0;
}

.kb-sale-page__legal {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: 0;
}

.kb-sale-grid {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .kb-sale-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .kb-sale-grid {
    gap: calc(var(--kb-space) * 1.5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-hero__image--sale {
    padding: calc(var(--kb-space) * 2.5);
  }

  .kb-hero-sale__stamp {
    right: calc(var(--kb-space) * 1.5);
    top: calc(var(--kb-space) * 1.5);
  }
}


/* Hero carousel v2 (2026-10-19): copy left, art right; the art box takes the image's own aspect
   ratio (--kb-hero-ratio from kb_hero_art()) and the image is contained, so no part is cropped.
   Slides stack in one grid cell and cross-fade; a progress bar sits on top, arrows at the sides. Tokens only. */
.kb-hero-carousel {
  position: relative;
}

.kb-hero-carousel__viewport {
  display: grid;
}

.kb-hero-carousel__slide[hidden],
.kb-hero-carousel__bar[hidden] {
  display: none;
}

.kb-hero-carousel .kb-hero {
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 0;
  padding-bottom: calc(var(--kb-space) * 2);
  width: 100%;
}

.kb-hero__headline {
  font-family: var(--kb-font-display);
  font-size: var(--kb-fs-h1);
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 calc(var(--kb-space) * 2);
}

.kb-hero-carousel .kb-hero__art {
  animation: none;
  aspect-ratio: var(--kb-hero-ratio, 3 / 2);
  background: var(--kb-surface-alt);
  border: 0;
  border-radius: var(--kb-radius-card);
  display: block;
  height: auto;
  justify-self: end;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  transform: none;
  width: 100%;
}

.kb-hero-carousel .kb-hero__art .kb-hero__media {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  object-position: center;
  position: absolute;
  width: 100%;
}

/* Cut-out art carries its own rounded panel with drips below it: no card chrome, nothing clipped. */
.kb-hero-carousel .kb-hero__art.kb-hero__image--bleed {
  background: none;
  border-radius: 0;
  overflow: visible;
}

.kb-hero-carousel .kb-hero__image--sale-art .kb-hero-sale__stamp {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--kb-ink) 22%, transparent);
}

/* Slides stack in one cell. The art cross-fades; the outgoing copy leaves first and the incoming
   copy follows, so two headlines never overlap. */
.kb-hero-carousel[data-kb-hero-enhanced] .kb-hero-carousel__slide {
  grid-area: 1 / 1;
  transition: visibility 0s linear 0.6s;
}

.kb-hero-carousel[data-kb-hero-enhanced] .kb-hero-carousel__slide[data-kb-hero-state="idle"] {
  visibility: hidden;
}

.kb-hero-carousel[data-kb-hero-enhanced] .kb-hero-carousel__slide[data-kb-hero-state="active"] {
  transition: none;
  visibility: visible;
  z-index: 1;
}

.kb-hero-carousel[data-kb-hero-enhanced] [data-kb-hero-state="idle"] .kb-hero__art {
  opacity: 0;
  transition: opacity 0.6s var(--kb-ease);
}

.kb-hero-carousel[data-kb-hero-enhanced] [data-kb-hero-state="active"] .kb-hero__art {
  opacity: 1;
  transition: opacity 0.6s var(--kb-ease);
}

.kb-hero-carousel[data-kb-hero-enhanced] [data-kb-hero-state="idle"] .kb-hero__copy {
  opacity: 0;
  transform: translateY(calc(var(--kb-space) * 1.5));
  transition: opacity 0.22s ease-in, transform 0.22s ease-in;
}

.kb-hero-carousel[data-kb-hero-enhanced] [data-kb-hero-state="active"] .kb-hero__copy {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--kb-ease) 0.22s, transform 0.6s var(--kb-ease) 0.22s;
}

/* Top progress bar: one segment per slide (click to jump); the active one fills over the autoplay
   delay. Counter and pause/play sit at its right end. */
.kb-hero-carousel__bar {
  align-items: flex-start;
  display: flex;
  gap: calc(var(--kb-space) * 2);
  margin-inline: auto;
  max-width: var(--kb-maxw);
  padding: 0 calc(var(--kb-space) * 2.75);
}

.kb-hero-carousel__pager {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: calc(var(--kb-space) * 0.75);
  min-width: 0;
}

.kb-hero-carousel .kb-hero-carousel__dot {
  align-items: flex-start;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  min-height: 1.5rem;
  min-width: 0;
  padding: 0;
}

.kb-hero-carousel__track {
  background: color-mix(in srgb, var(--kb-ink) 12%, transparent);
  border-radius: 999px;
  display: block;
  flex: 1 1 auto;
  height: 3px;
  overflow: hidden;
  transition: background-color 0.2s var(--kb-ease);
}

.kb-hero-carousel__fill {
  background: var(--kb-accent);
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
}

.kb-hero-carousel .kb-hero-carousel__dot:hover .kb-hero-carousel__track {
  background: color-mix(in srgb, var(--kb-ink) 26%, transparent);
}

.kb-hero-carousel .kb-hero-carousel__dot[aria-current="true"] .kb-hero-carousel__fill {
  animation: kb-hero-fill var(--kb-hero-delay, 7s) linear forwards;
  animation-play-state: paused;
}

.kb-hero-carousel[data-kb-hero-playing="true"] .kb-hero-carousel__dot[aria-current="true"] .kb-hero-carousel__fill {
  animation-play-state: running;
}

/* Paused by the visitor: the active segment shows in full so the current slide stays marked. */
.kb-hero-carousel[data-kb-hero-paused="true"] .kb-hero-carousel__dot[aria-current="true"] .kb-hero-carousel__fill {
  animation: none;
  transform: scaleX(1);
}

@keyframes kb-hero-fill {
  to { transform: scaleX(1); }
}

.kb-hero-carousel__count {
  color: var(--kb-ink-soft);
  flex: 0 0 auto;
  font-size: var(--kb-fs-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin: 0;
}

.kb-hero-carousel__count [data-kb-hero-current] {
  color: var(--kb-ink);
  font-weight: 700;
}

.kb-hero-carousel .kb-hero-carousel__button,
.kb-hero-carousel .kb-hero-carousel__arrow {
  align-items: center;
  appearance: none;
  background: var(--kb-surface);
  border: 1px solid color-mix(in srgb, var(--kb-ink) 14%, transparent);
  border-radius: 50%;
  box-shadow: none;
  color: var(--kb-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  line-height: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  transition: background-color 0.2s var(--kb-ease), border-color 0.2s var(--kb-ease), color 0.2s var(--kb-ease);
}

.kb-hero-carousel .kb-hero-carousel__button {
  height: 2.25rem;
  width: 2.25rem;
}

.kb-hero-carousel .kb-hero-carousel__button:hover,
.kb-hero-carousel .kb-hero-carousel__arrow:hover {
  background: var(--kb-button);
  border-color: var(--kb-button);
  color: var(--kb-button-ink);
}

.kb-hero-carousel .kb-hero-carousel__dot:focus-visible,
.kb-hero-carousel .kb-hero-carousel__button:focus-visible,
.kb-hero-carousel .kb-hero-carousel__arrow:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: 3px;
}

.kb-hero-carousel__button--toggle .kb-icon--play,
.kb-hero-carousel__button--toggle[aria-pressed="true"] .kb-icon--pause {
  display: none;
}

.kb-hero-carousel__button--toggle[aria-pressed="true"] .kb-icon--play {
  display: block;
}

/* Side arrows: in the gutter beside the slide on desktop, over the art's edges on phones/tablets. */
.kb-hero-carousel__viewport {
  margin-inline: auto;
  max-width: var(--kb-maxw);
  position: relative;
  touch-action: pan-y;
}

.kb-hero-carousel__arrow[hidden] {
  display: none;
}

.kb-hero-carousel .kb-hero-carousel__arrow {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kb-ink) 10%, transparent);
  height: 2.75rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  z-index: 3;
}

.kb-hero-carousel__arrow--prev {
  left: calc(var(--kb-space) * 0.5);
}

.kb-hero-carousel__arrow--next {
  right: calc(var(--kb-space) * 0.5);
}

/* Drag / swipe: the active slide follows the pointer, then eases back. */
.kb-hero-carousel[data-kb-hero-enhanced] .kb-hero-carousel__slide[data-kb-hero-state="active"] {
  transition: transform 0.35s var(--kb-ease);
}

.kb-hero-carousel[data-kb-hero-enhanced][data-kb-hero-dragging] .kb-hero-carousel__slide[data-kb-hero-state="active"] {
  transition: none;
}

.kb-hero-carousel[data-kb-hero-dragging] .kb-hero-carousel__viewport {
  cursor: grabbing;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .kb-hero-carousel[data-kb-hero-enhanced] .kb-hero__art {
    cursor: grab;
  }
}

/* Single slide: a thin accent line flush under the header takes the progress bar's place; it
   draws in once on load. No arrows, pause or counter (nothing to change). */
.kb-hero-carousel__accent {
  background: color-mix(in srgb, var(--kb-ink) 12%, transparent);
  display: block;
  height: 3px;
  overflow: hidden;
}

.kb-hero-carousel__accent span {
  animation: kb-hero-accent 1.2s var(--kb-ease) both;
  background: var(--kb-accent);
  display: block;
  height: 100%;
  transform-origin: left center;
}

@keyframes kb-hero-accent {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.kb-hero-carousel__accent + .kb-hero-carousel__viewport .kb-hero {
  padding-top: calc(var(--kb-space) * 4);
}

@media (min-width: 981px) {
  /* Wider side padding makes room for the arrows; bar and slides keep the same inner edge. */
  .kb-hero-carousel .kb-hero,
  .kb-hero-carousel__bar {
    padding-inline: calc(var(--kb-page-gutter) + var(--kb-space) * 4);
  }

  .kb-hero-carousel .kb-hero {
    padding-bottom: calc(var(--kb-space) * 4);
    padding-top: calc(var(--kb-space) * 2);
  }

  .kb-hero-carousel__accent + .kb-hero-carousel__viewport .kb-hero {
    padding-top: calc(var(--kb-space) * 5);
  }

  .kb-hero-carousel__arrow--prev {
    left: calc((var(--kb-page-gutter) + var(--kb-space) * 4 - 2.75rem) / 2);
  }

  .kb-hero-carousel__arrow--next {
    right: calc((var(--kb-page-gutter) + var(--kb-space) * 4 - 2.75rem) / 2);
  }
}

@media (max-width: 980px) {
  .kb-hero-carousel {
    container-type: inline-size;
  }

  .kb-hero-carousel .kb-hero {
    align-content: start;
    align-items: start;
    gap: calc(var(--kb-space) * 3);
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(var(--kb-space) * 2);
  }

  /* Phones and tablets: art first, then headline, text and button (owner mobile brief
     2026-10-29, reversing the 2026-10-26 copy-first order). The arrow offsets below assume this. */
  .kb-hero-carousel .kb-hero__art {
    order: -1;
  }

  /* Arrows sit on the art's left and right edges, centred on the 3:2 art (100cqw = carousel width). */
  .kb-hero-carousel .kb-hero-carousel__arrow {
    background: color-mix(in srgb, var(--kb-surface) 88%, transparent);
    height: 2.5rem;
    top: calc(var(--kb-space) * 2 + (100cqw - var(--kb-space) * 5.5) / 3);
    width: 2.5rem;
  }

  .kb-hero-carousel__arrow--prev {
    left: calc(var(--kb-space) * 3.75);
  }

  .kb-hero-carousel__arrow--next {
    right: calc(var(--kb-space) * 3.75);
  }
}

@media (max-width: 640px) {
  /* Phones: a smaller stamp over the art's top-left corner (the unboxing art has faces top-right). */
  .kb-hero-carousel .kb-hero__image--sale-art .kb-hero-sale__stamp {
    font-size: 1.25rem;
    height: 4.25rem;
    left: calc(var(--kb-space) * 1.25);
    right: auto;
    top: calc(var(--kb-space) * 1.25);
    width: 4.25rem;
  }

  .kb-hero-carousel__accent + .kb-hero-carousel__viewport .kb-hero {
    padding-top: calc(var(--kb-space) * 2.5);
  }

  .kb-hero-carousel__bar {
    gap: calc(var(--kb-space) * 1.5);
    padding: 0 calc(var(--kb-space) * 2);
  }

  .kb-hero-carousel .kb-hero {
    padding-top: calc(var(--kb-space) * 1.5);
  }

  .kb-hero-carousel .kb-hero-carousel__arrow {
    height: 2.25rem;
    top: calc(var(--kb-space) * 1.5 + (100cqw - var(--kb-space) * 4) / 3);
    width: 2.25rem;
  }

  .kb-hero-carousel__arrow--prev {
    left: calc(var(--kb-space) * 3);
  }

  .kb-hero-carousel__arrow--next {
    right: calc(var(--kb-space) * 3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-hero-carousel[data-kb-hero-enhanced] .kb-hero-carousel__slide,
  .kb-hero-carousel[data-kb-hero-enhanced] .kb-hero-carousel__slide[data-kb-hero-state="active"],
  .kb-hero-carousel[data-kb-hero-enhanced] [data-kb-hero-state] .kb-hero__art,
  .kb-hero-carousel[data-kb-hero-enhanced] [data-kb-hero-state] .kb-hero__copy {
    transition: none;
  }

  .kb-hero-carousel[data-kb-hero-enhanced] [data-kb-hero-state="idle"] .kb-hero__copy {
    transform: none;
  }

  .kb-hero-carousel .kb-hero-carousel__dot[aria-current="true"] .kb-hero-carousel__fill,
  .kb-hero-carousel__accent span {
    animation: none;
    transform: scaleX(1);
  }
}

/* ==========================================================================
   Email popup "cloud" (inc/email-popup.php, assets/js/email-popup.js)
   A puffy cloud floating bottom-right; a bottom sheet with a scalloped top on phones.
   One drop-shadow on the wrapper outlines the union of the body, the puffs and the tail.
   ========================================================================== */

/* Dark, blurred page cover behind the popup: a diagonal wipe towards the popup corner (bottom right)
   on desktop, a circle growing from the top left on phones. It does not close the popup. */
.kb-popup-backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--kb-ink) 80%, transparent);
  clip-path: polygon(-50% 0, -40% 0, 0% 100%, -50% 100%);
  inset: 0;
  opacity: 0;
  position: fixed;
  touch-action: none;
  transition: clip-path 640ms var(--kb-ease), opacity 260ms var(--kb-ease);
  z-index: 10000; /* above Complianz's "manage consent" tab (9998) */
}

.kb-popup-backdrop.is-open {
  clip-path: polygon(-50% 0, 110% 0, 150% 100%, -50% 100%);
  opacity: 1;
}

.kb-popup-backdrop[hidden] {
  display: none;
}

/* Scroll lock: email-popup.js sets body top to the current scroll offset. */
html.kb-popup-open {
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

html.kb-popup-open body {
  left: 0;
  position: fixed;
  right: 0;
}

.kb-popup {
  bottom: 24px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 24px;
  transform: translateY(24px) scale(0.96);
  transition: opacity 260ms var(--kb-ease), transform 260ms var(--kb-ease);
  width: min(384px, calc(100vw - 32px));
  z-index: 10001;
}

.kb-popup.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 220ms;
}

.kb-popup[hidden] {
  display: none;
}

.kb-popup__cloud {
  animation: kb-popup-float 7s ease-in-out infinite;
  filter:
    drop-shadow(0 0 1px color-mix(in srgb, var(--kb-accent) 30%, transparent))
    drop-shadow(0 18px 36px color-mix(in srgb, var(--kb-ink) 16%, transparent));
  padding-top: 44px;
  position: relative;
}

/* Thought-bubble tail under the cloud. */
.kb-popup__cloud::before,
.kb-popup__cloud::after {
  background: var(--kb-surface-alt);
  border-radius: 50%;
  content: "";
  position: absolute;
}

.kb-popup__cloud::before {
  bottom: -20px;
  height: 22px;
  right: 54px;
  width: 22px;
}

.kb-popup__cloud::after {
  bottom: -38px;
  height: 12px;
  right: 34px;
  width: 12px;
}

.kb-popup__puffs {
  height: 120px;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
}

.kb-popup__puffs i {
  background: var(--kb-surface-alt);
  border-radius: 50%;
  position: absolute;
}

.kb-popup__puffs i:nth-child(1) { height: 92px; left: 4%; top: 18px; width: 92px; }
.kb-popup__puffs i:nth-child(2) { height: 132px; left: 22%; top: -10px; width: 132px; }
.kb-popup__puffs i:nth-child(3) { height: 108px; left: 50%; top: 4px; width: 108px; }
.kb-popup__puffs i:nth-child(4) { height: 80px; right: 3%; top: 30px; width: 80px; }

.kb-popup__body {
  background: var(--kb-surface-alt);
  border-radius: 56px 56px 64px 64px;
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  padding: 60px 26px 22px;
  position: relative;
  text-align: center;
}

.kb-popup__body[hidden] {
  display: none;
}

/* Zuri with a KBeautyOne parcel: head and shoulders above the cloud, the box over its top edge. */
.kb-popup__hero {
  height: 204px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -104px;
  transform: translateX(-50%);
  transition: transform 420ms var(--kb-ease) 120ms;
  width: auto;
  z-index: 1;
}

.kb-popup:not(.is-open) .kb-popup__hero {
  transform: translate(-50%, 18px);
}

/* A small 28px × inside a 44px tap area. */
.kb-popup__close {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--kb-ink-soft);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 30px;
  width: 44px;
  z-index: 2;
}

.kb-popup__close::before {
  background: var(--kb-surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--kb-ink) 12%, transparent);
  content: "";
  inset: 8px;
  position: absolute;
  z-index: -1;
}

.kb-popup__close svg {
  height: 14px;
  width: 14px;
}

.kb-popup__close:hover,
.kb-popup__close:focus-visible {
  color: var(--kb-accent);
}

.kb-popup__close:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: -6px;
}

.kb-popup__title {
  color: var(--kb-ink);
  font-family: var(--kb-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 4px 0 8px;
}

.kb-popup__title:focus {
  outline: none;
}

.kb-popup__lede {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  line-height: 1.5;
  margin: 0 0 14px;
}

.kb-popup__form {
  display: grid;
  gap: 8px;
}

.kb-popup__input {
  background: var(--kb-surface);
  border: 2px solid color-mix(in srgb, var(--kb-accent) 75%, transparent);
  border-radius: var(--kb-radius-control);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kb-accent) 16%, transparent);
  color: var(--kb-ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  height: 56px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.kb-popup__input::placeholder {
  color: var(--kb-ink-soft);
  font-weight: 500;
}

.kb-popup__input:focus-visible {
  border-color: var(--kb-accent);
  outline: 3px solid color-mix(in srgb, var(--kb-accent) 30%, transparent);
  outline-offset: 1px;
}

.kb-popup__submit {
  background: var(--kb-button);
  border: 0;
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--kb-fs-card);
  font-weight: 700;
  min-height: 48px;
  padding: 0 22px;
  transition: background var(--kb-motion-fast) var(--kb-ease);
  width: 100%;
}

.kb-popup__submit:hover,
.kb-popup__submit:focus-visible {
  background: var(--kb-button-hover);
}

.kb-popup__submit:disabled {
  cursor: progress;
  opacity: 0.7;
}

.kb-popup__status {
  color: var(--kb-accent);
  font-size: var(--kb-fs-meta);
  font-weight: 600;
  margin: 10px 0 0;
}

.kb-popup__status[hidden] {
  display: none;
}

.kb-popup__decline {
  background: none;
  border: 0;
  color: var(--kb-ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: var(--kb-fs-meta);
  min-height: 44px;
  padding: 0 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-popup__decline:hover,
.kb-popup__decline:focus-visible {
  color: var(--kb-ink);
}

.kb-popup__legal {
  color: var(--kb-ink-soft);
  font-size: 0.75rem;
  line-height: 1.45;
  margin: 2px 0 0;
}

.kb-popup__legal a {
  color: inherit;
  text-decoration: underline;
}

.kb-popup__code {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 12px;
}

.kb-popup__code[hidden] {
  display: none;
}

.kb-popup__code code {
  background: var(--kb-surface);
  border: 1px dashed var(--kb-accent);
  border-radius: 14px;
  color: var(--kb-accent);
  font-family: var(--kb-font-body);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 10px 16px;
}

.kb-popup__copy {
  align-items: center;
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--kb-fs-meta);
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
}

@keyframes kb-popup-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 600px) {
  .kb-popup {
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    width: 100%;
  }

  .kb-popup__cloud {
    animation: none;
    padding-top: 38px;
  }

  .kb-popup__cloud::before,
  .kb-popup__cloud::after {
    display: none;
  }

  .kb-popup__puffs i:nth-child(1) { height: 76px; left: -2%; top: 14px; width: 76px; }
  .kb-popup__puffs i:nth-child(2) { height: 104px; left: 18%; top: -4px; width: 104px; }
  .kb-popup__puffs i:nth-child(3) { height: 92px; left: 48%; top: 6px; width: 92px; }
  .kb-popup__puffs i:nth-child(4) { height: 72px; right: -2%; top: 22px; width: 72px; }

  .kb-popup-backdrop {
    clip-path: circle(0% at 0 0);
  }

  .kb-popup-backdrop.is-open {
    clip-path: circle(150% at 0 0);
  }

  .kb-popup__hero {
    height: 250px;
    top: -158px;
  }

  /* Leave room above the sheet for the character's head on short screens. */
  .kb-popup__body {
    border-radius: 40px 40px 0 0;
    max-height: calc(88vh - 38px);
    max-height: min(calc(88svh - 38px), calc(100svh - 210px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 58px 20px calc(16px + env(safe-area-inset-bottom));
  }

  .kb-popup__close {
    top: 22px;
  }

  .kb-popup__title {
    font-size: 1.3125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-popup,
  .kb-popup-backdrop,
  .kb-popup__cloud,
  .kb-popup__hero {
    animation: none;
    transition: none;
  }

  .kb-popup-backdrop {
    clip-path: none;
  }

  .kb-popup:not(.is-open) .kb-popup__hero {
    transform: translateX(-50%);
  }
}

/* Checkout: the cart-save notice under the email stays visible (WooCommerce hides descriptions until focus). */
#billing_email_field .description {
  color: var(--kb-ink-soft);
  display: block !important;
  font-size: var(--kb-fs-meta);
  margin-top: 6px;
}

#billing_email_field .description a {
  color: inherit;
  text-decoration: underline;
}

.kb-cart-reminder label {
  align-items: center;
  color: var(--kb-ink-soft);
  display: flex;
  font-size: var(--kb-fs-meta);
  gap: 8px;
}

/* Cookie banner: brand logo in Complianz's empty logo slot (header grid, top left). */
.kbeautyone-cookie-banner .cmplz-logo {
  align-self: center;
  background: url("../images/logo-final.svg") left center / contain no-repeat;
  height: 26px;
  max-width: 100%;
  width: 100px;
}

/* PDP redesign (2026-10-21): narrower gallery, wider info column, delivery card,
   how-to/ingredient accordions, guide chips and the skin-test CTA. Tokens only. */
@media (min-width: 981px) {
  .kb-pdp__top {
    gap: calc(var(--kb-space) * 4);
    grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
  }
}

/* Delivery card under the purchase control. */
.kb-pdp__fulfilment {
  border-top: 0;
  gap: calc(var(--kb-space) * 1.5);
  padding-top: 0;
}

.kb-pdp-ship {
  background: var(--kb-surface-alt);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  line-height: 1.5;
}

.kb-pdp-ship__list {
  display: grid;
  gap: calc(var(--kb-space) * 1.4);
  list-style: none;
  margin: 0;
  padding: calc(var(--kb-space) * 2.25) calc(var(--kb-space) * 2.5);
}

.kb-pdp-ship__list li {
  align-items: flex-start;
  display: flex;
  gap: calc(var(--kb-space) * 1.4);
  margin: 0;
}

.kb-pdp-ship__icon {
  align-items: center;
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent);
  display: inline-flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  margin-top: -4px;
  width: 30px;
}

.kb-pdp-ship__icon .kb-icon--sm {
  height: 16px;
  stroke-width: 1.5;
  width: 16px;
}

.kb-pdp-ship strong {
  color: var(--kb-ink);
  font-weight: 750;
}

.kb-pdp-ship .kb-pdp-ship__stock {
  color: var(--kb-success);
}

.kb-pdp-ship__list a {
  color: var(--kb-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.kb-pdp-ship__more {
  align-items: center;
  border-top: 0.5px solid var(--kb-line);
  color: var(--kb-ink-soft);
  display: flex;
  justify-content: space-between;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2.5);
  text-decoration: none;
  transition: color var(--kb-motion-fast) var(--kb-ease);
}

.kb-pdp-ship__more .kb-icon--sm {
  height: 16px;
  transition: transform var(--kb-motion-fast) var(--kb-ease);
  width: 16px;
}

.kb-pdp-ship__more:hover,
.kb-pdp-ship__more:focus-visible {
  color: var(--kb-accent);
}

.kb-pdp-ship__more:hover .kb-icon--sm {
  transform: translateX(3px);
}

/* How to use + ingredients accordions (right column, below the description). */
.kb-pdp-acc {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  interpolate-size: allow-keywords;
  margin-top: calc(var(--kb-space) * 3.25);
  overflow: hidden;
}

.kb-pdp-acc__item + .kb-pdp-acc__item {
  border-top: 0.5px solid var(--kb-line);
}

.kb-pdp-acc__item > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: calc(var(--kb-space) * 2);
  justify-content: space-between;
  list-style: none;
  padding: calc(var(--kb-space) * 2.75) calc(var(--kb-space) * 4);
  transition: background-color var(--kb-motion-fast) var(--kb-ease);
}

.kb-pdp-acc__item > summary::-webkit-details-marker {
  display: none;
}

.kb-pdp-acc__item > summary:hover {
  background: var(--kb-surface-alt);
}

.kb-pdp-acc__item > summary:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: -2px;
}

.kb-pdp-acc__heading {
  display: grid;
  gap: calc(var(--kb-space) * 0.4);
  min-width: 0;
}

.kb-pdp-acc__heading h2 {
  font-size: var(--kb-fs-h3);
  line-height: 1.2;
  margin: 0;
}

.kb-pdp-acc__meta {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Plus that turns into a minus. */
.kb-pdp-acc__icon {
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent);
  flex: 0 0 36px;
  height: 36px;
  position: relative;
  transition: background-color var(--kb-motion-base) var(--kb-ease), color var(--kb-motion-base) var(--kb-ease);
  width: 36px;
}

.kb-pdp-acc__icon::before,
.kb-pdp-acc__icon::after {
  background: currentColor;
  border-radius: 2px;
  content: "";
  height: 1.5px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--kb-motion-base) var(--kb-ease);
  width: 14px;
}

.kb-pdp-acc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.kb-pdp-acc__item[open] .kb-pdp-acc__icon {
  background: var(--kb-button);
  border-color: var(--kb-button);
  color: var(--kb-button-ink);
}

.kb-pdp-acc__item[open] .kb-pdp-acc__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.kb-pdp-acc__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size calc(var(--kb-motion-base) * 1.5) var(--kb-ease), content-visibility calc(var(--kb-motion-base) * 1.5) allow-discrete;
}

.kb-pdp-acc__item[open]::details-content {
  block-size: auto;
}

.kb-pdp-acc__body {
  padding: 0 calc(var(--kb-space) * 4) calc(var(--kb-space) * 3.5);
}

.kb-pdp-acc__body > .kb-pdp-section__intro {
  color: var(--kb-ink-soft);
  margin: 0 0 calc(var(--kb-space) * 2);
}

/* Numbered steps joined by a thin line. */
.kb-how-to-steps {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-how-to-steps li {
  align-items: flex-start;
  display: grid;
  gap: calc(var(--kb-space) * 1.75);
  grid-template-columns: 32px minmax(0, 1fr);
  margin: 0;
  position: relative;
}

.kb-how-to-steps li + li::before {
  background: var(--kb-line);
  content: "";
  height: calc(var(--kb-space) * 2);
  left: 15.5px;
  position: absolute;
  top: calc(var(--kb-space) * -2);
  width: 1px;
}

.kb-how-to-steps__num {
  align-items: center;
  background: var(--kb-sale-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-accent-strong);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.kb-how-to-steps p {
  color: var(--kb-ink);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  margin: 3px 0 0;
}

.kb-pdp-acc .kb-ingredient-grid {
  gap: calc(var(--kb-space) * 1.5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-pdp-acc .kb-ingredient-grid article {
  padding: calc(var(--kb-space) * 2.25);
}

.kb-pdp-acc .kb-ingredient-grid h3 {
  font-size: var(--kb-fs-card);
}

.kb-pdp-acc .kb-ingredient-grid p {
  font-size: var(--kb-fs-meta);
  margin-top: calc(var(--kb-space) * 0.75);
}

.kb-pdp-acc .kb-inci-block h3 {
  font-size: var(--kb-fs-card);
}

.kb-pdp-acc .kb-inci-block p {
  font-size: var(--kb-fs-meta);
}

/* Guide chips, moved out of the buy box. */
.kb-pdp-topics {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 1.5);
  margin-top: calc(var(--kb-space) * 5);
}

.kb-pdp-topics > .kb-eyebrow {
  margin: 0 calc(var(--kb-space) * 0.5) 0 0;
}

.kb-pdp-topics .kb-pdp__taxonomy-links {
  column-gap: var(--kb-space);
  row-gap: var(--kb-space);
}

.kb-pdp-topics .kb-pdp__taxonomy-link {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  display: inline-flex;
  font-size: var(--kb-fs-meta);
  font-weight: 650;
  padding: calc(var(--kb-space) * 0.75) calc(var(--kb-space) * 1.75);
  text-decoration: none;
  transition: border-color var(--kb-motion-fast) var(--kb-ease), color var(--kb-motion-fast) var(--kb-ease);
}

.kb-pdp-topics .kb-pdp__taxonomy-link:hover,
.kb-pdp-topics .kb-pdp__taxonomy-link:focus-visible {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

.kb-pdp-topics .kb-pdp__taxonomy-link--guide {
  background: var(--kb-blush-tint);
}

/* Skin-test CTA with Maria (tile-quiz art), above "Complete your routine". */
.kb-pdp-quiz {
  align-items: center;
  background: var(--kb-blush-tint);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  color: var(--kb-ink);
  display: grid;
  gap: calc(var(--kb-space) * 4);
  grid-template-columns: 300px minmax(0, 1fr) auto;
  margin-top: calc(var(--kb-space) * 5);
  overflow: hidden;
  padding: calc(var(--kb-space) * 2) calc(var(--kb-space) * 4) calc(var(--kb-space) * 2) calc(var(--kb-space) * 2);
  text-decoration: none;
  transition: border-color var(--kb-motion-base) var(--kb-ease);
}

.kb-pdp-quiz:hover,
.kb-pdp-quiz:focus-visible {
  border-color: var(--kb-accent);
}

.kb-pdp-quiz__media {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--kb-radius-card) - 6px);
  display: block;
  overflow: hidden;
}

.kb-pdp-quiz__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--kb-motion-base) * 3) var(--kb-ease);
  width: 100%;
}

.kb-pdp-quiz:hover .kb-pdp-quiz__media img {
  transform: scale(1.04);
}

.kb-pdp-quiz__copy {
  display: grid;
  gap: calc(var(--kb-space) * 0.75);
}

.kb-pdp-quiz__eyebrow {
  color: var(--kb-accent);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kb-ls-eyebrow);
  text-transform: lowercase;
}

.kb-pdp-quiz__title {
  font-size: var(--kb-fs-h2);
  font-weight: 750;
  line-height: 1.15;
}

.kb-pdp-quiz__text {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
}

.kb-pdp-quiz__cta {
  gap: calc(var(--kb-space) * 0.75);
  white-space: nowrap;
}

.kb-pdp-quiz__cta .kb-icon--sm {
  height: 16px;
  width: 16px;
}

@media (max-width: 980px) {
  .kb-pdp-quiz {
    grid-template-columns: 245px minmax(0, 1fr);
    padding-right: calc(var(--kb-space) * 3);
  }

  .kb-pdp-quiz__cta {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .kb-pdp-ship__list {
    padding: calc(var(--kb-space) * 2);
  }

  .kb-pdp-ship__more {
    padding-inline: calc(var(--kb-space) * 2);
  }

  .kb-pdp-acc__item > summary {
    padding: calc(var(--kb-space) * 2.25) calc(var(--kb-space) * 2.5);
  }

  .kb-pdp-acc__body {
    padding: 0 calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 3);
  }

  .kb-pdp-acc .kb-ingredient-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-pdp-quiz {
    gap: calc(var(--kb-space) * 2);
    grid-template-columns: minmax(0, 1fr);
    padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2.5);
  }

  .kb-pdp-quiz__copy {
    padding-inline: var(--kb-space);
  }

  .kb-pdp-quiz__title {
    font-size: var(--kb-fs-h3);
  }

  .kb-pdp-quiz__cta {
    grid-column: auto;
    justify-content: center;
    justify-self: stretch;
    margin-inline: var(--kb-space);
  }

  .kb-pdp-quiz__media {
    aspect-ratio: 16 / 9;
  }

  .kb-pdp-quiz__media img {
    object-position: 50% 30%;
  }
}

/* Add-to-cart shine, sitewide: one soft light sweep on hover or keyboard focus.
   The band only transitions on the way in, so it resets instantly on leave.
   `html body :is()` outranks Blocksy's button-shadow ::before
   (`.woocommerce button.button::before`), which otherwise hides it. */
.single_add_to_cart_button,
.kb-rb__add,
.kb-button.add_to_cart_button,
.kb-pdp-rg__submit[data-kb-rg-add] {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add])::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kb-button-ink) 45%, transparent), transparent);
  border-radius: 0;
  content: "";
  display: block;
  filter: none;
  inset: 0 auto 0 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%) skewX(-20deg);
  transition: none;
  width: 40%;
  z-index: 1;
}

@media (hover: hover) {
  html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]):hover::before {
    transform: translateX(320%) skewX(-20deg);
    transition: transform 0.75s var(--kb-ease);
  }
}

html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]):focus-visible::before {
  transform: translateX(320%) skewX(-20deg);
  transition: transform 0.75s var(--kb-ease);
}

html body :is(.single_add_to_cart_button:disabled, .single_add_to_cart_button.disabled, .single_add_to_cart_button.loading, .kb-rb__add:disabled, .kb-rb__add.is-loading, .kb-button.add_to_cart_button.loading)::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add])::before {
    display: none;
  }

  .kb-pdp-acc__item::details-content,
  .kb-pdp-quiz__media img {
    transition: none;
  }
}

/* ==========================================================================
   2026-10-22 design round (owner list)
   ========================================================================== */

/* 1. PDP delivery card stands out: blush card with a soft rose glow, solid
   rose icon discs, dates as white chips, a live "in stock" dot. */
.kb-pdp-ship {
  background: var(--kb-blush-tint);
  border: 1px solid color-mix(in srgb, var(--kb-accent) 22%, var(--kb-line));
  box-shadow: 0 16px 32px -26px var(--kb-accent);
  color: var(--kb-ink);
  font-size: 0.9375rem;
  overflow: hidden;
}

.kb-pdp-ship__list {
  gap: calc(var(--kb-space) * 1.75);
  padding: calc(var(--kb-space) * 2.5);
}

.kb-pdp-ship__list li {
  align-items: center;
}

.kb-pdp-ship__icon {
  background: var(--kb-accent);
  border-color: var(--kb-accent);
  color: var(--kb-accent-ink);
  flex-basis: 36px;
  height: 36px;
  margin-top: 0;
  width: 36px;
}

.kb-pdp-ship__icon .kb-icon--sm {
  height: 17px;
  stroke-width: 1.75;
  width: 17px;
}

.kb-pdp-ship strong[data-kb-ship-date] {
  background: var(--kb-surface);
  border-radius: 6px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kb-accent) 18%, transparent);
  color: var(--kb-accent);
  padding: 1px 7px;
  white-space: nowrap;
}

.kb-pdp-ship .kb-pdp-ship__stock::before {
  animation: kb-ship-live 2.4s var(--kb-ease) infinite;
  background: var(--kb-success);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 8px;
  margin: 0 7px 2px 1px;
  vertical-align: middle;
  width: 8px;
}

@keyframes kb-ship-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kb-success) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kb-success) 0%, transparent); }
}

.kb-pdp-ship__more {
  background: var(--kb-surface);
  border-top-color: color-mix(in srgb, var(--kb-accent) 18%, var(--kb-line));
  color: var(--kb-ink);
  font-weight: 700;
}

/* 2. Quiz card: transparent Maria with a hand mirror stands on the bottom
   edge of the card (desktop: left column; phones: under the button). */
.kb-pdp-quiz {
  padding-bottom: 0;
  padding-top: 0;
}

.kb-pdp-quiz__copy,
.kb-pdp-quiz__cta {
  margin-block: calc(var(--kb-space) * 2.5);
}

/* The quiz art carries a transparent margin for the question marks (770 px wide around a
   640 px Maria); the media column is 300 px (owner 2026-10-23: "a bit zoom"). */
.kb-pdp-quiz__media {
  align-self: end;
  aspect-ratio: auto;
  border-radius: 0;
  margin-top: calc(var(--kb-space) * 1.5);
  overflow: visible;
}

.kb-pdp-quiz__media img {
  height: auto;
  object-fit: contain;
  transform-origin: 50% 100%;
}

@media (max-width: 980px) {
  .kb-pdp-quiz {
    padding: 0 calc(var(--kb-space) * 1.5);
  }

  .kb-pdp-quiz__copy {
    margin-block: calc(var(--kb-space) * 2.5) 0;
  }

  .kb-pdp-quiz__cta {
    margin-block: 0;
  }

  .kb-pdp-quiz__media {
    aspect-ratio: auto;
    justify-self: center;
    margin-top: 0;
    order: 3;
    width: min(320px, 94%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-pdp-ship .kb-pdp-ship__stock::before {
    animation: none;
  }
}

/* 4. Routine generator: white "Personal routine" badge. */
.kb-pdp-rg__badge {
  background: var(--kb-surface);
  box-shadow: 0 8px 20px -14px var(--kb-ink);
  color: var(--kb-ink);
}

.kb-pdp-rg__badge .kb-icon {
  color: var(--kb-accent);
}

/* 5. Cart drawer: a removed line leaves an inline undo row (no toast). */
.kb-cart-drawer__undo {
  align-items: center;
  background: var(--kb-surface-alt);
  border: 1px dashed var(--kb-line);
  border-radius: var(--kb-radius);
  color: var(--kb-ink-soft);
  display: flex;
  font-size: var(--kb-fs-meta);
  gap: var(--kb-space);
  justify-content: space-between;
  list-style: none;
  margin: calc(var(--kb-space) * 1.25) 0;
  padding: var(--kb-space) calc(var(--kb-space) * 1.5);
  transition: opacity var(--kb-motion-base) var(--kb-ease);
}

.kb-cart-drawer__undo button {
  background: transparent;
  border: 0;
  color: var(--kb-accent);
  cursor: pointer;
  flex: none;
  font: inherit;
  font-weight: 800;
  min-height: 44px;
  padding: 0 var(--kb-space);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-cart-drawer__undo button:hover,
.kb-cart-drawer__undo button:focus-visible {
  background: transparent;
  color: var(--kb-accent-strong);
}

.kb-cart-drawer__undo.is-updating,
.kb-cart-drawer__undo.is-leaving {
  opacity: 0.4;
  pointer-events: none;
}

/* 7. Product-card sale badge: tilted red seal with a dashed inner ring (owner
   pick 2026-10-22, "B · tilted seal"; replaces the corner tab). */
.kb-product-card .kb-sale-badge {
  border-radius: 50%;
  display: grid;
  font-size: 0.8125rem;
  height: 56px;
  left: calc(var(--kb-space) * 1.25);
  letter-spacing: -0.01em;
  line-height: 1;
  outline: 1.5px dashed var(--kb-button-ink);
  outline-offset: -5px;
  padding: 0;
  place-items: center;
  text-align: center;
  top: calc(var(--kb-space) * 1.25);
  transform: rotate(-12deg);
  white-space: nowrap;
  width: 56px;
}

@media (max-width: 640px) {
  .kb-product-card .kb-sale-badge {
    font-size: 0.75rem;
    height: 46px;
    left: var(--kb-space);
    outline-offset: -4px;
    top: var(--kb-space);
    width: 46px;
  }
}

.kb-cart-drawer__content > .kb-cart-drawer__undo {
  margin: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 2.5) 0;
}

/* ==========================================================================
   2026-10-23 skin quiz v2 (inc/skin-test.php, assets/js/skin-test.js): one
   question per screen with a progress bar, then an on-page routine with
   "why it fits" chips, swaps, a total, add-all and more matches.
   ========================================================================== */
.kb-skin-test [hidden] {
  display: none !important;
}

.kb-skin-test button {
  cursor: pointer;
}

.kb-skin-test button:disabled {
  cursor: default;
}

.kb-skin-test__loading {
  min-height: 60vh;
}

/* Confetti stripes when the routine appears (skin-test.js confetti()). */
.kb-confetti {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 2000;
}

.kb-confetti span {
  animation: kb-confetti-fall linear forwards;
  border-radius: 2px;
  height: 14px;
  opacity: 0;
  position: absolute;
  top: -20px;
  width: 6px;
}

.kb-confetti .is-c0 { background: var(--kb-button); }
.kb-confetti .is-c1 { background: var(--kb-accent); }
.kb-confetti .is-c2 { background: var(--kb-star); }
.kb-confetti .is-c3 { background: var(--kb-sale-tint); }

@keyframes kb-confetti-fall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--kb-confetti-x), 105vh, 0) rotate(var(--kb-confetti-r)); }
}

.kb-skin-test__form {
  margin-inline: auto;
  max-width: 860px;
}

.kb-skin-test__progress {
  background: var(--kb-line);
  border-radius: var(--kb-radius-control);
  height: 6px;
  overflow: hidden;
}

.kb-skin-test__progress span {
  background: var(--kb-button);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width var(--kb-motion-base) var(--kb-ease);
  width: 0;
}

.kb-skin-test__count {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  margin: calc(var(--kb-space) * -1.5) 0 0;
}

.kb-skin-test__hint {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: var(--kb-space) 0 0;
  padding-left: calc(var(--kb-space) * 6);
}

.kb-skin-test__options--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kb-skin-test__options--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-skin-test__options--compact label > span {
  align-content: center;
  min-height: 0;
  padding: calc(var(--kb-space) * 1.75) calc(var(--kb-space) * 2);
}

.kb-skin-test__question[data-kb-st-type="checkbox"] .kb-skin-test__options label > span,
.kb-skin-test__question[data-kb-st-question="budget"] .kb-skin-test__options label > span {
  min-height: 0;
}

.kb-skin-test__error {
  color: var(--kb-sale);
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  margin: 0;
  min-height: 1.5em;
  text-align: center;
}

.kb-skin-test__nav {
  display: flex;
  gap: calc(var(--kb-space) * 1.5);
  justify-content: center;
}

.kb-skin-test__nav .kb-button {
  gap: calc(var(--kb-space) * 0.75);
  min-width: 150px;
}

.kb-skin-test__loading {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 10) 0;
  text-align: center;
}

.kb-skin-test__loading p {
  color: var(--kb-ink-soft);
  margin: 0;
}

.kb-skin-test__result {
  display: grid;
  gap: calc(var(--kb-space) * 2.5);
  margin-inline: auto;
  max-width: 860px;
  outline: none;
}

.kb-skin-test__profile {
  background: var(--kb-blush-tint);
  border-radius: var(--kb-radius-card);
  padding: calc(var(--kb-space) * 4);
  text-align: center;
}

.kb-skin-test__profile h2 {
  font-size: var(--kb-fs-h1);
  margin: var(--kb-space) 0 calc(var(--kb-space) * 2);
}

.kb-skin-test__chips,
.kb-skin-test__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-skin-test__chips {
  justify-content: center;
}

.kb-skin-test__chips li {
  background: var(--kb-surface);
  border-radius: var(--kb-radius-control);
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  padding: 6px 14px;
}

.kb-skin-test__looked {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: calc(var(--kb-space) * 2) 0 0;
}

.kb-skin-test__looked span:first-child {
  color: var(--kb-ink);
  font-weight: 700;
}

.kb-skin-test__list {
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-skin-test__item {
  align-items: center;
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: 88px minmax(0, 1fr) auto;
  padding: calc(var(--kb-space) * 2);
}

.kb-skin-test__item.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

.kb-skin-test__item.is-empty p {
  color: var(--kb-ink-soft);
  margin: 0;
}

.kb-skin-test__media img {
  aspect-ratio: 1;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius);
  display: block;
  height: auto;
  object-fit: cover;
  width: 88px;
}

.kb-skin-test__copy {
  display: grid;
  gap: calc(var(--kb-space) * 0.5);
  min-width: 0;
}

.kb-skin-test__step {
  color: var(--kb-accent);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kb-ls-eyebrow);
  text-transform: uppercase;
}

.kb-skin-test__name {
  color: var(--kb-ink);
  font-weight: 700;
  text-decoration: none;
}

.kb-skin-test__name:hover {
  color: var(--kb-accent);
}

.kb-skin-test__reasons {
  gap: 6px;
  margin-top: calc(var(--kb-space) * 0.5);
}

.kb-skin-test__reasons li {
  background: var(--kb-blush-tint);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
}

.kb-skin-test__reasons li.is-time {
  background: var(--kb-surface-alt);
  color: var(--kb-ink-soft);
}

.kb-skin-test__actions {
  align-items: center;
  display: flex;
  gap: var(--kb-space);
}

.kb-skin-test__swap,
.kb-skin-test__remove {
  background: var(--kb-surface);
  border: 0.5px solid var(--kb-line);
  border-radius: var(--kb-radius-control);
  color: var(--kb-ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
  padding: 8px 14px;
}

.kb-skin-test__remove {
  line-height: 1;
  padding-inline: 12px;
}

.kb-skin-test__swap:hover,
.kb-skin-test__remove:hover {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

.kb-skin-test__total {
  align-items: baseline;
  display: flex;
  font-size: var(--kb-fs-lead);
  justify-content: space-between;
  padding: 0 calc(var(--kb-space) * 2);
}

.kb-skin-test__add {
  gap: var(--kb-space);
  justify-self: stretch;
}

.kb-skin-test__note,
.kb-skin-test__status,
.kb-skin-test__disclaimer {
  color: var(--kb-ink-soft);
  font-size: var(--kb-fs-meta);
  margin: 0;
  text-align: center;
}

.kb-skin-test__status:empty {
  display: none;
}

.kb-skin-test__more h3 {
  font-size: var(--kb-fs-h3);
  margin: calc(var(--kb-space) * 2) 0;
}

.kb-skin-test__more ul {
  display: grid;
  gap: calc(var(--kb-space) * 2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-skin-test__more a {
  color: var(--kb-ink);
  display: grid;
  font-size: var(--kb-fs-meta);
  gap: calc(var(--kb-space) * 0.75);
  text-decoration: none;
}

.kb-skin-test__more img {
  aspect-ratio: 1;
  background: var(--kb-surface-alt);
  border-radius: var(--kb-radius-card);
  height: auto;
  object-fit: cover;
  width: 100%;
}

.kb-skin-test__links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kb-space) * 1.5);
  justify-content: center;
}

.kb-skin-test__links .kb-button {
  gap: var(--kb-space);
}

@media (max-width: 980px) {
  .kb-skin-test__options--compact,
  .kb-skin-test__more ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kb-skin-test__options--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-skin-test__hint {
    padding-left: 0;
  }

  .kb-skin-test__nav .kb-button {
    flex: 1;
    min-width: 0;
  }

  .kb-skin-test__profile {
    padding: calc(var(--kb-space) * 3) calc(var(--kb-space) * 2);
  }

  .kb-skin-test__item {
    align-items: start;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .kb-skin-test__media img {
    width: 64px;
  }

  .kb-skin-test__actions {
    grid-column: 2;
  }
}

/* ==========================================================================
   2026-10-26 owner list (PDP, cart, checkout polish)
   ========================================================================== */

/* 1. PDP delivery card: white card, rows split by hairlines, soft blush icon
   discs with rose line icons, plain bold dates, green live "in stock" dot. */
.kb-pdp-ship {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
  box-shadow: 0 10px 28px -22px color-mix(in srgb, var(--kb-ink) 45%, transparent);
  color: var(--kb-ink-soft);
}

.kb-pdp-ship__list {
  gap: 0;
  padding: calc(var(--kb-space) * 0.5) calc(var(--kb-space) * 2.75);
}

.kb-pdp-ship__list li {
  align-items: center;
  gap: calc(var(--kb-space) * 2);
  padding: calc(var(--kb-space) * 2) 0;
}

.kb-pdp-ship__list li + li {
  border-top: 1px solid var(--kb-line);
}

.kb-pdp-ship__icon {
  background: var(--kb-blush-tint);
  border: 0;
  color: var(--kb-accent);
  flex: 0 0 46px;
  height: 46px;
  width: 46px;
}

.kb-pdp-ship__icon .kb-icon--sm {
  height: 20px;
  stroke-width: 1.6;
  width: 20px;
}

.kb-pdp-ship strong[data-kb-ship-date] {
  background: none;
  box-shadow: none;
  color: var(--kb-ink);
  padding: 0;
}

.kb-pdp-ship .kb-pdp-ship__stock {
  color: var(--kb-ink);
}

.kb-pdp-ship .kb-pdp-ship__stock::before {
  animation: kb-ship-live-dot 1.8s ease-out infinite;
  background: var(--kb-live);
  height: 9px;
  margin: 0 8px 2px 2px;
  width: 9px;
}

@keyframes kb-ship-live-dot {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kb-live) 60%, transparent); }
  80%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--kb-live) 0%, transparent); }
}

.kb-pdp-ship__more {
  background: var(--kb-surface-alt);
  border-top: 1px solid var(--kb-line);
}

@media (max-width: 640px) {
  .kb-pdp-ship__list {
    padding: calc(var(--kb-space) * 0.25) calc(var(--kb-space) * 2);
  }

  .kb-pdp-ship__icon {
    flex-basis: 40px;
    height: 40px;
    width: 40px;
  }
}

/* 4. Accordion bodies get breathing room under the summary. */
.kb-pdp-acc__body {
  padding-top: calc(var(--kb-space) * 1.5);
}

/* 5. Add-to-cart: a wider, softer light sweep that glides across, plus a
   gentle lift; colour and shadow ease both ways. Shine geometry from the
   2026-10-22 block, retuned. */
html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]):not(:disabled, .disabled, .loading, .is-loading) {
  cursor: pointer; /* <button> elements default to the arrow */
}

html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]) {
  transition: background-color 0.35s var(--kb-ease), box-shadow 0.35s var(--kb-ease), transform 0.35s var(--kb-ease);
}

html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add])::before {
  background: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, var(--kb-button-ink) 8%, transparent) 30%,
    color-mix(in srgb, var(--kb-button-ink) 38%, transparent) 50%,
    color-mix(in srgb, var(--kb-button-ink) 8%, transparent) 70%,
    transparent 100%);
  transform: translateX(-110%);
  width: 70%;
}

@media (hover: hover) {
  html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]):not(:disabled):hover {
    box-shadow: 0 10px 22px -12px var(--kb-button-hover);
    transform: translateY(-1px);
  }

  html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]):hover::before {
    transform: translateX(260%);
    transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]):focus-visible::before {
  transform: translateX(260%);
  transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.single_add_to_cart_button, .kb-rb__add, .kb-button.add_to_cart_button, .kb-pdp-rg__submit[data-kb-rg-add]) {
    transform: none !important;
    transition: none;
  }

  .kb-pdp-ship .kb-pdp-ship__stock::before {
    animation: none;
  }
}

/* 6. Success toasts never cover the open cart drawer (the drawer already confirms the add);
   errors from drawer actions still show. */
html.kb-drawer-open .kb-commerce-notice:not(.is-error) {
  display: none;
}

/* 8. Free shipping unlocked: a coupon ticket with a rose stub, perforated
   edge with punched notches, and an "Applied" stamp. */
.kb-free-ship.kb-free-ship--unlocked {
  align-items: stretch;
  background: var(--kb-surface);
  border: 1px solid color-mix(in srgb, var(--kb-accent) 30%, var(--kb-line));
  border-radius: var(--kb-radius);
  box-shadow: 0 12px 26px -20px var(--kb-accent);
  display: flex;
  gap: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.kb-free-ship__stub {
  align-items: center;
  background: linear-gradient(140deg, var(--kb-button), var(--kb-accent));
  color: var(--kb-accent-ink);
  display: flex;
  flex: 0 0 64px;
  justify-content: center;
  position: relative;
}

.kb-free-ship__stub .kb-icon {
  height: 26px;
  width: 26px;
}

/* Punched notches top and bottom on the perforation line. */
.kb-free-ship__stub::before,
.kb-free-ship__stub::after {
  background: var(--kb-surface);
  border: 1px solid color-mix(in srgb, var(--kb-accent) 30%, var(--kb-line));
  border-radius: 50%;
  content: "";
  height: 14px;
  position: absolute;
  right: -8px;
  width: 14px;
  z-index: 1;
}

.kb-free-ship__stub::before { top: -8px; }
.kb-free-ship__stub::after { bottom: -8px; }

.kb-free-ship__ticket {
  border-left: 2px dashed color-mix(in srgb, var(--kb-accent) 35%, transparent);
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 1.75);
}

.kb-free-ship__label {
  color: var(--kb-accent);
  font-size: var(--kb-fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kb-free-ship--unlocked .kb-free-ship__ticket strong {
  color: var(--kb-ink);
  text-wrap: balance;
  font-size: var(--kb-fs-meta);
  font-weight: 700;
}

.kb-free-ship__stamp {
  align-items: center;
  align-self: center;
  background: var(--kb-blush-tint);
  border: 1px dashed var(--kb-accent);
  border-radius: 999px;
  color: var(--kb-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--kb-fs-eyebrow);
  font-weight: 800;
  gap: 4px;
  margin-right: calc(var(--kb-space) * 1.5);
  padding: 4px 10px;
  transform: rotate(-4deg);
}

.kb-free-ship__stamp .kb-icon {
  height: 14px;
  width: 14px;
}

.kb-cart-drawer__content .kb-free-ship.kb-free-ship--unlocked {
  margin-inline: 0;
  width: 100%;
}

/* 9. Routine builder: quantity stepper beside the add button. */
.kb-pdp__cart.kb-rb__buy {
  align-items: stretch;
  display: flex;
  gap: calc(var(--kb-space) * 1.25);
  margin-top: calc(var(--kb-space) * 1.25);
}

.kb-rb__buy .kb-rb__add {
  flex: 1 1 auto;
  margin-top: 0;
  min-height: 52px;
  min-width: 0;
  width: auto;
}

@media (max-width: 640px) {
  .kb-pdp__cart.kb-rb__buy .quantity.kb-product-quantity {
    flex: 0 0 128px;
    min-width: 128px;
  }

  .kb-pdp__cart.kb-rb__buy .quantity.kb-product-quantity .kb-product-quantity__button {
    flex-basis: 42px;
    min-width: 42px;
  }

  .kb-pdp__cart.kb-rb__buy .quantity.kb-product-quantity input.qty {
    flex-basis: 40px;
    min-width: 40px;
    width: 40px;
  }
}

/* The ticket keeps its own box inside the drawer, cart page and checkout summary,
   whose progress-strip rules are more specific. */
.kb-cart-drawer .kb-cart-drawer__offers .kb-free-ship--unlocked,
body.woocommerce-cart .woocommerce-cart-form .kb-free-ship--unlocked,
.kb-checkout__summary .kb-free-ship--unlocked {
  background: var(--kb-surface);
  border: 1px solid color-mix(in srgb, var(--kb-accent) 30%, var(--kb-line));
  border-radius: var(--kb-radius);
  gap: 0;
  padding: 0;
}

.kb-cart-drawer .kb-cart-drawer__offers .kb-free-ship--unlocked {
  margin: 0;
}

/* 2026-10-26: PDP right column as separate cards (owner reference): summary
   card, routine card, standalone buy row, delivery card. .kb-pdp__info is now
   only the stack; .kb-pdp__summary holds what used to be its direct children. */
.kb-pdp__content-flow > .kb-pdp__info {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: calc(var(--kb-space) * 2);
  padding: 0;
}

.kb-pdp__summary,
.kb-rb__panel {
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-card);
}

.kb-pdp__summary {
  display: grid;
  gap: calc(var(--kb-space) * 1.1);
  min-width: 0;
  padding: calc(var(--kb-space) * 3.25);
}

.kb-pdp__summary > :is(h1, p, ul, .kb-badges) {
  margin-bottom: 0;
  margin-top: 0;
}

.kb-pdp__content-flow .kb-rb {
  border-top: 0;
  display: grid;
  gap: calc(var(--kb-space) * 1.5);
  margin: 0;
  padding: 0;
}

.kb-rb__panel {
  padding: calc(var(--kb-space) * 2.5);
}

.kb-rb__panel .kb-rb__note {
  margin-top: calc(var(--kb-space) * 1.25);
}

.kb-pdp__content-flow .kb-rb .kb-rb__buy,
.kb-pdp__content-flow > .kb-pdp__info > .kb-pdp__purchase {
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  .kb-pdp__summary {
    padding: calc(var(--kb-space) * 2.5) calc(var(--kb-space) * 2);
  }

  .kb-rb__panel {
    padding: calc(var(--kb-space) * 2);
  }
}

/* No shipping/payment marks rendered: drop the empty strip and its divider. */
.kb-pdp__commerce-marks:not(:has(*)) {
  display: none;
}

/* 2026-10-26 phone + tablet (<=1024px) homepage (owner): sale first under the hero, then concern,
   discover-more, category, new, brand and routine rows; everything else keeps
   its DOM order after them. Visual order only, so desktop keeps its layout. */
@media (max-width: 1024px) {
  .kb-home {
    display: flex;
    flex-direction: column;
  }

  .kb-home > * {
    order: 10;
    width: 100%;
  }

  .kb-home > .kb-hero-carousel { order: 1; }
  .kb-home > .kb-sale-rail { order: 2; }
  .kb-home > .kb-concerns { order: 3; }
  .kb-home > .kb-shelves { order: 4; }
  .kb-home > .kb-categories { order: 5; }
  .kb-home > .kb-new-arrivals { order: 6; }
  /* No sale row (fewer than 4 sale products): new arrivals take its slot under the hero. */
  .kb-home:not(:has(> .kb-sale-rail)) > .kb-new-arrivals { order: 2; }
  .kb-home > .kb-brands { order: 7; }
  .kb-home > .kb-routine { order: 8; }

  /* The even/odd stripes follow DOM position; restate them for the new order
     (still alternating when the sale or reviews section is absent). */
  .kb-home > :is(.kb-concerns, .kb-categories, .kb-brands, .kb-bestsellers, .kb-reviews, .kb-journal) {
    background: var(--kb-bg);
  }

  .kb-home > :is(.kb-sale-rail, .kb-shelves, .kb-new-arrivals, .kb-routine, .kb-skin-types, .kb-how) {
    background: var(--kb-surface-alt);
  }

  .kb-home:not(:has(> .kb-reviews)) > .kb-how {
    background: var(--kb-bg);
  }

  .kb-home:not(:has(> .kb-reviews)) > .kb-journal {
    background: var(--kb-surface-alt);
  }

  /* Concern cards, routine steps, how-it-works steps and journal posts: one
     edge-to-edge swipe row each (the last two since the 2026-10-29 mobile brief). */
  .kb-home .kb-concerns .kb-card-grid,
  .kb-home .kb-routine .kb-routine__steps,
  .kb-home .kb-how .kb-how__steps,
  .kb-home .kb-journal .kb-journal-features {
    display: flex;
    gap: calc(var(--kb-space) * 1.5);
    margin-inline: calc(var(--kb-space) * -2.75);
    overflow-x: auto;
    padding-inline: calc(var(--kb-space) * 2.75);
    scroll-padding-inline: calc(var(--kb-space) * 2.75);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .kb-home .kb-concerns .kb-card-grid::-webkit-scrollbar,
  .kb-home .kb-routine .kb-routine__steps::-webkit-scrollbar,
  .kb-home .kb-how .kb-how__steps::-webkit-scrollbar,
  .kb-home .kb-journal .kb-journal-features::-webkit-scrollbar {
    display: none;
  }

  .kb-home .kb-concerns .kb-info-card,
  .kb-home .kb-routine .kb-routine-step,
  .kb-home .kb-how .kb-how__step,
  .kb-home .kb-journal .kb-journal-feature {
    flex: 0 0 62%;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* In the swipe row every journal post is the same card: 4:3 photo, then text
     (the desktop lead/side layouts do not fit a 62% card). */
  .kb-home .kb-journal .kb-journal-feature {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .kb-home .kb-journal .kb-journal-feature__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .kb-home .kb-journal .kb-journal-feature__body {
    justify-content: flex-start;
    padding: calc(var(--kb-space) * 2);
  }

  .kb-home .kb-journal .kb-journal-feature__body strong {
    font-size: var(--kb-fs-lead);
    line-height: 1.3;
  }

  .kb-home .kb-journal .kb-journal-feature__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }

  /* Product cards everywhere (homepage, catalogue, sale page, sliders): 12px
     grid/slider gaps (owner mobile brief 2026-10-29; 4px felt cramped next to the
     16px page gutter), edge-to-edge photo, phone-sized type. Sliders: commerce-ui.js. */
  .kb-home .kb-home-grid,
  .kb-catalog__results ul.products,
  .kb-sale-grid {
    gap: calc(var(--kb-space) * 1.5);
  }

  .kb-product-card {
    overflow: hidden;
  }

  .kb-product-card__image {
    border-radius: 0;
    margin: 0;
  }

  .kb-product-card__body {
    padding: var(--kb-space);
  }

  .kb-product-card h3 {
    font-size: 0.875rem;
    -webkit-line-clamp: 3;
    line-height: 1.35;
    margin-bottom: calc(var(--kb-space) * 0.5);
    min-block-size: calc(1.35em * 3);
  }

  .kb-product-card__meta {
    margin: calc(var(--kb-space) * 0.5) 0 var(--kb-space);
    padding-top: 0;
  }

  .kb-product-card__price {
    font-size: 0.9375rem;
  }

  .kb-product-card__price del {
    font-size: 0.8125rem;
  }

  .kb-product-card .kb-button--small {
    font-size: 0.8125rem;
    padding-block: calc(var(--kb-space) * 0.75);
  }
}

/* 2026-10-26 phone + tablet (<=1024px) fixes (owner): smaller newsletter ticker, bigger sticky
   logo with room from the menu button, tighter concern copy, equal-height
   category images, brand marquee, compact cart drawer header. */
@media (max-width: 1024px) {
  .kb-newsletter__track {
    gap: var(--kb-space);
  }

  .kb-newsletter__tile {
    height: 110px;
    width: 88px;
  }

  .kb-home .kb-concerns .kb-info-card__copy > span {
    line-height: 1.4;
  }

  /* The tile's fixed aspect ratio squeezed the image whenever a label wrapped
     to more lines; let the label grow instead and keep every image square. */
  .kb-home .kb-categories .kb-image-tile {
    aspect-ratio: auto;
  }

  .kb-home .kb-categories .kb-image-tile__stage {
    aspect-ratio: 1 / 1;
    flex: none;
  }

  .kb-home .kb-brand-cards.is-marquee {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .kb-cart-drawer .kb-cart-drawer__header {
    padding-block: calc(var(--kb-space) * 0.75);
  }
}

/* The menu + logo sticky bar exists up to 980px (above it the bar is the
   desktop logo + nav). 40px action icons free the width for a 132px logo
   plus a 10px inset from the menu button. */
@media (max-width: 980px) {
  .kb-site-header.is-stuck .kb-header-icon {
    min-width: 40px;
    width: 40px;
  }

  .kb-site-header.is-stuck .kb-site-header__logo {
    padding-left: calc(var(--kb-space) * 1.25);
  }

  .kb-site-header.is-stuck .kb-site-header__logo-image {
    max-width: min(8.25rem, 100%);
  }
}

/* Tablets: concern cards and routine steps show ~2.5 per row. */
@media (min-width: 768px) and (max-width: 1024px) {
  .kb-home .kb-concerns .kb-info-card,
  .kb-home .kb-routine .kb-routine-step,
  .kb-home .kb-how .kb-how__step,
  .kb-home .kb-journal .kb-journal-feature {
    flex-basis: 38%;
  }
}

/* The marquee clones are phone/tablet-only; never show them in the desktop grid. */
@media (min-width: 1025px) {
  .kb-brand-card[aria-hidden="true"] {
    display: none;
  }
}

/* Brand logos (owner 2026-10-26): the official artwork is only a mask filled
   with the logo colour, so every brand shows in the same mono tone as the
   wordmark placeholders. */
.kb-brand-row__logo--mask {
  background-color: currentColor;
  -webkit-mask: var(--kb-brand-logo) center / contain no-repeat;
  mask: var(--kb-brand-logo) center / contain no-repeat;
}

/* One logo height on every card (width follows each logo's proportions);
   the stacked "I'm Sorry for My Skin" mark gets two lines' worth. Placeholder
   wordmarks use the same cap height. */
.kb-brand-card__logo {
  --kb-brand-logo-h: 20px;
}

.kb-brand-card__logo .kb-brand-row__logo--mask {
  height: var(--kb-brand-logo-h);
  max-width: 100%;
  width: auto;
}

.kb-brand-card__logo .kb-brand-row__logo--stacked {
  height: calc(var(--kb-brand-logo-h) * 2);
}

.kb-brand-card__logo .kb-brand-row__logo--placeholder {
  font-family: var(--kb-font-body);
  font-size: calc(var(--kb-brand-logo-h) * 1.38);
  font-weight: 500;
  height: auto;
  letter-spacing: 0.06em;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  width: auto;
}

@media (max-width: 1024px) {
  .kb-brand-card__logo {
    --kb-brand-logo-h: 16px;
  }
}

/* Hero loop video (owner 2026-10-26) plays over its still; reduced motion keeps the still.
   It loads after the page (commerce-ui.js) and stays transparent until frames play. */
.kb-hero__video:not(.is-playing) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kb-hero__video {
    display: none;
  }
}

/* In the loop video the characters' heads fill the top corners and only the bottom-left
   (wall and floor) stays clear in every frame: the sale stamp sits there at every width. */
.kb-hero-carousel .kb-hero__image--sale-art .kb-hero-sale__stamp {
  bottom: calc(var(--kb-space) * 2.5);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  height: clamp(4.25rem, 7vw, 6rem);
  left: calc(var(--kb-space) * 2.5);
  right: auto;
  top: auto;
  width: clamp(4.25rem, 7vw, 6rem);
}

@media (max-width: 640px) {
  .kb-hero-carousel .kb-hero__image--sale-art .kb-hero-sale__stamp {
    bottom: var(--kb-space);
    font-size: 1rem;
    height: 3.5rem;
    left: var(--kb-space);
    width: 3.5rem;
  }
}

/* PDP buy row wraps so the quick-pay button can sit beside Add to cart or drop under it. */
.kb-pdp__cart form.cart,
.kb-pdp__cart.kb-rb__buy {
  flex-wrap: wrap;
}

.kb-pdp__cart :is(.single_add_to_cart_button, .kb-rb__add) {
  flex: 1 1 10rem;
}

/* PDP quick buy (inc/quick-pay.php): black wallet button beside Add to cart (owner 2026-10-28:
   in place of the payment logos), full width under it on phones. Apple mark 26px with >=1/4-height clear
   space; Google file scaled so its pill is 26px, built-in clear space trimmed to ~6px. */
.kb-quick-pay {
  align-items: center;
  background: var(--kb-wallet-black);
  border: 0;
  border-radius: var(--kb-radius-control);
  color: var(--kb-button-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 14rem;
  font: inherit;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--kb-space);
}

.kb-quick-pay:hover {
  opacity: 0.85;
}

.kb-quick-pay:focus-visible {
  outline: 2px solid var(--kb-button);
  outline-offset: 2px;
}

.kb-quick-pay__mark--apple {
  height: 26px;
  width: auto;
}

.kb-quick-pay__mark--google {
  height: 48.2px;
  margin: -5.05px;
  width: auto;
}

.kb-quick-pay[hidden] {
  display: none;
}

.kb-quick-pay:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Where stepper, button and quick pay don't fit in one row, quick pay takes a full row. */
@media (min-width: 768px) {
  .kb-pdp__cart :is(.single_add_to_cart_button, .kb-rb__add) { flex-basis: 15rem; }
  .kb-quick-pay { flex-grow: 1; }
}

@media (max-width: 767px) {
  /* Phone rules set order 1-2 on the stepper and button. */
  .kb-quick-pay { flex-basis: 100%; min-height: 48px; order: 3; }
}

/* Checkout: Apple Pay and Google Pay first (owner 2026-10-28): side by side on desktop, full
   width on phones like every other method, which keep their order. */
.kb-checkout__payment .paysera-payments div.payment-group-title { order: -3; }
.kb-checkout__payment .paysera-payments div.paysera-payment-method[id="apple_pay"] { order: -2; }
.kb-checkout__payment .paysera-payments div.paysera-payment-method[id="google_pay"] { order: -1; }

/* Cart drawer foot (owner 2026-10-28): bigger total, tighter spacing, equal 50px buttons. */
.kb-cart-drawer .kb-cart-drawer__foot {
  gap: calc(var(--kb-space) * 0.75);
  padding: calc(var(--kb-space) * 1.5) calc(var(--kb-space) * 3) calc(var(--kb-space) * 2 + env(safe-area-inset-bottom, 0px));
}

.kb-cart-drawer .kb-cart-drawer__subtotal strong {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.kb-cart-drawer .kb-cart-drawer__note {
  line-height: 1.35;
}

.kb-cart-drawer .kb-cart-drawer__actions {
  gap: calc(var(--kb-space) * 0.75);
  margin-top: calc(var(--kb-space) * 0.25);
}

.kb-cart-drawer .kb-cart-drawer__actions :is(.kb-cart-drawer__checkout, .kb-cart-drawer__view-cart) {
  box-sizing: border-box;
  height: 50px;
  min-height: 50px;
  padding-block: 0;
}

.kb-cart-drawer .kb-cart-drawer__actions .kb-cart-drawer__checkout {
  font-size: 1.0625rem;
}

@media (max-width: 767px) {
  .kb-cart-drawer .kb-cart-drawer__foot {
    gap: calc(var(--kb-space) * 0.5);
    padding: calc(var(--kb-space) * 1.25) calc(var(--kb-space) * 2) calc(var(--kb-space) * 1.5 + env(safe-area-inset-bottom, 0px));
  }

  .kb-cart-drawer .kb-cart-drawer__subtotal strong {
    font-size: 1.5rem;
  }
}

/* Phones: skin types as a 2x2 grid instead of four stacked cards, and the A-Z brand
   chips as one swipeable line instead of ~8 wrapped rows (owner mobile brief 2026-10-29). */
@media (max-width: 767px) {
  .kb-home .kb-skin-types .kb-card-grid {
    display: grid;
    gap: calc(var(--kb-space) * 1.5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-home .kb-brand-index {
    flex-wrap: nowrap;
    margin-inline: calc(var(--kb-space) * -2);
    overflow-x: auto;
    padding-inline: calc(var(--kb-space) * 2);
    scrollbar-width: none;
  }

  .kb-home .kb-brand-index::-webkit-scrollbar {
    display: none;
  }

  .kb-home .kb-brand-index > * {
    flex: 0 0 auto;
  }
}

/* PDP on phones (owner mobile brief 2026-10-29): price, quantity and "Add to cart" come
   before the 3-step routine panel instead of two screens down, and the long description
   is clamped to ~7 lines behind "Read more" (commerce-ui.js adds .is-clamped). */
@media (max-width: 767px) {
  .kb-rb {
    display: flex;
    flex-direction: column;
  }

  .kb-pdp__cart.kb-rb__buy {
    margin: 0 0 calc(var(--kb-space) * 2);
    order: -1;
  }

  .kb-pdp-description.is-clamped .kb-pdp-description__body {
    -webkit-mask-image: linear-gradient(to bottom, var(--kb-ink) 65%, transparent);
    mask-image: linear-gradient(to bottom, var(--kb-ink) 65%, transparent);
    max-height: 11rem;
    overflow: hidden;
  }

  .kb-pdp-description__more,
  .kb-pdp-description__more:hover,
  .kb-pdp-description__more:focus-visible {
    background: transparent;
    border: 0;
    color: var(--kb-accent);
    cursor: pointer;
    font: inherit;
    font-size: var(--kb-fs-meta);
    font-weight: 700;
    min-height: 44px;
    padding: 0;
  }
}

@media (min-width: 768px) {
  .kb-pdp-description__more {
    display: none;
  }
}

/* M3/M5 (2026-10-30), phones: 44px hit areas without changing the visible
   glyphs, and no text under 12px. */
@media (max-width: 767px) {
  body.woocommerce-cart table.shop_table.cart a.remove,
  .kb-rb__pill {
    position: relative;
  }

  body.woocommerce-cart table.shop_table.cart a.remove::after,
  .kb-rb__pill::after {
    content: "";
    inset: -11px;
    position: absolute;
  }

  .kb-site-header .kb-cart-count,
  .kb-site-header .kb-wishlist-count {
    font-size: 0.75rem;
    height: 1.125rem;
    min-width: 1.125rem;
  }

  .kb-pdp-rg__step small {
    font-size: 0.75rem;
  }
}

/* P1 (2026-10-30), phones: the browser skips style and layout for homepage
   sections and the footer until they near the screen. Load-time style recalc
   was the largest main-thread cost behind the hero's late paint. */
@media (max-width: 767px) {
  .kb-home > .kb-section,
  .kb-home > .kb-trust-strip,
  .kb-site-footer {
    contain-intrinsic-size: auto 600px;
    content-visibility: auto;
  }
}

/* M1 typography (2026-10-30), phones: three line-heights instead of a different one per component.
   Headings use --kb-lh-tight, compact UI --kb-lh-snug, running text --kb-lh-body (1.5 on phones).
   These rules are shared with desktop, so the phone value lives here; desktop keeps its own. */
@media (max-width: 767px) {
  .kb-site-footer p,
  .kb-site-footer a,
  .kb-site-footer .kb-site-footer__legal,
  .kb-home .kb-concerns .kb-info-card__copy > span {
    line-height: var(--kb-lh-body);
  }

  .kb-section__heading h2,
  .kb-how__step strong,
  .kb-home .kb-journal .kb-journal-feature__body strong,
  .kb-newsletter .kb-newsletter__title,
  .kb-site-footer .kb-footer-signup__title,
  .kb-site-footer .kb-site-footer__wordmark,
  .kb-pdp__summary h1,
  .kb-pdp-rg__intro h2,
  .kb-pdp-quiz__title,
  .kb-rb__title,
  .kb-collection-guide__body h2,
  .kb-collection-faq h2,
  .kb-collection-related h2,
  .kb-cart-head h1,
  .cart_totals h2 {
    line-height: var(--kb-lh-tight);
  }

  .kb-eyebrow,
  .kb-tile__title,
  .kb-tile__eyebrow,
  .kb-routine-step__products a,
  .kb-pdp-rg__label,
  .kb-pdp-rg__step,
  .kb-pdp-rg__step small,
  .kb-pdp-rg__step-num,
  .kb-pdp-rg__badge,
  .woocommerce-cart-form th.product-name,
  body.woocommerce-cart table.shop_table.cart td.product-name > a {
    line-height: var(--kb-lh-snug);
  }
}

/* M3 leftovers (2026-10-30), phones: invisible 44px tap areas on the remaining small links and buttons
   (breadcrumbs, chips, small buttons, gallery dots, quantity, cart links). The ::after is centred and
   never smaller than the control; the swipe rows get 2px room so it is not clipped. No visual change. */
@media (max-width: 767px) {
  :is(.woocommerce-breadcrumb a, .kb-catalog__suggestion, .kb-catalog__filter-close, .kb-catalog-filter__actions :is(a, button), .kb-button--small, .kb-tile__chips a, .kb-brand-index a, .kb-routine-step__title, .splide__pagination__page, .kb-product-quantity__button, .kb-pdp-ship__list a, .kb-pdp__taxonomy-link, .kb-cart-head a, .shipping-calculator-button, .kb-cart-upsell__head a) {
    position: relative;
  }

  :is(.woocommerce-breadcrumb a, .kb-catalog__suggestion, .kb-catalog__filter-close, .kb-catalog-filter__actions :is(a, button), .kb-button--small, .kb-tile__chips a, .kb-brand-index a, .kb-routine-step__title, .splide__pagination__page, .kb-product-quantity__button, .kb-pdp-ship__list a, .kb-pdp__taxonomy-link, .kb-cart-head a, .shipping-calculator-button, .kb-cart-upsell__head a)::after {
    bottom: min(0px, calc(50% - 22px));
    content: "";
    left: min(0px, calc(50% - 22px));
    position: absolute;
    right: min(0px, calc(50% - 22px));
    top: min(0px, calc(50% - 22px));
  }

  .kb-brand-index {
    margin-block: -2px;
    padding-block: 2px;
  }

  .kb-catalog__suggestions ul {
    margin-top: -2px;
    padding-top: 2px;
  }
}