/* ==========================================================================
   shop.css — configurator, basket, checkout.
   --------------------------------------------------------------------------
   Loaded only by the three shop pages. It lives in its own file rather than in
   pages.css because those pages belong to other workstreams and a shared file
   is where parallel work collides.

   DESIGN.md §5.2: the UI is restrained and the composition is expressive.
   These are controls, prices, forms and tables — the four places the system
   explicitly asks to be quiet — so there is no ornament here at all. The
   expression on these pages is the hero above them and the rhythm of the
   bands, not the input borders.

   No gold on the light canvas anywhere below (non-negotiable 17): --accent-text
   is the only accent used on --canvas, and it is used on labels and rules, not
   as decoration. Gold stays far under 5% of the viewport (18).

   All six states are declared on every interactive control (25): default,
   hover, active, focus-visible, disabled, loading. Focus is never removed —
   it is replaced with a stronger mark (26).
   ========================================================================== */

/* --- layout -------------------------------------------------------------- */

.shp-split {
  display: grid;
  gap: var(--s7);
  align-items: start;
}

@media (min-width: 60rem) {
  .shp-split {
    /* Two unequal columns. Never three equal ones (non-negotiable 19). */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s8);
  }
}

.shp-aside {
  background: var(--canvas-sink);
  padding: var(--s6);
  border-top: 2px solid var(--accent-line);
}

/* --- messages ------------------------------------------------------------ */

.shp-alert {
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--accent-line);
  background: var(--paper);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.shp-alert--error {
  border-left-color: var(--danger);
}

.shp-alert--ok {
  border-left-color: var(--success);
}

.shp-alert__t {
  display: block;
  margin: 0 0 var(--s1);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- forms --------------------------------------------------------------- */

.shp-group {
  margin: 0 0 var(--s6);
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s5);
}

.shp-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.shp-legend {
  padding: 0;
  margin: 0 0 var(--s2);
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.shp-hint {
  margin: 0 0 var(--s4);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 56ch;
}

.shp-fields {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 40rem) {
  .shp-fields--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shp-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.shp-label {
  font-size: var(--t-sm);
  font-weight: 500;
}

.shp-in,
.shp-select,
.shp-area {
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: var(--t-body);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.shp-area {
  min-height: 7rem;
  resize: vertical;
}

.shp-in:hover,
.shp-select:hover,
.shp-area:hover {
  border-color: var(--text);
}

.shp-in:focus-visible,
.shp-select:focus-visible,
.shp-area:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
  border-color: var(--text);
}

.shp-in:active,
.shp-select:active {
  border-color: var(--text);
}

.shp-in:disabled,
.shp-select:disabled,
.shp-area:disabled {
  background: var(--canvas-sink);
  color: var(--muted);
  cursor: not-allowed;
}

.shp-in[aria-invalid="true"],
.shp-select[aria-invalid="true"],
.shp-area[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

.shp-err {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--danger);
}

.shp-unit {
  font-size: var(--t-sm);
  color: var(--muted);
}

/* --- choices (radio, checkbox) ------------------------------------------- */

.shp-choices {
  display: grid;
  gap: var(--s2);
}

.shp-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s4);
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}

.shp-choice:hover {
  border-color: var(--line-strong);
}

.shp-choice:active {
  background: var(--canvas-sink);
}

.shp-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

.shp-choice:has(input:checked) {
  border-color: var(--text);
  border-left-width: 3px;
}

.shp-choice:has(input:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}

.shp-choice__t {
  font-size: var(--t-body);
}

.shp-choice__d {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-sm);
  color: var(--muted);
}

/* --- basket lines -------------------------------------------------------- */

.shp-lines {
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
}

.shp-line {
  display: grid;
  gap: var(--s4);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
}

.shp-line:last-child {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 48rem) {
  .shp-line {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.shp-line__t {
  margin: 0 0 var(--s1);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.15;
}

.shp-line__meta {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--muted);
}

.shp-line__money {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48rem) {
  .shp-line__money {
    text-align: right;
    min-width: 12rem;
  }
}

.shp-line__amount {
  margin: 0;
  font-size: var(--t-lg);
}

.shp-line__unit {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
  color: var(--muted);
}

.shp-line__problem {
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--danger);
  background: var(--paper);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.shp-qty {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  margin-top: var(--s4);
}

.shp-qty .shp-in {
  width: 5.5rem;
}

/* --- totals -------------------------------------------------------------- */

.shp-totals {
  margin: 0 0 var(--s5);
  font-variant-numeric: tabular-nums;
}

.shp-total {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}

.shp-total--grand {
  border-bottom: 0;
  border-top: 2px solid var(--text);
  margin-top: var(--s2);
  padding-top: var(--s4);
  font-size: var(--t-lg);
}

.shp-total__note {
  display: block;
  font-size: var(--t-xs);
  color: var(--muted);
  font-variant-numeric: normal;
}

.shp-fine {
  margin: var(--s4) 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* --- summary list on checkout -------------------------------------------- */

.shp-summary {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
}

.shp-summary li {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}

.shp-summary__d {
  display: block;
  color: var(--muted);
  font-size: var(--t-xs);
  margin-top: 2px;
}

/* --- rate note on the configurator --------------------------------------- */

.shp-rate {
  margin: 0 0 var(--s6);
  padding: var(--s5);
  background: var(--canvas-sink);
}

.shp-rate__amount {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: 1;
}

.shp-rate__unit {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-sm);
  color: var(--muted);
}

.shp-rate__note {
  margin: var(--s4) 0 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  max-width: 52ch;
}