/* ─── Buttons ────────────────────────────────────────────────────── */

.btn-xl {
  font-size: 30px;
  width: 150px;
}

.btn {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
  box-shadow 0.2s ease,
  background 0.22s ease,
  border-color 0.22s ease,
  filter 0.18s ease;
  will-change: transform;
}

.btn:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.btn:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

.btn-primary,
.btn-success {
  --bs-btn-border-color: var(--la-btn-primary-border);
  --bs-btn-hover-border-color: var(--la-btn-primary-border-hover);
  background: linear-gradient(135deg, var(--la-btn-primary-from) 0%, var(--la-btn-primary-to) 100%);
  box-shadow: 0 2px 8px var(--la-btn-primary-shadow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(135deg, var(--la-btn-primary-mid) 0%, var(--la-btn-primary-from) 100%);
  box-shadow: 0 4px 16px var(--la-btn-primary-shadow-hover);
}

.btn-primary:active,
.btn-success:active {
  box-shadow: 0 1px 4px var(--la-btn-primary-shadow-active);
}

.btn-info {
  --bs-btn-border-color: var(--la-btn-info-border);
  --bs-btn-hover-border-color: var(--la-btn-info-border-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  color: #fff;
  background: linear-gradient(135deg, var(--la-btn-info-from) 0%, var(--la-btn-info-to) 100%);
  box-shadow: 0 2px 8px var(--la-btn-info-shadow);
}

.btn-info:hover,
.btn-info:focus {
  color: #fff;
  background: linear-gradient(135deg, var(--la-btn-info-mid) 0%, var(--la-btn-info-from) 100%);
  box-shadow: 0 4px 16px var(--la-btn-info-shadow-hover);
}

.btn-info:active {
  box-shadow: 0 1px 4px var(--la-btn-info-shadow-active);
}

.btn-default,
.btn-secondary {
  background: linear-gradient(135deg, var(--la-btn-secondary-from) 0%, var(--la-btn-secondary-to) 100%);
  border-color: var(--la-btn-secondary-border);
  color: var(--la-btn-secondary-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.btn-default:hover,
.btn-secondary:hover {
  background: linear-gradient(135deg, var(--la-btn-secondary-hover-from) 0%, var(--la-btn-secondary-hover-to) 100%);
  border-color: var(--la-btn-secondary-hover-border);
  color: var(--la-btn-secondary-color);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.btn-danger {
  --bs-btn-border-color: var(--la-btn-danger-border);
  background: linear-gradient(135deg, var(--la-btn-danger-from) 0%, var(--la-btn-danger-to) 100%);
  box-shadow: 0 2px 8px var(--la-btn-danger-shadow);
}

.btn-danger:hover {
  background: linear-gradient(135deg, var(--la-btn-danger-mid) 0%, var(--la-btn-danger-from) 100%);
  box-shadow: 0 4px 16px var(--la-btn-danger-shadow-hover);
}

.btn-warning {
  --bs-btn-border-color: var(--la-btn-warning-border);
  background: linear-gradient(135deg, var(--la-btn-warning-from) 0%, var(--la-btn-warning-to) 100%);
  box-shadow: 0 2px 8px var(--la-btn-warning-shadow);
}

.btn-warning:hover {
  background: linear-gradient(135deg, var(--la-btn-warning-mid) 0%, var(--la-btn-warning-from) 100%);
  box-shadow: 0 4px 16px var(--la-btn-warning-shadow-hover);
}

/* ─── Navbar ─────────────────────────────────────────────────────── */

.navbar-inverse {
  /* White menu text (Bootstrap's dark navbar default is a translucent grey), with a soft shadow so it holds up
     over the header illustration. */
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  /* Navbar and jumbotron share one coordinate system (both start at the top of the page, full width), so the
     same illustration flows from the dark bar into the light page header. */
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--la-nav-from) 80%, transparent) 0%,
      color-mix(in srgb, var(--la-nav-mid) 74%, transparent) 55%,
      color-mix(in srgb, var(--la-nav-to) 70%, transparent) 100%
    ),
    var(--la-header-img) center var(--la-header-pos-y) / var(--la-header-w) auto no-repeat,
    linear-gradient(135deg, var(--la-nav-from) 0%, var(--la-nav-mid) 55%, var(--la-nav-to) 100%);
  border: none;
  box-shadow: none;
}

.navbar-inverse .navbar-nav .nav-link {
  color: #fff;
  text-shadow: 0 1px 3px rgba(8, 24, 36, 0.55);
}

/* Icons in top-level nav links — ice-blue, subtle vs. the near-white label */
.navbar .nav-link i,
.navbar .nav-link .fa,
.navbar .nav-link [class^="fa-"],
.navbar .nav-link [class*=" fa-"] {
  color: var(--la-nav-icon);
  margin-right: 4px;
  font-size: 0.88em;
  opacity: 0.85;
  transition: color 0.22s ease,
  opacity 0.22s ease,
  transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navbar .nav-link:hover i,
.navbar .nav-link:hover .fa,
.navbar .nav-link:hover [class^="fa-"],
.navbar .nav-link:hover [class*=" fa-"],
.navbar .nav-item.show > .nav-link i {
  color: var(--la-nav-icon-hover);
  opacity: 1;
  transform: scale(1.2) translateY(-1px);
}

/* Dropdown-toggle arrow: points right by default, rotates to down when open */
.navbar .dropdown-toggle::after {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(-90deg);
}

.navbar .nav-item.show > .dropdown-toggle::after,
.navbar .dropdown > .dropdown-toggle.show::after {
  transform: rotate(0deg);
}

/* Slide-underline hover effect — only on non-dropdown links to avoid
   conflicting with Bootstrap's own dropdown-toggle ::after caret */
.navbar .nav-link:not(.dropdown-toggle) {
  position: relative;
  transition: color 0.2s ease;
}

.navbar .nav-link:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--la-nav-underline);
  border-radius: 2px;
  transition: left 0.22s ease, right 0.22s ease;
  pointer-events: none;
}

.navbar .nav-link:not(.dropdown-toggle):hover::after {
  left: 12px;
  right: 12px;
}

/* ─── Dropdown menu ──────────────────────────────────────────────── */

.navbar .dropdown-menu {
  --bs-dropdown-bg: var(--la-bg-surface);
  --bs-dropdown-border-radius: var(--bs-border-radius-lg);
  --bs-dropdown-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
  --bs-dropdown-link-hover-bg: var(--la-bg-subtle);
  --bs-dropdown-link-hover-color: var(--la-text-heading);
  border: none;
  padding: 6px 0;
  margin-top: 4px;
  animation: dropdownFadeIn 0.18s ease;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.10),
    0 10px 24px -4px rgba(0, 0, 0, 0.12),
    0 24px 48px -8px rgba(0, 0, 0, 0.08);
  /* Generic fallback only: js/dropdown-scroll.js (DropdownScrollAsset) sizes
     this precisely to the space left below the toggle on every open — a
     fixed CSS value can't know that offset, since it depends on where the
     toggle sits on the page. */
  max-height: 70dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar .dropdown-item {
  padding: 7px 18px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  font-size: 13.5px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  transform: translateX(6px);
}

/* Sliding highlight (js/dropdown-highlight.js): one bar that glides to the item under the pointer.
   The items sit above it and lose their own hover background so the bar is the only highlight. */
.navbar .dropdown-menu .la-dd-hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--la-bg-subtle);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.15s ease;
}

