/*
 * Digipart on Seven (THEME_MIGRATION.md, sections 14 and 15).
 *
 * Loaded after style.bundle.css. Nothing under assets/vendor/ is ever edited: the brand colour and the few application
 * overrides live here. Seven recolours its whole interface from custom properties (--bs-primary and friends), so the brand
 * is a block of variables. Digipart blue is #1B84FF, which is also the tone Seven calls "info": its own light / active /
 * dark-mode companions (#E9F3FF, #056EE9, #172331) are reused for the lighter nuances.
 */

:root,
[data-bs-theme=light] {
  /* dark tone, hover / active, lighter nuance, focus ring, text on primary */
  --bs-primary: #1B84FF;
  --bs-primary-active: #056EE9;
  --bs-primary-light: #E9F3FF;
  --bs-primary-clarity: rgba(27, 132, 255, 0.2);
  --bs-primary-inverse: #ffffff;
  --bs-primary-rgb: 27, 132, 255;
  /* Bootstrap 5.3 derived tones */
  --bs-primary-text-emphasis: #0b3566;
  --bs-primary-bg-subtle: #d1e6ff;
  --bs-primary-border-subtle: #a4ceff;
  --bs-link-color: #1B84FF;
  --bs-link-color-rgb: 27, 132, 255;
  --bs-link-hover-color: #056EE9;
  --bs-link-hover-color-rgb: 5, 110, 233;
  --bs-focus-ring-color: rgba(27, 132, 255, 0.25);
  /* Seven component tokens that hard-code the primary */
  --bs-text-primary: #1B84FF;
  --bs-component-active-bg: #1B84FF;
  --bs-component-hover-color: #1B84FF;
  --bs-component-checked-bg: #1B84FF;
  --bs-menu-link-color-hover: #1B84FF;
  --bs-menu-link-color-show: #1B84FF;
  --bs-menu-link-color-here: #1B84FF;
  --bs-menu-link-color-active: #1B84FF;
  --bs-ribbon-label-bg: #1B84FF;
}

[data-bs-theme=dark] {
  --bs-primary: #1B84FF;
  --bs-primary-active: #4D9FFF;
  --bs-primary-light: #172331;
  --bs-primary-clarity: rgba(27, 132, 255, 0.2);
  --bs-primary-inverse: #ffffff;
  --bs-primary-rgb: 27, 132, 255;
  --bs-primary-text-emphasis: #76b5ff;
  --bs-primary-bg-subtle: #051a33;
  --bs-primary-border-subtle: #104f99;
  --bs-link-color: #1B84FF;
  --bs-link-color-rgb: 27, 132, 255;
  --bs-link-hover-color: #4D9FFF;
  --bs-link-hover-color-rgb: 77, 159, 255;
  --bs-focus-ring-color: rgba(27, 132, 255, 0.25);
  --bs-text-primary: #1B84FF;
  --bs-component-active-bg: #1B84FF;
  --bs-component-hover-color: #4D9FFF;
  --bs-component-checked-bg: #1B84FF;
  --bs-menu-link-color-hover: #4D9FFF;
  --bs-menu-link-color-show: #4D9FFF;
  --bs-menu-link-color-here: #4D9FFF;
  --bs-menu-link-color-active: #4D9FFF;
  --bs-ribbon-label-bg: #1B84FF;
}

