/* Custom configurator, phase 1. 2026-09-21 16:45 CEST.
   Loaded only by custom.html, before theme.css. Reuses the shared tokens;
   all selectors are scoped to this page. No shared component overrides. */

.custom-page .custom-intro {
  max-width: var(--content-max);
  margin-top: var(--space-5);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.custom-page .custom-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.custom-page .custom-selections { min-width: 0; }

.custom-page .custom-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: start;
}

.custom-page .custom-column { min-width: 0; }

.custom-page .page-head { padding-block: var(--space-7) var(--space-5); }

.custom-page .custom-guidance,
.custom-page .custom-help,
.custom-page .custom-progress {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.custom-page .custom-guidance { margin-bottom: var(--space-5); }

.custom-page .custom-group {
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--space-5);
  border: 0;
}

.custom-page .custom-group + .custom-group,
.custom-page .custom-group + .custom-handle-saya { margin-top: var(--space-2); }

.custom-page .custom-group legend,
.custom-page .custom-notes h2 {
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-2);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.custom-page .custom-step {
  display: inline-block;
  margin-right: var(--space-3);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-wide);
  vertical-align: middle;
}

.custom-page .custom-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-6);
  row-gap: 0;
}

.custom-page .custom-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: baseline;
  gap: var(--space-3);
  min-height: calc(var(--space-7) - var(--space-1));
  padding-block: var(--space-2);
  cursor: pointer;
}

.custom-page .custom-option:hover .custom-option-name { color: var(--fg-strong); }

.custom-page .custom-option:has(input:checked) .custom-option-name {
  font-weight: var(--weight-semi);
}

.custom-page .custom-option:has(input:focus-visible) {
  outline: calc(var(--border-w) * 2) solid var(--focus-ring);
  outline-offset: var(--space-1);
}

.custom-page .custom-option:has(input:disabled) {
  cursor: not-allowed;
}

.custom-page .custom-option input {
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  accent-color: var(--fg-strong);
  cursor: inherit;
}

.custom-page .custom-option-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.custom-page .custom-option-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.custom-page .custom-option-price,
.custom-page .custom-option-help {
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.custom-page .custom-option-price {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.custom-page .custom-option-help {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
}

.custom-page .custom-validation {
  margin: 0;
  color: var(--fg-strong);
  font-size: var(--text-sm);
}

.custom-page .custom-validation:not(:empty) {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: calc(var(--border-w) * 2) solid var(--fg-strong);
}

.custom-page .custom-notes { margin-top: var(--space-4); }
.custom-page .custom-notes h2 { margin-bottom: var(--space-3); }
.custom-page .custom-optional {
  margin-left: var(--space-2);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}
/* Färgen på fälten kommer från --field-bg (tokens.css), inte härifrån. Här bara höjden. */
.custom-page .custom-notes .textarea {
  min-height: var(--space-9);
}

.custom-page .custom-summary {
  min-width: 0;
  padding: var(--space-4) 0 0;
  border-top: calc(var(--border-w) * 2) solid var(--fg-strong);
}

.custom-page .custom-summary h2 {
  font-size: var(--text-2);
  line-height: var(--leading-snug);
}
.custom-page .custom-summary .custom-help,
.custom-page .custom-summary .custom-progress { font-size: var(--text-xs); }
.custom-page .custom-progress { margin: var(--space-1) 0 var(--space-3); }
/* One line per selection, label left. The dl is the grid and the row divs
   are dissolved, so every label shares one column width. */
.custom-page .custom-breakdown {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: baseline;
  margin: 0;
}

.custom-page .custom-breakdown > div { display: contents; }

.custom-page .custom-breakdown dt,
.custom-page .custom-breakdown dd {
  padding-block: var(--space-1);
}

.custom-page .custom-breakdown dt {
  margin-bottom: 0;
  color: var(--fg-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.custom-page .custom-breakdown dd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
}

.custom-page .custom-breakdown dd > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.custom-page .custom-line-price {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.custom-page .custom-total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--fg-strong);
}

.custom-page .custom-total-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.custom-page .custom-currency { color: var(--fg-muted); font-size: var(--text-xs); }

.custom-page .custom-total-value {
  display: block;
  margin-block: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Antal lediga platser. Samma versaletikett som fältrubrikerna, så att det
   läses som en uppgift om läget och inte som en rubrik. */
.custom-page .custom-slots {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Kontaktuppgifterna ligger som anteckningsrutan: egen ruta under valen,
   två fält bredvid varandra när det får plats. */
.custom-page .custom-contact { margin-top: var(--space-6); }
.custom-page .custom-contact h2 {
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-2);
  font-weight: var(--weight-semi);
}
.custom-page .custom-contact__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.custom-page .custom-reservation {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--line-strong);
}

.custom-page .custom-deposit { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.custom-page .custom-deposit strong { white-space: nowrap; font-weight: var(--weight-semi); }

/* Villkoren är en lista sedan 2026-09-23, hämtade ur dagens produkttext.
   Punkterna ska gå att läsa var för sig innan kunden betalar. */
.custom-page .custom-terms {
  margin-block: var(--space-3);
  padding-left: var(--space-4);
  color: var(--fg-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.custom-page .custom-terms li { margin-bottom: var(--space-1); }

.custom-page .custom-reserve:disabled {
  background: var(--bg-fill);
  border-color: var(--line-strong);
  color: var(--fg-default);
  cursor: not-allowed;
}

.custom-page .custom-reservation-help { margin-top: var(--space-2); }

/* Intyget om minst 18 år ligger mellan villkoren och knappen, med luft åt båda håll
   (Peter 2026-10-01: stod för nära knappen). */
.custom-page .custom-age { margin: var(--space-4) 0 var(--space-4); }
.custom-page noscript .notice { margin-bottom: var(--space-5); }

@media (min-width: 640px) {
  .custom-page .custom-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-page .custom-column { display: contents; }
  .custom-page #custom-knife { grid-column: 1; grid-row: 1; }
  .custom-page #custom-material { grid-column: 2; grid-row: 1; }
  .custom-page #custom-steel { grid-column: 1; grid-row: 2; }
  .custom-page .custom-handle-saya { grid-column: 2; grid-row: 2; min-width: 0; }
}

@media (min-width: 900px) {
  /* Match the summary's top padding and border so all three headings align. */
  .custom-page .custom-fields {
    padding-top: calc(var(--space-4) + var(--border-w) * 2);
  }

  .custom-page .custom-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}