/* =========================================================
   BALELE v3 Phase 5.6 Step 7
   Mobile Page Visual Polish

   Scope:
   - Mobile visual layer only.
   - No REST, CPT, query, database, interaction, or permission logic.
   - Uses shared tokens and body page classes from the UI Architecture Layer.

   Purpose:
   Bring My Account / My Wall / My Pins / Submit Pin closer to the
   approved mobile design direction while keeping desktop untouched.
   ========================================================= */
@media (max-width: 768px) {
  body.balele-ui-v56:not(.balele-page-home) {
    background: var(--ba-mobile-page-soft-bg) !important;
  }

  body.balele-ui-v56:not(.balele-page-home) .balele-site-header {
    min-height: 64px !important;
    padding: 0 14px !important;
    background: rgba(255,255,255,.95) !important;
    border-bottom: 1px solid rgba(35,20,15,.06) !important;
    box-shadow: 0 10px 24px rgba(28,20,16,.05) !important;
  }

  body.balele-ui-v56:not(.balele-page-home) .balele-mobile-header {
    min-height: 64px !important;
    grid-template-columns: 44px 1fr 44px 44px !important;
    gap: 8px !important;
  }

  body.balele-ui-v56:not(.balele-page-home) .balele-mobile-icon-btn,
  body.balele-ui-v56:not(.balele-page-home) .balele-mobile-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }

  body.balele-ui-v56:not(.balele-page-home) .balele-mobile-logo strong {
    font-size: 20px !important;
    letter-spacing: .08em !important;
  }

  body.balele-ui-v56:not(.balele-page-home) .balele-mobile-logo span {
    font-size: 10.5px !important;
    letter-spacing: .01em !important;
  }

  /* ---------- My Account ---------- */
  body.balele-ui-v56.balele-page-account .balele-account-page {
    min-height: auto !important;
    padding: 18px var(--ba-mobile-page-pad-x) calc(var(--ba-tabbar-h-mobile) + env(safe-area-inset-bottom) + 44px) !important;
    overflow: visible !important;
    background: var(--ba-mobile-page-soft-bg) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-bg {
    background:
      radial-gradient(circle at 14% 8%, rgba(255, 214, 158, .58), transparent 36%),
      radial-gradient(circle at 88% 10%, rgba(207, 224, 255, .55), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,245,230,.58)) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-container {
    max-width: var(--ba-mobile-page-max) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-hero {
    display: block !important;
    padding: 24px !important;
    border-radius: 32px !important;
    background: var(--ba-mobile-page-card-bg) !important;
    box-shadow: var(--ba-mobile-page-shadow) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-hero-main {
    display: grid !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body.balele-ui-v56.balele-page-account .balele-user-avatar-frame {
    width: 96px !important;
    height: 96px !important;
    border-radius: 30px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-user-avatar {
    border-radius: 25px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-user-level-badge {
    right: -8px !important;
    bottom: -8px !important;
    min-width: 46px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-kicker {
    margin-top: 2px !important;
    letter-spacing: .22em !important;
    color: var(--ba-mobile-kicker) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-hero h1 {
    font-size: clamp(42px, 12vw, 56px) !important;
    letter-spacing: -.045em !important;
    color: var(--ba-mobile-ink) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-subtitle {
    font-size: 16px !important;
    line-height: 1.45 !important;
    color: var(--ba-mobile-muted) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-hero-tags span {
    min-height: 34px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    background: rgba(255, 232, 190, .86) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 22px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-button {
    min-height: 54px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    color: var(--ba-mobile-ink) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-button--primary {
    background: #241813 !important;
    color: #fff !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-stat-card,
  body.balele-ui-v56.balele-page-account .balele-account-panel {
    border-radius: 26px !important;
    background: var(--ba-mobile-page-card-bg) !important;
    box-shadow: 0 14px 36px rgba(76,52,28,.10) !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-stat-card {
    padding: 18px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-stat-card strong {
    font-size: 34px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 14px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-account-panel {
    padding: 20px !important;
  }

  body.balele-ui-v56.balele-page-account .balele-quick-link,
  body.balele-ui-v56.balele-page-account .balele-activity-item {
    border-radius: 20px !important;
    padding: 15px !important;
  }

  /* ---------- My Pin Wall / Public Wall ---------- */
  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-page,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-page {
    background: var(--ba-mobile-page-soft-bg) !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-header {
    max-width: var(--ba-mobile-page-max) !important;
    padding: 18px var(--ba-mobile-page-pad-x) 12px !important;
    display: grid !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-owner {
    gap: 14px !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-avatar img {
    border-radius: 20px !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-title p,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-title p {
    letter-spacing: .22em !important;
    color: var(--ba-mobile-kicker) !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-title h1,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-title h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
    letter-spacing: -.04em !important;
    line-height: 1 !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-actions,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-btn,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-btn {
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-tabs,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-tabs {
    max-width: var(--ba-mobile-page-max) !important;
    padding: 0 var(--ba-mobile-page-pad-x) 12px !important;
    gap: 9px !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-tab,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-tab {
    min-height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.76) !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-shell,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-shell {
    margin: 0 12px 16px !important;
    border-radius: 30px !important;
  }

  /* ---------- My Pins management: mobile uses compact list cards. ---------- */
  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-page {
    padding: 24px var(--ba-mobile-page-pad-x) calc(var(--ba-tabbar-h-mobile) + env(safe-area-inset-bottom) + 44px) !important;
    background: var(--ba-mobile-page-soft-bg) !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-hero,
  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-toolbar,
  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-grid,
  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-status {
    max-width: var(--ba-mobile-page-max) !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-hero {
    margin-bottom: 18px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-hero p {
    letter-spacing: .22em !important;
    color: var(--ba-mobile-kicker) !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-hero h1 {
    font-size: clamp(44px, 13vw, 60px) !important;
    letter-spacing: -.055em !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-hero span {
    font-size: 16px !important;
    line-height: 1.45 !important;
    color: var(--ba-mobile-muted) !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-btn {
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 15px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-toolbar {
    display: grid !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 28px !important;
    background: var(--ba-mobile-page-card-bg) !important;
    box-shadow: var(--ba-mobile-page-shadow) !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-toolbar input,
  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-toolbar select {
    min-height: 54px !important;
    border-radius: 18px !important;
    padding: 0 16px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background: var(--ba-mobile-page-card-bg) !important;
    box-shadow: 0 14px 34px rgba(76,52,28,.11) !important;
    overflow: visible !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card-media {
    width: 110px !important;
    height: 110px !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-badge {
    top: 8px !important;
    right: 8px !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card-body {
    padding: 2px 0 0 !important;
    min-width: 0 !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card-body h2 {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    line-height: 1.16 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-row {
    margin: 8px 0 !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-row label {
    gap: 4px !important;
    font-size: 12px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card select {
    min-height: 38px !important;
    border-radius: 14px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-tax-summary {
    gap: 5px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-tax-summary span {
    font-size: 10px !important;
    padding: 4px 7px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card-actions {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card-actions .balele-my-pins-btn {
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  @media (max-width: 390px) {
    body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card {
      grid-template-columns: 94px minmax(0, 1fr) !important;
      gap: 12px !important;
      padding: 12px !important;
    }

    body.balele-ui-v56.balele-page-my-pins .balele-my-pins-card-media {
      width: 94px !important;
      height: 94px !important;
    }
  }

  /* ---------- Submit Pin ---------- */
  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-page {
    padding: 24px var(--ba-mobile-page-pad-x) calc(var(--ba-tabbar-h-mobile) + env(safe-area-inset-bottom) + 44px) !important;
    background: var(--ba-mobile-page-soft-bg) !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-hero,
  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-form {
    max-width: var(--ba-mobile-page-max) !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-hero {
    margin-bottom: 20px !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-hero p {
    letter-spacing: .22em !important;
    color: var(--ba-mobile-kicker) !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-hero h1 {
    font-size: clamp(46px, 14vw, 64px) !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-hero span {
    font-size: 17px !important;
    line-height: 1.45 !important;
    color: var(--ba-mobile-muted) !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-card {
    padding: 22px !important;
    border-radius: 30px !important;
    background: var(--ba-mobile-page-card-bg) !important;
    box-shadow: var(--ba-mobile-page-shadow) !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-card-head p {
    letter-spacing: .22em !important;
    color: var(--ba-mobile-kicker) !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-card-head h2 {
    font-size: 28px !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-grid,
  body.balele-ui-v56.balele-page-submit-pin .balele-submit-preview-grid {
    grid-template-columns: 1fr !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-field input,
  body.balele-ui-v56.balele-page-submit-pin .balele-submit-field textarea,
  body.balele-ui-v56.balele-page-submit-pin .balele-submit-field select {
    min-height: 54px !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-actions {
    display: grid !important;
    gap: 12px !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-button {
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 999px !important;
  }
}