/*
 * Seven's Bootstrap base layer is compiled with its default violet (#7239EA): a few rules carry the colour itself instead of
 * var(--bs-primary), so the variables above do not reach them. They are repeated here with the variable. When a new component
 * shows violet, find its rule in style.bundle.css (grep 7239EA) and add it to this list; DPSmoke.violet() lists what is left.
 */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem var(--bs-primary-clarity);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem var(--bs-primary-clarity);
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-clarity);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 27, 132, 255;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* The accordion arrow of an open item is an inline SVG with the violet baked in */
.accordion {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231B84FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234D9FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ---- Menu ------------------------------------------------------------------------------------------------------- */

/* Long French labels wrap instead of pushing the badge out of the column */
.aside-secondary .menu-title {
  white-space: normal;
}

/* Brand mark of the rail */
.aside-logo img {
  height: 44px;
  width: 44px;
}

/* ---- Top-right corner ------------------------------------------------------------------------------------------------- */

/*
 * Fixed to the screen like the logo of the rail: always reachable. The box is as tall as the header and centres its content, so the
 * button lines up with the buttons of the toolbar whatever their height, sticky header or not (100px / 65px, 60px / 55px on a phone).
 * Its empty part never catches a click.
 */
.dp-topright {
  position: fixed;
  top: 0;
  right: 24px;
  height: 100px;
  display: flex;
  align-items: center;
  gap: .5rem;
  z-index: 98;
  pointer-events: none;
}

.dp-topright > * {
  pointer-events: auto;
}

body[data-kt-sticky-header=on] .dp-topright {
  height: 65px;
}

/* The label of the shop button shows on wide screens only: the icon and the chevron are enough below 1600px */
.dp-topright-label {
  display: none;
  margin-left: .25rem;
}

/*
 * The header keeps room for the corner so that the toolbar never slides under it. On a very wide screen the centred container
 * leaves enough margin on its own: the room only grows as the margin shrinks (1745px = 425px aside + 1320px container).
 * Pixels, not rem: Seven changes the root font size between desktop and phone.
 */
.dp-reserve-topright {
  --dp-topright-room: 175px; /* shortcut star (about 40px) + icon button (about 75px) + their gap + the 24px offset */
  padding-right: max(30px, calc(var(--dp-topright-room) - max(0px, (100vw - 1745px) / 2)));
}

/*
 * A fluid container spans the whole width: there is no centred margin to count on, so the room is always the full room (the formula above
 * would subtract a margin that does not exist and let the toolbar slide under the corner on a wide screen). Desktop only: the phone rule below wins.
 */
@media (min-width: 992px) {
  .dp-reserve-topright.container-fluid {
    padding-right: var(--dp-topright-room);
  }
}

/* The title gives way before the toolbar does: it is cut with an ellipsis instead of pushing the buttons under the corner */
.dp-reserve-topright .page-title {
  min-width: 0;
  flex: 0 1 auto;
}

.dp-reserve-topright .page-title h1,
.dp-reserve-topright .page-title .breadcrumb {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dp-reserve-topright .page-title .breadcrumb {
  flex-wrap: nowrap;
}

@media (min-width: 1600px) {
  .dp-topright-label {
    display: inline;
  }

  .dp-reserve-topright {
    --dp-topright-room: 260px; /* star + labelled button (about 160px) + offset + gaps */
  }
}

@media (max-width: 991.98px) {
  .dp-topright {
    right: 15px;
    height: 60px;
  }

  body[data-kt-sticky-header=on] .dp-topright {
    height: 55px;
  }

  .dp-reserve-topright {
    padding-right: 105px;
  }
}

/* Store menu: the name above its address, left aligned (Seven makes .menu-title a centred flex row, so the rule has to be as specific) */
.menu-item .menu-link.dp-store-item .menu-title {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
}

.menu-item .menu-link.dp-store-item .dp-store-host {
  margin-top: .25rem;
}

/* ---- Header ----------------------------------------------------------------------------------------------------- */

/* The "preview" pill shown while a member looks at Seven although the page is configured for Dashkit */
.dp-preview-pill {
  --dp-pill-bg: var(--bs-warning-light);
  --dp-pill-color: var(--bs-warning-active);
}

/* ---- Tables and lists ------------------------------------------------------------------------------------------- */

.dp-empty-state {
  padding: 3rem 1rem;
  text-align: center;
}

/* DataTables: the search box of the card header replaces the built-in one */
.dataTables_wrapper .dataTables_filter,
.dt-container .dt-search {
  display: none;
}

/* ---- Forms ------------------------------------------------------------------------------------------------------ */

/* Button-radio cards (discount type...) keep a stable height when their description wraps */
.dp-choice-card {
  min-height: 5.5rem;
}

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

/* toastr sits under the sticky header */
#toastr-container,
.toastr-top-right {
  z-index: 2000;
}

/* The till (inc/pos): its Feather icons are drawn as Keenicons by feather-bridge.js. Seven gives every Keenicon `font-size: 1rem` and the muted colour; the till's own CSS sizes and colours the place the icon is in (a
   56px tile with a 26px icon, a green button...), as it did for the Feather font, so the icon takes both from its parent. */
.dp-pos i[data-dp-fe] {
    font-size: inherit;
    color: inherit;
}

/* ---- Drag and drop reordering (DP.sortable, assets/js/digipart.js) --------------------------------------------------- */

.dp-sort-handle {
  cursor: grab;
  touch-action: none; /* a finger on the grip drags the row instead of scrolling the page */
  user-select: none;
}

.dp-sortable-placeholder {
  border: 1px dashed var(--bs-primary);
  background-color: var(--bs-primary-light);
  border-radius: .475rem;
  visibility: visible !important;
}

.dp-sortable-dragging {
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
  background-color: var(--bs-body-bg);
}

.ui-sortable-helper {
  z-index: 1055;
}

/* ---- Products of a category (partials/category-products.php) --------------------------------------------------------- */

/* the rows chosen with a click (the ticks and the bar follow them); a row is dragged from anywhere, so the pointer says so */
#dp_cat_table tbody[data-dp-drag] > tr { cursor: pointer; }
.dp-cat-selected > td { background-color: var(--bs-primary-light) !important; }
.dp-cat-selected > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }

/* The page header (65px) is fixed once the page is scrolled: what sticks under it starts below it */
:root { --dp-sticky-top: calc(65px + .75rem); }

/* the bar of the chosen rows stays in view while the list is scrolled, under the header: its actions are always at hand */
.dp-cat-bulk-sticky { position: sticky; top: var(--dp-sticky-top); z-index: 90; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08); }

