/* Generated from src/scss — do not edit directly. */
/* -----------------------------------------------------------------------------
 * 1. Base
 * -------------------------------------------------------------------------- */
img {
  display: block;
  max-inline-size: 100%;
}

.skip-link:focus {
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius);
  color: var(--wp--preset--color--contrast);
  padding: 12px 20px;
  z-index: 100000;
}

/* -----------------------------------------------------------------------------
 * 2. Form controls
 *
 * Core and WooCommerce render raw inputs; theme.json cannot reach them, so the
 * whole control set is normalised once here.
 * -------------------------------------------------------------------------- */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
textarea,
select {
  background: var(--wp--preset--color--surface);
  block-size: var(--wp--custom--control-height-medium);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium);
  inline-size: 100%;
  padding-block: 0;
  padding-inline: 14px;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=date]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
  color: var(--wp--preset--color--muted);
  opacity: 1;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=date]::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--wp--preset--color--muted);
  opacity: 1;
}

textarea {
  block-size: auto;
  line-height: 1.5;
  padding-block: 14px;
  resize: vertical;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  font-weight: 500;
  padding-inline-end: 36px;
}

input[type=checkbox],
input[type=radio] {
  accent-color: var(--wp--preset--color--accent);
  block-size: 16px;
  inline-size: 16px;
  margin: 0;
}

label {
  color: inherit;
}

fieldset {
  border: 0;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
}

legend {
  padding: 0;
}

/* -----------------------------------------------------------------------------
 * 3. Typography utilities
 * -------------------------------------------------------------------------- */
.klothen-eyebrow {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--label);
  line-height: 1.4;
  text-transform: uppercase;
}

.klothen-meta {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--meta);
  text-transform: uppercase;
}

.klothen-lede {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.5;
  max-inline-size: 60ch;
}

.klothen-link {
  align-self: flex-start;
  border-block-end: var(--wp--custom--hairline) solid currentcolor;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.klothen-link:hover, .klothen-link:focus {
  text-decoration: none;
}

.klothen-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.klothen-stat strong {
  font-size: var(--wp--preset--font-size--xx-large);
  letter-spacing: var(--wp--custom--tracking--tight);
  line-height: 1;
}
.klothen-stat span {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

/* -----------------------------------------------------------------------------
 * 4. Layout utilities
 * -------------------------------------------------------------------------- */
.klothen-width-compact > :where(.wp-block-group__inner-container, *) {
  --wp--style--global--content-size: var(--wp--custom--width--compact);
}

.klothen-width-checkout {
  --wp--style--global--content-size: var(--wp--custom--width--checkout);
}

.klothen-sticky {
  position: sticky;
  top: var(--wp--preset--spacing--60);
}

.klothen-divider {
  border-block-start: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
}

.klothen-hairline-grid {
  background: var(--wp--preset--color--outline);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius);
  gap: 1px !important;
  overflow: hidden;
}
.klothen-hairline-grid > * {
  background: var(--wp--preset--color--surface);
  margin: 0;
}

.klothen-empty {
  align-items: center;
  border: var(--wp--custom--hairline) dashed var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--60);
  text-align: center;
}

.klothen-table-wrap, .wp-block-table.is-style-spec {
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius);
  overflow-x: auto;
}
.klothen-table-wrap table, .wp-block-table.is-style-spec table {
  border-collapse: collapse;
  inline-size: 100%;
  margin: 0;
  min-inline-size: 520px;
}
.klothen-table-wrap th, .wp-block-table.is-style-spec th,
.klothen-table-wrap td,
.wp-block-table.is-style-spec td {
  border: 0;
  padding: 12px 16px;
  text-align: start;
}
.klothen-table-wrap thead tr, .wp-block-table.is-style-spec thead tr {
  background: var(--wp--preset--color--surface-alt);
}
.klothen-table-wrap th, .wp-block-table.is-style-spec th {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--meta);
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--x-small);
}
.klothen-table-wrap tbody tr, .wp-block-table.is-style-spec tbody tr {
  border-block-start: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
}
.klothen-table-wrap tbody td:first-child, .wp-block-table.is-style-spec tbody td:first-child {
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
 * 5. Media
 * -------------------------------------------------------------------------- */
.klothen-frame img,
.klothen-frame .wp-block-image img {
  block-size: 100%;
  inline-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.klothen-frame--product {
  aspect-ratio: var(--wp--custom--product-aspect);
}

.klothen-frame--editorial {
  aspect-ratio: var(--wp--custom--editorial-aspect);
}

.klothen-frame--tile {
  aspect-ratio: var(--wp--custom--tile-aspect);
}

.klothen-frame--banner {
  aspect-ratio: var(--wp--custom--banner-aspect);
}

.klothen-frame--square {
  aspect-ratio: 1;
}

.klothen-frame {
  background: var(--wp--preset--color--surface-alt);
  border-radius: var(--wp--custom--radius);
  overflow: hidden;
}

.klothen-zoom img {
  transition: transform var(--wp--custom--image-transition);
}

.klothen-zoom:hover img,
.klothen-zoom:focus-within img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .klothen-zoom img {
    transition: none;
  }
  .klothen-zoom:hover img {
    transform: none;
  }
}
.klothen-tile {
  position: relative;
}
.klothen-tile .klothen-tile__label {
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius-small);
  bottom: 16px;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  inset-inline-start: 16px;
  margin: 0;
  padding: 8px 12px;
  position: absolute;
}

