/* The configurator on the front of the site.
 *
 * The modal reads the theme's own lightbox variables rather than copies of them -
 * --ds-lb-overlay, --ds-lb-opacity, --ds-lb-blur, --ds-lb-radius, --ds-lb-speed
 * and the close mark's colours. So the scrim, the corner, the blur and the speed
 * are whatever Theme Settings says, and this follows a change made there without
 * anybody editing anything here.
 *
 * The theme's lightbox itself cannot be used: it is built for an image, with pan
 * and zoom bound to that image, and it exposes no way to open it with anything
 * else. Extending it would mean editing the theme, which is not this plugin's to
 * do. So this is a second modal that looks like the first one on purpose.
 */

/* ---- the trigger ---- */

.dsc-open {
  cursor: pointer;
}

.dsc-none {
  padding: 12px 16px;
  border-left: 3px solid #b22222;
  background: rgba(178, 34, 34, 0.08);
}

/* ---- the modal ---- */

.dsc-modal {
  position: fixed;
  inset: 0;
  z-index: 160000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dsc-pad, 24px);
}

.dsc-modal[hidden] {
  display: none;
}

.dsc-modal-back {
  position: absolute;
  inset: 0;
  background: var(--ds-lb-overlay, rgba(0, 0, 0, 0.82));
  opacity: var(--ds-lb-opacity, 1);
  backdrop-filter: blur(var(--ds-lb-blur, 0));
  -webkit-backdrop-filter: blur(var(--ds-lb-blur, 0));
}

.dsc-modal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--dsc-modal-w, 1280px);
  /* svh, not vh: on a phone vh is the viewport with the browser chrome hidden,
     so a modal sized in vh is taller than the screen until somebody scrolls. */
  max-height: calc(100svh - (var(--dsc-pad, 24px) * 2));
  /* Clamped, because the lightbox's radius is a percentage.
     Theme Settings has it at 50%, which is a circle on the small square an image
     viewer puts it on and an ellipse on a modal this size - it clipped the
     corners off the picture and the rail both. min() against a length resolves a
     percentage to whichever is smaller, so a radius set for an image still
     reaches this and cannot turn it into an oval. */
  border-radius: min(var(--ds-lb-radius, 4px), 20px);
  background: var(--ds-surface, #1b1b1b);
  color: var(--ds-text, #f5f5f5);
  overflow: hidden;
  transition: transform var(--ds-lb-speed, 0.25s) ease, opacity var(--ds-lb-speed, 0.25s) ease;
}

/* ---- the close, which takes the lightbox's own settings ---- */

/* The head: what this is, and the way out of it.
 *
 * The close was a button floating over the stage, so it sat on top of whatever
 * the door happened to be and the modal had nothing at the top saying what it
 * was. A bar costs one row and answers both. */
.dsc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--ds-line, rgba(255, 255, 255, 0.12));
}

.dsc-head-name {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text, #ffffff);
}

