/* ==========================================================================
   Knight Adjustable Stock — product page + configurator wizard
   Loaded after base.css. Behavior lives in js/adjustable-stock.js
   ========================================================================== */

body { padding-bottom: 96px; } /* clears the fixed price bar */

/* --- Hero ---------------------------------------------------------------- */
.stock-hero { border-bottom: 1px solid var(--color-divider); }

.stock-hero__grid {
  padding-top: 64px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-7);
  align-items: center;
}

.stock-hero__title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.03;
  margin: 14px 0 20px;
}

.stock-hero__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 0 28px;
}

.stock-hero__figure { padding: 0; }
.stock-hero__figure img { width: 100%; display: block; }

.stock-hero__banner { display: none; }

/* --- Configurator shell -------------------------------------------------- */
.config {
  padding-top: var(--space-7);
  padding-bottom: 40px;
}

/* Desktop step tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-line);
  margin-bottom: 44px;
}

.tab {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  padding: 14px 18px;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-right: 1px solid var(--color-line);
  font-family: var(--font-body);
}
.tab:last-child { border-right: 0; }
.tab__num {
  font-family: var(--font-heading);
  font-size: 13px;
  opacity: 0.7;
}
.tab__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tab.is-active {
  background: var(--color-accent);
  color: var(--color-bg);
}
.tab.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile step strip */
.strip {
  display: none;
  position: sticky;
  top: 60px;
  z-index: 45;
  background: rgba(13, 23, 18, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
  padding: 14px 20px 12px;
}

.strip__row {
  display: flex;
  align-items: center;
}

.strip__connector {
  flex: 1;
  height: 1px;
  background: rgba(244, 241, 228, 0.18);
}
.strip__connector.is-passed { background: var(--color-accent); }

.strip__node {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(244, 241, 228, 0.18);
  color: #5d6560;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.strip__node.is-reachable {
  color: var(--color-text-dim);
  border-color: rgba(244, 241, 228, 0.3);
}
.strip__node.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.strip__name {
  text-align: center;
  margin-top: 9px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* --- Step panels --------------------------------------------------------- */
.step-panel { display: none; }
.step-panel.is-active { display: block; }

.step-panel__title {
  font-size: 28px;
  margin: 0 0 var(--space-2);
}

.step-panel__sub {
  font-size: 14.5px;
  color: var(--color-text-dim);
  margin: 0 0 32px;
  line-height: 1.55;
}

/* --- Step 1: price bands and models ------------------------------------- */
.bands {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.band { border-color: rgba(244, 241, 228, 0.18); }
.band.is-selected {
  border-color: var(--color-accent);
  background: rgba(240, 196, 25, 0.07);
}

.band__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: stretch;
}

.band__price {
  background: var(--color-surface);
  border-right: 1px solid var(--color-line);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.band__price-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
}

.band__price-currency {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.band__price-gst {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 10px;
}

.band__models { padding: 24px 26px; }

.band__models-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.band__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 9px 15px;
  white-space: nowrap;
  line-height: 1.2;
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid rgba(244, 241, 228, 0.25);
}
.chip:hover { border-color: var(--color-accent); color: var(--color-text); }
.chip.is-selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* --- Option cards (fit, timber, pad) ------------------------------------ */
.option-card {
  position: relative;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding: 24px 26px;
  font-family: var(--font-body);
  background: rgba(22, 36, 28, 0.55);
  border: 1px solid rgba(244, 241, 228, 0.18);
  color: var(--color-text);
}
.option-card.is-selected {
  background: rgba(240, 196, 25, 0.10);
  border-color: var(--color-accent);
}
.option-card.is-dimmed { opacity: 0.45; }

.option-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

.option-card__title {
  font-size: 20px;
  margin: 0;
}

.option-card__price {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-accent);
  white-space: nowrap;
}

.option-card__note {
  font-size: 14px;
  color: var(--color-text-dim);
  margin: 10px 0 20px;
}
/* The note's lower margin separates it from whatever the card shows beneath it, so a
   card that shows nothing beneath it wants none. The export said this with a modifier
   class the step had to remember to apply; saying it structurally means a card gains
   and loses the spacing as its own content changes. */
.option-card__note:last-child { margin-bottom: 0; }

.option-card__figure {
  border: 1px solid rgba(244, 241, 228, 0.18);
}
.option-card__figure img { width: 100%; display: block; }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
}

/* --- What an option asks for --------------------------------------------
   The export styled these as the two questions it happened to ask — a row of size
   buttons, and the pad field. They are now whatever an option declares, so the classes
   describe the shape of a question rather than the question being asked.

   The card and its questions are one grid or flex item, so an option's questions sit
   beneath that option in every layout rather than in the next column along. */