.navbar .dropdown-menu .la-dd-hl.la-dd-hl--on {
  opacity: 1;
}

.navbar .dropdown-menu.la-dd-smooth .dropdown-item {
  position: relative;
  z-index: 1;
}

.navbar .dropdown-menu.la-dd-smooth .dropdown-item:not(.active):hover,
.navbar .dropdown-menu.la-dd-smooth .dropdown-item:not(.active):focus {
  background: transparent;
}

/* While a menu item is pressed or dragged it is :active. Bootstrap makes its text white then, but the rule above
   takes its background away, so the item (and the image the browser shows while dragging it) was white on light.
   Keep the normal text colour; the sliding bar is the highlight. */
.navbar .dropdown-menu .dropdown-item:not(.active):active {
  color: var(--bs-dropdown-link-color);
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .navbar .dropdown-menu .la-dd-hl {
    transition: opacity 0.1s linear;
  }
}

/* Icons inside dropdown items — secondary accent blue, visually distinct from item text */
.navbar .dropdown-item i,
.navbar .dropdown-item .fa,
.navbar .dropdown-item [class^="fa-"],
.navbar .dropdown-item [class*=" fa-"] {
  color: var(--la-dropdown-icon);
  width: 18px;
  text-align: center;
  margin-right: 7px;
  font-size: 0.88em;
  opacity: 0.78;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.navbar .dropdown-item:hover i,
.navbar .dropdown-item:hover .fa,
.navbar .dropdown-item:hover [class^="fa-"],
.navbar .dropdown-item:hover [class*=" fa-"] {
  color: var(--la-dropdown-icon-hover);
  opacity: 1;
}

/* ─── Jumbotron (page header) ────────────────────────────────────── */

.jumbotron {
  padding: 14px 22px;
  margin-bottom: 14px;
  color: var(--la-text-heading);
  border: none;
  /* Accent bar on the left: vertical gradient. border-image ignores border-radius, which is fine as only the
     (square) left edge carries a border. */
  border-left: 6px solid var(--la-primary);
  border-image: linear-gradient(to bottom, var(--la-primary), var(--la-accent-teal)) 1;
  /* Overlay in the theme's own jumbotron colours. Kept light so the illustration clearly shows (also left of the
     title); it is a touch denser behind the title column to keep the text readable on any image. */
  --la-jumbotron-overlay: linear-gradient(
    100deg,
    color-mix(in srgb, var(--la-jumbotron-from) 74%, transparent) 0%,
    color-mix(in srgb, var(--la-jumbotron-from) 90%, transparent) 22%,
    color-mix(in srgb, var(--la-jumbotron-from) 82%, transparent) 55%,
    color-mix(in srgb, var(--la-jumbotron-to) 62%, transparent) 100%
  );
  background:
    var(--la-jumbotron-overlay),
    var(--la-header-img) center var(--la-header-pos-y) / var(--la-header-w) auto no-repeat,
    linear-gradient(100deg, var(--la-jumbotron-from) 0%, var(--la-jumbotron-to) 100%);
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  box-shadow: none;
}

/* Header illustration. Every page that has one gets its own, relevant to that page: add a rule below keyed by the
   controller id (data-header on <body>); the per-page rules live in headers.css. Pages without one keep the plain
   gradient. */
.la-app--backend {
  --la-header-w: max(100vw, 700px);
  --la-header-img: none;
  --la-header-ratio: 0.21; /* image height / width (2048x430) */
  --la-header-crop: 0.18; /* fraction of the scaled image height cropped off the top: puts the middle of the picture in the header */
  --la-header-pos-y: calc(var(--la-header-w) * var(--la-header-ratio) * var(--la-header-crop) * -1);
}

/* Icon inside the page header H3 — gradient accent, visually distinct from the dark title text */
.jumbotron h3 i,
.jumbotron h3 [class^="fa-"],
.jumbotron h3 [class*=" fa-"],
.jumbotron h3 .fa {
  background: linear-gradient(135deg, var(--la-accent-teal) 0%, #1d6b60 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-right: 6px;
  font-size: 0.9em;
}

/* Sub-header H4 — muted, clearly subordinate to the H3 title */
.jumbotron h4 {
  color: var(--la-text-sub);
  font-size: 1rem;
  font-weight: 400;
}

/* Sub-header H4 icon — softer secondary accent */
.jumbotron h4 i,
.jumbotron h4 [class^="fa-"],
.jumbotron h4 [class*=" fa-"],
.jumbotron h4 .fa {
  color: var(--la-jumbotron-icon-sub);
  margin-right: 5px;
  font-size: 0.85em;
}

/* ─── Select2 ────────────────────────────────────────────────────── */

.select2-container--krajee .select2-selection--multiple .select2-selection__choice__remove {
  color: #fff;
  text-shadow: none;
  opacity: 1;
  filter: alpha(opacity=100);
}

.select2-container--krajee .select2-selection--multiple .select2-selection__choice {
  color: #fff;
  background: var(--la-primary);
}

/* ─── Misc ───────────────────────────────────────────────────────── */

.instruction {
  color: white;
  background-color: var(--la-success);
  font-style: italic;
  padding: 6px;
  border-radius: var(--bs-border-radius-sm);
}

#app {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
}

.blackinput {
  color: black;
}

#serialData {
  color: black;
}