.dsc-x {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: var(--ds-lb-icon-bw, 0) solid var(--ds-lb-icon-edge, transparent);
  border-radius: 50%;
  background: var(--ds-lb-icon-bg, rgba(0, 0, 0, 0.4));
  color: var(--ds-lb-icon, var(--ds-lb-ink, #ffffff));
  cursor: pointer;
}

.dsc-x:hover,
.dsc-x:focus-visible {
  border-color: var(--ds-lb-icon-edge-h, var(--ds-lb-icon-edge, transparent));
  background: var(--ds-lb-icon-bg-h, var(--ds-lb-icon-bg, rgba(0, 0, 0, 0.6)));
  color: var(--ds-lb-ink-h, var(--ds-lb-ink, #ffffff));
}

.dsc-x svg {
  width: 18px;
  height: 18px;
}

/* The page behind does not scroll while a modal is over it, and does not shift
   when the bar goes: scrollbar-gutter holds the space the bar was in. */
body.dsc-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ---- the app: picture and rail ---- */

.dsc-app {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.dsc-inline .dsc-app {
  min-height: 520px;
}

.dsc-app[data-dsc-rail="left"] {
  flex-direction: row-reverse;
}

.dsc-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--ds-surface-2, #121212);
}

/* The houses, under the picture and across the main column.
 *
 * They were six thumbnails in a 349px rail with 931px sitting empty behind
 * them, which is too small to tell one house from another - and telling them
 * apart is the only thing anybody is doing on that step. Here they are three
 * times the size, and the rail keeps the one control that is a decision rather
 * than a choice of picture. */
/* They share the column rather than scrolling along it.
 *
 * Fixed width tiles meant a scrollbar the moment there were more than the
 * column could hold, so the last house sat off the edge and the one control
 * nobody thinks to look for - their own photograph - was the one hidden. There
 * are seven at most: the door on its own, the houses, and the upload. Sharing
 * the width fits them all and makes each one bigger than it was. */
.dsc-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 12px 0 0;
}

.dsc-strip[hidden] {
  display: none;
}

.dsc-shot {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 84px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}

.dsc-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dsc-shot.is-on {
  border-color: var(--ds-accent, #bdfe02);
}

.dsc-shot-none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

/* Their own photograph, as the last tile. Dashed for the same reason the button
   was: it takes something from outside rather than doing something. */
.dsc-shot-own {
  display: block;
  border-style: dashed;
  border-color: var(--ds-line, rgba(255, 255, 255, 0.35));
  cursor: pointer;
}

.dsc-shot-own.is-on {
  border-style: solid;
  border-color: var(--ds-accent, #bdfe02);
}

.dsc-own-hint {
  flex: 0 0 auto;
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  opacity: 0.7;
}

/* Same 5px bar as the rail, written out literally for the same reason. */
.dsc-strip::-webkit-scrollbar {
  height: 5px;
}

.dsc-strip::-webkit-scrollbar-track {
  background: transparent;
}

.dsc-strip::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}

/* A canvas is a replaced element with an intrinsic 300x150, so inset:0 does not
   stretch it - with width and height auto the insets are over-constrained and
   the browser keeps 300x150 and pins it top left. Sized here, and sized again in
   script for the bitmap behind it.

   height:100% was what clipped the strip of houses off the bottom of the column:
   in a column the canvas claimed the stage's whole height and left the strip
   hanging past the modal's edge. It takes what is left after the strip instead,
   and min-height:0 is what lets a flex item shrink below its content at all. */
.dsc-canvas {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

/* Waiting on the supplier.
   Only the first time a combination is asked for - after that it is a local
   file. The door that is already there stays, dimmed, rather than being cleared:
   the visitor is changing one thing about a door they can see, and taking the
   whole picture away to tell them so is the wrong trade. */
.dsc-app.is-busy .dsc-canvas {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.dsc-app.is-busy .dsc-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--ds-accent, #bdfe02);
  border-right-color: transparent;
  border-radius: 50%;
  animation: dsc-spin 0.7s linear infinite;
}

@keyframes dsc-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dsc-app.is-busy .dsc-stage::after {
    animation-duration: 2.4s;
  }
}

/* A combination the supplier does not make.
   Unlike the busy state above, the door does not stay. The one on the canvas is
   the previous combination, and leaving it there while the tiles and the price
   have moved on is the picture telling the visitor the opposite of what they
   just chose. The canvas is cleared and this stands in its place. */
.dsc-gap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 24em;
  margin: 0;
  padding: 0 1.5em;
  text-align: center;
  text-wrap: balance;
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--ds-text, inherit);
  opacity: 0.75;
  pointer-events: none;
}

/* Built once and kept, so the state class is what decides whether it is seen. */
.dsc-app:not(.is-unavailable) .dsc-gap {
  display: none;
}

/* No spinner over the message: the fetch has finished and the answer was
   nothing, so there is nothing still coming. */
.dsc-app.is-unavailable.is-busy .dsc-stage::after {
  display: none;
}

/* Wider than it was. Six steps at 10px uppercase in 340px left no air between
   them - they read as one run of letters rather than six words. */
.dsc-rail {
  flex: 0 0 392px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--ds-line, rgba(255, 255, 255, 0.12));
}

.dsc-app[data-dsc-rail="left"] .dsc-rail {
  border-left: 0;
  border-right: 1px solid var(--ds-line, rgba(255, 255, 255, 0.12));
}

/* The steps start at the top of the column.
   The 44px here was clearing the close button, which used to float over this
   corner. It is in the head now, so the gap was holding nothing. */
.dsc-rail-in {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The rail's scrollbar: 5px, and the same dark as the panel it is on.
 *
 * Two things about scrollbars that have cost this suite time before, and both
 * apply here:
 *
 * Custom properties do not resolve inside ::-webkit-scrollbar. var(--ds-surface)
 * in here is simply dropped, so the figures are written out literally even
 * though every other colour in this file reads a token.
 *
 * And setting scrollbar-width or scrollbar-color makes Chrome throw away the
 * webkit pseudo-elements entirely - so the standard pair cannot just be added
 * alongside, it has to be fenced to the browser that needs it. Firefox has no
 * ::-webkit-scrollbar and takes the standard properties; Chrome has no
 * -moz-appearance and never reads the block. */

.dsc-rail-in::-webkit-scrollbar {
  width: 5px;
}

.dsc-rail-in::-webkit-scrollbar-track {
  background: transparent;
}

.dsc-rail-in::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}

.dsc-rail-in::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

@supports (-moz-appearance: none) {
  .dsc-rail-in {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  }
}

/* ---- the steps ----
   The picture never moves and never reloads; only the questions are divided.
   So this is a way of showing four things at a time instead of a hundred and
   forty, not a wizard - every step is one press away from every other. */

/* A grid, not a flex row.
   Five names do not fit across 324px, and wrapping a flex row left one of them
   stranded on a line of its own at full width. Equal columns wrap into equal
   rows, so it reads as a set however many steps a catalogue has. */
/* One row, whatever the catalogue names its steps.
   auto-fit at 68px gave four columns in a 324px rail and left the fifth step
   stranded on a line of its own. Equal fractions put them all on one line and
   let the longest name decide the type size rather than the layout. */
/* Each tab as wide as its own word, spread across the rail.
   Equal fifths of 324px is 61px, and "Hardware" at 10px uppercase needs more
   than that - it came out as "HARDWA...". Natural widths fit because the words
   are short; the ellipsis below is still there for a catalogue that names a
   step something long. */
.dsc-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  gap: 2px;
  margin: 0 0 18px;
}

