/* Long Coffee customer menu and item detail: keep controls inside the viewport. */
.site-header .account-trigger,
.customer-app-nav [data-customer-nav="account"] { display: none !important; }

.customer-app-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

.detail-copy,
.detail-order-controls,
.detail-purchase-row,
.detail-purchase-actions,
.detail-quantity-control { min-width: 0; }

.detail-copy { display: flex; flex-direction: column; }
.detail-order-controls { order: 2; }
.detail-copy dl { order: 3; }
.detail-purchase-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-purchase-actions button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  /* Keep one cart entry point on mobile: the bottom "Món đã chọn" button. */
  .site-header .cart-trigger { display: none !important; }

  dialog.product-detail-dialog[open] {
    position: fixed !important;
    inset: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top)) !important;
    margin: auto !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .product-detail-dialog .detail-photo {
    width: 100% !important;
    height: clamp(130px, 22dvh, 210px) !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .product-detail-dialog .detail-copy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .product-detail-dialog .detail-copy > p { order: 1; }
  .product-detail-dialog .detail-order-controls {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
  }

  .product-detail-dialog .detail-order-controls > * { min-width: 0 !important; max-width: 100% !important; }
  .product-detail-dialog .detail-order-controls > .detail-option-select { grid-column: 1 !important; width: 100% !important; }
  .product-detail-dialog .detail-purchase-row {
    position: static !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 5px 0 0 !important;
    background: transparent !important;
  }

  .product-detail-dialog .detail-quantity-control {
    grid-template-columns: 42px minmax(48px, 1fr) 42px !important;
    width: min(100%, 220px) !important;
    min-height: 42px !important;
    justify-self: start !important;
  }

  .product-detail-dialog .detail-purchase-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .product-detail-dialog .detail-purchase-actions button {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 6px !important;
    font: 700 clamp(10px, 3.2vw, 14px)/1.15 system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .product-detail-dialog .detail-copy dl {
    order: 3 !important;
    display: grid !important;
    gap: 8px !important;
    margin: 14px 0 0 !important;
  }

  .product-detail-dialog .product-detail-close {
    position: sticky !important;
    float: right;
    top: 7px !important;
    right: 8px !important;
    margin: 7px 8px -40px 0 !important;
    z-index: 5 !important;
  }
}