/* ============================================================
 * Kaindl Sample Ordering — frontend styles.
 *
 * Visual language:
 *   - Navy primary, white surfaces, restrained Kaindl palette.
 *   - Warm red is rare: cart badge, limit & error states only.
 *   - Editorial rhythm: 1px rules, letter-spaced eyebrows, large numerals.
 *
 * Breakpoints (mobile-first, min-width only, per variables.css contract):
 *   640px   — small tablet
 *   1025px  — desktop
 *   1280px  — wide desktop
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. Header cart indicator
 * ------------------------------------------------------------ */

.kaindl-samples-cart-link {
  position: relative;
}

.kaindl-samples-cart-count {
  align-items: center;
  background: var(--kaindl-color-accent-warm, #d71920);
  border-radius: 999px;
  color: var(--kaindl-color-surface, #fff);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  min-width: 18px;
  padding: 0 5px;
  position: absolute;
  right: -8px;
  top: -8px;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.kaindl-samples-cart-count[hidden] {
  display: none;
}

/* Pulse the badge on count change (driven by JS via attribute mutation). */
.kaindl-samples-cart-count:not([hidden]) {
  animation: kaindl-sample-badge-pulse 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes kaindl-sample-badge-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

/* ------------------------------------------------------------
 * 2. Inline status messages (catalog cards / product detail)
 * ------------------------------------------------------------ */

/* Promoted from an inline-in-card note to a page-level toast: floats
   at top-right of the viewport, below the sticky site header, so it
   never gets squashed inside a narrow suggestion card. Stays on every
   surface regardless of which ancestor the JS appended it into. */
.kaindl-sample-message {
  animation: kaindl-sample-toast-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  background: var(--kaindl-color-surface, #fff);
  border-left: 3px solid var(--kaindl-color-primary, #00305b);
  box-shadow: 0 6px 24px rgba(0, 48, 91, 0.12);
  color: var(--kaindl-color-text, #111);
  font-size: 0.875rem;
  font-weight: 500;
  left: auto;
  letter-spacing: 0.01em;
  line-height: 1.45;
  margin: 0;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 18px;
  position: fixed;
  right: clamp(16px, 3vw, 24px);
  top: clamp(96px, 12vw, 110px);
  z-index: 9999;
}

.kaindl-sample-message.is-added {
  border-left-color: var(--kaindl-color-primary, #00305b);
}

.kaindl-sample-message.is-limit,
.kaindl-sample-message.is-error {
  border-left-color: var(--kaindl-color-accent-warm, #d71920);
}

.kaindl-sample-message.is-not-orderable {
  border-left-color: var(--kaindl-color-accent, #6e89a8);
}

@keyframes kaindl-sample-toast-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Full-viewport loading overlay shown during the 1.4 s window between
   a paid-suggestion add and the page reload that refreshes the cart
   table. Removed naturally when location.reload() swaps the document. */
.kaindl-cart-reload-overlay {
  align-items: center;
  animation: kaindl-cart-reload-fade-in 180ms ease both;
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.78);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 10000;
}

.kaindl-cart-reload-overlay__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 32px;
}

.kaindl-cart-reload-overlay__spinner {
  animation: kaindl-cart-reload-spin 0.9s linear infinite;
  border: 3px solid
    color-mix(in srgb, var(--kaindl-color-primary, #00305b) 18%, transparent);
  border-radius: 50%;
  border-top-color: var(--kaindl-color-primary, #00305b);
  display: block;
  height: 36px;
  width: 36px;
}

/* Fallback for browsers without color-mix() — gives the spinner a
   visible track ring instead of an invisible one. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .kaindl-cart-reload-overlay__spinner {
    border-color: rgba(0, 48, 91, 0.18);
    border-top-color: var(--kaindl-color-primary, #00305b);
  }
}

.kaindl-cart-reload-overlay__label {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

@keyframes kaindl-cart-reload-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes kaindl-cart-reload-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kaindl-cart-reload-overlay,
  .kaindl-cart-reload-overlay__spinner {
    animation: none;
  }
}

/* ------------------------------------------------------------
 * Drupal status messages — floating toasts site-wide
 *
 * Lives in kaindl_samples (not kaindl_theme) so it loads on the
 * Claro admin theme too, attached via kaindl_samples_preprocess_page.
 * Each entry has an X close button injected by JS plus an auto-
 * dismiss timer (5 s status / 8 s alert) so the message strip
 * doesn't permanently push admin content down.
 * ------------------------------------------------------------ */
[data-drupal-messages] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
  position: fixed;
  right: clamp(16px, 3vw, 24px);
  top: clamp(96px, 12vw, 110px);
  z-index: 9998;
}

[data-drupal-messages] > div {
  animation: kaindl-drupal-msg-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  border: 1px solid;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 48, 91, 0.12);
  margin: 0;
  /* Symmetric padding — the X close button is absolutely positioned
     in the top-right corner and overlays the surface, so it must not
     reserve horizontal space; otherwise the message text reads with
     visibly uneven left/right insets. */
  padding: 14px 18px;
  pointer-events: auto;
  position: relative;
  transition: opacity 240ms ease, transform 240ms ease;
}

[data-drupal-messages] > div.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
}

[data-drupal-messages] > div[role="contentinfo"],
[data-drupal-messages] > div[aria-label="Status message"] {
  background-color: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
}

[data-drupal-messages] > div[role="alert"][aria-label="Warning message"] {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #e65100;
}

[data-drupal-messages] > div[role="alert"][aria-label="Error message"] {
  background-color: #ffebee;
  border-color: #f44336;
  color: #c62828;
}

/* Manual close button (X) injected by kaindl_samples_catalog.js.
   Inherits color from the parent message so it tints correctly per
   severity (green / amber / red). */
.kaindl-message-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  transition: opacity 0.18s ease, background-color 0.18s ease;
  width: 28px;
}

.kaindl-message-close:hover,
.kaindl-message-close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  opacity: 1;
}

.kaindl-message-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.kaindl-message-close svg {
  height: 14px;
  width: 14px;
}

@keyframes kaindl-drupal-msg-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hide Drupal's update-status notices by default — the JS in
   kaindl_samples_catalog.js explicitly reveals them on the first
   per-session view and removes them on subsequent loads. Hiding via
   CSS (rather than only via JS at attach time) prevents the flash
   the user would otherwise see between paint and JS execution.
   Requires the `:has()` selector (Chrome 105+, Safari 15.4+,
   Firefox 121+); older browsers fall back to the JS-only path
   which still removes the notice — just with a brief flash. */
[data-drupal-messages] > div:has(a[href*="/admin/reports/updates"]) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-drupal-messages] > div,
  [data-drupal-messages] > div.is-dismissing {
    animation: none;
    transition: none;
  }
}

/* Hidden live region used to broadcast announcements to assistive tech. */
.kaindl-sample-announce {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Add-to-cart button states (the styling target is the existing button). */
[data-kaindl-sample-add].is-loading {
  cursor: progress;
  opacity: 0.7;
}

[data-kaindl-sample-add].is-added {
  /* Brief visual ack — caller controls the base button look. */
  outline: 2px solid var(--kaindl-color-primary, #00305b);
  outline-offset: 2px;
  transition: outline 200ms ease;
}

/* Suppress the default page-title block on cart and checkout — the
   sample chrome injects its own heading inside the form wrapper. */
body:has(.kaindl-sample-cart) .block-page-title-block,
body:has(.kaindl-sample-cart) > .page-title,
body:has(.kaindl-sample-cart) h1.page-title,
body:has(.kaindl-sample-checkout) .block-page-title-block,
body:has(.kaindl-sample-checkout) > .page-title,
body:has(.kaindl-sample-checkout) h1.page-title {
  display: none;
}

/* ------------------------------------------------------------
 * 3. Sample cart page
 *
 *    Page wrapper:   .kaindl-sample-cart
 *    Heading row:    .kaindl-sample-cart__heading  (eyebrow + h1)
 *    Layout grid:    .kaindl-sample-cart__layout   (items | summary)
 *    Items column:   .kaindl-sample-cart__items
 *    Summary card:   .kaindl-sample-cart__summary
 *    Empty state:    .kaindl-sample-cart__empty
 *    Limit notice:   .kaindl-sample-cart__notice
 *
 * Targets Commerce's default views-form cart classes inside.
 * ------------------------------------------------------------ */

.kaindl-sample-cart {
  margin: 0 auto;
  max-width: var(--kaindl-container-max, 1400px);
  padding: clamp(32px, 5vw, 64px) var(--kaindl-gutter, 16px);
}

.kaindl-sample-cart__eyebrow {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.kaindl-sample-cart__heading {
  border-bottom: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
  font-size: var(--kaindl-type-title-lg, clamp(1.75rem, 3vw, 2.5rem));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--kaindl-leading-title, 1.16);
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  padding-bottom: 14px;
}

.kaindl-sample-cart__notice {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  border-left: 3px solid var(--kaindl-color-accent-warm, #d71920);
  color: var(--kaindl-color-text, #111);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 24px;
  padding: 14px 18px;
}

/* Two-column layout below the (full-width) steps + heading.
   Mobile-first: single column, cart first, suggestions stacked below.
   Desktop (≥1025px, overridden below) splits into two columns: cart
   primary on the left, suggestions rail on the right. */
.kaindl-sample-cart__layout {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
  position: relative;
}

.kaindl-sample-cart__main {
  min-width: 0;
}

.kaindl-sample-cart__suggestions {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  border-top: 1px solid var(--kaindl-color-border, #d7d7d7);
  margin: 0;
  min-width: 0;
  padding: clamp(24px, 3vw, 32px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  /* Suggestions on the LEFT, cart on the RIGHT. DOM order is cart-first
     (so mobile stacks with the cart visible first); explicit `order`
     swaps the columns at desktop sizes.
     The rail is sticky so it follows the user when the cart column is
     tall, and capped to ~viewport height so categories with many items
     (Sample Sets) scroll inside their column instead of pushing the
     page taller. Header is `position: sticky` at 86px, so we sit
     16px below it. */
  .kaindl-sample-cart__layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Paint the gray panel as a backdrop covering the left grid track for
     the full layout height, regardless of how tall the cart side gets.
     This separates the visual "panel" (cell-sized, always full height)
     from the inner sticky scroll behaviour, so the suggestion cards
     keep their natural compact sizing rather than stretching to fill. */
  .kaindl-sample-cart__layout::before {
    background: var(--kaindl-color-surface-subtle, #f4f6f8);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: calc(50% - (clamp(32px, 4vw, 56px) / 2));
    z-index: 0;
  }

  .kaindl-sample-cart__suggestions {
    background: transparent;
    border-top: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 118px);
    order: 1;
    padding: clamp(24px, 2.5vw, 32px);
    position: sticky;
    top: 102px;
  }

  .kaindl-sample-cart__main {
    order: 2;
  }

  /* The card grid takes the remaining vertical room inside the sticky
     rail and scrolls internally. min-height:0 unlocks flex shrinking
     so overflow-y kicks in correctly. */
  .kaindl-sample-cart__suggestions .kaindl-suggest__grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-color: var(--kaindl-color-border, #d7d7d7) transparent;
    scrollbar-width: thin;
  }

  .kaindl-sample-cart__suggestions .kaindl-suggest__grid::-webkit-scrollbar {
    width: 6px;
  }

  .kaindl-sample-cart__suggestions
    .kaindl-suggest__grid::-webkit-scrollbar-track {
    background: transparent;
  }

  .kaindl-sample-cart__suggestions
    .kaindl-suggest__grid::-webkit-scrollbar-thumb {
    background: var(--kaindl-color-border, #d7d7d7);
    border-radius: 3px;
  }

  .kaindl-sample-cart__suggestions
    .kaindl-suggest__grid::-webkit-scrollbar-thumb:hover {
    background: var(--kaindl-color-accent, #6e89a8);
  }
}

.kaindl-sample-cart__items {
  min-width: 0;
}

/* ------------------------------------------------------------
 * Suggestions aside — eyebrow + category dropdown + card grid
 * (mock data via JS until backend ships the real content model)
 * ------------------------------------------------------------ */

/* Suggestions section header — title left, filter right on tablet+,
   stacked on narrow. No bottom border (the parent `__suggestions`
   block already supplies the top hairline separating cart and band). */
.kaindl-suggest__header {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin: 0 0 clamp(24px, 3.5vw, 36px);
}

@media (min-width: 640px) {
  .kaindl-suggest__header {
    flex-direction: row;
  }
}

/* Promoted from sidebar eyebrow to full section heading — sits opposite
   the category filter dropdown. Keeps the navy editorial look but at a
   readable headline weight. */
.kaindl-suggest__eyebrow {
  color: var(--kaindl-color-primary, #00305b);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
}

.kaindl-suggest__select-wrap {
  display: inline-block;
  position: relative;
}

.kaindl-suggest__select {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--kaindl-color-primary, #00305b) 50%
    ),
    linear-gradient(
      135deg,
      var(--kaindl-color-primary, #00305b) 50%,
      transparent 50%
    );
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 8px) 50%;
  background-repeat: no-repeat;
  background-size:
    6px 6px,
    6px 6px;
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  color: var(--kaindl-color-primary, #00305b);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 10px 36px 10px 16px;
  transition: border-color 0.18s ease;
}

.kaindl-suggest__select:hover {
  border-color: var(--kaindl-color-primary, #00305b);
}

.kaindl-suggest__select:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring, #0b4a81);
  outline-offset: 4px;
}

.kaindl-suggest__grid {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
}

.kaindl-suggest__empty {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.9375rem;
  grid-column: 1 / -1;
  margin: 0;
  padding: 32px 0;
  text-align: center;
}

.kaindl-suggest-card {
  background: transparent;
  display: grid;
  gap: 12px;
  grid-template-columns: 64px 1fr;
  min-width: 0;
}

.kaindl-suggest-card__thumb {
  --tone: #c7bdac;
  aspect-ratio: 1;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tone) 100%, white 0%),
    color-mix(in srgb, var(--tone) 70%, white 30%)
  );
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  overflow: hidden;
  width: 100%;
}

.kaindl-suggest-card__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Fallback for browsers without color-mix() — keeps the colored thumb visible. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .kaindl-suggest-card__thumb {
    background: var(--tone, #c7bdac);
  }
}

.kaindl-suggest-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kaindl-suggest-card__title {
  color: var(--kaindl-color-text, #111);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
}

.kaindl-suggest-card__subtitle {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  line-height: 1.35;
  margin: 0;
}

.kaindl-suggest-card__footer {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}

.kaindl-suggest-card__price {
  color: var(--kaindl-color-primary, #00305b);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 0.9375rem;
  font-weight: 700;
}

.kaindl-suggest-card__price sup {
  font-size: 0.625em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: top;
}

.kaindl-suggest-card__cta {
  background: transparent;
  border: 0;
  color: var(--kaindl-color-accent, #6e89a8);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 0;
  text-transform: uppercase;
  transition: color 150ms ease;
}

.kaindl-suggest-card__cta:not([disabled]):hover {
  color: var(--kaindl-color-primary, #00305b);
}

.kaindl-suggest-card__cta[disabled] {
  cursor: default;
  opacity: 0.7;
}

.kaindl-sample-cart__empty {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  color: var(--kaindl-color-text, #111);
  display: flex;
  flex-direction: column;
  font-size: 1.0625rem;
  gap: 12px;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
  text-align: center;
}

.kaindl-sample-cart__empty-text {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.kaindl-sample-cart__empty-hint {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.kaindl-sample-cart__empty-actions {
  margin-top: 12px;
}

.kaindl-sample-cart__empty-action {
  background: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 12px 22px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease;
}

.kaindl-sample-cart__empty-action:hover {
  background: var(--kaindl-color-primary-hover, #00457f);
  color: var(--kaindl-color-surface, #fff);
  text-decoration: none;
}

/* Item rows — target the Commerce views table inside .kaindl-sample-cart.
   Modernized: roomier vertical rhythm, hairline row separators only
   (no boxy table look), bigger thumbs, clearer typographic hierarchy.
   Mobile-first: the table is reshaped into a stacked grid per row so
   the 5-column Commerce default doesn't overflow narrow viewports.
   At ≥640px the layout reverts to a true <table> rendering. */

.kaindl-sample-cart table,
.kaindl-sample-cart tbody {
  display: block;
  width: 100%;
}

.kaindl-sample-cart table {
  border-collapse: collapse;
}

.kaindl-sample-cart thead {
  display: none; /* Replaced by per-row labels for editorial reading. */
}

.kaindl-sample-cart tbody tr {
  border-bottom: 1px solid var(--kaindl-color-border, #d7d7d7);
  display: grid;
  gap: 4px 12px;
  grid-template-areas:
    "item    item"
    "quantity remove";
  grid-template-columns: 1fr auto;
  padding: clamp(14px, 3vw, 18px) 0;
  transition: background-color 0.15s ease;
}

.kaindl-sample-cart tbody tr:first-child {
  border-top: 1px solid var(--kaindl-color-border, #d7d7d7);
}

.kaindl-sample-cart tbody tr:hover {
  background-color: var(--kaindl-color-surface-subtle, #f4f6f8);
}

.kaindl-sample-cart tbody td {
  display: block;
  padding: 0;
  vertical-align: middle;
}

.kaindl-sample-cart .views-field-purchased-entity {
  grid-area: item;
  min-width: 0;
}

.kaindl-sample-cart .views-field-edit-quantity {
  align-self: center;
  grid-area: quantity;
}

.kaindl-sample-cart .views-field-remove-button {
  align-self: center;
  grid-area: remove;
  text-align: right;
}

/* Price and total are €0 for free samples and uninformative on a
   narrow viewport — hide them. They reappear at ≥640px. */
.kaindl-sample-cart .views-field-unit-price__number,
.kaindl-sample-cart .views-field-total-price__number {
  display: none;
}

@media (min-width: 640px) {
  /* Revert to standard table rendering once we have horizontal room. */
  .kaindl-sample-cart table {
    display: table;
  }

  .kaindl-sample-cart tbody {
    display: table-row-group;
  }

  .kaindl-sample-cart tbody tr {
    display: table-row;
    gap: 0;
    grid-template-areas: none;
    grid-template-columns: none;
    padding: 0;
  }

  .kaindl-sample-cart tbody td {
    display: table-cell;
    padding: clamp(12px, 1.8vw, 18px) 12px;
  }

  .kaindl-sample-cart .views-field-unit-price__number,
  .kaindl-sample-cart .views-field-total-price__number {
    display: table-cell;
  }

  .kaindl-sample-cart .views-field-remove-button {
    text-align: left;
  }
}

.kaindl-sample-cart tbody td:first-child {
  padding-left: 0;
}

.kaindl-sample-cart tbody td:last-child {
  padding-right: 0;
}

.kaindl-sample-cart .views-field-purchased-entity {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  padding-right: 16px;
}

.kaindl-sample-cart .views-field-purchased-entity a {
  color: var(--kaindl-color-primary, #00305b);
  text-decoration: none;
}

.kaindl-sample-cart .views-field-purchased-entity a:hover {
  text-decoration: underline;
}

.kaindl-sample-cart .views-field-edit-quantity input[type="number"] {
  background: var(--kaindl-color-surface, #fff);
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  color: var(--kaindl-color-text, #111);
  font-size: 1rem;
  font-weight: 600;
  height: 30px;
  padding: 6px 8px;
  text-align: center;
  width: 40px;
}

.kaindl-sample-cart
  .views-field-edit-quantity
  input[type="number"]:focus-visible {
  border-color: var(--kaindl-focus-ring, #0b4a81);
  outline: 2px solid var(--kaindl-focus-ring, #0b4a81);
  outline-offset: 1px;
}

.kaindl-sample-cart .views-field-remove-button input[type="submit"],
.kaindl-sample-cart .views-field-remove-button button {
  background: none;
  border: 0;
  color: var(--kaindl-color-accent, #6e89a8);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 0;
  text-transform: uppercase;
  transition: color 150ms ease;
}

.kaindl-sample-cart .views-field-remove-button input[type="submit"]:hover,
.kaindl-sample-cart .views-field-remove-button button:hover {
  color: var(--kaindl-color-accent-warm, #d71920);
}

/* Order totals (Subtotal + Total) — pushed away from the last row, with
   an editorial label/value pairing rather than the default Commerce row. */
.kaindl-sample-cart .order-total-line {
  align-items: baseline;
  display: flex;
  font-size: 0.9375rem;
  gap: 18px;
  justify-content: flex-end;
  padding: 2px 0;
}

.kaindl-sample-cart .order-total-line__subtotal {
  margin-top: clamp(24px, 3.5vw, 36px);
}

.kaindl-sample-cart .order-total-line__total {
  font-weight: 700;
}

.kaindl-sample-cart .order-total-line-label {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kaindl-sample-cart .order-total-line__total .order-total-line-label {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.8125rem;
}

.kaindl-sample-cart .order-total-line-value {
  color: var(--kaindl-color-text, #111);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 1rem;
  font-weight: 600;
  min-width: 84px;
  text-align: right;
}

.kaindl-sample-cart .order-total-line__total .order-total-line-value {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 1.125rem;
}

/* Summary / checkout action card. */

.kaindl-sample-cart__summary {
  align-self: start;
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  padding: clamp(24px, 3vw, 36px);
}

.kaindl-sample-cart__summary-eyebrow {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.kaindl-sample-cart__summary-title {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 18px;
}

.kaindl-sample-cart__summary-row {
  display: flex;
  font-size: 0.9375rem;
  justify-content: space-between;
  padding: 8px 0;
}

.kaindl-sample-cart__summary-row + .kaindl-sample-cart__summary-row {
  border-top: 1px solid var(--kaindl-color-border, #d7d7d7);
}

.kaindl-sample-cart__summary-row--total {
  border-top: 2px solid var(--kaindl-color-primary, #00305b);
  font-weight: 700;
  margin-top: 12px;
  padding-top: 14px;
}

/* Cart totals card injected above the action buttons. Right-aligned
   on desktop to align with the navy CTA below; full-width with
   subtotal/total stacked rows. */
.kaindl-sample-cart__totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: clamp(16px, 2vw, 20px) 0 0;
}

.kaindl-sample-cart__totals-row {
  align-items: baseline;
  display: flex;
  font-size: 0.9375rem;
  gap: 16px;
  justify-content: space-between;
}

.kaindl-sample-cart__totals-label {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kaindl-sample-cart__totals-value {
  color: var(--kaindl-color-text, #111);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 1rem;
  font-weight: 600;
}

.kaindl-sample-cart__totals-row--total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--kaindl-color-border, #d7d7d7);
}

.kaindl-sample-cart__totals-row--total .kaindl-sample-cart__totals-label {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.8125rem;
}

.kaindl-sample-cart__totals-row--total .kaindl-sample-cart__totals-value {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Summary footer — the .form-actions container becomes a horizontal
   card sitting beneath the items table. On wider viewports the CTA
   anchors to the right with a hairline rule above; on narrow viewports
   it stacks. The empty left half can be backfilled by a future
   "All items are free samples" info note without restructuring. */
.kaindl-sample-cart .form-actions,
.kaindl-sample-cart [data-drupal-selector="edit-actions"] {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(24px, 3.5vw, 40px);
  padding-top: clamp(20px, 3vw, 28px);
}

.kaindl-sample-cart .form-actions input[type="submit"],
.kaindl-sample-cart .form-actions button[type="submit"] {
  background: var(--kaindl-color-primary, #00305b);
  border: 0;
  color: var(--kaindl-color-surface, #fff);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 16px 28px;
  text-transform: uppercase;
  transition: background-color 180ms ease;
  width: 100%;
}

.kaindl-sample-cart .form-actions input[type="submit"]:hover,
.kaindl-sample-cart .form-actions button[type="submit"]:hover {
  background: var(--kaindl-color-primary-hover, #00457f);
}

/* "Update cart" is the secondary action — outlined navy. The matching
   `button[…]` selectors are required because the theme's site-wide
   `input--submit.html.twig` override emits Drupal submit elements as
   <button> rather than <input>. The `value` attribute survives the
   override so the [value*=…] qualifier still matches. */
.kaindl-sample-cart
  .form-actions
  input[id$="edit-submit"]:not([value*="review" i]):not([value*="address" i]),
.kaindl-sample-cart
  .form-actions
  input[name="op"]:not([value*="review" i]):not([value*="address" i]),
.kaindl-sample-cart
  .form-actions
  button[id$="edit-submit"]:not([value*="review" i]):not([value*="address" i]),
.kaindl-sample-cart
  .form-actions
  button[name="op"]:not([value*="review" i]):not([value*="address" i]) {
  background: transparent;
  border: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
}

.kaindl-sample-cart
  .form-actions
  input[id$="edit-submit"]:not([value*="review" i]):not(
    [value*="address" i]
  ):hover,
.kaindl-sample-cart
  .form-actions
  input[name="op"]:not([value*="review" i]):not([value*="address" i]):hover,
.kaindl-sample-cart
  .form-actions
  button[id$="edit-submit"]:not([value*="review" i]):not(
    [value*="address" i]
  ):hover,
.kaindl-sample-cart
  .form-actions
  button[name="op"]:not([value*="review" i]):not([value*="address" i]):hover {
  background: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
}

/* ------------------------------------------------------------
 * 4. Checkout page (address, review, complete steps)
 *
 *    Wrapper:        .kaindl-sample-checkout
 *    Steps strip:    .kaindl-sample-checkout__steps
 *    Pane:           .kaindl-sample-checkout__pane
 *
 *    Inside, target Commerce's .checkout-pane-* classes.
 * ------------------------------------------------------------ */

.kaindl-sample-checkout {
  margin: 0 auto;
  max-width: var(--kaindl-container-max, 1400px);
  padding: clamp(32px, 5vw, 64px) var(--kaindl-gutter, 16px);
}

/* Inline payment-gateway notice rendered at the top of the checkout
   form (kaindl_samples_payment_notice render array). It's a
   persistent state-of-cart warning, NOT a transient flash, so it
   doesn't share the floating toast pattern used by
   [data-drupal-messages]; instead it sits in-flow as a warning card
   above the page chrome. The accent-warm left rail mirrors
   .kaindl-sample-cart__notice for visual consistency. */
form[id*="commerce-checkout-flow"] .messages--error {
  background: rgba(215, 25, 32, 0.04);
  border: 1px solid rgba(215, 25, 32, 0.18);
  border-left: 3px solid var(--kaindl-color-accent-warm, #d71920);
  border-radius: 0;
  color: var(--kaindl-color-text, #111);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px);
}

form[id*="commerce-checkout-flow"] .messages--error [role="alert"] {
  margin: 0;
}

form[id*="commerce-checkout-flow"] .messages--error a {
  color: var(--kaindl-color-primary, #00305b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

form[id*="commerce-checkout-flow"] .messages--error a:hover {
  color: var(--kaindl-color-primary-hover, #00457f);
}

.kaindl-sample-checkout__eyebrow {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.kaindl-sample-checkout__heading {
  border-bottom: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
  font-size: var(--kaindl-type-title-lg, clamp(1.75rem, 3vw, 2.5rem));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--kaindl-leading-title, 1.16);
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  padding-bottom: 14px;
}

.kaindl-sample-checkout__intro {
  color: var(--kaindl-color-text-muted, #4a4a4a);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: -24px 0 clamp(24px, 3vw, 36px);
  max-width: 760px;
}

/* Checkout panes — flat layout, no outer box border. Inner Drupal
   fieldsets/details get their borders stripped below so review-step
   sections (Contact information, Billing information, Order summary)
   don't show stacked rectangles. */
form[id*="commerce-checkout-flow"] .checkout-pane {
  background: transparent;
  border: 0;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
}

/* Strip default browser/Drupal fieldset/details chrome anywhere inside
   the checkout flow form — applies to review-step Contact/Billing
   summaries (rendered as bare <fieldset class="form-wrapper">) as well
   as any nested grouping inside individual panes. */
form[id*="commerce-checkout-flow"] fieldset.form-wrapper,
form[id*="commerce-checkout-flow"] details.form-wrapper,
form[id*="commerce-checkout-flow"] .checkout-pane fieldset,
form[id*="commerce-checkout-flow"] .checkout-pane details {
  background: transparent;
  border: 0;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  padding: 0;
}

form[id*="commerce-checkout-flow"] fieldset.form-wrapper > legend,
form[id*="commerce-checkout-flow"] details.form-wrapper > summary,
form[id*="commerce-checkout-flow"] .checkout-pane fieldset > legend,
form[id*="commerce-checkout-flow"] .checkout-pane details > summary {
  background: transparent;
  border: 0;
  color: var(--kaindl-color-primary, #00305b);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
  padding: 0;
  text-transform: uppercase;
}

/* The review-step Contact / Billing fieldsets contain plain text +
   linebreaks. Style the body content (legend's siblings inside the
   fieldset) as readable body copy. */
form[id*="commerce-checkout-flow"] fieldset.form-wrapper > legend + *,
form[id*="commerce-checkout-flow"] fieldset.form-wrapper > legend ~ * {
  color: var(--kaindl-color-text, #111);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* "Edit" link inside the Billing-information legend. */
form[id*="commerce-checkout-flow"] .checkout-review-edit-link {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-left: 10px;
  text-transform: uppercase;
}

form[id*="commerce-checkout-flow"] .checkout-review-edit-link a {
  color: inherit;
  text-decoration: none;
}

form[id*="commerce-checkout-flow"] .checkout-review-edit-link a:hover {
  color: var(--kaindl-color-primary, #00305b);
  text-decoration: underline;
}

form[id*="commerce-checkout-flow"] .checkout-pane > legend,
form[id*="commerce-checkout-flow"] .checkout-pane > h2,
form[id*="commerce-checkout-flow"] .checkout-pane > h3 {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

/* Delivery address, GTC checkbox + Remarks fields. */

.checkout-pane-kaindl-sample-details .form-item,
.checkout-pane-kaindl-sample-review-details .form-item {
  margin-bottom: 18px;
}

.checkout-pane-kaindl-sample-details .form-type-checkbox,
.checkout-pane-kaindl-sample-review-details .form-type-checkbox {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.checkout-pane-kaindl-sample-details .form-type-checkbox input[type="checkbox"],
.checkout-pane-kaindl-sample-review-details
  .form-type-checkbox
  input[type="checkbox"] {
  flex-shrink: 0;
  height: 20px;
  margin-top: 2px;
  width: 20px;
}

.checkout-pane-kaindl-sample-details .form-type-checkbox label,
.checkout-pane-kaindl-sample-review-details .form-type-checkbox label {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}

.checkout-pane-kaindl-sample-details .form-type-textarea label,
.checkout-pane-kaindl-sample-details .form-type-textfield label,
.checkout-pane-kaindl-sample-review-details .form-type-textarea label,
.checkout-pane-kaindl-sample-review-details .form-type-textfield label {
  color: var(--kaindl-color-primary, #00305b);
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.checkout-pane-kaindl-sample-details textarea,
.checkout-pane-kaindl-sample-review-details textarea {
  background: var(--kaindl-color-surface, #fff);
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: 96px;
  padding: 12px 14px;
  width: 100%;
}

.checkout-pane-kaindl-sample-details textarea:focus-visible,
.checkout-pane-kaindl-sample-review-details textarea:focus-visible {
  border-color: var(--kaindl-focus-ring, #0b4a81);
  outline: 2px solid var(--kaindl-focus-ring, #0b4a81);
  outline-offset: 1px;
}

.kaindl-sample-payment-summary {
  align-items: flex-start;
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  border-left: 3px solid var(--kaindl-color-primary, #00305b);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}

.kaindl-sample-payment-summary__label {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kaindl-sample-payment-summary__description {
  color: var(--kaindl-color-text-muted, #4a4a4a);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.checkout-pane-kaindl-sample-review-payment-method h2,
.checkout-pane-kaindl-sample-review-payment h2 {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.kaindl-sample-review-payment-method__value,
.kaindl-sample-address-phone {
  color: var(--kaindl-color-text, #111);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}

.kaindl-sample-payment-total {
  max-width: 520px;
}

.kaindl-sample-payment-total__row {
  align-items: baseline;
  border-bottom: 1px solid var(--kaindl-color-border, #d7d7d7);
  display: flex;
  font-size: 0.9375rem;
  gap: 18px;
  justify-content: space-between;
  padding: 10px 0;
}

.kaindl-sample-payment-total__row span {
  color: var(--kaindl-color-text-muted, #4a4a4a);
}

.kaindl-sample-payment-total__row strong {
  color: var(--kaindl-color-text, #111);
  font-weight: 700;
  white-space: nowrap;
}

.kaindl-sample-payment-total__row--total {
  border-bottom: 0;
}

.kaindl-sample-payment-total__row--total span,
.kaindl-sample-payment-total__row--total strong {
  color: var(--kaindl-color-primary, #00305b);
}

/* Generic form field styling inside every checkout pane — applies to
   billing / shipping address forms (Commerce-rendered) so they match
   the SampleDetails pane. */
form[id*="commerce-checkout-flow"] .checkout-pane .form-item {
  margin: 0 0 14px;
}

form[id*="commerce-checkout-flow"] .checkout-pane label {
  color: var(--kaindl-color-primary, #00305b);
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

form[id*="commerce-checkout-flow"] .checkout-pane input[type="text"],
form[id*="commerce-checkout-flow"] .checkout-pane input[type="email"],
form[id*="commerce-checkout-flow"] .checkout-pane input[type="tel"],
form[id*="commerce-checkout-flow"] .checkout-pane input[type="password"],
form[id*="commerce-checkout-flow"] .checkout-pane input[type="number"],
form[id*="commerce-checkout-flow"] .checkout-pane select,
form[id*="commerce-checkout-flow"] .checkout-pane textarea {
  background: var(--kaindl-color-surface, #fff);
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  box-sizing: border-box;
  color: var(--kaindl-color-text, #111);
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 10px 12px;
  width: 100%;
}

form[id*="commerce-checkout-flow"] .checkout-pane input:focus-visible,
form[id*="commerce-checkout-flow"] .checkout-pane select:focus-visible,
form[id*="commerce-checkout-flow"] .checkout-pane textarea:focus-visible {
  border-color: var(--kaindl-focus-ring, #0b4a81);
  outline: 2px solid var(--kaindl-focus-ring, #0b4a81);
  outline-offset: 1px;
}

/* Address grids: First/Last name + Postal/City sit side-by-side at ≥640px. */
@media (min-width: 640px) {
  form[id*="commerce-checkout-flow"] .field--name-address .details-wrapper,
  form[id*="commerce-checkout-flow"]
    .field--name-address
    .address-container-inline {
    display: grid;
    gap: 0 14px;
    grid-template-columns: 1fr 1fr;
  }
}

/* Checkbox row (e.g. "Save to my address book") — back to natural flow. */
form[id*="commerce-checkout-flow"] .checkout-pane .form-type-checkbox {
  align-items: center;
  display: flex;
  gap: 10px;
}

form[id*="commerce-checkout-flow"] .checkout-pane .form-type-checkbox label {
  color: var(--kaindl-color-text, #111);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}

form[id*="commerce-checkout-flow"]
  .checkout-pane
  .form-type-checkbox
  input[type="checkbox"] {
  flex-shrink: 0;
  height: 18px;
  margin: 0;
  width: 18px;
}

/* Order summary — flat layout (no outer card border). Inner rows + the
   leaked "Price" suppression below. */
.checkout-order-summary,
[data-drupal-selector*="order-summary"] {
  background: transparent;
  border: 0;
  padding: 0;
}

.checkout-order-summary > h2,
.checkout-order-summary > h3,
[data-drupal-selector*="order-summary"] > h2,
[data-drupal-selector*="order-summary"] > h3,
form[id*="commerce-checkout-flow"] .layout-region-checkout-secondary > h2,
form[id*="commerce-checkout-flow"] .layout-region-checkout-secondary > h3 {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  text-transform: uppercase;
}

.checkout-order-summary .views-field-purchased-entity,
[data-drupal-selector*="order-summary"] .views-field-purchased-entity {
  font-size: 0.875rem;
}

/* Same leaked-label suppression as the cart: the field renders
   `<div>Price</div><div>€0.00</div>` instead of the variation title. */
.checkout-order-summary .views-field-purchased-entity > div > div:first-child,
[data-drupal-selector*="order-summary"]
  .views-field-purchased-entity
  > div
  > div:first-child {
  display: none;
}

.checkout-order-summary .views-field-purchased-entity > div > div:nth-child(2),
[data-drupal-selector*="order-summary"]
  .views-field-purchased-entity
  > div
  > div:nth-child(2) {
  color: var(--kaindl-color-text, #111);
  font-weight: 600;
}

.checkout-order-summary .order-total-line,
[data-drupal-selector*="order-summary"] .order-total-line {
  align-items: baseline;
  border-top: 1px solid var(--kaindl-color-border, #d7d7d7);
  display: flex;
  font-size: 0.875rem;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
}

.checkout-order-summary .order-total-line__total,
[data-drupal-selector*="order-summary"] .order-total-line__total {
  border-top: 0;
  color: var(--kaindl-color-primary, #00305b);
  font-weight: 700;
  margin-top: 0;
  padding-top: 0;
}

.checkout-order-summary .order-total-line-label,
[data-drupal-selector*="order-summary"] .order-total-line-label {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.checkout-order-summary .order-total-line__total .order-total-line-label,
[data-drupal-selector*="order-summary"]
  .order-total-line__total
  .order-total-line-label {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.75rem;
}

.checkout-order-summary .order-total-line-value,
[data-drupal-selector*="order-summary"] .order-total-line-value {
  color: var(--kaindl-color-text, #111);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-weight: 600;
}

.checkout-order-summary .order-total-line__total .order-total-line-value,
[data-drupal-selector*="order-summary"]
  .order-total-line__total
  .order-total-line-value {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.9375rem;
}

/* Final submit. */
form[id*="commerce-checkout-flow"] .form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

form[id*="commerce-checkout-flow"] .form-actions input[type="submit"],
form[id*="commerce-checkout-flow"] .form-actions button[type="submit"] {
  background: var(--kaindl-color-primary, #00305b);
  border: 0;
  color: var(--kaindl-color-surface, #fff);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 16px 24px;
  text-transform: uppercase;
  transition: background-color 180ms ease;
}

form[id*="commerce-checkout-flow"] .form-actions input[type="submit"]:hover,
form[id*="commerce-checkout-flow"] .form-actions button[type="submit"]:hover {
  background: var(--kaindl-color-primary-hover, #00457f);
}

form[id*="commerce-checkout-flow"] .form-actions a.link--previous,
form[id*="commerce-checkout-flow"] .form-actions a.button {
  background: transparent;
  border: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 14px 22px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

form[id*="commerce-checkout-flow"] .form-actions a.link--previous:hover,
form[id*="commerce-checkout-flow"] .form-actions a.button:hover {
  background: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
}

/* Secondary buttons surfaced by Commerce inside the order_information pane
   (address-book Edit / Cancel / Delete). They render outside .form-actions
   and don't carry .button--primary, so the navy submit rule above misses
   them — without this they fall through to the browser's grey 3D default.
   margin-top opens breathing room between the rendered address+phone block
   above and the secondary action, matching the Kaindl chrome elsewhere. */
form[id*="commerce-checkout-flow"] input.button:not(.button--primary),
form[id*="commerce-checkout-flow"] button.button:not(.button--primary) {
  background: transparent;
  border: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: clamp(16px, 2vw, 24px);
  padding: 8px 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

form[id*="commerce-checkout-flow"] input.button:not(.button--primary):hover,
form[id*="commerce-checkout-flow"] button.button:not(.button--primary):hover {
  background: var(--kaindl-color-primary, #00305b);
  border-color: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
}

form[id*="commerce-checkout-flow"]
  input.button:not(.button--primary):focus-visible,
form[id*="commerce-checkout-flow"]
  button.button:not(.button--primary):focus-visible {
  outline: 2px solid var(--kaindl-focus-ring, #00457f);
  outline-offset: 2px;
}

/* Action buttons appended below the completion message. */
.kaindl-sample-checkout__complete-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

.kaindl-sample-checkout__action {
  align-items: center;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.05em;
  padding: 14px 24px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.kaindl-sample-checkout__action--primary {
  background: var(--kaindl-color-primary, #00305b);
  border: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
}

.kaindl-sample-checkout__action--primary:hover {
  background: var(--kaindl-color-primary-hover, #00457f);
  border-color: var(--kaindl-color-primary-hover, #00457f);
  color: var(--kaindl-color-surface, #fff);
  text-decoration: none;
}

.kaindl-sample-checkout__action--secondary {
  background: transparent;
  border: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
}

.kaindl-sample-checkout__action--secondary:hover {
  background: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
  text-decoration: none;
}

@media (min-width: 640px) {
  .kaindl-sample-checkout__complete-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .kaindl-sample-checkout__action {
    min-width: 220px;
  }
}

/* Completion message page. */
.checkout-completion-message {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}

.checkout-completion-message h2,
.checkout-completion-message h3 {
  color: var(--kaindl-color-primary, #00305b);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}

/* ------------------------------------------------------------
 * 5. Account "My sample orders" — list and detail
 * ------------------------------------------------------------ */

.kaindl-sample-orders-page {
  padding: 0 0 clamp(32px, 5vw, 64px);
}

.kaindl-sample-orders__eyebrow {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.kaindl-sample-orders__title {
  border-bottom: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
  font-size: var(--kaindl-type-title-lg, clamp(1.75rem, 3vw, 2.5rem));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--kaindl-leading-title, 1.16);
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  padding-bottom: 14px;
}

.kaindl-sample-orders {
  border-collapse: collapse;
  font-size: 0.9375rem;
  width: 100%;
}

.kaindl-sample-orders thead th {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 0 0 12px;
  text-align: left;
  text-transform: uppercase;
}

.kaindl-sample-orders tbody td {
  border-top: 1px solid var(--kaindl-color-border, #d7d7d7);
  padding: 16px 16px 16px 0;
}

.kaindl-sample-orders tbody tr:hover {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
}

.kaindl-sample-orders a {
  color: var(--kaindl-color-primary, #00305b);
  font-weight: 600;
  text-decoration: none;
}

.kaindl-sample-orders a:hover {
  text-decoration: underline;
}

/* Empty-state caption — Drupal renders the table empty message inside <caption>. */
.kaindl-sample-orders > caption {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  caption-side: bottom;
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 1rem;
  margin-top: 8px;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}

/* Order detail. */
.kaindl-sample-order {
  margin: 0 auto;
  max-width: var(--kaindl-container-max-narrow, 960px);
  padding: clamp(32px, 5vw, 64px) var(--kaindl-gutter, 16px);
}

.kaindl-sample-order__header {
  border-bottom: 1px solid var(--kaindl-color-primary, #00305b);
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  padding-bottom: 14px;
}

.kaindl-sample-order__eyebrow {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.kaindl-sample-order__title {
  color: var(--kaindl-color-primary, #00305b);
  font-size: var(--kaindl-type-title-md, clamp(1.5rem, 2.35vw, 2rem));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--kaindl-leading-title, 1.16);
  margin: 0;
}

.kaindl-sample-order__meta {
  color: var(--kaindl-color-accent, #6e89a8);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 18px;
  margin-top: 10px;
}

.kaindl-sample-order__meta-item {
  align-items: baseline;
  display: inline-flex;
  gap: 6px;
}

.kaindl-sample-order__meta-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kaindl-sample-order__meta-value {
  color: var(--kaindl-color-text, #111);
  font-weight: 500;
}

.kaindl-sample-order__state {
  background: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.kaindl-sample-order__section {
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.kaindl-sample-order__section-title {
  border-bottom: 1px solid var(--kaindl-color-border, #d7d7d7);
  color: var(--kaindl-color-primary, #00305b);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 0 0 18px;
  padding-bottom: 8px;
  text-transform: uppercase;
}

.kaindl-sample-order__items {
  display: grid;
  gap: 0;
}

.kaindl-sample-order__item {
  align-items: baseline;
  border-bottom: 1px solid var(--kaindl-color-border, #d7d7d7);
  display: grid;
  font-size: 0.9375rem;
  gap: 12px;
  grid-template-columns: 1fr auto;
  padding: 16px 0;
}

.kaindl-sample-order__item-title {
  color: var(--kaindl-color-text, #111);
  font-weight: 600;
}

.kaindl-sample-order__item-qty {
  color: var(--kaindl-color-accent, #6e89a8);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.kaindl-sample-order__addresses {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
}

.kaindl-sample-order__address {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  font-size: 0.9375rem;
  line-height: 1.55;
  padding: clamp(18px, 2.5vw, 24px);
}

.kaindl-sample-order__address-label {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.kaindl-sample-order__remarks {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  border-left: 3px solid var(--kaindl-color-primary, #00305b);
  font-size: 0.9375rem;
  line-height: 1.55;
  padding: 16px 20px;
  white-space: pre-wrap;
}

/* ------------------------------------------------------------
 * 6. Header mini-cart — small hover/focus dropdown anchored
 *    to the header cart icon. Desktop only (suppressed under
 *    `(hover: none)`); on touch the cart icon link navigates
 *    directly to /cart. JS may set `.is-open` for a brief
 *    "flash" after a successful add. Tight and editorial —
 *    36px thumbnails, compact rows, refined spacing.
 * ------------------------------------------------------------ */

.kaindl-minicart {
  position: relative;
}

.kaindl-minicart__panel {
  position: absolute;
  right: -8px;
  top: calc(100% + 12px);
  width: 320px;
  background: var(--kaindl-color-surface, #fff);
  color: var(--kaindl-color-text, #111);
  box-shadow:
    0 8px 32px rgba(0, 48, 91, 0.14),
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 48, 91, 0.06);
  display: flex;
  flex-direction: column;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.22s;
}

/* Visual anchor: a small caret pointing up at the trigger. */
.kaindl-minicart__panel::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: var(--kaindl-color-surface, #fff);
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(0, 48, 91, 0.06);
}

/* Invisible hover-bridge fills the visual gap between the cart icon and
   the panel. Without it, moving the cursor from icon to panel crosses
   dead space and the :hover state on the container drops, closing the
   panel before the cursor reaches it. Sized to exactly span the gap so
   it doesn't overlap the trigger (which would steal clicks). */
.kaindl-minicart__panel::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

/* Reveal on desktop hover or focus, or whenever JS sets `.is-open`. */
@media (hover: hover) {
  .kaindl-minicart:hover > .kaindl-minicart__panel,
  .kaindl-minicart:focus-within > .kaindl-minicart__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition:
      opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }
}

.kaindl-minicart.is-open > .kaindl-minicart__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* Touch / coarse pointer: no dropdown — tap goes straight to /cart. */
@media (hover: none) {
  .kaindl-minicart__panel {
    display: none !important;
  }
}

.kaindl-minicart__content {
  max-height: 280px;
  overflow-y: auto;
  padding: 14px 16px 8px;
}

.kaindl-minicart__loading,
.kaindl-minicart__empty,
.kaindl-minicart__error {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.8125rem;
  margin: 0;
  padding: 16px 0;
  text-align: center;
}

.kaindl-minicart__error {
  color: var(--kaindl-color-accent-warm, #d71920);
}

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

.kaindl-minicart__item {
  align-items: center;
  border-bottom: 1px solid var(--kaindl-color-border, #d7d7d7);
  display: grid;
  gap: 10px;
  /* `minmax(0, 1fr)` (instead of plain `1fr`) lets the body track
     shrink below its min-content width so the title's
     overflow:hidden + text-overflow:ellipsis actually clips long
     product names. Without it, grid tracks inflate to fit content
     and force row height to grow / panel to vertically scroll. */
  grid-template-columns: 36px minmax(0, 1fr) auto;
  padding: 10px 0;
}

.kaindl-minicart__item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.kaindl-minicart__item:last-child {
  border-bottom: 0;
}

.kaindl-minicart__thumb {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  display: block;
  height: 36px;
  object-fit: cover;
  width: 36px;
}

.kaindl-minicart__item-title {
  color: var(--kaindl-color-text, #111);
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kaindl-minicart__item-meta {
  color: var(--kaindl-color-accent, #6e89a8);
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.kaindl-minicart__item-qty {
  color: var(--kaindl-color-primary, #00305b);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.kaindl-minicart__summary {
  align-items: baseline;
  display: flex;
  font-size: 0.75rem;
  font-weight: 600;
  justify-content: space-between;
  letter-spacing: 0.1em;
  padding: 10px 0 4px;
  text-transform: uppercase;
}

.kaindl-minicart__summary-label {
  color: var(--kaindl-color-accent, #6e89a8);
}

.kaindl-minicart__summary-value {
  color: var(--kaindl-color-primary, #00305b);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 0.875rem;
  letter-spacing: 0;
}

.kaindl-minicart__cta {
  align-items: center;
  background: var(--kaindl-color-primary, #00305b);
  border-top: 1px solid var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
  display: flex;
  font-size: 0.75rem;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease;
}

.kaindl-minicart__cta:hover,
.kaindl-minicart__cta:focus-visible {
  background: var(--kaindl-color-primary-hover, #00457f);
  color: var(--kaindl-color-surface, #fff);
  text-decoration: none;
  outline: none;
}

.kaindl-minicart__cta:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring, #0b4a81);
  outline-offset: -3px;
}

.kaindl-minicart__cta[aria-disabled="true"],
.kaindl-minicart__cta.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

/* ------------------------------------------------------------
 * 7. Checkout step indicator (1 Cart · 2 Address · 3 Complete)
 *
 *    Three pills connected by a 1px navy hairline. Active = solid
 *    navy fill, done = outlined navy with checkmark, future = muted.
 *    Lives at the top of /cart and inside the checkout flow chrome.
 * ------------------------------------------------------------ */

.kaindl-steps {
  align-items: flex-start;
  display: flex;
  font-family: var(
    --kaindl-font-family,
    "Helvetica Neue LT",
    Arial,
    sans-serif
  );
  justify-content: stretch;
  list-style: none;
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 0;
  width: 100%;
}

/* Each step is its own column: number on top, label centred underneath.
   Stacking puts the label OUT of the rail's path so long copy never
   overlaps the connector line. */
.kaindl-steps__item {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
  position: relative;
  text-align: center;
}

/* Connector rail: a 1px hairline running between the previous step's
   number circle and this one. Positioned absolutely at the vertical
   centre of the 40px circle (20px) so labels below stay clear. The
   line spans from the centre of the prior column to the centre of
   this one — left:-50% → right:50%. */
.kaindl-steps__item + .kaindl-steps__item::before {
  background: var(--kaindl-color-border, #d7d7d7);
  content: "";
  height: 1px;
  left: -50%;
  pointer-events: none;
  position: absolute;
  right: 50%;
  top: 19px;
  z-index: 0;
}

.kaindl-steps__item--done + .kaindl-steps__item--done::before,
.kaindl-steps__item--done + .kaindl-steps__item--active::before {
  background: var(--kaindl-color-primary, #00305b);
}

/* Done-step link wrapper — same column layout as the unwrapped content
   so visuals are identical whether the step is clickable or not. The
   link itself carries no underline; hover/focus is signalled by the
   number circle and label colour shifts. */
.kaindl-steps__link {
  align-items: center;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}

.kaindl-steps__link .kaindl-steps__number {
  cursor: pointer;
}

.kaindl-steps__link:hover .kaindl-steps__number,
.kaindl-steps__link:focus-visible .kaindl-steps__number {
  background: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
}

.kaindl-steps__link:hover .kaindl-steps__label,
.kaindl-steps__link:focus-visible .kaindl-steps__label {
  color: var(--kaindl-color-primary-hover, #00457f);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kaindl-steps__link:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring, #00457f);
  outline-offset: 4px;
  border-radius: 4px;
}

.kaindl-steps__number {
  align-items: center;
  background: var(--kaindl-color-surface, #fff);
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  border-radius: 999px;
  color: var(--kaindl-color-accent, #6e89a8);
  display: inline-flex;
  flex-shrink: 0;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 0.9375rem;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
  width: 40px;
  z-index: 1;
}

.kaindl-steps__number svg {
  height: 16px;
  width: 16px;
}

.kaindl-steps__item--done .kaindl-steps__number {
  background: var(--kaindl-color-surface, #fff);
  border-color: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-primary, #00305b);
}

.kaindl-steps__item--active .kaindl-steps__number {
  background: var(--kaindl-color-primary, #00305b);
  border-color: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
}

/* Label kept in markup for assistive tech (screen readers still see
   the full step name), visually hidden because the numbered circles
   alone carry the visual progress story. */
.kaindl-steps__label {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ------------------------------------------------------------
 * 8. Quantity stepper (− N +) — replaces the default Commerce
 *    quantity input inside cart rows. JS wraps the input with
 *    two outlined navy buttons.
 * ------------------------------------------------------------ */

.kaindl-qty-stepper {
  align-items: stretch;
  display: inline-flex;
  font-family: var(
    --kaindl-font-family,
    "Helvetica Neue LT",
    Arial,
    sans-serif
  );
}

.kaindl-qty-stepper__button {
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background: var(--kaindl-color-surface, #fff);
  border: 1px solid var(--kaindl-color-primary, #00305b);
  box-sizing: border-box;
  color: var(--kaindl-color-primary, #00305b);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition:
    background-color 150ms ease,
    color 150ms ease;
  width: 30px;
}

.kaindl-qty-stepper__button:hover {
  background: var(--kaindl-color-primary, #00305b);
  color: var(--kaindl-color-surface, #fff);
}

.kaindl-qty-stepper__button:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring, #0b4a81);
  outline-offset: 2px;
}

.kaindl-qty-stepper__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.kaindl-qty-stepper__input {
  -moz-appearance: textfield;
  appearance: textfield;
  background: var(--kaindl-color-surface, #fff);
  border: 1px solid var(--kaindl-color-primary, #00305b);
  border-left-width: 0;
  border-right-width: 0;
  box-sizing: border-box;
  color: var(--kaindl-color-text, #111);
  display: inline-block;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 0.875rem;
  font-weight: 600;
  height: 30px;
  line-height: 1;
  margin: 0;
  padding: 0 4px;
  text-align: center;
  vertical-align: top;
  width: 36px;
}

.kaindl-qty-stepper__input::-webkit-outer-spin-button,
.kaindl-qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kaindl-qty-stepper__input:focus-visible {
  outline: 2px solid var(--kaindl-focus-ring, #0b4a81);
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}

/* The Commerce cart cell that wraps quantity now hosts the stepper. */
.kaindl-sample-cart .views-field-edit-quantity {
  padding-right: 0;
}

/* Hide the redundant unit-price + total-price columns + order totals —
   the sample row carries one clean price label inside the
   purchased-entity cell (rendered by JS from the server payload). */
.kaindl-sample-cart .views-field-unit-price__number,
.kaindl-sample-cart .views-field-total-price__number,
.kaindl-sample-cart th#view-unit-price-number-table-column,
.kaindl-sample-cart th#view-total-price-number-table-column,
.kaindl-sample-cart .order-total-line {
  display: none;
}

.kaindl-sample-cart
  .views-field-edit-quantity
  input[type="number"].kaindl-qty-stepper__input {
  border-radius: 0;
}

/* ------------------------------------------------------------
 * 9. Cart row thumbnail (source product image alongside title)
 * ------------------------------------------------------------ */

.kaindl-cart-row {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.kaindl-cart-thumb {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  border: 1px solid var(--kaindl-color-border, #d7d7d7);
  display: block;
  flex-shrink: 0;
  height: 64px;
  object-fit: cover;
  width: 64px;
}

.kaindl-cart-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kaindl-cart-row__title {
  color: var(--kaindl-color-text, #111);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kaindl-cart-row__subtitle {
  color: var(--kaindl-color-accent, #6e89a8);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kaindl-cart-row__price {
  color: var(--kaindl-color-primary, #00305b);
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-size: 1.0625rem;
  font-weight: 700;
  margin-top: 4px;
}

.kaindl-cart-thumb--empty {
  background: var(--kaindl-color-surface-subtle, #f4f6f8);
  border: 1px dashed var(--kaindl-color-border, #d7d7d7);
}

/* ------------------------------------------------------------
 * 10. Responsive — desktop refinement
 * ------------------------------------------------------------ */

@media (min-width: 640px) {
  .kaindl-sample-cart__summary .form-actions,
  .kaindl-sample-cart__summary [data-drupal-selector*="actions"] {
    flex-direction: column;
  }

  .kaindl-sample-order__addresses {
    grid-template-columns: 1fr 1fr;
  }

  /* Cart-row thumbnails grow modestly on tablet+ widths. */
  .kaindl-cart-thumb {
    height: 72px;
    width: 72px;
  }
}

@media (min-width: 1025px) {
  /* Two cards per row inside the right rail — keeps each card legible
     without the 4-up cramming that happens when the suggestions are
     stretched across the full container. */
  .kaindl-suggest__grid {
    grid-template-columns: 1fr 1fr;
  }

  .kaindl-sample-cart .views-field-purchased-entity {
    font-size: 1.125rem;
  }

  /* Desktop: actions sit on the right as a clean magazine end-block,
     anchored under the items table with a hairline rule above
     (set on the base rule). Primary action gets generous min-width;
     secondary stays compact. */
  .kaindl-sample-cart .form-actions,
  .kaindl-sample-cart [data-drupal-selector="edit-actions"] {
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    margin-left: auto;
  }

  .kaindl-sample-cart .form-actions input[type="submit"],
  .kaindl-sample-cart .form-actions button[type="submit"] {
    min-width: 260px;
    width: auto;
  }

  .kaindl-sample-cart
    .form-actions
    input[id$="edit-submit"]:not([value*="review" i]):not([value*="address" i]),
  .kaindl-sample-cart
    .form-actions
    input[name="op"]:not([value*="review" i]):not([value*="address" i]),
  .kaindl-sample-cart
    .form-actions
    button[id$="edit-submit"]:not([value*="review" i]):not(
      [value*="address" i]
    ),
  .kaindl-sample-cart
    .form-actions
    button[name="op"]:not([value*="review" i]):not([value*="address" i]) {
    min-width: 160px;
  }

  form[id*="commerce-checkout-flow"] .form-actions {
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  form[id*="commerce-checkout-flow"] .form-actions input[type="submit"],
  form[id*="commerce-checkout-flow"] .form-actions button[type="submit"] {
    min-width: 240px;
    width: auto;
  }

  form[id*="commerce-checkout-flow"] .form-actions a.link--previous,
  form[id*="commerce-checkout-flow"] .form-actions a.button {
    width: auto;
  }
}