.dsc-step {
  padding: 7px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  border-bottom: 2px solid var(--ds-line, rgba(255, 255, 255, 0.14));
  background: none;
  color: inherit;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.55;
  cursor: pointer;
}

.dsc-step:hover {
  opacity: 0.85;
}

.dsc-step.is-on {
  border-bottom-color: var(--ds-accent, #bdfe02);
  opacity: 1;
}

.dsc-stepnav {
  display: flex;
  gap: 5px;
  margin: 18px 0 0;
}

.dsc-stepnav .dsc-btn {
  flex: 1 1 auto;
}

/* ---- one question ---- */

.dsc-q {
  margin: 0 0 22px;
}

/* Nothing trailing after the last question.
   The rail's own 20px of padding is the gap at the bottom; a margin under the
   final section on top of it left a visible hole between the last field and the
   buttons. */
.dsc-q:last-child {
  margin-bottom: 0;
}

/* White, not grey. At 0.7 on a dark panel these headings were dimmer than the
   option names under them, so the thing being asked read as less important than
   the answers to it. */
.dsc-q-name {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text, #ffffff);
  opacity: 1;
}

/* One sentence of fact under a question that needs one. Sentence case against
   the heading's capitals, so it reads as an answer to the heading rather than a
   second heading. */
.dsc-q-what {
  margin: -4px 0 10px;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.6;
}

.dsc-tiles {
  display: grid;
  gap: 8px;
}

.dsc-tiles-thumb {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* As many as fit rather than a fixed six.
   Six columns needed 360px in a 324px rail, so the whole rail scrolled
   sideways - and a rail that scrolls sideways is a rail with options nobody
   finds. auto-fill takes whatever the rail actually is. */
.dsc-tiles-swatch {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
}

.dsc-tiles-swatch .dsc-tile {
  padding: 3px;
}

/* A swatch says what it is by being that colour. Eighty-three names under
   eighty-three squares is a wall of type nobody reads, and it is what forced
   the grid wider than the rail. The name is on the tile as its title and is
   read out by a screen reader from the label. */
.dsc-tiles-swatch .dsc-tile-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One row, whatever it holds.
 *
 * This was two columns, so a three option group - Single, Double, Triple - put
 * Triple on a row of its own under the other two, which reads as a different
 * question rather than the third answer to this one. A segmented control is one
 * row by definition; the columns come from how many answers there are. */
.dsc-tiles-segmented {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
}

/* A segmented answer is a button, and was reading as a text field: a bordered
   white box with a word in the left of it is what every input on the page looks
   like. Centred, and padded like something that gets pressed. */
.dsc-tiles-segmented .dsc-tile {
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 10px;
  text-align: center;
}

/* Names on one or two lines, never three.
   Amarr's own collection names run from "Vista" to "Heritage Carriage House",
   and a third line makes one tile in a row taller than the rest.

   No minimum height. The grid already stretches every tile in a row to the
   tallest of them, so reserving a second line here did nothing for the rows it
   was meant to tidy and put an empty line under every name that fits on one -
   which is all six houses. */
.dsc-tiles-thumb .dsc-tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- one answer ---- */

.dsc-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--ds-line, rgba(255, 255, 255, 0.14));
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dsc-tile:hover {
  border-color: var(--ds-accent, #bdfe02);
}

.dsc-tile.is-on {
  border-color: var(--ds-accent, #bdfe02);
  box-shadow: inset 0 0 0 1px var(--ds-accent, #bdfe02);
}

.dsc-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.dsc-sw {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--ds-line, rgba(255, 255, 255, 0.2));
  border-radius: 2px;
}

/* A colour that cannot be had is crossed through.
 *
 * The words go on the title instead: a sentence under every ruled-out swatch
 * turns a grid of eighty-three colours into a wall of type, and the colours are
 * what the step is for. Drawn corner to corner over the swatch itself rather
 * than over the whole tile, so the line reads as belonging to the colour.
 *
 * Both diagonals are one gradient each, sized to the box's own diagonal, so they
 * meet the corners exactly whatever the swatch ends up measuring. */
.dsc-tile.is-out.is-swatch {
  opacity: 1;
}

.dsc-tile.is-out.is-swatch .dsc-sw {
  position: relative;
  opacity: 0.55;
}

.dsc-tile.is-out.is-swatch .dsc-sw::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--dsc-out-line, rgba(255, 255, 255, 0.85)) calc(50% - 1px), var(--dsc-out-line, rgba(255, 255, 255, 0.85)) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--dsc-out-line, rgba(255, 255, 255, 0.85)) calc(50% - 1px), var(--dsc-out-line, rgba(255, 255, 255, 0.85)) calc(50% + 1px), transparent calc(50% + 1px));
  border-radius: inherit;
  pointer-events: none;
}

