/* Mobile store review presentation only. The existing review dialog remains
 * the single source of data, filtering, loading and close behavior. */
@media (max-width: 768px) {
  .el-overlay:has(.store-product-dialog .review-dialog) {
    background: #fff !important;
    inset: 0 !important;
    overflow: hidden !important;
  }

  .el-overlay:has(.store-product-dialog .review-dialog) > .el-overlay-dialog {
    box-sizing: border-box !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) {
    box-sizing: border-box !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) > .el-dialog__header {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-height: calc(58px + env(safe-area-inset-top)) !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top)) 54px 10px !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .el-dialog__title {
    color: #111827 !important;
    min-width: 0 !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .el-dialog__headerbtn {
    box-sizing: border-box !important;
    color: #17212b !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: calc(9px + env(safe-area-inset-top)) !important;
    right: auto !important;
    left: 10px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog)
    .el-dialog__headerbtn:is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .el-dialog__headerbtn::before {
    content: "‹" !important;
    display: block !important;
    color: #17212b !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 0.8 !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .el-dialog__headerbtn .el-dialog__close {
    display: none !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) > .el-dialog__body {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) > .el-dialog__footer {
    display: none !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-dialog {
    box-sizing: border-box !important;
    min-height: 100% !important;
    gap: 20px !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-summary {
    box-sizing: border-box !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 154px !important;
    padding: 22px 20px !important;
    border: 1px solid #dbe7ff !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f8fbff 0%, #f2f6ff 100%) !important;
    box-shadow: 0 10px 28px rgb(30 64 175 / 6%) !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .summary-score {
    gap: 14px !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .score-value {
    color: #1d4ed8 !important;
    font-size: 52px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .score-label,
  .store-product-dialog.el-dialog:has(.review-dialog) .summary-count {
    color: #64748b !important;
    font-size: 14px !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .summary-meta {
    align-items: flex-end !important;
    gap: 18px !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .summary-meta .el-rate {
    height: 22px !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-filter-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    display: grid !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-filter-chip {
    box-sizing: border-box !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 5px !important;
    border-color: #dbe3f0 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-filter-chip.active {
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
    background: #f2f7ff !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .compact-empty {
    box-sizing: border-box !important;
    flex: 1 0 280px !important;
    min-height: 280px !important;
    padding: 72px 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .compact-empty p {
    color: #475569 !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 650 !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-list {
    flex: 1 0 auto !important;
    gap: 12px !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-item {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-item-head {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .store-product-dialog.el-dialog:has(.review-dialog) .review-score-meta {
    align-items: flex-end !important;
  }
}

/* Match every existing mobile Back control to the order-detail header button.
 * Only presentation changes; every button keeps its original handler. */
@media (max-width: 768px) {
  :is(
      html.pluvo-agent-mall-embed body #app
        .user-rewards.user-rewards .pluvo-mobile-rewards-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
        .user-messages .pluvo-mobile-messages-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
        .user-messages .pluvo-mobile-message-archive-back[type="button"],
      html.pluvo-agent-mall-embed body #app
        .user-profile.user-profile .pluvo-mobile-profile-page-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-cart-address-manager=""] body #app
        .user-profile.user-profile .address-card.address-card
        .pluvo-mobile-cart-address-back[type="button"],
      html.pluvo-agent-mall-embed body
        .product-detail-scroll-overlay
        :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
        > .el-dialog__header > .el-dialog__headerbtn
    ) {
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: start !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #17212b !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  :is(
      html.pluvo-agent-mall-embed body #app
        .user-rewards.user-rewards .pluvo-mobile-rewards-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
        .user-messages .pluvo-mobile-messages-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
        .user-messages .pluvo-mobile-message-archive-back[type="button"],
      html.pluvo-agent-mall-embed body #app
        .user-profile.user-profile .pluvo-mobile-profile-page-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-cart-address-manager=""] body #app
        .user-profile.user-profile .address-card.address-card
        .pluvo-mobile-cart-address-back[type="button"],
      html.pluvo-agent-mall-embed body
        .product-detail-scroll-overlay
        :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
        > .el-dialog__header > .el-dialog__headerbtn
    )::before {
    content: "‹" !important;
    display: block !important;
    color: #17212b !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 0.8 !important;
  }

  :is(
      html.pluvo-agent-mall-embed body #app
        .user-rewards.user-rewards .pluvo-mobile-rewards-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
        .user-messages .pluvo-mobile-messages-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
        .user-messages .pluvo-mobile-message-archive-back[type="button"],
      html.pluvo-agent-mall-embed body #app
        .user-profile.user-profile .pluvo-mobile-profile-page-back[type="button"],
      html.pluvo-agent-mall-embed[data-pluvo-mobile-cart-address-manager=""] body #app
        .user-profile.user-profile .address-card.address-card
        .pluvo-mobile-cart-address-back[type="button"],
      html.pluvo-agent-mall-embed body
        .product-detail-scroll-overlay
        :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
        > .el-dialog__header > .el-dialog__headerbtn
    ):is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html.pluvo-agent-mall-embed body
    .product-detail-scroll-overlay
    :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
    > .el-dialog__header > .el-dialog__headerbtn .el-dialog__close {
    display: none !important;
  }

  html.pluvo-agent-mall-embed body
    .product-detail-scroll-overlay
    :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
    > .el-dialog__header {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 58px !important;
    padding: 10px 54px !important;
  }

  html.pluvo-agent-mall-embed body
    .product-detail-scroll-overlay
    :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
    > .el-dialog__header > .el-dialog__headerbtn {
    position: absolute !important;
    top: 9px !important;
    right: auto !important;
    left: 10px !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    color: #17212b !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    font-size: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html.pluvo-agent-mall-embed body
    .product-detail-scroll-overlay
    :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
    > .el-dialog__header > .el-dialog__headerbtn:is(
      :hover,
      :focus,
      :focus-visible,
      :active
    ) {
    outline: 0 !important;
    color: #17212b !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html.pluvo-agent-mall-embed body
    .product-detail-scroll-overlay
    :is(.home-product-dialog, .messages-product-dialog, .pluvo-agent-mobile-product-detail-dialog).el-dialog
    > .el-dialog__header > .el-dialog__headerbtn::before {
    content: "‹" !important;
    display: block !important;
    color: #17212b !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 0.8 !important;
    text-shadow: none !important;
    filter: none !important;
  }

  html.pluvo-agent-mall-embed body #app .user-profile.user-profile
    .pluvo-mobile-profile-page-head {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 9px 4px !important;
  }

  html.pluvo-agent-mall-embed body #app .user-profile.user-profile
    .pluvo-mobile-profile-page-back {
    align-self: center !important;
    justify-self: start !important;
  }

  html.pluvo-agent-mall-embed body #app .user-rewards.user-rewards
    .pluvo-mobile-rewards-head {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
    .user-messages .panel-head:has(> .pluvo-mobile-messages-back) {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  html.pluvo-agent-mall-embed[data-pluvo-mobile-messages-skin="v1"] body #app
    .user-messages .pluvo-mobile-message-archive-head {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
  }

  html.pluvo-agent-mall-embed[data-pluvo-mobile-cart-address-manager=""] body #app
    .user-profile.user-profile .address-card.address-card .card-header {
    align-items: center !important;
    min-height: 58px !important;
  }

  html.pluvo-agent-mall-embed body #app
    .pluvo-user-messages-contact-dialog
    .shared-message-conversation-panel > .panel-head {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 58px !important;
  }

  html.pluvo-agent-mall-embed body #app
    .pluvo-user-messages-contact-dialog .pluvo-mobile-messages-back {
    align-self: center !important;
    justify-self: start !important;
    margin: 0 8px 0 0 !important;
  }

  .mall-modal-backdrop.mall-embed-modal.mall-payment-route
    .mall-modal .mall-modal-close {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 14px !important;
    right: auto !important;
    left: 12px !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #17212b !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mall-modal-backdrop.mall-embed-modal.mall-payment-route
    .mall-modal .mall-modal-close::before {
    content: "‹" !important;
    display: block !important;
    color: #17212b !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 0.8 !important;
  }

  .mall-modal-backdrop.mall-embed-modal.mall-payment-route
    .mall-modal .mall-modal-close:is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body:has(.mall-embed-frame[data-pluvo-mobile-review-page-open="1"])
    .mall-modal-backdrop.mall-embed-modal .mall-modal .mall-modal-close,
  body:has(.mall-embed-frame[data-pluvo-mobile-inner-back-open="1"])
    .mall-modal-backdrop.mall-embed-modal .mall-modal .mall-modal-close {
    display: none !important;
  }
}