/* -----------------------------------------------------------------------------
 * 6. Badges, chips and swatches
 * -------------------------------------------------------------------------- */
.klothen-badge {
  background: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius-small);
  color: var(--wp--preset--color--accent-contrast);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--wp--custom--tracking--badge);
  line-height: 1;
  margin: 0;
  padding: 6px 8px;
  text-transform: uppercase;
}
.klothen-badge.klothen-badge--sale {
  background: var(--wp--preset--color--sale);
  color: var(--wp--preset--color--sale-contrast);
}

.klothen-chip {
  align-items: center;
  block-size: 32px;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius-pill);
  color: var(--wp--preset--color--contrast);
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding-inline: 14px;
  background: var(--wp--preset--color--surface-alt);
  border-color: transparent;
  font-weight: 500;
}

.klothen-payment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.klothen-payment-chips span {
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius-small);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
}

.klothen-swatches {
  display: flex;
  gap: 6px;
}

.klothen-swatch {
  background: var(--klothen-swatch, var(--wp--preset--color--surface-alt));
  block-size: 12px;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius-pill);
  display: block;
  inline-size: 12px;
}

.klothen-dot {
  background: var(--wp--preset--color--outline);
  block-size: 8px;
  border-radius: var(--wp--custom--radius-pill);
  display: inline-block;
  flex: none;
  inline-size: 8px;
}
.klothen-dot.is-done {
  background: var(--wp--preset--color--accent);
}
.klothen-dot.is-alert {
  background: var(--wp--preset--color--sale);
}

/* -----------------------------------------------------------------------------
 * 7. Composite components
 * -------------------------------------------------------------------------- */
.klothen-steps, .wp-block-list.is-style-steps {
  counter-reset: klothen-step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.klothen-steps > li, .wp-block-list.is-style-steps > li {
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  counter-increment: klothen-step;
  padding-block: var(--wp--preset--spacing--50);
  padding-inline-start: 56px;
  position: relative;
}
.klothen-steps > li::before, .wp-block-list.is-style-steps > li::before {
  align-items: center;
  background: var(--wp--preset--color--accent);
  block-size: 36px;
  border-radius: var(--wp--custom--radius-pill);
  color: var(--wp--preset--color--accent-contrast);
  content: counter(klothen-step);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  inline-size: 36px;
  inset-block-start: var(--wp--preset--spacing--50);
  inset-inline-start: 0;
  justify-content: center;
  position: absolute;
}
.klothen-steps > li strong, .wp-block-list.is-style-steps > li strong {
  color: var(--wp--preset--color--contrast);
  display: block;
  font-size: 16px;
}
.klothen-steps > li, .wp-block-list.is-style-steps > li {
  color: var(--wp--preset--color--muted);
  font-size: 14px;
  line-height: 1.5;
}

.klothen-progress {
  background: var(--wp--preset--color--surface-alt);
  block-size: 4px;
  border-radius: 2px;
  inline-size: 100%;
  overflow: hidden;
}
.klothen-progress > span {
  background: var(--wp--preset--color--accent);
  display: block;
  block-size: 100%;
  inline-size: var(--klothen-progress, 0%);
  transition: inline-size 300ms ease;
}

.klothen-countdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--60);
}
.klothen-countdown > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.klothen-countdown strong {
  font-size: var(--wp--preset--font-size--display-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--wp--custom--tracking--display);
  line-height: 1;
}
.klothen-countdown span {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--meta);
  text-transform: uppercase;
}