.dsc-tile-name {
  font-size: 12px;
  line-height: 1.25;
}

.dsc-tile-price {
  font-size: 11px;
  opacity: 0.65;
}

/* An answer a rule rules out.
 *
 * Still there, still readable, and carrying why. The alternative - hiding it, or
 * grey with no explanation, which is what every designer in this trade does -
 * reads as a broken site to somebody who saw the option a moment ago. */
.dsc-tile.is-out {
  opacity: 0.4;
  cursor: not-allowed;
}

.dsc-tile.is-out:hover {
  border-color: var(--ds-line, rgba(255, 255, 255, 0.14));
}

.dsc-tile-why {
  font-size: 10px;
  line-height: 1.2;
  color: var(--ds-accent, #bdfe02);
}

/* ---- the corner handles ----
   Only on a photograph the visitor supplied. Amarr's six arrive with their
   corners measured, and moving those would only be a way to get it wrong. */

.dsc-grip {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--ds-accent, #bdfe02);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  cursor: grab;
  /* The pointer events are the handle's own, and a drag should not also be the
     browser deciding to scroll the rail or select the picture. */
  touch-action: none;
}

.dsc-grip:active {
  cursor: grabbing;
}

.dsc-grip:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.dsc-grip[hidden] {
  display: none;
}

/* ---- a photograph of their own ---- */

.dsc-own {
  display: block;
  margin: 8px 0 0;
  cursor: pointer;
}

/* The file field itself is never seen - the label is the button.
 *
 * hidden was not enough. The theme has
 * `label > input:not([type="checkbox"]):not([type="radio"]) { display: block }`,
 * and that rule is heavier than it looks. :not() adds nothing of its own but its
 * argument counts, so two tags plus two attribute negations is (0,2,2) - past
 * the [hidden] attribute the browser's own stylesheet uses, and past a first
 * attempt here at (0,2,1), which is why "Choose File / No file chosen" was still
 * showing under the button after being told to go away once.
 *
 * Three classes settles it, which is how the rest of this suite earns weight
 * rather than reaching for !important. */
.dsc-rail .dsc-own > input[type="file"],
.dsc-strip .dsc-shot-own > input[type="file"] {
  display: none;
}

/* Dashed, because it takes something from outside.
   A solid edge reads as "this does something"; a dashed one reads as "put
   something here", which is what every upload control in the world has taught
   people to look for. */
.dsc-own .dsc-btn {
  display: block;
  width: 100%;
  padding: 14px 12px;
  border: 1px dashed var(--ds-line, rgba(255, 255, 255, 0.35));
  text-align: center;
  font-size: 12px;
}

.dsc-own:hover .dsc-btn {
  border-color: var(--ds-accent, #bdfe02);
  border-style: dashed;
}

.dsc-own-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.7;
}

/* ---- the size pair ---- */

.dsc-sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dsc-size {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

/* The size control is this plugin's own, not a <select>.
 *
 * A native select draws its open list through the operating system, at a
 * position nothing on the page can reach - and in this panel it came out
 * sitting between the two fields rather than under the one that was pressed.
 * There is no CSS for that. Built here, the list is a child of its own field
 * and lands under it by construction. */
.dsc-drop {
  position: relative;
}

.dsc-drop-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--ds-line, rgba(255, 255, 255, 0.2));
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dsc-drop-now::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.dsc-drop.is-open .dsc-drop-now {
  border-color: currentColor;
}

.dsc-drop-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 240px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--ds-line, rgba(255, 255, 255, 0.2));
  border-radius: 3px;
  background: #15171a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  display: none;
}