/* the tree of the categories follows the page while the list of products is scrolled, and scrolls by itself when it is taller than the screen (wide screens: below, the tree is above the list) */
@media (min-width: 1200px) {
  .dp-cat-sticky { position: sticky; top: var(--dp-sticky-top); max-height: calc(100vh - var(--dp-sticky-top) - 1rem); display: flex; flex-direction: column; }
  .dp-cat-sticky > .card { min-height: 0; flex: 1 1 auto; height: auto !important; }
  .dp-cat-sticky > .card > .card-body { overflow-y: auto; min-height: 0; }
}

/* the category of the tree under a row that is being dragged: the drop will move the products there */
.dp-cat-row.dp-cat-drop-over { outline: 2px dashed var(--bs-primary); outline-offset: -2px; background-color: var(--bs-primary-light); }

/* the window of the photos of a product: a grid of portrait tiles, the first one is the cover */
.dp-cat-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.dp-cat-photo { cursor: grab; background-color: var(--bs-body-bg); }
.dp-cat-photo > img { aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; display: block; }
.dp-cat-photo-off > img { opacity: .4; filter: grayscale(1); }
.dp-cat-photo.dp-sortable-dragging { cursor: grabbing; }
.dp-cat-photos .dp-sortable-placeholder { aspect-ratio: 2 / 3; }

/* ---- Product photos -------------------------------------------------------------------------------------------------- */

/* A product photo is portrait (2:3). Seven's .symbol-NNpx forces a square (or, with .symbol-2by3, a landscape) box on the <img>, which squashed the photos:
   whatever box an <img> of the catalogue gets, the photo is cropped to it (from the top: the face) and never stretched. */
img[src*="/upload/images/retouched/"],
img[src*="/upload/images/original/"],
img[src*="/upload/p/"] {
  object-fit: cover;
  object-position: center top;
}

/* A portrait photo box: a width class gives the height (2:3); use it instead of .symbol for a product photo */
.dp-photo {
  display: block;
  flex-shrink: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: .475rem;
  background-color: var(--bs-gray-100);
}