.klothen-histogram {
  display: flex;
  flex-direction: column;
  font-size: var(--wp--preset--font-size--small);
  gap: 6px;
}
.klothen-histogram > div {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr) 32px;
}
.klothen-histogram .klothen-histogram__bar {
  background: var(--wp--preset--color--surface-alt);
  block-size: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.klothen-histogram .klothen-histogram__bar > span {
  background: var(--wp--preset--color--contrast);
  display: block;
  block-size: 100%;
  inline-size: var(--klothen-bar, 0%);
}
.klothen-histogram .klothen-histogram__count {
  color: var(--wp--preset--color--muted);
  text-align: end;
}

.klothen-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.klothen-timeline > li {
  align-items: baseline;
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  display: grid;
  font-size: 14px;
  gap: 14px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  padding-block: 12px;
}
.klothen-timeline .klothen-timeline__dot {
  background: var(--wp--preset--color--outline);
  block-size: 10px;
  border: 2px solid var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius-pill);
  box-shadow: 0 0 0 1px var(--wp--preset--color--outline);
  inline-size: 10px;
  position: relative;
  top: 1px;
}
.klothen-timeline > li:first-child .klothen-timeline__dot {
  background: var(--wp--preset--color--accent);
}
.klothen-timeline .klothen-timeline__time {
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}

.klothen-steps-strip {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.klothen-steps-strip > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.klothen-steps-strip .klothen-steps-strip__bar {
  background: var(--wp--preset--color--outline);
  block-size: 4px;
  border-radius: 2px;
}
.klothen-steps-strip .is-done .klothen-steps-strip__bar {
  background: var(--wp--preset--color--accent);
}
.klothen-steps-strip strong {
  color: var(--wp--preset--color--muted);
  font-size: 14px;
}
.klothen-steps-strip .is-done strong {
  color: var(--wp--preset--color--contrast);
}
.klothen-steps-strip span {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

/* -----------------------------------------------------------------------------
 * 8. Two-column layouts
 *
 * core/columns has a single hard breakpoint at 781px; the mockups collapse the
 * sidebar layouts at 1024px. The delta is absorbed here rather than by
 * restructuring the templates.
 * -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .klothen-split-late {
    flex-wrap: wrap !important;
  }
  .klothen-split-late > .wp-block-column {
    flex-basis: 100% !important;
  }
  .klothen-sticky {
    position: static;
  }
}
@media (max-width: 680px) {
  .klothen-steps-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .klothen-countdown {
    gap: var(--wp--preset--spacing--50);
  }
}
/* -----------------------------------------------------------------------------
 * 9. Block style variations
 *
 * Registered in inc/block-styles.php. The section-level variations (card,
 * hairline, inverse, surface, prose) are theme.json partials in /styles and need
 * no CSS here.
 * -------------------------------------------------------------------------- */
.wp-block-paragraph.is-style-eyebrow,
.wp-block-heading.is-style-eyebrow {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--label);
  line-height: 1.4;
  text-transform: uppercase;
}

.wp-block-paragraph.is-style-meta {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--meta);
  text-transform: uppercase;
}

