/* Mobile shopping dialogs. The desktop configurator is intentionally unchanged. */
@media (max-width: 760px) {
  #configure-dialog {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #fff;
    overscroll-behavior-y: contain;
    scroll-padding: 64px 0 190px;
  }

  #configure-dialog > .close-button {
    position: fixed;
    float: none;
    inset: max(10px, env(safe-area-inset-top)) 12px auto auto;
    width: 44px;
    height: 44px;
    margin: 0;
    z-index: 12;
    background: #fff;
    box-shadow: 0 3px 15px #111a2412;
  }

  #configure-dialog .config-shell { display: block; }
  #configure-dialog .config-showcase {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 12px 18px;
    gap: 0;
    border: 0;
    box-shadow: none;
    background: #eef1ed;
    z-index: 0;
  }
  #configure-dialog .config-render { margin: 0; }
  #configure-dialog .station-viewer__stage { height: 172px; }
  #configure-dialog .config-preview-tools {
    height: 44px;
    min-height: 44px;
    padding: 0;
    gap: 12px;
    font-size: 12px;
  }
  #configure-dialog .config-preview-tools input { height: 44px; width: 104px; }
  #configure-dialog .config-preview-tools button {
    min-height: 44px;
    padding: 8px;
    font-size: 12px;
  }
  #configure-dialog .config-showcase .config-download.button {
    width: auto;
    max-width: none;
    height: auto;
    min-height: 44px;
    margin: 0 auto;
    padding: 10px 16px;
    font-size: 12px;
    background: #ffffffa8;
  }
  #configure-dialog .config-panel {
    padding: 24px 18px calc(194px + env(safe-area-inset-bottom));
  }
  #configure-dialog .config-panel > h2 {
    margin: 0 0 24px;
    font-size: 28px;
    line-height: 1.12;
  }
  #configure-dialog .config-panel fieldset { margin-bottom: 24px; }
  #configure-dialog .config-panel :is(legend, .config-group-title, h3) {
    font-size: 15px;
    margin-bottom: 12px;
  }

  /* A visible next card makes the model selector easy to swipe. */
  #configure-dialog .model-choice-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    gap: 10px;
    margin: -4px -18px 0;
    padding: 4px 18px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    scrollbar-width: thin;
    scrollbar-color: #aeb8ba transparent;
  }
  #configure-dialog .model-choice-grid button {
    display: flex;
    min-width: 0;
    min-height: 132px;
    padding: 12px 8px;
    scroll-snap-align: start;
    border-radius: 15px;
    background: #f5f7f6;
  }
  #configure-dialog .model-choice-grid button[aria-pressed="true"] {
    border-color: #20314a;
    background: #eaf0f2;
    box-shadow: inset 0 0 0 1px #20314a;
  }
  #configure-dialog .model-choice-grid svg { width: 56px; height: 54px; margin-bottom: 4px; }
  #configure-dialog .model-choice-grid strong { font-size: 13px; }
  #configure-dialog .model-choice-grid span { font-size: 11px; }
  #configure-dialog .model-choice-grid small { font-size: 12px; }

  #configure-dialog .choice-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  #configure-dialog .choice { min-height: 88px; padding: 14px 10px; gap: 8px; }
  #configure-dialog .choice strong { font-size: 13px; }
  #configure-dialog .choice small { font-size: 11px; line-height: 1.5; }
  #configure-dialog .config-shell-colors button { flex: 1; min-width: 0; min-height: 48px; }
  #configure-dialog :is(.config-extras summary, .config-price-details summary) {
    min-height: 44px;
    padding-block: 12px;
    font-size: 12px;
  }
  #configure-dialog :is(.field input, .field select, .field textarea, #battery-pack-size, #config-quantity-select) {
    min-height: 48px;
    font-size: 16px;
  }
  #configure-dialog .config-quantity-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  #configure-dialog .quantity-stepper button { width: 44px; height: 44px; }
  #configure-dialog .quantity-stepper input { width: 48px; height: 44px; font-size: 18px; }
  #configure-dialog #config-quantity-select { padding-inline: 9px; }
  #configure-dialog .config-color-studio { padding: 18px; gap: 18px; }
  #configure-dialog .config-wheel-hex-row input { min-height: 44px; font-size: 16px !important; }
  #configure-dialog .config-upload-label { min-height: 72px; }
  #configure-dialog .config-upload-label strong { font-size: 13px; }
  #configure-dialog .config-upload-label small { font-size: 11px; }
  #configure-dialog #config-logo-remove { min-height: 44px; font-size: 12px; padding-inline: 8px; }
  #configure-dialog #config-battery-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  #configure-dialog #config-battery-tiers li { padding: 8px 5px; font-size: 11px; text-align: center; }

  /* Price and the next step remain reachable without scrolling the entire form. */
  #configure-dialog .config-bottom {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    max-height: min(48dvh, 370px);
    margin: 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: #fff;
    border-top: 1px solid #dbe2e2;
    box-shadow: 0 -8px 28px #111a240b;
  }
  #configure-dialog .config-bottom .config-total { margin: 0; padding: 0; gap: 12px; }
  #configure-dialog .config-total > span { max-width: 42%; font-size: 12px; line-height: 1.4; }
  #configure-dialog .config-total > strong { font-size: 25px; line-height: 1.3; }
  #configure-dialog .config-price-details { margin: 0; }
  #configure-dialog .config-price-details summary { padding-block: 10px; }
  #configure-dialog .config-bottom > button.button { min-height: 50px; font-size: 13px; margin: 0; }
  #configure-dialog .config-price-details[open] { padding-bottom: 8px; }

  /* The cart and project form use one scroll surface, with comfortable controls. */
  :is(#cart-dialog, #checkout-dialog, #review-dialog, #details-dialog) {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    margin: auto;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 20px;
    overscroll-behavior-y: contain;
    scroll-padding-block: 60px 24px;
  }
  :is(#cart-dialog, #checkout-dialog, #review-dialog, #details-dialog) > .close-button {
    position: sticky;
    display: block;
    top: 0;
    right: auto;
    width: 44px;
    height: 44px;
    margin: -6px -2px -38px auto;
    background: #fff;
    z-index: 5;
  }
  :is(#cart-dialog, #checkout-dialog, #review-dialog, #details-dialog) h2 {
    margin: 6px 46px 24px 0;
    font-size: 30px;
    line-height: 1.1;
  }
  #cart-dialog .cart-item { padding-block: 18px; row-gap: 4px; }
  #cart-dialog .cart-item h3 { font-size: 23px; }
  #cart-dialog .cart-item p { font-size: 12px; line-height: 1.6; }
  #cart-dialog .cart-item-controls { flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; font-size: 12px; }
  #cart-dialog .cart-item-controls button { min-height: 44px; padding: 10px 0; font-size: 12px; }
  #cart-dialog .cart-quantity-label { flex-wrap: wrap; font-size: 12px; }
  #cart-dialog .cart-quantity { width: 70px; min-height: 44px; font-size: 16px; }
  #cart-dialog .remove-item { min-height: 44px; padding-inline: 8px; font-size: 12px; }
  #cart-dialog .cart-total { align-items: center; font-size: 12px; }
  #cart-dialog .cart-total strong { font-size: 25px; }
  #cart-dialog #cart-footer { padding-top: 4px; }
  #cart-dialog #cart-footer > .small-note { font-size: 12px; line-height: 1.55; }
  #cart-dialog #continue-checkout { margin-top: 16px; min-height: 50px; font-size: 14px; }
  #cart-dialog :is(#save-cart, #continue-shopping) { min-height: 44px; padding: 10px 4px; font-size: 12px; }
  #checkout-dialog .form-grid { grid-template-columns: 1fr; gap: 0; }
  #checkout-dialog .field { margin-bottom: 18px; }
  #checkout-dialog .field label { margin-bottom: 7px; font-size: 13px; }
  #checkout-dialog .field :is(input, select, textarea) { min-height: 48px; font-size: 16px; }
  #checkout-dialog .consent { padding-block: 12px; font-size: 12px; line-height: 1.6; }
  #checkout-dialog .consent input { flex-shrink: 0; }
  #checkout-dialog button[type="submit"] { min-height: 50px; font-size: 14px; }
  #review-dialog .review-actions { grid-template-columns: 1fr; gap: 10px; }
  #review-dialog :is(.review-actions .button, #download-json, #edit-checkout) { min-height: 48px; font-size: 13px; }
  #review-dialog .selection-status { padding: 16px; font-size: 13px; }
  #details-dialog #details-configure { min-height: 50px; font-size: 14px; }
}

@media (max-width: 760px) and (max-height: 520px) {
  /* Keep the controls usable in landscape and when the virtual keyboard opens. */
  #configure-dialog .config-bottom { position: static; max-height: none; box-shadow: none; padding-inline: 0; }
  #configure-dialog .config-panel { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  #configure-dialog { scroll-padding-bottom: 24px; }
}