.dp-photo > img,
.dp-photo > .symbol-label {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

.dp-photo-40 { width: 40px; }
.dp-photo-50 { width: 50px; }
.dp-photo-60 { width: 60px; }
.dp-photo-75 { width: 75px; }
.dp-photo-100 { width: 100px; }

@media (min-width: 992px) {
  .dp-photo-lg-100 { width: 100px; }
}

/* ---- Photo viewer (DP.gallery, PhotoSwipe) -------------------------------------------------------------------------- */

.pswp {
  --pswp-bg: #0b0f14; /* PhotoSwipe's own z-index (100000) is above the Seven header, the modals and the toasts */
}

.pswp__dp-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: .75rem 1.5rem;
  color: #fff;
  font-size: .95rem;
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  pointer-events: none;
}

.pswp__dp-caption:empty {
  display: none;
}

a[data-dp-zoom] {
  cursor: zoom-in;
}

/* ---- Flow editor: the Drawflow canvas in the Seven tokens (wave 57 / K4; views/campaign/flow-editor.php, assets/js/campaign-flow-editor.js) --------------------------- */
/* Few colours: white cards, grey lines, one blue accent (the trigger is the strong blue, an action the light blue, a condition the orange of "a decision", a delay grey); red only for an error. */

.dpf-canvas {
  position: absolute;
  inset: 0;
  background-color: var(--bs-gray-100);
  background-image: radial-gradient(var(--bs-gray-400) 1px, transparent 1.2px);
  background-size: max(14px, calc(24px * var(--dpf-z, 1))) max(14px, calc(24px * var(--dpf-z, 1)));
  background-position: var(--dpf-x, 0) var(--dpf-y, 0);
}

.dpf-canvas .drawflow {
  transform-origin: 0 0; /* the zoom and the fit of the editor count from the top left corner of the canvas */
}

.dpf-canvas .drawflow .drawflow-node {
  display: block;
  width: 248px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--bs-gray-300);
  border-radius: .75rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-gray-800);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  font-size: .95rem;
  line-height: 1.35;
}

.dpf-canvas .drawflow .drawflow-node:hover {
  cursor: grab;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}

.dpf-canvas .drawflow .drawflow-node.selected {
  background: var(--bs-body-bg, #fff);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px var(--bs-primary-light), 0 .5rem 1rem rgba(0, 0, 0, .08);
}

.dpf-canvas .drawflow .drawflow-node.dpf-warn { border-color: var(--bs-warning); }
.dpf-canvas .drawflow .drawflow-node.dpf-bad { border-color: var(--bs-danger); }
.dpf-canvas .drawflow .drawflow-node.selected.dpf-warn { box-shadow: 0 0 0 3px var(--bs-warning-light), 0 .5rem 1rem rgba(0, 0, 0, .08); }
.dpf-canvas .drawflow .drawflow-node.selected.dpf-bad { box-shadow: 0 0 0 3px var(--bs-danger-light), 0 .5rem 1rem rgba(0, 0, 0, .08); }

.dpf-canvas .drawflow-node .drawflow_content_node { display: block; width: 100%; }

.dpf-node-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.dpf-node-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dpf-node-title { font-weight: 600; font-size: 1rem; color: var(--bs-gray-900); line-height: 1.2; overflow-wrap: anywhere; }
.dpf-node-kind { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-gray-500); margin-top: .15rem; }
.dpf-node-sum { padding: .5rem 1rem .75rem; border-top: 1px solid var(--bs-gray-200); color: var(--bs-gray-700); font-size: .85rem; overflow-wrap: anywhere; }
.dpf-node-sum:empty { display: none; }
.dpf-node-flag { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bs-warning); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.dpf-node-flag:empty { display: none; }
.dpf-bad .dpf-node-flag { background: var(--bs-danger); }
.condition-node .dpf-node-head, .condition-node .dpf-node-sum { padding-right: 3rem; }

