:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1b2936;
  background: #f4f7f9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem max(1.5rem, calc((100vw - 1100px) / 2));
  background: #113753;
  color: #fff;
}

.brand {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: .01em;
  text-decoration: none;
  color: #fff;
}

.brand span { color: #7bd5e5; font-size: .8rem; }
.site-header nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-header nav a { color: #d5e5ed; text-decoration: none; }
.site-header nav .active { color: #fff; border-bottom: 2px solid #7bd5e5; }

.container { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.narrow { max-width: 860px; }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; color: #187589; font-size: .78rem; font-weight: 750; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: .35rem 0 1rem; line-height: 1.1; }
h2 { font-size: 1.2rem; }
.intro { max-width: 700px; color: #506171; line-height: 1.6; margin-bottom: 2rem; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.product-card, .panel { background: #fff; border: 1px solid #dce5eb; border-radius: 14px; box-shadow: 0 7px 22px #16324a0a; }
.product-card { padding: 1.4rem; color: inherit; text-decoration: none; min-height: 210px; }
.product-card.available:hover { border-color: #2490a2; box-shadow: 0 10px 28px #16324a19; }
.product-card p { color: #617181; line-height: 1.5; }
.status { color: #087c66; font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.status.muted { color: #788895; }
.arrow { color: #087e95; font-weight: 700; }

.panel { padding: 1.5rem; margin-top: 1rem; }
.panel h2 { margin: 1.6rem 0 1rem; border-top: 1px solid #e7edf1; padding-top: 1.5rem; }
.panel h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
label { display: block; font-size: .9rem; font-weight: 650; margin-bottom: 1rem; }
input, select { display: block; width: 100%; margin-top: .4rem; padding: .75rem; border: 1px solid #becbd4; border-radius: 8px; background: #fff; color: #1b2936; font: inherit; }
input:focus, select:focus { outline: 2px solid #54b2c4; outline-offset: 1px; }
input:disabled, select:disabled { background: #eef2f5; color: #81909c; }
.hint { font-size: .85rem; color: #647785; }
button { background: #087e95; color: #fff; border: 0; border-radius: 8px; padding: .85rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #066a80; }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { color: #24536a; background: #e9f1f5; }
button.secondary:hover { background: #dcebf1; }
.button-link { display: inline-block; padding: .85rem 1.25rem; border-radius: 8px; background: #087e95; color: #fff; text-decoration: none; font-weight: 700; }
.button-link:hover { background: #066a80; }
.button-link.secondary { color: #24536a; background: #e9f1f5; }
.button-link.secondary:hover { background: #dcebf1; }
.cart-item { border-top: 1px solid #dce5eb; padding: 1rem 0; }
.cart-item .button-link { margin-right: .6rem; }
.cart-item h3 { margin: 0 0 .35rem; }
.cart-item p { margin: 0 0 .7rem; color: #617181; }
.cart-item details { margin: .4rem 0 1rem; }
.cart-item summary { cursor: pointer; color: #087e95; font-weight: 700; }
.cart-item .review { margin-top: .8rem; font-size: .9rem; }
.message { min-height: 1.2rem; color: #a12e36; }

.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.stepper.five { grid-template-columns: repeat(5, 1fr); }
.stepper.six { grid-template-columns: repeat(6, 1fr); }
.stepper.seven { grid-template-columns: repeat(7, 1fr); }
.stepper li { padding: 0; color: #667986; background: #e8eef2; border-radius: 8px; font-size: .85rem; text-align: center; }
.stepper li.active { color: #fff; background: #087e95; font-weight: 700; }
.stepper li.done { color: #086b5b; background: #dff2ec; }
.stepper .step-link { display: block; width: 100%; min-height: 3rem; padding: .75rem; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.stepper .step-link:hover { background: transparent; }
.stepper .step-link:disabled { opacity: 1; cursor: default; }
.stepper li.done .step-link:hover, .stepper li.invalid .step-link:hover { text-decoration: underline; }
.stepper li.invalid { color: #851b27; background: #ffe4e6; box-shadow: 0 0 0 2px #d7394a, 0 0 14px #dd455a99; animation: invalid-glow 1.7s ease-in-out infinite alternate; }
@keyframes invalid-glow { to { box-shadow: 0 0 0 2px #d7394a, 0 0 23px #dd455acc; } }
@media (prefers-reduced-motion: reduce) { .stepper li.invalid { animation: none; } }
.step-actions { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; }
.review { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: .65rem 1rem; }
.review dt { color: #617181; }
.review dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.accessory-field { border: 1px solid #dce5eb; border-radius: 8px; padding: 1rem; margin: 0 0 1rem; }
.accessory-field legend { font-weight: 650; padding: 0 .3rem; }
.accessory-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 6rem; gap: .75rem; align-items: center; margin: .65rem 0; }
.accessory-row input[type="checkbox"], .accessory-row input[type="radio"] { width: auto; margin: 0; }
.accessory-row label { margin: 0; }
.accessory-row input[type="number"] { margin: 0; }
.check-row { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.check-row input[type="checkbox"] { width: auto; margin: 0; }
.choice-field { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.choice-field legend { font-size: .9rem; font-weight: 650; margin-bottom: .5rem; }
.radio-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.choice-card { display: flex; align-items: center; gap: .65rem; min-height: 3.3rem; padding: .65rem .8rem; margin: 0; border: 1px solid #becbd4; border-radius: 9px; cursor: pointer; font-weight: 550; }
.choice-card:has(input:checked) { border-color: #087e95; background: #e8f6f8; box-shadow: inset 0 0 0 1px #087e95; }
.choice-card:focus-within { outline: 2px solid #54b2c4; outline-offset: 2px; }
.choice-card input[type="radio"] { width: auto; margin: 0; flex: none; accent-color: #087e95; }
.choice-text { overflow-wrap: anywhere; }
.color-swatch { display: inline-block; width: 2rem; height: 2rem; flex: none; border-radius: 6px; border: 1px solid #84929b; box-shadow: inset 0 0 0 1px #ffffff55; }
.ral-preview { display: flex; align-items: center; gap: .6rem; min-height: 2rem; margin-top: .6rem; font-weight: 500; }
textarea { display: block; width: 100%; margin-top: .4rem; padding: .75rem; border: 1px solid #becbd4; border-radius: 8px; font: inherit; }

@media (max-width: 600px) {
  .fields { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
  .stepper.five { grid-template-columns: repeat(2, 1fr); }
  .stepper.six { grid-template-columns: repeat(2, 1fr); }
  .stepper.seven { grid-template-columns: repeat(2, 1fr); }
  .site-header { align-items: flex-start; flex-direction: column; }
  .container { padding-top: 2rem; }
}