h1 {
  font-size: 30px;
  margin-top: 0;
}

.clickable-row {
  cursor: pointer;
}


.action-column {
  min-width: 5em;
}

.article_image {
  margin-bottom: 5px;
  width: 150px;
  max-width: 140px;
  max-height: 150px;
  object-fit: contain;
}

.toolbar_legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
  padding: 2px 0;
}

.loc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
  padding: 3px 8px 3px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

.loc-type-swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.loc-type-pick {
  background-color: var(--la-cloc-yellow-bg, yellow);
}

.loc-type-bulk {
  background-color: var(--la-cloc-green-bg, lightgreen);
}

table .details {
  font-size: 13px;
  margin-left: 80px;
  width: calc(100% - 80px);
}

.expandRow {
  background-color: var(--la-bg-surface);
}

.order-info {
  padding: 5px;
}

/* ─── Article & lot info ─────────────────────────────────────────── */

.article-info {
  color: var(--la-article-info-color);
}

.lot-info {
  padding: 0 8px;
  font-weight: bold;
  color: var(--la-lot-color);
  background-color: var(--la-lot-bg);
  border: 2px solid var(--la-lot-border);
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.stock-info {
  color: var(--la-stock-color);
  background: var(--la-stock-bg);
  border-radius: var(--bs-border-radius-sm);
  padding: 4px 6px;
}

/* ─── Location badges ────────────────────────────────────────────── */

.location {
  white-space: nowrap;
  padding: 0 8px;
  font-weight: bold;
  color: var(--la-location-color);
  background-color: var(--la-location-bg);
  border: 2px solid var(--la-location-border);
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
  width: fit-content;
  text-align: center;
}

.location.location-occupied {
  background-color: var(--la-location-occupied-bg);
  color: var(--la-location-occupied-color);
}

.location.location-order-picked {
  background-color: var(--la-location-picked-bg);
  color: var(--la-location-picked-color);
}

.plate--location {
  padding: 0 8px;
  font-weight: bold;
  color: var(--la-location-color);
  background-color: var(--la-location-bg);
  border: 2px solid var(--la-location-border);
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.wd-container {
  padding: 0 8px;
  font-weight: bold;
  color: black;
  background-color: var(--la-bg-surface);
  border: 2px solid black;
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.wd-section {
  padding: 0 8px;
  font-weight: bold;
  color: var(--la-wd-section-color);
  background-color: var(--la-wd-section-bg);
  border: 2px solid black;
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.wd-area {
  padding: 0 8px;
  font-weight: bold;
  color: white;
  background-color: var(--la-success);
  border: 2px solid black;
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.section {
  padding: 0 8px;
  font-weight: bold;
  color: var(--la-section-color);
  background-color: var(--la-section-bg);
  border: 2px solid black;
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.location-bulk {
  white-space: nowrap;
  padding: 0 8px;
  font-weight: bold;
  color: var(--la-location-color);
  background-color: var(--la-location-bulk-bg);
  border: 2px solid var(--la-location-border);
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.color-location {
  white-space: nowrap;
  padding: 0 8px;
  font-weight: bold;
  border: 2px solid var(--la-location-border);
  margin-right: 6px;
  border-radius: var(--bs-border-radius-sm);
}

.color-location.orange {
  color: var(--la-location-color);
  background-color: var(--la-cloc-orange-bg);
}

.color-location.red {
  color: var(--la-cloc-red-color);
  background-color: var(--la-cloc-red-bg);
}

.color-location.red1 {
  color: var(--la-cloc-red-color);
  background-color: var(--la-cloc-red-bg);
}

.color-location.white {
  color: var(--la-location-color);
  background-color: var(--la-cloc-white-bg);
}

.color-location.blue {
  color: var(--la-cloc-blue-color);
  background-color: var(--la-cloc-blue-bg);
}

.color-location.yellow {
  color: var(--la-location-color);
  background-color: var(--la-cloc-yellow-bg);
}

.color-location.gold {
  color: var(--la-location-color);
  background-color: var(--la-cloc-gold-bg);
}

.color-location.green {
  color: var(--la-location-color);
  background-color: var(--la-cloc-green-bg);
}

.color-location.gray {
  color: var(--la-location-color);
  background-color: var(--la-cloc-gray-bg);
}

/* ─── Navbar info & title ────────────────────────────────────────── */

.navbar-title {
  position: relative;
  top: -18px;
}

.navbar-info {
  padding: 4px 6px;
  margin-left: 10px;
  color: white;
  background-color: var(--la-accent-steel);
  border-radius: var(--bs-border-radius-sm);
  font-size: 12px;
  float: right;
  position: relative;
  top: -4px;
}

/* ─── Scan errors ────────────────────────────────────────────────── */

.scan-item-error {
  font-size: 140%;
  margin-bottom: 6px;
  margin-left: 8px;
  padding: 5px;
  background-color: var(--la-error-bg);
  color: white;
  font-weight: bold;
  border-radius: 5px;
  border: 1px solid var(--la-error-dark);
}

.item-scan-error {
  color: var(--la-error-muted);
}

/* ─── Sticky & packing UI ────────────────────────────────────────── */

.sticky-item-scan {
  position: sticky;
  padding: 0 4px 1px;
  top: 50px;
  z-index: 100;
  border: 1px solid var(--la-sticky-scan-border);
  border-radius: 0;
  background-color: var(--la-sticky-scan-bg);
}

.flex-packing-buttons {
  position: sticky;
  padding: 0 4px 1px 0;
  margin-bottom: 4px;
  margin-top: 4px;
  top: 160px;
  z-index: 99;
  display: flex;
  flex-direction: row;
  transition: 1s;
}

.flex-packing-buttons > * {
  margin: 0 4px 0 0;
}

#buttons-below-grid {
  width: 100%;
  background: var(--la-bg-surface);
  padding-top: 4px;
}

.grid-selected {
  background-color: var(--la-grid-selected-bg) !important;
}

/* ─── Joker order line ───────────────────────────────────────────── */

.ship-packing-order-line-joker {
  animation: joker-line-background 1s linear infinite !important;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='3900px'><text x='46' y='38' fill='red' font-size='18'>JOKER</text></svg>") !important;
}

@keyframes joker-line-background {
  0% {
    background-color: rgba(255, 0, 0, 0.4);
  }
  50% {
    background-color: rgba(255, 0, 0, 0.5);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.4);
  }
}

/* ─── Footer (desktop override) ──────────────────────────────────── */

.footer {
  display: flex;
  align-items: center;
  padding: 0;
  background-color: var(--la-footer-bg);
}

.footer > .container > p {
  margin: 0;
}

/* ─── Grid container ─────────────────────────────────────────────── */

.container_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  grid-template-areas: ". .";
  justify-content: center;
  justify-items: center;
}

/* ─── Order-line status colours ──────────────────────────────────── */

.order-line--completed,
.order-line--joker-resolved {
  background-color: var(--la-order-completed-bg); /* green */
}

.order-line--warn {
  background-color: var(--la-order-warn-bg); /* orange */
}

.order-line--on_hold {
  background-color: var(--la-order-hold-bg); /* yellow */
}

.order-line--in_progress {
  background-color: var(--la-order-in-progress-bg); /* yellow */
}

.order-line--joker,
.order-line--definitive_joker {
  background-color: var(--la-order-joker-bg); /* red */
}

/* ─── Order lines with BOMs ──────────────────────────────────────── */

table.table tr.order-line--bom {
  font-weight: bold;
}

table.table tr.order-line--bom td:first-of-type,
table.table tr.order-line--bom-details td:first-of-type {
  border-right: 1px solid var(--la-bom-row-border);
}

table.table tr.order-line--bom-details td:first-of-type {
  text-align: right;
}

table.table tr.order-line--bom-details td {
  border-top: 0;
}

table.table tr.order-line--bom-details .bom-remark {
  font-style: italic;
}

/* ─── Detail view BOM items ──────────────────────────────────────── */

.bom-items {
  border: 1px solid var(--la-bom-border);
  border-top: 3px solid var(--la-bom-border-top);
  margin: 20px 0;
  padding: 30px 15px 15px;
  border-radius: var(--bs-border-radius-sm);
}

.bom-items table.detail-view th,
.bom-items table.detail-view td {
  border-color: var(--la-bom-border);
}

/* ─── Wide container ─────────────────────────────────────────────── */

@media (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}

.container--wide {
  width: unset;
  max-width: unset;
  padding: 0 20px;
  overflow: auto;
  overflow-x: hidden;
}

.container--wide .kv-expand-detail-row .kv-expanded-row > p {
  max-width: 60ch;
  margin: 2em 0 1em 45px;
}

/* ─── Homepage images ────────────────────────────────────────────── */

.homepage-images {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.homepage-images .image-container {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 1.5em;
  height: auto;
}

.homepage-images .image-container:first-child {
  padding-left: 0;
}

.homepage-images .image-container:last-child {
  padding-right: 0;
}

.homepage-images img {
  height: auto;
  max-width: 100%;
  margin: 1.5em 0;
  border-radius: var(--bs-border-radius);
  transition: transform 0.3s, box-shadow 0.3s;
  transform: scale(1);
  box-shadow: none;
  flex-grow: 1;
}

.homepage-images img:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ─── Homepage body content ──────────────────────────────────────── */

.site-index .body-content {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--la-body-content-color);
  margin: 0.25em 0.25em 1.25em;
  text-align: justify;
}

.customer-name {
  font-size: 36px;
  font-weight: bold;
  color: var(--la-accent-steel);
  margin-bottom: 20px;
}

.text-dimmed {
  opacity: 0.7;
}

/* ─── Pick crate list ────────────────────────────────────────────── */

.pick-crate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5em;
}

.pick-crate {
  border-radius: var(--bs-border-radius-sm);
  padding: 2px 4px;
  background-color: var(--la-success);
  color: white;
}

.pick-crate--R {
  background-color: var(--la-crate-r-bg);
}

.pick-crate--B {
  background-color: var(--la-crate-b-bg);
}

.pick-crate--G {
  background-color: var(--la-crate-g-bg);
}

.pick-crate--Y {
  background-color: var(--la-crate-y-bg);
  color: var(--la-crate-y-color);
}

/* ─── Homepage quick-navigation cards ───────────────────────────── */

.la-quicknav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.la-quicknav__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px 22px;
  border-radius: 14px;
  text-decoration: none !important;
  color: #fff !important;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13), 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.la-quicknav__card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}

.la-quicknav__card::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: 18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.la-quicknav__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.10);
  text-decoration: none !important;
}

.la-quicknav__card:active {
  transform: translateY(-1px);
}

.la-quicknav__icon {
  font-size: 2.6rem;
  margin-bottom: 16px;
  opacity: 0.92;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  transition: transform 0.18s ease;
  z-index: 1;
}

.la-quicknav__card:hover .la-quicknav__icon {
  transform: scale(1.12);
}

.la-quicknav__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  z-index: 1;
}

.la-quicknav__desc {
  font-size: 0.82rem;
  opacity: 0.82;
  line-height: 1.45;
  z-index: 1;
}

.la-quicknav__arrow {
  position: absolute;
  bottom: 18px;
  right: 20px;
  font-size: 0.9rem;
  opacity: 0.55;
  transition: opacity 0.18s ease, right 0.18s ease;
}

.la-quicknav__card:hover .la-quicknav__arrow {
  opacity: 0.90;
  right: 15px;
}

/* ─── Intro block ────────────────────────────────────────────────── */

.la-intro {
  background: var(--la-bg-surface);
  border-radius: var(--bs-border-radius-lg);
  border-left: 4px solid var(--la-border-muted);
  padding: 14px 20px;
  color: var(--la-intro-color);
  font-size: 0.9rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}