.option {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A question is on screen only while the option asking it is chosen. */
.option-inputs {
  display: none;
  border: 1px solid rgba(240, 196, 25, 0.4);
  background: rgba(240, 196, 25, 0.06);
  padding: 20px 22px;
}
.option-inputs.is-visible {
  display: grid;
  gap: 18px;
}

/* Caption for a group of choices, and label for a field: the same word above the same
   kind of gap, so a step that asks for both does not look like it asks in two voices. */
.option-input__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.option-input__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Sized by its own content past a floor, so that a two-letter choice and a five-letter
   one are both legible without the vocabulary being known here. */
.option-input__choice {
  min-width: 56px;
  height: 46px;
  padding: 0 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid rgba(244, 241, 228, 0.28);
}
.option-input__choice.is-selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.option-input__field {
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
  background: rgba(13, 23, 18, 0.6);
  border: 1px solid rgba(244, 241, 228, 0.25);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 13px;
}

/* Nothing can be answered before a gun model is chosen. The cards say so with a class
   the wizard adds; a control can say it from the disabled state it is already in. */
.option-input__choice:disabled,
.option-input__field:disabled {
  opacity: 0.45;
  cursor: default;
}

.option-input__hint {
  font-size: 13px;
  color: var(--color-text-dim);
  margin: 12px 0 0;
}

.mech {
  border: 1px solid var(--color-line);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
}
.mech img {
  width: 100%;
  display: block;
  border: 1px solid rgba(244, 241, 228, 0.18);
}
.mech p {
  font-size: 13.5px;
  color: var(--color-text-dim);
  margin: 0;
  line-height: 1.6;
}

/* --- Step 5: review ------------------------------------------------------ */
.review {
  border: 1px solid rgba(244, 241, 228, 0.18);
  max-width: 820px;
}

.review__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(244, 241, 228, 0.1);
}

.review__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 5px;
}

.review__value {
  font-size: 15.5px;
  margin-bottom: 7px;
}

.review__change {
  background: none;
  border: none;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.review__price {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  text-align: right;
  white-space: nowrap;
}

.review__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 24px;
  background: rgba(240, 196, 25, 0.07);
}

.review__total-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.review__total-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 34px;
  color: var(--color-accent);
}

.add-to-cart {
  margin-top: 28px;
  padding: 15px 34px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
  cursor: pointer;
}
.add-to-cart:hover { background: var(--color-accent-600); }

/* --- Fixed price bar ----------------------------------------------------- */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(22, 36, 28, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(244, 241, 228, 0.18);
}

.bar__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.bar__caption {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.bar__total {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
}
.bar__gst {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  text-transform: uppercase;
}

.bar__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.bar__back,
.bar__next {
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}

.bar__back {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(244, 241, 228, 0.4);
}
.bar__back:disabled {
  color: #5a6159;
  border-color: rgba(244, 241, 228, 0.15);
  cursor: not-allowed;
}

.bar__next {
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid transparent;
}
.bar__next:disabled {
  background: rgba(240, 196, 25, 0.25);
  color: var(--color-text-dim);
  cursor: not-allowed;
}

.bar__hint {
  display: none;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.bar__hint.is-visible { display: block; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 600px) {
  body { padding-bottom: 150px; }

  .stock-hero__banner {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid var(--color-divider);
  }
  .stock-hero__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .stock-hero__figure { display: none; }
  .stock-hero__grid { padding: 28px 0 34px; gap: 28px; }

  .tabs { display: none; }
  .strip { display: block; }

  .config { padding: 30px 0 36px; }
  .step-panel__title { font-size: 24px; }
  .step-panel__sub { margin-bottom: 22px; }

  .band__inner { display: block; }
  .band__price {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
    padding: 16px 18px;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .band__price-currency,
  .band__price-gst { margin-top: 0; }
  .band__models { padding: 18px; }
  .chip { padding: 11px 15px; min-height: 44px; font-size: 14px; }

  .option-card { padding: 18px; }
  .two-col,
  .three-col { display: flex; flex-direction: column; gap: 16px; }
  .option-input__choices { flex-direction: column; }
  .option-input__choice { width: 100%; }

  .option-card__head { flex-direction: column; gap: 4px; }

  .mech {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }
  .mech img { max-height: 150px; object-fit: cover; }

  .review__row { padding: 16px 18px; gap: 14px; }
  .review__total { padding: 18px; }

  .bar__inner {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 11px 20px 16px;
  }
  .bar__price-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  .bar__total { font-size: 24px; }
  .bar__gst { display: none; }
  .bar__actions > * { flex: 1; min-height: 48px; }
  .add-to-cart { width: 100%; }
}