.dsc-drop.is-open .dsc-drop-list {
  display: block;
}

.dsc-drop-one {
  padding: 7px 8px;
  border-radius: 2px;
  cursor: pointer;
}

.dsc-drop-one:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dsc-drop-one.is-on {
  background: rgba(255, 255, 255, 0.16);
}

/* ---- more than one door ---- */

.dsc-door + .dsc-door {
  margin-top: 14px;
}

.dsc-door-head {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.dsc-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  cursor: pointer;
}

.dsc-more input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

/* ---- the foot ---- */

.dsc-foot {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-top: 1px solid var(--ds-line, rgba(255, 255, 255, 0.12));
}

.dsc-total {
  margin: 0 0 10px;
  font-size: 18px;
}

/* "Send this to us" does not fit beside another button in a 324px rail - it
   came out on two lines. The one that matters takes its own
   row, and Back sits under it. */
.dsc-foot-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Every pair of buttons is half the row each.
   Equal basis and none of them allowed to grow past it, so Back sits beside
   Next and beside Get quote at exactly the same width - one control split in
   two rather than one button that happens to be wider than the other. */
.dsc-foot-btns [data-dsc-backward],
.dsc-foot-btns [data-dsc-onward],
.dsc-foot-btns [data-dsc-enquire] {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

.dsc-btn {
  padding: 10px 16px;
  border: 1px solid var(--ds-accent, #bdfe02);
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dsc-btn-go {
  flex: 1 1 auto;
  background: var(--ds-accent, #bdfe02);
  color: var(--ds-on-accent, #000000);
}

/* ---- the enquiry ---- */

/* Room between one field and the next.
 *
 * Eight was not enough and it read as no spacing at all, because the gap that
 * matters is not between two boxes - it is between one field's input and the
 * next field's label. At eight, every label sat closer to the box above it than
 * to its own, so the column read as five labels attached to the wrong things.
 *
 * Sixteen between fields against four between a label and the box it names:
 * four times the difference, which is what makes the pairing read without
 * anybody having to think about it.
 *
 * Only this component. The site's own forms are spaced by Theme Settings,
 * Forms, Gap - currently 10 to match the live site - and that is one figure in
 * one place rather than something to override from here. */
.dsc-ask {
  margin: 14px 0 0;
  display: grid;
  gap: 16px;
}

.dsc-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

/* City, state and ZIP on one line, the way an address is written. */
.dsc-f-row {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.6fr;
  gap: 8px;
}

.dsc-f input,
.dsc-f textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ds-line, rgba(255, 255, 255, 0.2));
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

.dsc-ask-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
}

.dsc-said {
  font-size: 12px;
  opacity: 0.8;
}

.dsc-done {
  margin: 0;
  padding: 10px 0;
}

/* The honeypot. Off screen rather than display:none, which some fillers check
   for, and out of the tab order so a keyboard never lands in it. */
.dsc-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- narrow ----
   The rail goes under the picture rather than beside it, and the picture keeps
   enough height to be worth looking at. Both are sized in svh for the same
   reason the box is. */

@media (max-width: 860px) {
  .dsc-app,
  .dsc-app[data-dsc-rail="left"] {
    flex-direction: column;
  }

  .dsc-stage {
    flex: 0 0 auto;
    height: 38svh;
    padding: 10px;
  }

  .dsc-rail {
    flex: 1 1 auto;
    border: 0;
    border-top: 1px solid var(--ds-line, rgba(255, 255, 255, 0.12));
  }

  .dsc-app[data-dsc-rail="left"] .dsc-rail {
    border-right: 0;
    border-top: 1px solid var(--ds-line, rgba(255, 255, 255, 0.12));
  }

  .dsc-rail-in {
    padding: 16px;
  }

  .dsc-modal {
    padding: 0;
  }

  .dsc-modal-box {
    max-width: none;
    max-height: 100svh;
    border-radius: 0;
  }
}

/* Somebody who has asked their machine to stop moving things has asked for this
   too. */
@media (prefers-reduced-motion: reduce) {
  .dsc-modal-box {
    transition: none;
  }
}