:root {
  color-scheme: dark;
  --bg: #101416;
  --panel: #191e20;
  --raised: #22282a;
  --line: #303739;
  --text: #ecf0ed;
  --muted: #96a19d;
  --lime: #d8f37b;
  --green: #82d7a8;
  --red: #ff9e96;
  --amber: #e8bc73;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--text);
  padding: 10px 15px;
  font-weight: 600;
}
button:hover {
  border-color: var(--accent-text, var(--lime));
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  background: var(--lime);
  color: var(--palette-0, #1c2512);
  border-color: var(--accent-text, var(--lime));
}
button.ghost {
  background: transparent;
}
button.small {
  padding: 7px 10px;
  font-size: 12px;
}
a {
  color: var(--accent-text, var(--lime));
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 32px;
  font-weight: 550;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
h2 {
  font-size: 18px;
  font-weight: 550;
}
h3 {
  font-size: 15px;
}
p {
  line-height: 1.7;
}
.muted,
small {
  color: var(--muted);
}
.eyebrow {
  color: var(--accent-text, var(--lime));
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 650;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text);
}
.brand-mark {
  background: var(--lime);
  color: var(--palette-1, #202818);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 25px;
  font-weight: 800;
}
.brand strong {
  font-size: 20px;
  letter-spacing: 1px;
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.7px;
  margin-top: 3px;
}
.layout {
  display: grid;
  grid-template-columns: 235px 1fr;
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  background: var(--palette-2, #131819);
}
.sidebar .brand {
  margin: 0 6px 44px;
}
.nav-label {
  font-size: 10px;
  color: var(--palette-3, #68756f);
  letter-spacing: 1.7px;
  margin: 0 12px 15px;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 13px 15px;
  font-size: 13px;
  font-weight: 500;
}
.nav button.active {
  background: var(--palette-4, #2a3220);
  color: var(--accent-text, var(--lime));
}
.nav .icon {
  font-size: 18px;
  width: 20px;
  text-align: center;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 30px;
}
.user {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 22px 5px;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--palette-5, #364139);
  display: grid;
  place-items: center;
  color: var(--accent-text, var(--lime));
}
.user strong {
  font-size: 12px;
  display: block;
}
.user small {
  font-size: 11px;
  text-transform: capitalize;
}
.topbar {
  height: 78px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
}
.crumb {
  font-size: 12px;
  color: var(--muted);
}
.top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.live {
  font-size: 11px;
  color: var(--green);
}
.live:before {
  content: "";
  display: inline-block;
  height: 6px;
  width: 6px;
  background: var(--green);
  border-radius: 100%;
  margin-right: 7px;
}
.content {
  padding: 34px 36px 50px;
  max-width: 1650px;
  margin: auto;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.page-head p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 25px;
}
.stat {
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  position: relative;
  overflow: hidden;
}
.stat:first-child {
  border-color: var(--palette-6, #626e40);
  background: linear-gradient(
    115deg,
    var(--palette-7, #2b3222),
    var(--palette-8, #1b211a)
  );
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
}
.stat-value {
  font-size: 32px;
  letter-spacing: -1px;
  margin: 17px 0 7px;
}
.stat-note {
  font-size: 11px;
  color: var(--muted);
}
.stat-icon {
  position: absolute;
  right: 22px;
  top: 20px;
  color: var(--accent-text, var(--lime));
  font-size: 20px;
}
.grid-two {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 22px;
}
.panel-head {
  padding: 21px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.panel-head h2 {
  margin: 0;
}
.panel-body {
  padding: 24px;
}
.panel-body p:last-child {
  margin-bottom: 0;
}
.pipeline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  height: 175px;
}
.pipe {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  height: 100%;
  justify-content: flex-end;
}
.pipe .bar {
  width: 100%;
  max-width: 55px;
  background: var(--palette-9, #4a5840);
  border-radius: 5px 5px 0 0;
  min-height: 4px;
}
.pipe:nth-child(2n) .bar {
  background: var(--lime);
}
.pipe span {
  font-size: 10px;
  color: var(--muted);
  height: 28px;
  text-align: center;
}
.pipe b {
  font-size: 13px;
  font-weight: 500;
}
.activity {
  display: flex;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.activity:last-child {
  border: 0;
}
.activity-dot {
  height: 8px;
  width: 8px;
  background: var(--lime);
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.activity strong {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}
.activity small {
  font-size: 11px;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
th {
  text-align: left;
  padding: 14px 22px;
  background: var(--palette-10, #171c1e);
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
td {
  padding: 17px 22px;
  border-top: 1px solid var(--palette-11, #2a3032);
  vertical-align: middle;
}
td strong {
  font-weight: 550;
}
td small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
}
.badge {
  display: inline-block;
  border: 1px solid var(--palette-12, #425144);
  background: var(--palette-13, #25352b);
  color: var(--green);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge.pending,
.badge.waiting,
.badge.paused,
.badge.inspection,
.badge.blocked {
  color: var(--amber);
  background: var(--palette-14, #342c20);
  border-color: var(--palette-15, #564631);
}
.badge.cancelled,
.badge.failed,
.badge.rejected,
.badge.uncertain {
  color: var(--red);
  background: var(--palette-16, #372725);
  border-color: var(--palette-17, #5a3935);
}
.badge.production,
.badge.running,
.badge.partially_shipped {
  color: var(--palette-18, #b7c9ff);
  background: var(--palette-19, #272e3e);
  border-color: var(--palette-20, #3d4761);
}
.empty {
  padding: 44px;
  text-align: center;
  color: var(--muted);
}
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar input {
  max-width: 330px;
}
.task-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.task-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 23px;
  background: var(--panel);
}
.task-card h2 {
  margin: 16px 0 7px;
}
.task-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 15px;
}
.task-card p {
  font-size: 12px;
  color: var(--muted);
}
.progress {
  height: 5px;
  background: var(--palette-21, #313a32);
  border-radius: 5px;
  margin: 14px 0 18px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--lime);
}
input,
select,
textarea {
  width: 100%;
  background: var(--palette-22, #121718);
  border: 1px solid var(--palette-23, #394244);
  border-radius: 7px;
  padding: 11px 12px;
  color: var(--text);
  min-width: 0;
}
textarea {
  resize: vertical;
  min-height: 78px;
}
label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 15px;
}
label span {
  display: block;
  margin-bottom: 8px;
}
label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 10px;
}
input[type="checkbox"] {
  width: auto;
}
dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--palette-24, #465149);
  border-radius: 15px;
  width: min(850px, 95vw);
  max-height: 90vh;
  padding: 0;
  box-shadow: 0 30px 100px var(--palette-25, #0009);
}
dialog::backdrop {
  background: var(--palette-26, #000a);
  backdrop-filter: blur(4px);
}
.modal-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h2 {
  margin: 0;
}
.modal-body {
  padding: 25px 28px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.full {
  grid-column: 1/-1;
}
.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}
.form-error {
  color: var(--red);
  font-size: 12px;
  white-space: pre-wrap;
}
.line-editor {
  display: grid;
  grid-template-columns: 2fr 90px 110px 34px;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.line-editor button {
  padding: 9px;
}
.notice {
  background: var(--palette-27, #262e20);
  border: 1px solid var(--palette-28, #485438);
  color: var(--palette-29, #c9d5b1);
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.65;
  margin-bottom: 20px;
}
.detail-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 15px 0 25px;
}
.detail-meta small {
  display: block;
  margin-bottom: 5px;
}
.detail-meta b {
  font-size: 13px;
}
.detail-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 22px;
}
#toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 100;
  background: var(--lime);
  color: var(--palette-30, #17220d);
  padding: 15px 23px;
  border-radius: 10px;
  max-width: 400px;
  display: none;
  box-shadow: 0 8px 30px var(--palette-31, #0008);
}
#toast.show {
  display: block;
}
#toast.error {
  background: var(--palette-32, #ffb1a9);
}
.loading {
  padding: 40px;
}
.store-nav {
  padding: 23px 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.store-nav .actions {
  align-items: center;
}
.store-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 75px 7% 70px;
  position: relative;
  background: radial-gradient(
    ellipse at 85% 45%,
    var(--palette-33, #293222) 0,
    transparent 52%
  );
}
.store-hero h1 {
  font-size: clamp(42px, 5vw, 73px);
  line-height: 1.07;
  letter-spacing: -3px;
  margin: 23px 0;
}
.store-hero h1 em {
  font-style: normal;
  color: var(--accent-text, var(--lime));
}
.store-hero p {
  max-width: 520px;
  color: var(--muted);
  font-size: 15px;
}
.hero-facts {
  display: flex;
  gap: 33px;
  margin-top: 42px;
  font-size: 11px;
  color: var(--muted);
}
.hero-facts strong {
  display: block;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 8px;
}
.spring-art {
  height: 340px;
  position: relative;
  transform: rotate(-25deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.spring-art i {
  width: 260px;
  height: 58px;
  border: 12px solid var(--palette-34, #c3c9b5);
  border-top-color: var(--palette-35, #f1f7dd);
  border-bottom-color: var(--palette-36, #647357);
  border-radius: 50%;
  margin-top: -20px;
  box-shadow:
    0 12px 20px var(--palette-37, #0005),
    inset 0 6px 12px var(--palette-38, #0006);
}
.hero-caption {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 3px;
}
.store-section {
  padding: 55px 7%;
  border-top: 1px solid var(--line);
}
.product-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}
.product-art {
  height: 160px;
  display: grid;
  place-items: center;
  background: radial-gradient(
    ellipse,
    var(--palette-39, #353e31),
    var(--palette-40, #1a201b)
  );
  overflow: hidden;
}
.product-art .spring-art {
  height: 130px;
  transform: rotate(-30deg) scale(0.45);
  width: 100%;
}
.product-info {
  padding: 23px;
}
.product-info h3 {
  font-size: 17px;
  margin: 10px 0;
}
.product-info p {
  min-height: 40px;
  font-size: 12px;
  color: var(--muted);
}
.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.product-bottom b {
  font-size: 18px;
}
.store-footer {
  padding: 35px 7%;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}
.login-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.login-story {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(
    ellipse at center,
    var(--palette-41, #2d3925),
    var(--palette-42, #111713)
  );
}
.login-story .brand {
  margin-bottom: 65px;
}
.login-story h1 {
  font-size: 48px;
  max-width: 470px;
}
.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.login-box {
  width: 100%;
  max-width: 390px;
}
.login-box h1 {
  font-size: 28px;
  margin: 13px 0;
}
.login-box form {
  margin-top: 30px;
}
.login-box button.primary {
  width: 100%;
}
.login-links {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.login-links button {
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  background: none;
}
.demo-picks {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.demo-picks button {
  font-size: 11px;
  padding: 5px 8px;
}
.mobile-brand {
  display: none;
}
code {
  font-size: 12px;
  color: var(--accent-text, var(--lime));
}
@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .task-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .layout {
    grid-template-columns: 205px 1fr;
  }
  .content {
    padding: 25px;
  }
  .topbar {
    padding: 0 25px;
  }
  .grid-two {
    grid-template-columns: 1fr;
  }
  .store-hero {
    gap: 20px;
  }
  .spring-art {
    transform: rotate(-25deg) scale(0.8);
  }
}
@media (max-width: 760px) {
  .layout {
    display: block;
  }
  .sidebar {
    position: static;
    height: auto;
    padding: 15px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar .brand {
    margin: 0 0 20px;
  }
  .nav {
    flex-direction: row;
    overflow: auto;
  }
  .nav button {
    white-space: nowrap;
    padding: 10px;
  }
  .nav-label,
  .sidebar-bottom {
    display: none;
  }
  .topbar {
    height: 55px;
    padding: 0 18px;
  }
  .content {
    padding: 23px 16px;
  }
  .page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  h1 {
    font-size: 27px;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    padding: 17px;
  }
  .stat-value {
    font-size: 27px;
  }
  .stat-icon {
    display: none;
  }
  .panel-head,
  .panel-body {
    padding: 18px;
  }
  .task-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .full {
    grid-column: auto;
  }
  .detail-meta {
    grid-template-columns: 1fr 1fr;
  }
  .line-editor {
    grid-template-columns: 1fr 65px 80px 30px;
    gap: 4px;
  }
  .line-editor input,
  .line-editor select {
    padding: 9px 5px;
    font-size: 11px;
  }
  .store-hero {
    grid-template-columns: 1fr;
    padding: 50px 7%;
  }
  .store-hero > div:last-child {
    display: none;
  }
  .store-hero h1 {
    letter-spacing: -2px;
  }
  .store-nav {
    padding: 18px 5%;
  }
  .store-nav .brand small {
    display: none;
  }
  .store-nav .brand strong {
    font-size: 16px;
  }
  .store-nav button {
    font-size: 11px;
    padding: 9px;
  }
  .store-section {
    padding: 35px 6%;
  }
  .store-footer {
    flex-direction: column;
    gap: 15px;
  }
  .login-layout {
    display: block;
  }
  .login-story {
    display: none;
  }
  .login-panel {
    min-height: 100vh;
    padding: 28px;
  }
  .mobile-brand {
    display: block;
    margin-bottom: 40px;
  }
  .modal-body {
    padding: 20px;
  }
  .modal-head {
    padding: 20px;
  }
  .top-right .live {
    display: none;
  }
}

.table-wrap table {
  min-width: 680px;
}

/* SSMC blue + yellow brand system — September 2026 */
:root {
  --bg: #090f17;
  --panel: #111c29;
  --raised: #1a293a;
  --line: #29394b;
  --text: #edf5fc;
  --muted: #9cafc2;
  --lime: #ffcd00;
  --blue: #0099d9;
  --green: #80d9ba;
}
body {
  background:
    radial-gradient(
      ellipse at 95% 5%,
      var(--palette-43, #082f4a66),
      transparent 48%
    ),
    var(--bg);
}
.brand-logo {
  width: 62px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--palette-44, #202020);
}
.brand {
  gap: 11px;
}
.brand strong {
  color: var(--palette-45, #ecf6fc);
  letter-spacing: 2px;
}
.brand small {
  color: var(--palette-46, #9db8cb);
  font-size: 8px;
  letter-spacing: 1px;
}
.sidebar {
  background: linear-gradient(
    170deg,
    var(--palette-47, #111e2c),
    var(--palette-48, #090f17)
  );
  border-right-color: var(--palette-49, #243d54);
  padding: 26px 17px;
  overflow-y: auto;
}
.sidebar .brand {
  margin: 0 0 34px;
}
.nav button.active {
  background: linear-gradient(
    90deg,
    var(--palette-50, #006fa43b),
    var(--palette-51, #0099d912)
  );
  color: var(--palette-52, #76d4ff);
  box-shadow: inset 3px 0 var(--blue);
}
.nav button:hover {
  background: var(--palette-53, #0099d914);
  color: var(--palette-54, #fff);
}
.nav-label {
  color: var(--palette-55, #7693aa);
}
.topbar {
  background: var(--palette-56, #0c1521b8);
  backdrop-filter: blur(16px);
  height: auto;
  min-height: 80px;
  gap: 15px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.top-right {
  gap: 9px;
  flex-wrap: wrap;
}
.top-right [data-action="workspace-search"] {
  color: var(--palette-57, #9adfff);
  border-color: var(--palette-58, #31556e);
  background: var(--palette-59, #0d293b);
}
button.primary {
  background: linear-gradient(
    130deg,
    var(--palette-60, #ffe56b),
    var(--palette-61, #ffca00)
  );
  border-color: var(--palette-62, #ffce18);
  color: var(--palette-63, #171909);
  box-shadow: 0 4px 17px var(--palette-64, #ffcd0012);
}
button:hover {
  transform: translateY(-1px);
  transition:
    transform 0.15s,
    border-color 0.15s;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--palette-65, #55caff);
  outline-offset: 3px;
}
.stat {
  background: linear-gradient(
    135deg,
    var(--palette-66, #142435),
    var(--palette-67, #101a26)
  );
  border-color: var(--palette-68, #294356);
}
.stat:first-child {
  background: linear-gradient(
    115deg,
    var(--palette-69, #063f62),
    var(--palette-70, #122536)
  );
  border-color: var(--palette-71, #007cae);
}
.stat-icon {
  color: var(--palette-72, #36bfff);
}
.stat:first-child .stat-icon {
  color: var(--palette-73, #ffcd00);
}
.stat-value {
  font-weight: 600;
}
.panel {
  background: linear-gradient(
    135deg,
    var(--palette-74, #131f2e),
    var(--palette-75, #101a27)
  );
  box-shadow: 0 8px 26px var(--palette-76, #00000018);
}
th {
  background: var(--palette-77, #0e1926);
  color: var(--palette-78, #9bb7cd);
}
td {
  border-top-color: var(--palette-79, #23364a);
}
.panel-head {
  border-bottom-color: var(--palette-80, #293e51);
}
.pipe .bar {
  background: linear-gradient(
    var(--palette-81, #28b8f0),
    var(--palette-82, #006ba0)
  );
}
.pipe:nth-child(2n) .bar {
  background: linear-gradient(
    var(--palette-83, #ffe67b),
    var(--palette-84, #d9a500)
  );
}
.notice {
  background: var(--palette-85, #0e2c3e);
  border-color: var(--palette-86, #265570);
  color: var(--palette-87, #b9deef);
}
.activity-dot {
  background: var(--palette-88, #ffcd00);
}
.avatar {
  background: var(--palette-89, #123c57);
  color: var(--palette-90, #69ccf5);
}
.task-card {
  background: linear-gradient(
    130deg,
    var(--palette-91, #13273a),
    var(--palette-75, #101a27)
  );
  border-top: 2px solid var(--palette-92, #008bc8);
}
.progress {
  background: var(--palette-93, #26394a);
}
.progress i {
  background: linear-gradient(
    90deg,
    var(--palette-94, #0099d9),
    var(--palette-95, #74d6ff)
  );
}
input,
textarea,
select {
  background: var(--palette-96, #0b1521);
  border-color: var(--palette-97, #31465b);
}
.store-nav {
  background: var(--palette-98, #0b1420);
  border-bottom-color: var(--palette-99, #253f55);
}
.store-nav .brand-logo {
  width: 66px;
  height: 68px;
}
.store-hero {
  background:
    radial-gradient(
      ellipse at 85% 45%,
      var(--palette-100, #00538060),
      transparent 58%
    ),
    linear-gradient(
      130deg,
      var(--palette-101, #0a131e),
      var(--palette-102, #111d2b)
    );
}
.store-hero h1 {
  font-weight: 650;
}
.store-hero h1 em {
  color: var(--palette-73, #ffcd00);
}
.hero-facts strong {
  color: var(--palette-103, #78d3ff);
}
.hero-caption {
  color: var(--palette-104, #7ebbd9);
}
.spring-art i {
  border-color: var(--palette-105, #179fd0);
  border-top-color: var(--palette-106, #83dfff);
  border-bottom-color: var(--palette-107, #00517e);
  box-shadow:
    0 12px 20px var(--palette-37, #0005),
    inset 0 6px 12px var(--palette-38, #0006);
}
.spring-art i:first-child,
.spring-art i:last-child {
  border-color: var(--palette-108, #e2ad00);
  border-top-color: var(--palette-109, #ffe981);
  border-bottom-color: var(--palette-110, #9a7100);
}
.product-art {
  background: radial-gradient(
    ellipse,
    var(--palette-111, #11456a),
    var(--palette-112, #0c1827)
  );
}
.product-card {
  background: var(--palette-113, #111e2e);
  border-color: var(--palette-114, #28445a);
}
.product-info .eyebrow {
  color: var(--palette-115, #5ecbff);
}
.store-section {
  background: var(--palette-116, #0c1521);
}
.store-footer {
  background: var(--palette-48, #090f17);
}
.login-story {
  background: radial-gradient(
    ellipse at center,
    var(--palette-117, #064a70),
    var(--palette-118, #0a1521)
  );
}
.login-story .brand-logo {
  width: 95px;
  height: 98px;
}
.login-panel {
  background: var(--palette-119, #0c1520);
}
dialog {
  background: var(--palette-120, #111e2d);
  border-color: var(--palette-121, #3a627e);
}
.modal-head {
  background: var(--palette-122, #12283b);
}
.page-search {
  margin: 0 0 24px;
  background: var(--palette-123, #101e2d);
  border: 1px solid var(--palette-124, #28445c);
  border-radius: 12px;
  padding: 15px 18px;
}
.page-search-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-search-controls input {
  flex: 1;
  width: auto;
  border-color: transparent;
  background: transparent;
}
.search-symbol {
  color: var(--palette-125, #55caff);
  font-size: 26px;
}
.page-search small {
  display: block;
  margin: 8px 0 0 35px;
  font-size: 11px;
}
.search-empty {
  padding: 20px;
  border: 1px dashed var(--palette-126, #36546a);
  border-radius: 10px;
  color: var(--palette-127, #b3cadc);
}
.search-help,
.search-count {
  font-size: 12px;
}
.search-results {
  display: grid;
  gap: 9px;
  max-height: 50vh;
  overflow: auto;
  padding: 3px;
}
.search-result {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 7px;
  padding: 17px 38px 17px 17px;
  background: var(--palette-128, #102538);
  border-color: var(--palette-129, #274861);
}
.search-result strong {
  font-size: 14px;
}
.search-result small {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.search-result .eyebrow {
  font-size: 9px;
  color: var(--palette-130, #61caff);
}
.result-arrow {
  position: absolute;
  right: 16px;
  top: 22px;
  color: var(--palette-73, #ffcd00);
}
.record-details {
  margin: 0 0 25px;
}
.record-details > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.record-details dt {
  color: var(--muted);
  font-size: 12px;
}
.record-details dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.download-link {
  display: inline-flex;
  align-items: center;
  padding: 10px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .sidebar {
    padding: 14px 15px;
    overflow: visible;
  }
  .sidebar .brand {
    margin-bottom: 15px;
  }
  .brand-logo {
    width: 48px;
    height: 50px;
  }
  .nav {
    padding-bottom: 5px;
  }
  .topbar {
    padding: 12px 16px;
  }
  .topbar .crumb {
    display: none;
  }
  .top-right {
    width: 100%;
    justify-content: space-between;
  }
  .top-right button {
    font-size: 10px;
    padding: 8px;
  }
  .page-search {
    padding: 10px;
  }
  .page-search-controls {
    flex-wrap: wrap;
    gap: 5px;
  }
  .page-search-controls input {
    min-width: 140px;
    padding: 10px 5px;
    font-size: 12px;
  }
  .page-search-controls button {
    padding: 8px;
    font-size: 11px;
  }
  .page-search small {
    margin-left: 0;
    line-height: 1.6;
  }
  .store-nav {
    flex-wrap: wrap;
    gap: 15px;
  }
  .store-nav .brand-logo {
    width: 48px;
    height: 50px;
  }
  .store-nav .actions {
    width: 100%;
    justify-content: space-between;
  }
  .record-details > div {
    grid-template-columns: 90px 1fr;
  }
  .login-story .brand-logo {
    width: 60px;
    height: 62px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* SSMC commerce · responsive blue, yellow and graphite */
html {
  scroll-behavior: smooth;
}
button,
a,
input,
select,
summary {
  touch-action: manipulation;
}
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--palette-131, #ffcd00);
  outline-offset: 4px;
}
.commerce-store {
  background: var(--palette-48, #090f17);
  color: var(--palette-132, #edf4fc);
}
.store-strip {
  padding: 10px 5%;
  display: flex;
  justify-content: space-between;
  background: var(--palette-88, #ffcd00);
  color: var(--palette-133, #111923);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
}
.commerce-store .store-nav {
  position: relative;
  padding: 18px 5%;
  border-bottom: 1px solid var(--palette-134, #233143);
}
.commerce-store .brand-logo {
  width: 52px;
  height: 54px;
}
.commerce-store .brand strong {
  font-size: 24px;
}
.commerce-store .brand small {
  font-size: 8px;
}
.commerce-hero {
  max-width: 1600px;
  margin: auto;
  padding: 76px 5% 65px;
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  gap: 6%;
  align-items: center;
  overflow: hidden;
}
.hero-copy h1 {
  font-size: clamp(42px, 4.9vw, 78px);
  line-height: 1.04;
  letter-spacing: -3.5px;
  margin: 28px 0;
}
.hero-copy h1 span {
  color: var(--palette-73, #ffcd00);
}
.hero-copy > p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--palette-135, #a7b8cc);
  max-width: 540px;
  margin-bottom: 30px;
}
.commerce-store .eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--palette-136, #2fbbff);
}
.signal-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--palette-88, #ffcd00);
  margin-right: 8px;
}
.hero-bottom {
  display: flex;
  gap: 24px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--palette-137, #263647);
  font-size: 9px;
  color: var(--palette-138, #9eb3c9);
  letter-spacing: 1px;
}
.spring-showcase {
  min-height: 415px;
  position: relative;
  border: 1px solid var(--palette-139, #2b4659);
  border-radius: 4px;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      var(--palette-140, #153d51) 0,
      transparent 65%
    ),
    linear-gradient(var(--palette-141, #24415b33) 1px, transparent 1px),
    linear-gradient(90deg, var(--palette-141, #24415b33) 1px, transparent 1px),
    var(--palette-142, #0c1825);
  background-size:
    auto,
    32px 32px,
    32px 32px,
    auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawing-label {
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--palette-143, #d8eafa);
}
.blueprint-spring {
  transform: rotate(-25deg) scale(1.05);
}
.blueprint-spring .spring-art {
  width: 260px;
  height: 230px;
  filter: drop-shadow(18px 22px 10px #0008);
}
.blueprint-spring .spring-art i {
  border-color: var(--palette-144, #a9ddf1);
  border-top-color: var(--palette-145, #e5f5ff);
  border-left-color: var(--palette-146, #2995c7);
  box-shadow:
    inset 0 2px 5px var(--palette-25, #0009),
    0 4px 6px var(--palette-25, #0009);
}
.dim-top {
  position: absolute;
  right: 24px;
  top: 50%;
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--palette-147, #6997b8);
}
.drawing-bottom {
  position: absolute;
  bottom: 44px;
  left: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--palette-148, #365467);
  padding-top: 15px;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.yellow-text {
  font-size: 24px;
  color: var(--palette-73, #ffcd00);
}
.illustration-label {
  position: absolute;
  bottom: 15px;
  left: 25px;
  color: var(--palette-149, #7895aa);
  font-size: 9px;
}
.buyer-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 5%;
  max-width: 1600px;
  margin: 0 auto 74px;
}
.buyer-paths article {
  padding: 27px 30px;
  border: 1px solid var(--palette-150, #263444);
  background: var(--palette-151, #101c29);
}
.buyer-paths article + article {
  border-left: 0;
}
.path-number {
  font-size: 11px;
  color: var(--palette-152, #35b8f1);
  letter-spacing: 2px;
}
.buyer-paths h2 {
  font-size: 21px;
  margin: 16px 0 10px;
}
.buyer-paths p {
  font-size: 13px;
  color: var(--palette-153, #a3b4c9);
  line-height: 1.7;
  min-height: 45px;
  max-width: 300px;
}
.commerce-store .text-link {
  background: none;
  border: 0;
  padding: 10px 0;
  color: var(--palette-73, #ffcd00);
  text-align: left;
  font-size: 12px;
}
.buyer-paths .actions {
  gap: 22px;
}
.commerce-store .store-section {
  max-width: 1600px;
  padding: 0 5%;
  margin: 0 auto 76px;
}
.section-title {
  font-size: clamp(30px, 3.3vw, 48px);
  letter-spacing: -1.6px;
  line-height: 1.12;
  margin: 16px 0;
}
.catalog-section {
  scroll-margin-top: 25px;
}
.catalog-section .page-head {
  align-items: end;
  gap: 20px;
}
.catalog-section .page-head p {
  font-size: 13px;
  max-width: 500px;
}
.catalog-mode {
  flex-shrink: 0;
}
.catalog-mode > span {
  display: block;
  color: var(--palette-154, #8fa4b9);
  font-size: 11px;
  margin-bottom: 10px;
}
.catalog-filters {
  display: grid;
  grid-template-columns: 2fr 1.3fr 0.8fr 0.8fr 1.3fr auto auto;
  align-items: end;
  gap: 12px;
  padding: 22px;
  background: var(--palette-102, #111d2b);
  border: 1px solid var(--palette-155, #293c4d);
  border-radius: 8px;
}
.catalog-filters label {
  min-width: 0;
  margin: 0;
}
.catalog-filters label > span {
  font-size: 10px;
  white-space: nowrap;
}
.catalog-filters input,
.catalog-filters select {
  min-width: 0;
  width: 100%;
  height: 43px;
  margin-top: 7px;
  font-size: 12px;
}
.catalog-filters button {
  height: 43px;
  font-size: 12px;
}
.catalog-count {
  font-size: 12px;
  color: var(--palette-156, #93aabe);
  margin: 20px 0;
}
.commerce-store .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.commerce-store .product-card {
  border: 1px solid var(--palette-157, #26384b);
  background: var(--palette-158, #101b28);
  overflow: hidden;
  border-radius: 10px;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.commerce-store .product-card:hover {
  transform: translateY(-4px);
  border-color: var(--palette-159, #0099d9);
}
.product-photo {
  width: 100%;
  height: 240px;
  object-fit: contain;
  background: var(--palette-160, #eef2f5);
  display: block;
  padding: 18px;
}
.product-placeholder {
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(
    ellipse at center,
    var(--palette-161, #1b354b),
    var(--palette-162, #0e1925)
  );
  overflow: hidden;
}
.product-placeholder .spring-art {
  transform: scale(0.52);
  height: 150px;
  margin: 0;
}
.product-placeholder small {
  font-size: 10px;
  color: var(--palette-163, #849aaf);
  letter-spacing: 0.7px;
  position: relative;
  margin-top: 25px;
}
.product-info {
  padding: 24px !important;
}
.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.stock-label {
  font-size: 10px;
  border: 1px solid var(--palette-164, #235b57);
  color: var(--palette-165, #82d6b8);
  border-radius: 20px;
  padding: 4px 8px;
  white-space: nowrap;
}
.stock-label.out-stock {
  color: var(--palette-166, #c3cbd5);
  border-color: var(--palette-167, #526074);
}
.commerce-store .product-info h3 {
  font-size: 20px;
  margin: 16px 0 4px;
}
.sku-label {
  font-size: 10px;
  color: var(--palette-168, #7694ae);
  letter-spacing: 1px;
}
.commerce-store .product-info > p {
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.8;
  margin: 12px 0 22px;
}
.commerce-store .product-bottom b {
  font-size: 22px;
}
.commerce-store .product-bottom small {
  font-size: 10px;
  color: var(--palette-169, #879eb4);
}
.product-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--palette-170, #263747);
}
.product-actions button {
  flex: 1;
  white-space: nowrap;
  padding: 10px 8px;
  font-size: 11px;
}
.catalog-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 50px 20px;
  border: 1px dashed var(--palette-171, #35506a);
  border-radius: 8px;
}
.catalog-empty button {
  margin: 8px;
}
.custom-banner {
  margin: 0 5% 80px;
  padding: 55px 5%;
  background: linear-gradient(
    120deg,
    var(--palette-172, #11364e),
    var(--palette-173, #122438)
  );
  border: 1px solid var(--palette-174, #2e5c76);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12%;
  align-items: center;
}
.custom-banner h2 {
  font-size: clamp(34px, 3.8vw, 55px);
  letter-spacing: -2px;
  line-height: 1.1;
  margin: 20px 0;
}
.custom-banner p {
  font-size: 14px;
  color: var(--palette-175, #b4c6d7);
  line-height: 1.9;
  max-width: 530px;
}
.custom-steps {
  display: grid;
  gap: 20px;
}
.custom-steps span {
  font-size: 14px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.custom-steps b {
  font-size: 11px;
  color: var(--palette-73, #ffcd00);
  border: 1px solid var(--palette-176, #567181);
  padding: 10px;
  border-radius: 50%;
}
.custom-steps button {
  margin-top: 8px;
  justify-self: start;
}
.faq-section {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10%;
}
.faq-list details {
  border-bottom: 1px solid var(--palette-177, #283a4c);
  padding: 20px 0;
}
.faq-list summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding-right: 12px;
}
.faq-list p {
  font-size: 13px;
  color: var(--palette-178, #a9bdd0);
  line-height: 1.8;
}
.commerce-store .store-footer {
  padding: 32px 5%;
  gap: 25px;
  border-top: 1px solid var(--palette-177, #283a4c);
}
.store-footer strong {
  font-size: 15px;
}
.store-footer p {
  font-size: 11px;
  color: var(--palette-179, #91a6ba);
}
.preserve-lines {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: start;
  gap: 10px;
  font-size: 13px;
}
.consent input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}
.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
}
.enquiry-success {
  text-align: center;
  padding: 25px 10px;
}
.enquiry-success > strong {
  font-size: 24px;
  color: var(--palette-73, #ffcd00);
}
.success-mark {
  display: inline-grid;
  place-items: center;
  background: var(--palette-180, #103f35);
  color: var(--palette-181, #8ae4c4);
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-size: 28px;
}
.enquiry-success p {
  color: var(--palette-182, #a6bace);
  line-height: 1.8;
}
.stock-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--palette-160, #eef2f5);
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 10px;
}
.image-edit-preview .product-photo,
.image-edit-preview .product-placeholder {
  height: 180px;
}
.enquiry-stats .stat {
  padding: 18px;
}
.enquiry-stats .stat-value {
  font-size: 28px;
}
#enquiry-form .form-grid {
  margin-bottom: 20px;
}
#modal .product-photo {
  height: 230px;
}
#modal input[type="file"] {
  max-width: 100%;
  white-space: normal;
}
#modal .product-placeholder {
  height: 180px;
}
@media (min-width: 1600px) {
  .custom-banner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 1100px) {
  .catalog-filters {
    grid-template-columns: 2fr 1.3fr 1fr 1fr;
  }
  .catalog-filters .filter-search {
    grid-column: span 2;
  }
  .commerce-store .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-copy h1 {
    letter-spacing: -2px;
  }
  .hero-bottom {
    gap: 12px;
    font-size: 8px;
  }
  .buyer-paths article {
    padding: 24px 20px;
  }
  .buyer-paths h2 {
    font-size: 18px;
  }
  .buyer-paths .actions {
    gap: 6px;
  }
  .spring-showcase {
    min-height: 370px;
  }
  .blueprint-spring {
    transform: rotate(-25deg) scale(0.85);
  }
  .catalog-section .page-head {
    align-items: start;
    flex-direction: column;
  }
}
@media (max-width: 760px) {
  .store-strip span:last-child {
    display: none;
  }
  .commerce-store .store-nav {
    padding: 14px 5%;
    gap: 14px;
    flex-wrap: wrap;
  }
  .commerce-store .store-nav .actions {
    gap: 6px;
  }
  .commerce-store .store-nav .brand {
    margin: 0;
  }
  .commerce-store .store-nav .brand small {
    font-size: 7px;
  }
  .commerce-store .store-nav button {
    font-size: 11px;
    padding: 10px;
  }
  .nav-custom {
    display: none;
  }
  .commerce-hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 42px 5%;
  }
  .hero-copy h1 {
    font-size: clamp(42px, 8vw, 60px);
    letter-spacing: -2px;
    margin: 22px 0;
  }
  .hero-copy > p {
    font-size: 15px;
    max-width: 540px;
  }
  .hero-bottom {
    margin-top: 30px;
    justify-content: space-between;
  }
  .spring-showcase {
    min-height: 320px;
  }
  .blueprint-spring {
    transform: rotate(-25deg) scale(0.9);
  }
  .buyer-paths {
    grid-template-columns: 1fr;
    margin-bottom: 45px;
  }
  .buyer-paths article + article {
    border-left: 1px solid var(--palette-150, #263444);
    border-top: 0;
  }
  .buyer-paths article {
    padding: 23px;
  }
  .buyer-paths p {
    max-width: none;
    min-height: 0;
  }
  .buyer-paths h2 {
    margin: 10px 0;
  }
  .buyer-paths .actions {
    gap: 20px;
  }
  .catalog-filters {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
  }
  .catalog-filters .filter-search {
    grid-column: 1/-1;
  }
  .catalog-filters button {
    width: 100%;
  }
  .catalog-filters label:nth-child(5) {
    grid-column: span 1;
  }
  .catalog-mode .actions {
    flex-wrap: wrap;
  }
  .commerce-store .store-section {
    margin-bottom: 45px;
  }
  .commerce-store .product-grid {
    gap: 12px;
  }
  .product-info {
    padding: 17px !important;
  }
  .product-meta {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .commerce-store .product-info h3 {
    font-size: 17px;
  }
  .product-photo,
  .product-placeholder {
    height: 200px;
  }
  .product-actions {
    flex-direction: column;
  }
  .commerce-store .product-bottom {
    align-items: start;
    gap: 10px;
    flex-direction: column;
  }
  .custom-banner {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 30px 7%;
    margin-bottom: 45px;
  }
  .custom-banner h2 {
    font-size: 37px;
  }
  .custom-banner p {
    font-size: 13px;
  }
  .faq-section {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .commerce-store .store-footer {
    flex-direction: column;
    align-items: start;
  }
  .commerce-store .store-footer .brand {
    display: flex;
  }
  .enquiry-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 440px) {
  .commerce-store .store-nav .brand-logo {
    width: 40px;
    height: 42px;
  }
  .commerce-store .store-nav .brand strong {
    font-size: 21px;
  }
  .commerce-store .store-nav > .actions {
    width: 100%;
    justify-content: space-between;
  }
  .hero-copy h1 {
    font-size: 42px;
  }
  .hero-copy .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .spring-showcase {
    min-height: 280px;
  }
  .blueprint-spring {
    transform: rotate(-25deg) scale(0.8);
  }
  .drawing-label {
    font-size: 8px;
  }
  .drawing-bottom {
    font-size: 8px;
  }
  .commerce-store .product-grid {
    grid-template-columns: 1fr;
  }
  .product-meta {
    flex-direction: row;
    align-items: center;
  }
  .product-actions {
    flex-direction: row;
  }
  .commerce-store .product-bottom {
    flex-direction: row;
    align-items: center;
  }
  .product-photo,
  .product-placeholder {
    height: 225px;
  }
  .hero-bottom {
    font-size: 7px;
    gap: 4px;
  }
  .section-title {
    font-size: 34px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .product-card {
    transition: none !important;
  }
  .spring-art {
    animation: none !important;
  }
}

/* Position defaults and individual authorities */
.access-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--palette-183, #3f86a9);
  background: var(--palette-184, #102c40);
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 25px;
}
.access-notice strong {
  color: var(--palette-73, #ffcd00);
}
.access-notice p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--palette-185, #b8cede);
  margin: 7px 0 0;
}
.access-notice button {
  flex-shrink: 0;
}
.permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 22px;
}
.permission-list article {
  border: 1px solid var(--palette-186, #2b4257);
  padding: 17px;
  border-radius: 8px;
  background: var(--palette-187, #0e1a27);
}
.permission-list strong {
  font-size: 14px;
  color: var(--palette-188, #e7f5ff);
}
.permission-list p {
  font-size: 12px;
  color: var(--palette-189, #a8bed2);
  line-height: 1.6;
  margin-bottom: 0;
}
.authority-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(120px, 0.8fr) minmax(
      150px,
      1fr
    );
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--palette-186, #2b4257);
  align-items: start;
}
.authority-row strong {
  font-size: 13px;
  color: var(--palette-190, #edf6ff);
}
.authority-row small {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: var(--palette-191, #7fb3d2);
  margin-top: 6px;
}
.authority-row p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--palette-192, #adc0d0);
  margin: 7px 0;
}
.authority-row label {
  min-width: 0;
  margin: 0;
}
.authority-row label > span {
  font-size: 10px;
}
.authority-row input,
.authority-row select {
  font-size: 11px;
  min-width: 0;
  width: 100%;
  padding: 10px 7px;
}
.authority-row input:disabled {
  opacity: 0.35;
}
#authority-summary {
  font-size: 12px;
  line-height: 1.6;
  color: var(--palette-193, #ffda52);
  margin: 18px 0;
}
#authorities-form > .form-footer {
  position: sticky;
  bottom: -24px;
  background: var(--palette-120, #111e2d);
  padding: 15px 0;
  border-top: 1px solid var(--palette-186, #2b4257);
  z-index: 1;
}
#authorities-form > .form-grid {
  margin-bottom: 16px;
}
#authorities-form > .actions {
  flex-wrap: wrap;
}
#authorities-form > label {
  margin-top: 20px;
}
@media (max-width: 700px) {
  .access-notice {
    flex-direction: column;
    align-items: start;
  }
  .permission-list {
    grid-template-columns: 1fr;
    padding: 15px;
  }
  .authority-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .authority-row > div {
    grid-column: 1/-1;
  }
  .authority-row input,
  .authority-row select {
    font-size: 12px;
  }
  .authority-row {
    gap: 10px;
  }
  #authorities-form > .form-footer {
    bottom: -16px;
  }
}
.layout > main {
  min-width: 0;
}
.layout .topbar {
  height: auto;
  min-height: 78px;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.layout .top-right {
  flex-wrap: wrap;
}
.sidebar {
  overflow-y: auto;
}
.modal-head {
  position: sticky;
  top: 0;
  z-index: 3;
}
#authority-rows {
  min-width: 0;
}
.authority-row[hidden] {
  display: none;
}
/* v1.4: structured public pages, consistent SSMC branding */
.commerce-store a {
  text-decoration: none;
}
.commerce-store a:focus-visible,
.commerce-store button:focus-visible {
  outline: 3px solid var(--palette-194, #fc0);
  outline-offset: 4px;
}
.store-strip a {
  color: var(--palette-195, #bfd2e3);
}
.commerce-store .store-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.store-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.store-links a {
  color: var(--palette-196, #b7c8d8);
  font-size: 14px;
  padding: 12px 0;
}
.store-links a[aria-current="page"] {
  color: var(--palette-197, #fc0);
  border-bottom: 2px solid var(--palette-194, #fc0);
}
.store-links a:hover {
  color: var(--palette-54, #fff);
}
.commerce-store a.primary,
.commerce-store a.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 12px 18px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 14px;
}
.commerce-store a.primary {
  background: var(--palette-198, #009bd7);
  color: var(--palette-199, #06121c);
  border: 1px solid var(--palette-200, #009bd7);
}
.commerce-store a.ghost {
  border: 1px solid var(--palette-201, #33495d);
  color: var(--palette-202, #e9f1f8);
}
.menu-toggle {
  display: none;
}
.store-page-intro {
  padding: 70px 6% 36px;
  border-bottom: 1px solid var(--palette-157, #26384b);
  background: radial-gradient(
    ellipse at top right,
    var(--palette-203, #063f57) 0,
    transparent 60%
  );
}
.store-page-intro h1 {
  font-size: clamp(34px, 5vw, 66px);
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 16px 0;
}
.store-page-intro p {
  max-width: 640px;
  line-height: 1.8;
  color: var(--palette-204, #a6b9ca);
}
.family-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.family-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 20px;
  background: var(--palette-205, #101d2a);
  border: 1px solid var(--palette-206, #294053);
  border-radius: 10px;
  color: var(--palette-207, #eef5fb);
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.family-card:hover {
  transform: translateY(-4px);
  border-color: var(--palette-200, #009bd7);
}
.family-number {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--palette-208, #91a9bd);
}
.family-card h3 {
  font-size: 20px;
  line-height: 1.35;
  margin: 0;
}
.family-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--palette-204, #a6b9ca);
  margin: 0;
  flex: 1;
}
.about-split,
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-split p,
.contact-grid p,
.info-card p,
.industries-section p {
  color: var(--palette-204, #a6b9ca);
  line-height: 1.85;
}
.about-split .ghost {
  margin-top: 14px;
}
.about-panel {
  background: linear-gradient(
    135deg,
    var(--palette-209, #122c3e),
    var(--palette-210, #101924)
  );
  border: 1px solid var(--palette-211, #294457);
  border-top: 3px solid var(--palette-194, #fc0);
  border-radius: 12px;
  padding: 38px;
}
.about-panel h3 {
  font-size: 26px;
  line-height: 1.4;
}
.value-tags,
.industry-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.value-tags span {
  border: 1px solid var(--palette-212, #325066);
  border-radius: 24px;
  padding: 8px 14px;
  color: var(--palette-213, #c1d5e5);
  font-size: 12px;
}
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.info-card {
  padding: 30px;
  border: 1px solid var(--palette-206, #294053);
  border-radius: 12px;
  background: var(--palette-158, #101b28);
}
.person-initial {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--palette-214, #063d57);
  color: var(--palette-197, #fc0);
  font-size: 22px;
  font-weight: 700;
}
.process-section {
  background: var(--palette-215, #0d1823);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 32px;
}
.process-grid article {
  border-top: 1px solid var(--palette-216, #335065);
  padding-top: 22px;
}
.process-grid b {
  font-size: 28px;
  color: var(--palette-197, #fc0);
}
.process-grid h3 {
  font-size: 20px;
}
.process-grid p {
  color: var(--palette-204, #a6b9ca);
  font-size: 14px;
  line-height: 1.8;
}
.industry-tags span {
  border: 1px solid var(--palette-206, #294053);
  background: var(--palette-158, #101b28);
  padding: 20px 25px;
  border-radius: 8px;
}
.industries-section p {
  max-width: 720px;
  margin-top: 24px;
}
.home-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--palette-206, #294053);
}
.home-contact h2 {
  font-size: clamp(24px, 3vw, 38px);
}
.home-contact p {
  color: var(--palette-204, #a6b9ca);
}
.company-footer {
  border-top: 1px solid var(--palette-206, #294053);
  background: var(--palette-217, #080f16);
  padding: 55px 6% 85px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr 1.2fr;
  gap: 35px;
}
.footer-grid > div {
  min-width: 0;
}
.footer-grid h3 {
  font-size: 15px;
  margin: 0 0 20px;
  color: var(--palette-207, #eef5fb);
}
.footer-grid a:not(.brand),
.footer-grid address,
.footer-grid p {
  display: block;
  font-size: 13px;
  line-height: 1.9;
  color: var(--palette-218, #9bb1c5);
  overflow-wrap: anywhere;
  margin: 0 0 10px;
}
.footer-grid .brand {
  margin-bottom: 20px;
}
.footer-grid .brand-logo {
  width: 55px;
  height: 55px;
}
.footer-grid address {
  font-style: normal;
}
.footer-grid .text-link {
  padding-left: 0;
  white-space: normal;
  text-align: left;
}
.footer-bottom {
  border-top: 1px solid var(--palette-219, #243649);
  margin-top: 35px;
  padding-top: 23px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--palette-220, #829aaf);
}
.enquiry-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 25;
  border-radius: 30px;
  box-shadow: 0 8px 25px var(--palette-31, #0008);
  min-height: 48px;
}
.contact-options {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}
.contact-options > a,
.contact-options > div {
  display: block;
  padding: 22px;
  border: 1px solid var(--palette-206, #294053);
  border-radius: 8px;
  background: var(--palette-158, #101b28);
  overflow-wrap: anywhere;
}
.contact-options span {
  display: block;
  color: var(--palette-221, #94acbf);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-bottom: 9px;
}
.contact-options strong {
  color: var(--palette-222, #e8f3fb);
  font-size: 18px;
}
.contact-options address {
  font-style: normal;
  line-height: 1.8;
  color: var(--palette-223, #c2d0dc);
}
.contact-options div a {
  display: inline-block;
  margin-top: 16px;
  color: var(--palette-197, #fc0);
}
.contact-panel li {
  margin: 15px 0;
  color: var(--palette-224, #b4c6d6);
  line-height: 1.7;
}
.contact-panel ul {
  padding-left: 20px;
}
.contact-panel .actions {
  margin-top: 26px;
}
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
  color: var(--palette-204, #a6b9ca);
  font-size: 13px;
}
.catalog-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.commerce-store .product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.commerce-store .product-info > p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 66px;
  overflow-wrap: anywhere;
}
.commerce-store .product-info h3 {
  min-height: 52px;
  overflow-wrap: anywhere;
}
.commerce-store .product-bottom {
  margin-top: auto;
}
.commerce-store .product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.commerce-store .product-meta {
  flex-wrap: wrap;
}
.commerce-store .sku-label {
  overflow-wrap: anywhere;
}
.login-panel .login-box {
  padding-top: 24px;
  padding-bottom: 30px;
}
@media (max-width: 1150px) {
  .commerce-store .store-nav {
    gap: 12px;
  }
  .store-links {
    order: 3;
    width: 100%;
    justify-content: center;
    border-top: 1px solid var(--palette-206, #294053);
    margin: 0;
    padding-top: 8px;
  }
  .store-account {
    margin-left: auto;
  }
  .family-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-split,
  .contact-grid {
    gap: 28px;
  }
}
@media (max-width: 760px) {
  .family-grid,
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-split,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .leadership-grid {
    grid-template-columns: 1fr;
  }
  .store-page-intro {
    padding: 45px 6% 25px;
  }
  .footer-grid {
    gap: 30px;
  }
  .home-contact {
    align-items: flex-start;
    flex-direction: column;
  }
  .menu-toggle {
    display: block;
    margin-left: auto;
  }
  .commerce-store .store-nav .store-links {
    display: none;
  }
  .commerce-store .store-nav .store-links.is-open {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    order: 4;
  }
  .commerce-store .store-nav .store-account {
    width: 100%;
    justify-content: space-between;
    order: 3;
    margin: 0;
  }
  .commerce-store .store-nav .brand {
    flex: 0 1 auto;
    min-width: 0;
  }
  .about-panel {
    padding: 25px;
  }
}
@media (max-width: 480px) {
  .family-grid,
  .footer-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }
  .family-card {
    gap: 12px;
  }
  .family-card h3 {
    font-size: 22px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }
  .enquiry-fab {
    right: 14px;
    bottom: 14px;
  }
  .contact-options strong {
    font-size: 15px;
  }
  .catalog-pagination {
    gap: 12px;
  }
  .catalog-pagination span {
    order: -1;
    width: 100%;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .family-card,
  .commerce-store .product-card {
    transition: none;
  }
  .family-card:hover,
  .commerce-store .product-card:hover {
    transform: none;
  }
}
.commerce-store .store-strip a {
  color: var(--palette-225, #17212b);
  white-space: nowrap;
  letter-spacing: 0;
  flex-shrink: 0;
  font-weight: 700;
}
.commerce-store .store-strip {
  gap: 16px;
}
@media (max-width: 480px) {
  .commerce-store .store-strip {
    font-size: 9px;
    line-height: 1.5;
  }
  .contact-options strong {
    font-size: 14px;
  }
}
/* v1.5: shared spring fields and compact detail table */
.spring-form [data-spring-field][hidden] {
  display: none !important;
}
.spring-form [data-spring-field] {
  min-width: 0;
}
.spring-form-intro p,
.spring-form-divider p {
  color: var(--palette-226, #9fb3c5);
  line-height: 1.7;
  font-size: 13px;
}
.spring-form-divider {
  border-top: 1px solid var(--palette-206, #294053);
  padding-top: 14px;
  margin-top: 8px;
}
.spring-form-divider h3 {
  margin: 0 0 8px;
}
.spring-form .spring-active {
  display: flex;
  align-items: center;
  gap: 12px;
}
.spring-active input {
  width: auto;
}
.spring-form input[readonly] {
  opacity: 0.75;
  cursor: default;
}
.spring-specs dl {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--palette-206, #294053);
  border-left: 1px solid var(--palette-206, #294053);
}
.spring-specs dl > div {
  padding: 14px;
  border-right: 1px solid var(--palette-206, #294053);
  border-bottom: 1px solid var(--palette-206, #294053);
  min-width: 0;
}
.spring-specs dt {
  color: var(--palette-227, #97b0c5);
  font-size: 12px;
  margin-bottom: 7px;
}
.spring-specs dd {
  margin: 0;
  color: var(--palette-228, #e1edf6);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.internal-remarks {
  border: 1px solid var(--palette-229, #655727);
  border-radius: 8px;
  padding: 16px;
  background: var(--palette-230, #302b151f);
}
.staff-spring-filter {
  max-width: 360px;
  margin-bottom: 20px;
}
.commerce-store .family-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.commerce-store .product-info > p.product-material {
  min-height: 42px;
  -webkit-line-clamp: 2;
}
@media (max-width: 1000px) {
  .commerce-store .family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .spring-specs dl {
    grid-template-columns: 1fr;
  }
  .commerce-store .family-grid {
    grid-template-columns: 1fr;
  }
}
.modal-body .product-placeholder {
  overflow: hidden;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.modal-body .product-placeholder small {
  position: relative;
  display: block;
}

/* v1.6: spring imagery and company details */
.family-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1.52;
  object-fit: cover;
  border-radius: 8px;
  background: var(--palette-231, #07111e);
}
.industry-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.industry-tags .industry-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  min-width: 0;
}
.industry-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: var(--palette-232, #00a4dc);
}
.leadership-card {
  position: relative;
  border-top: 3px solid var(--palette-233, #ffca08) !important;
  background: linear-gradient(
    145deg,
    var(--palette-234, #132c42),
    var(--palette-158, #101b28)
  ) !important;
}
.leadership-role {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--palette-235, #ffca08);
  color: var(--palette-236, #102337);
  font-weight: 800;
  margin: 10px 0;
}
.leadership-card h3 {
  font-size: 24px;
  margin-top: 16px;
}
.leadership-card p {
  line-height: 1.85;
}
.vision-callout {
  border-left: 3px solid var(--palette-233, #ffca08);
  padding: 12px 20px;
  margin: 24px 0;
  background: var(--palette-237, #092333);
  border-radius: 0 10px 10px 0;
}
.vision-callout strong {
  display: block;
  font-size: 24px;
  margin: 8px 0;
  color: var(--palette-54, #fff);
}
[data-custom-wrap][hidden] {
  display: none !important;
}
.spring-form small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 6px;
}
@media (max-width: 640px) {
  .industry-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .industry-tags .industry-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    font-size: 13px;
    gap: 12px;
  }
  .leadership-card h3 {
    font-size: 22px;
  }
}

.team-intro {
  max-width: 850px;
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 32px;
}
.team-intro strong {
  color: var(--text);
}
.team-since {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.team-founder {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
}
.team-portrait {
  position: relative;
  background: var(--palette-238, #0a1929);
  min-height: 380px;
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: absolute;
}
.team-portrait span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--palette-239, #091724);
  color: var(--palette-240, #ffcc08);
  font-size: 10px;
  letter-spacing: 0.13em;
}
.team-copy {
  padding: 36px;
}
.team-copy h3 {
  font-size: 32px;
  margin: 10px 0;
}
.team-strap {
  font-size: 18px;
  color: var(--blue) !important;
  margin: 0 0 22px !important;
}
.team-copy p,
.team-member p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}
.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.team-tags span {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--blue);
  background: var(--raised);
}
.team-next-head {
  max-width: 760px;
  margin: 48px 0 24px;
}
.team-next-head h2 {
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.4;
  margin: 10px 0;
}
.team-next-head p {
  color: var(--muted);
}
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.team-member {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.team-member header {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 16px;
}
.team-member img {
  width: 96px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}
.team-member h3 {
  font-size: 24px;
  margin: 8px 0;
}
.team-member small {
  color: var(--muted);
}
.team-member .team-tags {
  margin-top: auto;
  padding-top: 18px;
}
.theme-toggle {
  white-space: nowrap;
  min-height: 36px;
}
.auth-theme {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.store-account {
  flex-wrap: wrap;
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--blue);
}
@media (max-width: 900px) {
  .team-founder {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .team-copy {
    padding: 24px;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .team-founder {
    grid-template-columns: 1fr;
  }
  .team-portrait {
    min-height: 0;
    aspect-ratio: 1.2;
  }
  .team-portrait img {
    object-position: center 20%;
  }
  .team-copy {
    padding: 22px;
  }
  .team-copy h3 {
    font-size: 28px;
  }
  .team-member {
    padding: 20px;
  }
  .team-member header {
    gap: 16px;
  }
  .team-member h3 {
    font-size: 21px;
  }
  .team-member img {
    width: 78px;
    height: 100px;
  }
  .team-since {
    display: none;
  }
  .top-right {
    flex-wrap: wrap;
  }
  .store-account {
    gap: 6px;
  }
  .theme-toggle {
    padding: 8px 10px;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f6fa;
  --panel: #fff;
  --raised: #e9f0f6;
  --line: #cbd8e3;
  --text: #172c40;
  --muted: #4c6275;
  --lime: #ffcd00;
  --blue: #006f9c;
  --green: #216749;
  --red: #aa2537;
  --amber: #805e00;
  --palette-0: #1c2512;
  --palette-1: #202818;
  --palette-2: #ffffff;
  --palette-3: #4c6275;
  --palette-4: #ffffff;
  --palette-5: #ffffff;
  --palette-6: #cbd8e3;
  --palette-7: #ffffff;
  --palette-8: #ffffff;
  --palette-9: #ffffff;
  --palette-10: #ffffff;
  --palette-11: #cbd8e3;
  --palette-12: #cbd8e3;
  --palette-13: #ffffff;
  --palette-14: #ffffff;
  --palette-15: #cbd8e3;
  --palette-16: #ffffff;
  --palette-17: #cbd8e3;
  --palette-18: #006994;
  --palette-19: #ffffff;
  --palette-20: #cbd8e3;
  --palette-21: #ffffff;
  --palette-22: #f2f6fa;
  --palette-23: #cbd8e3;
  --palette-24: #cbd8e3;
  --palette-25: #16344c99;
  --palette-26: #f2f6fa;
  --palette-27: #ffffff;
  --palette-28: #cbd8e3;
  --palette-29: #4c6275;
  --palette-30: #216749;
  --palette-31: #16344c88;
  --palette-32: #ffb1a9;
  --palette-33: #ffffff;
  --palette-34: #c3c9b5;
  --palette-35: #f1f7dd;
  --palette-36: #cbd8e3;
  --palette-37: #16344c55;
  --palette-38: #16344c66;
  --palette-39: #ffffff;
  --palette-40: #ffffff;
  --palette-41: #ffffff;
  --palette-42: #f2f6fa;
  --palette-43: #ffffff;
  --palette-44: #ffffff;
  --palette-45: #006994;
  --palette-46: #4c6275;
  --palette-47: #ffffff;
  --palette-48: #f2f6fa;
  --palette-49: #cbd8e3;
  --palette-50: #006fa43b;
  --palette-51: #0099d912;
  --palette-52: #006994;
  --palette-53: #0099d914;
  --palette-54: #172c40;
  --palette-55: #4c6275;
  --palette-56: #ffffff;
  --palette-57: #006994;
  --palette-58: #cbd8e3;
  --palette-59: #ffffff;
  --palette-60: #ffe56b;
  --palette-61: #ffca00;
  --palette-62: #ffce18;
  --palette-63: #805e00;
  --palette-64: #16344c12;
  --palette-65: #55caff;
  --palette-66: #ffffff;
  --palette-67: #ffffff;
  --palette-68: #cbd8e3;
  --palette-69: #ffffff;
  --palette-70: #ffffff;
  --palette-71: #cbd8e3;
  --palette-72: #006994;
  --palette-73: #805e00;
  --palette-74: #ffffff;
  --palette-75: #ffffff;
  --palette-76: #16344c18;
  --palette-77: #ffffff;
  --palette-78: #4c6275;
  --palette-79: #cbd8e3;
  --palette-80: #cbd8e3;
  --palette-81: #28b8f0;
  --palette-82: #ffffff;
  --palette-83: #ffe67b;
  --palette-84: #d9a500;
  --palette-85: #ffffff;
  --palette-86: #cbd8e3;
  --palette-87: #006994;
  --palette-88: #ffcd00;
  --palette-89: #ffffff;
  --palette-90: #006994;
  --palette-91: #ffffff;
  --palette-92: #cbd8e3;
  --palette-93: #ffffff;
  --palette-94: #0099d9;
  --palette-95: #74d6ff;
  --palette-96: #ffffff;
  --palette-97: #cbd8e3;
  --palette-98: #f2f6fa;
  --palette-99: #cbd8e3;
  --palette-100: #ffffff;
  --palette-101: #f2f6fa;
  --palette-102: #ffffff;
  --palette-103: #006994;
  --palette-104: #006994;
  --palette-105: #cbd8e3;
  --palette-106: #83dfff;
  --palette-107: #cbd8e3;
  --palette-108: #cbd8e3;
  --palette-109: #ffe981;
  --palette-110: #cbd8e3;
  --palette-111: #ffffff;
  --palette-112: #ffffff;
  --palette-113: #ffffff;
  --palette-114: #cbd8e3;
  --palette-115: #006994;
  --palette-116: #ffffff;
  --palette-117: #ffffff;
  --palette-118: #f2f6fa;
  --palette-119: #ffffff;
  --palette-120: #ffffff;
  --palette-121: #cbd8e3;
  --palette-122: #ffffff;
  --palette-123: #ffffff;
  --palette-124: #cbd8e3;
  --palette-125: #006994;
  --palette-126: #cbd8e3;
  --palette-127: #4c6275;
  --palette-128: #ffffff;
  --palette-129: #cbd8e3;
  --palette-130: #006994;
  --palette-131: #ffcd00;
  --palette-132: #006994;
  --palette-133: #111923;
  --palette-134: #cbd8e3;
  --palette-135: #4c6275;
  --palette-136: #006994;
  --palette-137: #cbd8e3;
  --palette-138: #4c6275;
  --palette-139: #cbd8e3;
  --palette-140: #ffffff;
  --palette-141: #ffffff;
  --palette-142: #ffffff;
  --palette-143: #006994;
  --palette-144: #a9ddf1;
  --palette-145: #e5f5ff;
  --palette-146: #cbd8e3;
  --palette-147: #4c6275;
  --palette-148: #cbd8e3;
  --palette-149: #4c6275;
  --palette-150: #cbd8e3;
  --palette-151: #ffffff;
  --palette-152: #006994;
  --palette-153: #4c6275;
  --palette-154: #4c6275;
  --palette-155: #cbd8e3;
  --palette-156: #4c6275;
  --palette-157: #cbd8e3;
  --palette-158: #ffffff;
  --palette-159: #cbd8e3;
  --palette-160: #eef2f5;
  --palette-161: #ffffff;
  --palette-162: #ffffff;
  --palette-163: #4c6275;
  --palette-164: #cbd8e3;
  --palette-165: #216749;
  --palette-166: #4c6275;
  --palette-167: #cbd8e3;
  --palette-168: #4c6275;
  --palette-169: #4c6275;
  --palette-170: #cbd8e3;
  --palette-171: #cbd8e3;
  --palette-172: #ffffff;
  --palette-173: #ffffff;
  --palette-174: #cbd8e3;
  --palette-175: #4c6275;
  --palette-176: #cbd8e3;
  --palette-177: #cbd8e3;
  --palette-178: #4c6275;
  --palette-179: #4c6275;
  --palette-180: #ffffff;
  --palette-181: #216749;
  --palette-182: #4c6275;
  --palette-183: #cbd8e3;
  --palette-184: #ffffff;
  --palette-185: #4c6275;
  --palette-186: #cbd8e3;
  --palette-187: #ffffff;
  --palette-188: #006994;
  --palette-189: #4c6275;
  --palette-190: #006994;
  --palette-191: #006994;
  --palette-192: #4c6275;
  --palette-193: #805e00;
  --palette-194: #fc0;
  --palette-195: #172c40;
  --palette-196: #4c6275;
  --palette-197: #805e00;
  --palette-198: #009bd7;
  --palette-199: #006994;
  --palette-200: #cbd8e3;
  --palette-201: #cbd8e3;
  --palette-202: #006994;
  --palette-203: #ffffff;
  --palette-204: #4c6275;
  --palette-205: #ffffff;
  --palette-206: #cbd8e3;
  --palette-207: #006994;
  --palette-208: #4c6275;
  --palette-209: #ffffff;
  --palette-210: #ffffff;
  --palette-211: #cbd8e3;
  --palette-212: #cbd8e3;
  --palette-213: #006994;
  --palette-214: #ffffff;
  --palette-215: #ffffff;
  --palette-216: #cbd8e3;
  --palette-217: #f2f6fa;
  --palette-218: #4c6275;
  --palette-219: #cbd8e3;
  --palette-220: #4c6275;
  --palette-221: #4c6275;
  --palette-222: #006994;
  --palette-223: #172c40;
  --palette-224: #4c6275;
  --palette-225: #17212b;
  --palette-226: #4c6275;
  --palette-227: #4c6275;
  --palette-228: #006994;
  --palette-229: #cbd8e3;
  --palette-230: #ffffff;
  --palette-231: #f2f6fa;
  --palette-232: #006994;
  --palette-233: #ffca08;
  --palette-234: #ffffff;
  --palette-235: #ffca08;
  --palette-236: #006994;
  --palette-237: #ffffff;
  --palette-238: #ffffff;
  --palette-239: #ffffff;
  --palette-240: #805e00;
}

:root[data-theme="light"] .primary,
:root[data-theme="light"] .store-strip,
:root[data-theme="light"] .enquiry-float {
  color: #102337;
}
:root[data-theme="light"] .store-strip a {
  color: #102337;
}
:root[data-theme="light"] .team-portrait span {
  background: #091724;
  color: #ffcc08;
}
:root[data-theme="light"] .brand img {
  background: #0a1420;
  border-radius: 6px;
}
:root[data-theme="light"] .live {
  color: #216749;
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  color: #172c40;
  background: #fff;
}

:root[data-theme="light"] {
  --accent-text: #805e00;
}

.tracking-stages {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.tracking-stages > div {
  flex: 1;
  min-width: 115px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.tracking-stages strong,
.tracking-stages span {
  display: block;
}
.tracking-stages strong {
  font-size: 25px;
  margin-bottom: 8px;
}
.tracking-stages .reached {
  border-color: var(--blue);
}
.tracking-history {
  border-left: 2px solid var(--line);
  padding-left: 18px;
  margin: 20px 0;
}
/* SSMC header font update: brand wording, colours and other text unchanged. */
.store-nav .brand strong {
  font-size: 28px;
  line-height: 1.15;
}
@media (max-width: 600px) {
  .store-nav .brand strong {
    font-size: 22px;
  }
}

/* Keep the full company name together, with the legal suffix beneath. */
.store-nav .brand strong { display: block; white-space: nowrap; letter-spacing: 0.5px; }
.store-nav .brand small { display: block; font-size: 10px; letter-spacing: 2px; margin-top: 5px; }
@media (max-width: 600px) {
  .store-nav .brand small { font-size: 9px; letter-spacing: 1.5px; }
}

.otp-email {overflow-wrap:anywhere;}
.otp-input {font-size:26px;letter-spacing:0.3em;font-variant-numeric:tabular-nums;}

/* Optional catalogue applications and quantity pricing */
.sector-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.sector-options label { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:8px; min-width:0; }
.sector-options input[type=checkbox] { width:18px; height:18px; flex:0 0 18px; margin:0; }
.sector-options span { overflow-wrap:anywhere; }
.price-tier-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:12px; margin-bottom:12px; }
.price-tier-row label { min-width:0; }
.price-tier-row input { width:100%; min-width:0; }
.product-uses, .quantity-prices { margin:24px 0; }
.use-tags { display:flex; flex-wrap:wrap; gap:8px; }
.use-tags span { max-width:100%; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:8px; padding:7px 11px; font-size:.9rem; }
.spring-form-divider h3 small { font-size:.75em; font-weight:400; }
@media(max-width:600px) {
  .sector-options { grid-template-columns:1fr; }
  .price-tier-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--line); padding-bottom:12px; }
  .price-tier-row button { grid-column:1 / -1; justify-self:end; }
}

.product-use-summary { display:block; max-width:300px; white-space:normal; overflow-wrap:anywhere; }
.quantity-prices .table-wrap table { min-width:0; width:100%; table-layout:fixed; }
.quantity-prices th, .quantity-prices td { white-space:normal; overflow-wrap:anywhere; padding:12px 8px; }

/* Consistent two-line company branding in every surface. */
.brand > div { min-width:0; }
.brand strong { display:block; white-space:nowrap; letter-spacing:.5px; }
.brand small { display:block; white-space:nowrap; }
.sidebar .brand { gap:10px; margin-left:0; margin-right:0; }
.sidebar .brand-logo { width:40px; height:auto; flex-shrink:0; }
.sidebar .brand strong { font-size:17px; letter-spacing:0; }
.sidebar .brand small { font-size:8px; letter-spacing:1px; }
.company-footer .brand strong { font-size:clamp(21px,2.2vw,28px); }
@media(max-width:600px) {
  .mobile-brand .brand strong { font-size:21px; }
  .company-footer .brand { gap:12px; }
  .company-footer .brand-logo { width:48px; height:auto; }
}

/* Minimum order and packet details: shared light/dark theme colours. */
.product-price-order,.product-bottom{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.minimum-order{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid currentColor;border-radius:8px;font-size:12px;line-height:1.5;max-width:100%;overflow-wrap:anywhere}
.minimum-order small{font-size:11px;display:block}
.minimum-order-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}

/* Technical catalogue v1.13 */
.dimension-filter{min-width:0;margin:0;padding:10px;border:1px solid var(--line);border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dimension-filter legend{font-size:.85rem;padding:0 5px}.dimension-filter label{min-width:0}.dimension-filter input{width:100%;min-width:0}
.gallery-thumbnails{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:12px 0}.gallery-thumbnails button{padding:4px;flex-shrink:0}.gallery-thumbnails img{display:block;object-fit:contain}.gallery-thumbnails [aria-pressed="true"]{outline:2px solid #00a5d4}
.product-gallery{min-width:0}.product-gallery>.product-photo{width:100%;height:auto;max-height:420px;object-fit:contain}.technical-downloads{margin:16px 0;flex-wrap:wrap}.technical-downloads a{white-space:normal}.spring-specs dd{overflow-wrap:anywhere}.product-actions{flex-wrap:wrap}
@media(max-width:600px){.dimension-filter{grid-column:1/-1}.technical-downloads>*{width:100%;text-align:center}.product-gallery>.product-photo{max-height:280px}}
/* Customer experience: deliberately separate general and dimensional filters. */
#catalog-filters{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:end}
#catalog-filters>label{grid-column:span 3;order:0}
#catalog-filters>.dimension-filter{grid-column:span 4;order:1;min-width:0;min-height:116px;padding:12px;gap:12px}
#catalog-filters>button{grid-column:span 2;order:2;width:100%}
#catalog-filters label>span{font-size:13px;white-space:normal}
#catalog-filters input,#catalog-filters select{font-size:14px;height:46px}
#catalog-filters legend{font-size:14px;white-space:normal}
.whatsapp-chat{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:28px;background:#087e43;color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 4px 18px #0004;border:1px solid #ffffff55}
.whatsapp-chat:focus-visible{outline:3px solid #ffc900;outline-offset:3px}
.cart-page{padding-bottom:100px!important}.cart-page>button,.cart-page>a{margin:8px 8px 8px 0}.cart-page textarea{width:100%}
#enquiry-form [data-customer-spec]{min-width:0}#enquiry-form input[type=file]{max-width:100%;white-space:normal}#enquiry-form .form-grid{padding-bottom:8px}
@media(max-width:1100px){#catalog-filters{grid-template-columns:repeat(6,minmax(0,1fr))}#catalog-filters>label{grid-column:span 3}#catalog-filters>.dimension-filter{grid-column:span 2}#catalog-filters>button{grid-column:span 3}}
@media(max-width:800px){#catalog-filters>.dimension-filter{grid-column:span 6}}
@media(max-width:550px){#catalog-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px;gap:14px}#catalog-filters>label,#catalog-filters>.dimension-filter{grid-column:1/-1}#catalog-filters>button{grid-column:span 1}.whatsapp-chat{left:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:10px 14px;font-size:12px;min-height:44px}.enquiry-fab{right:10px;bottom:calc(10px + env(safe-area-inset-bottom));font-size:12px;padding:10px 14px}.store-footer{padding-bottom:90px}}

/* Customer contact stack: WhatsApp above the enquiry action. */
.whatsapp-chat{left:auto;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px)}
.whatsapp-chat[hidden]{display:none!important}
.enquiry-fab{bottom:calc(22px + env(safe-area-inset-bottom))}
@media(max-width:550px){.whatsapp-chat{left:auto;right:10px;bottom:calc(10px + env(safe-area-inset-bottom))}.enquiry-fab{bottom:calc(10px + env(safe-area-inset-bottom))}.store-footer{padding-bottom:150px}}

/* Square catalogue photos, without the pale padded frame. */
.commerce-store .product-card .product-photo{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:contain;padding:0;background:#091b30}

/* Compact cards: optional content takes only the space it actually needs. */
.commerce-store .product-grid{align-items:start}
.commerce-store .product-info{flex:0 1 auto;gap:10px}
.commerce-store .product-info h3{min-height:0;height:auto;margin:0}
.commerce-store .product-info > p,.commerce-store .product-info > p.product-material{min-height:0;height:auto;margin:0;display:block;overflow:visible;-webkit-line-clamp:unset}
.commerce-store .product-bottom{margin-top:4px;gap:10px}
.product-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.product-detail-media,.product-detail-summary{min-width:0}
#modal .product-detail-media .product-photo{width:100%;height:auto;max-height:none;aspect-ratio:1;object-fit:contain;padding:0;background:#091b30;border-radius:12px}
.product-detail-summary{display:flex;flex-direction:column;gap:14px;overflow-wrap:anywhere}
.product-detail-summary h2,.product-detail-summary h3,.product-detail-summary p{margin:0}
.product-detail-summary>.stock-label{align-self:flex-start}
.product-detail-summary .actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.product-detail-summary .actions>*{white-space:normal}
.product-detail-summary .technical-downloads{margin:0}
.product-detail-specifications{margin-top:24px}
@media(max-width:700px){.product-detail-layout{grid-template-columns:minmax(0,1fr);gap:20px}.product-detail-summary .actions>*{flex:1 1 180px;text-align:center}.product-detail-specifications{margin-top:20px}}

/* Matching customer contact actions in both themes. */
body .whatsapp-chat,body .enquiry-fab.primary{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:160px;min-height:50px;padding:12px 16px;border-radius:30px;border:1px solid var(--palette-62,#ffce18);background:linear-gradient(130deg,var(--palette-60,#ffe56b),var(--palette-61,#ffca00));color:var(--palette-63,#171909);font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;box-shadow:0 4px 17px var(--palette-64,#ffcd0012)}
body .whatsapp-chat:hover,body .enquiry-fab.primary:hover{filter:brightness(1.04);transform:none}
@media(max-width:550px){body .whatsapp-chat,body .enquiry-fab.primary{width:144px;min-height:46px;padding:10px 14px;font-size:12px}}

:root[data-theme="light"] .whatsapp-chat,:root[data-theme="light"] .enquiry-fab.primary{color:#102337}

/* Destructive admin actions remain separate from Edit / Enable. */
button.danger {color:#ff7777;border:1px solid currentColor;background:transparent}
:root[data-theme="light"] button.danger {color:#b42318}
button.danger:hover {background:#c6282818}

/* Compact commercial notes and independent availability / COD badges. */
.product-meta {flex-wrap:wrap;align-items:flex-start}
.availability-badges {display:inline-flex;flex-direction:column;align-items:stretch;gap:6px;max-width:260px;min-width:0}
.availability-badges .stock-label {box-sizing:border-box;display:block;width:100%;font-family:inherit;font-size:13px;font-weight:600;line-height:1.35;text-align:center;white-space:normal;overflow-wrap:anywhere;padding:6px 10px;border-radius:16px;border:1px solid transparent;color:#071b29}
.availability-badges .availability-ready_stock {background:#16A34A;border-color:#16A34A}
.availability-badges .availability-made_to_order {background:#009EE2;border-color:#009EE2}
.availability-badges .availability-lead_time_required {background:#D97706;border-color:#D97706}
.availability-badges .availability-on_confirmation {background:#7C3AED;border-color:#7C3AED;color:#fff}
.availability-badges .availability-temporarily_unavailable {background:#DC2626;border-color:#DC2626;color:#fff}
.availability-badges .availability-cod {background:#0F776E;border-color:#0F776E;color:#fff}
.product-detail-summary>.availability-badges {align-self:flex-start}
.product-info .product-price-notes,.product-detail-summary .product-price-notes,.product-load-note {font-size:12px!important;line-height:1.5!important;color:#b2c4d4;margin:0;min-height:0!important;font-weight:400}
.product-price-notes span {display:block}
.product-load-note {margin-top:18px;padding-top:12px;border-top:1px solid #365064}
:root[data-theme="light"] .product-price-notes,:root[data-theme="light"] .product-load-note {color:#465b70}
.availability-options {display:flex;flex-direction:column;gap:8px;min-width:0}
.availability-options .cod-checkbox {display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.4}
.cod-checkbox input {width:18px;height:18px;margin:0;accent-color:#0F776E;flex:0 0 auto}
.availability-options small {font-size:12px;line-height:1.4}
@media(max-width:550px){.availability-badges{max-width:100%}.product-meta{align-items:flex-start}.availability-badges .stock-label{font-size:13px}}
.floating-cart {position:fixed;left:22px;bottom:22px;z-index:80;display:inline-flex;gap:9px;align-items:center;padding:12px 16px;border-radius:30px;background:linear-gradient(130deg,#ffe56b,#ffca00);border:1px solid #ffce18;color:#171909;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;box-shadow:0 4px 17px #ffcd0012;max-width:calc(100vw - 190px)}
.floating-cart[hidden]{display:none!important}
.floating-cart-count {background:#102b3e;color:#fff;border-radius:20px;padding:3px 7px;min-width:24px;text-align:center;font-size:12px}
#customer-order-form h3{margin:12px 0 0;border-bottom:1px solid #365064;padding-bottom:10px}
#customer-order-form [hidden]{display:none!important}
#customer-order-form input[readonly]{opacity:.8}
#customer-order-form .form-error{white-space:normal}
@media(max-width:550px){.floating-cart{left:10px;bottom:calc(18px + env(safe-area-inset-bottom));padding:10px;gap:5px;font-size:12px;max-width:calc(100vw - 174px)}.floating-cart svg{width:20px;flex-shrink:0}}

/* Form clarity update: hidden type-specific fields must stay hidden in all themes. */
[hidden] { display: none !important; }
.field-status { display: inline-block; margin-left: .5rem; font-size: .7rem; font-weight: 500; opacity: .7; }
.field-status[data-required="true"] { opacity: 1; font-weight: 700; }
.customer-spec-section { min-width: 0; }
.customer-spec-section > .form-grid { margin-top: 1rem; }
.optional-details { margin-top: 1rem; border: 1px solid var(--border, #89939f55); border-radius: 10px; padding: 1rem; }
.optional-details > summary { cursor: pointer; font-weight: 600; }
.optional-details[open] > summary { margin-bottom: 1rem; }
.optional-details .form-grid > div { min-width: 0; }

.direct-enquiry-page { max-width: 960px; margin-inline: auto; }
.direct-enquiry-page h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-block: .6rem; }
.direct-enquiry-panel { margin-top: 1.5rem; padding: clamp(1rem, 4vw, 2rem); }
.direct-enquiry-panel .form-error { margin-block: 1rem; }
.direct-enquiry-panel button[type="submit"] { margin-top: 1rem; }