/* the icon tile (on the node, in the palette and in the panel): the colour tells the kind */
.dpf-node-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .5rem;
  background: var(--bs-primary-light);
  color: var(--bs-primary);
}
.dpf-node-icon i { font-size: 1.25rem; color: inherit; }
.trigger-node .dpf-node-icon, .dpf-node-icon.dpf-type-trigger { background: var(--bs-primary); color: #fff; }
.condition-node .dpf-node-icon, .dpf-node-icon.dpf-type-condition { background: var(--bs-warning-light); color: var(--bs-warning); }
.delay-node .dpf-node-icon, .dpf-node-icon.dpf-type-delay { background: var(--bs-gray-200); color: var(--bs-gray-700); }

/* the ports: round, outside the card, big enough for a finger */
.dpf-canvas .drawflow-node .inputs,
.dpf-canvas .drawflow-node .outputs {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.dpf-canvas .drawflow-node .inputs { left: 0; }
.dpf-canvas .drawflow-node .outputs { right: 0; }
.dpf-canvas .drawflow-node .input,
.dpf-canvas .drawflow-node .output {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 18px;
  height: 18px;
  margin: 0 0 0 -9px;
  border: 2px solid var(--bs-gray-500);
  border-radius: 50%;
  background: var(--bs-body-bg, #fff);
  cursor: crosshair;
}
.dpf-canvas .drawflow-node .input:hover,
.dpf-canvas .drawflow-node .output:hover {
  border-color: var(--bs-primary);
  background: var(--bs-primary-light);
}
@media (pointer: coarse) {
  .dpf-canvas .drawflow-node .input,
  .dpf-canvas .drawflow-node .output { width: 28px; height: 28px; margin-left: -14px; }
}
/* a condition has two exits, "oui" above and "non" below */
.condition-node .output::after {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-gray-600);
  pointer-events: none;
}
.condition-node .output.output_1::after { content: 'Oui'; color: var(--bs-primary); }
.condition-node .output.output_2::after { content: 'Non'; }

/* the links */
.dpf-canvas .drawflow .connection .main-path {
  stroke: var(--bs-gray-500);
  stroke-width: 3px;
  fill: none;
  pointer-events: stroke;
}
.dpf-canvas .drawflow .connection .main-path:hover { stroke: var(--bs-primary); }
.dpf-canvas .drawflow .connection .main-path.selected { stroke: var(--bs-primary); stroke-width: 4px; }
.dpf-canvas .drawflow .connection .point { stroke: var(--bs-primary); stroke-width: 2; fill: var(--bs-body-bg, #fff); }
.dpf-canvas .drawflow .connection .point.selected,
.dpf-canvas .drawflow .connection .point:hover { fill: var(--bs-primary); }
@media (pointer: coarse) {
  .dpf-canvas .drawflow .connection .main-path { stroke-width: 6px; }
}

/* the red cross of the right click */
.dpf-canvas .drawflow-delete {
  width: 28px;
  height: 28px;
  border: 1px solid var(--bs-gray-300);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-danger);
  font-family: inherit;
  line-height: 26px;
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .12);
}
.dpf-canvas .drawflow-delete:hover { background: var(--bs-danger); color: #fff; }

/* ---- The shortcuts of the member (the star in the corner: layout/topright.php, assets/js/shortcuts.js, class/MemberShortcut.php) ---------------------------------------- */

.dp-shortcut {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.dp-shortcut .menu-link {
  flex: 1 1 auto;
  min-width: 0;
}

.dp-shortcut .menu-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dp-shortcut[draggable=true] { cursor: grab; }
.dp-shortcut.dp-dragging { opacity: .4; }
.dp-shortcut.dp-over { box-shadow: 0 2px 0 var(--bs-primary); }
.dp-shortcut .dp-shortcut-del { opacity: 0; flex: 0 0 auto; }
.dp-shortcut:hover .dp-shortcut-del,
.dp-shortcut .dp-shortcut-del:focus { opacity: 1; }

/* ---- Orders: the list of the other stocks of a line ("Changer de stock", views/order/_order-lines.php, used by the list and the order page). The lines sit in a `.table-responsive` (overflow: auto), which clips a menu
   drawn inside it: the button asks Popper for a FIXED position (data-bs-popper-config) so the menu leaves the table, and the list scrolls when a chain has many stores. */
.dp-locate-results {
  min-width: 14rem;
  max-height: min(50vh, 20rem);
  overflow-y: auto;
  z-index: 1060;
}