.wp-block-paragraph.is-style-lede {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.5;
  max-inline-size: 60ch;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
  background: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--outline);
  color: var(--wp--preset--color--contrast);
  font-weight: 500;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover, .wp-block-button.is-style-ghost .wp-block-button__link:focus {
  background: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-link .wp-block-button__link {
  background: none;
  border: 0;
  border-block-end: var(--wp--custom--hairline) solid currentcolor;
  border-radius: 0;
  color: var(--wp--preset--color--contrast);
  padding: 0 0 2px;
}
.wp-block-button.is-style-link .wp-block-button__link:hover, .wp-block-button.is-style-link .wp-block-button__link:focus {
  background: none;
  color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-pill .wp-block-button__link {
  border-radius: var(--wp--custom--radius-pill);
  padding-block: 11px;
  padding-inline: 16px;
}

.wp-block-list.is-style-checks {
  list-style: none;
  padding-inline-start: 0;
}
.wp-block-list.is-style-checks > li {
  align-items: center;
  display: flex;
  gap: 10px;
}
.wp-block-list.is-style-checks > li::before {
  background: var(--wp--preset--color--accent);
  block-size: 6px;
  border-radius: 1px;
  content: "";
  flex: none;
  inline-size: 6px;
  transform: rotate(45deg);
}

.wp-block-image.is-style-frame-product img {
  aspect-ratio: var(--wp--custom--product-aspect);
  -o-object-fit: cover;
     object-fit: cover;
}

.wp-block-image.is-style-frame-tile img {
  aspect-ratio: var(--wp--custom--tile-aspect);
  -o-object-fit: cover;
     object-fit: cover;
}

.wp-block-image.is-style-frame-editorial img {
  aspect-ratio: var(--wp--custom--editorial-aspect);
  -o-object-fit: cover;
     object-fit: cover;
}

.wp-block-image.is-style-frame-banner img {
  aspect-ratio: var(--wp--custom--banner-aspect);
  -o-object-fit: cover;
     object-fit: cover;
}

.wp-block-group.is-style-ticker {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--badge);
  padding-block: 16px;
  text-transform: uppercase;
}
.wp-block-group.is-style-ticker p {
  margin: 0;
}
.wp-block-group.is-style-ticker .klothen-ticker-sep {
  opacity: 0.4;
}

/* -----------------------------------------------------------------------------
 * 10. Theme forms
 *
 * Markup comes from the klothen/form-newsletter and klothen/form-contact patterns.
 * -------------------------------------------------------------------------- */
.klothen-form form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}
.klothen-form__hp {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.klothen-form__status {
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius);
  padding: 14px 18px;
  font-size: var(--wp--preset--font-size--medium);
  margin-block-end: var(--wp--preset--spacing--40);
}
.klothen-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.klothen-form__field label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
}
.klothen-form__row {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.klothen-form__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.klothen-form__topics legend {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.klothen-form__topics input[type=radio] {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.klothen-form__topics label {
  align-items: center;
  block-size: 38px;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius-pill);
  color: var(--wp--preset--color--contrast);
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding-inline: 14px;
  cursor: pointer;
}
.klothen-form__topics input:checked + label {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-contrast);
  border-color: var(--wp--preset--color--contrast);
}
.klothen-form__topics input:focus-visible + label {
  outline: var(--wp--custom--focus-ring) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus-offset);
}
.klothen-form__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  justify-content: space-between;
  margin: 0;
}
.klothen-form__actions span {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}
.klothen-form button[type=submit] {
  align-items: center;
  block-size: var(--wp--custom--control-height-medium);
  border: var(--wp--custom--hairline) solid transparent;
  border-radius: var(--wp--custom--radius);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  line-height: 1;
  padding-block: 0;
  padding-inline: 24px;
  text-decoration: none;
  transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
  white-space: nowrap;
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-contrast);
}
.klothen-form button[type=submit]:hover, .klothen-form button[type=submit]:focus {
  background: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

.klothen-form--newsletter form {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  max-inline-size: 520px;
}
.klothen-form--newsletter form input[type=email] {
  block-size: var(--wp--custom--control-height);
  flex: 1;
  min-inline-size: 0;
  padding-inline: 16px;
}
.klothen-form--newsletter form button[type=submit] {
  block-size: var(--wp--custom--control-height);
}

.klothen-faq__search input[type=search] {
  max-inline-size: 360px;
}

.klothen-stagger > :first-child {
  margin-block-start: var(--wp--preset--spacing--80);
}

.klothen-stagger > :last-child {
  margin-block-end: var(--wp--preset--spacing--80);
}

.klothen-toc li a {
  border-radius: var(--wp--custom--radius);
  display: block;
  padding: 8px 12px;
}
.klothen-toc li a:hover {
  background: var(--wp--preset--color--surface-alt);
  text-decoration: none;
}
.klothen-toc ul {
  list-style: none;
  padding-inline-start: 0;
}

.klothen-tag-list a {
  align-items: center;
  block-size: 32px;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  border-radius: var(--wp--custom--radius-pill);
  color: var(--wp--preset--color--contrast);
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding-inline: 14px;
  font-weight: 500;
  margin-inline-end: 8px;
}

.klothen-shop-toolbar {
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--outline);
  padding-block-end: var(--wp--preset--spacing--40);
}

.klothen-form__status.is-error {
  border-color: var(--wp--preset--color--sale);
}