:root {
  --garanit-content-max: 1440px;
  --garanit-mobile-nav-height: 70px;
  --garanit-safe-bottom: env(safe-area-inset-bottom, 0px);
  --garanit-safe-top: env(safe-area-inset-top, 0px);
  --garanit-safe-left: env(safe-area-inset-left, 0px);
  --garanit-safe-right: env(safe-area-inset-right, 0px);
  --garanit-viewport-width: 100vw;
  --garanit-viewport-offset-top: 0px;
  --garanit-viewport-height: 100vh;
  --garanit-viewport-height: 100dvh;
}

html {
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

img,
picture,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  min-width: 0;
  max-width: 100%;
}

textarea,
pre,
code,
.profile-bio,
.listing-rich-content,
.description-box,
.support-message-bubble,
.inbox-bubble,
.todo-task-description {
  overflow-wrap: anywhere;
  word-break: break-word;
}

:where(
  .panel-main,
  .panel-content,
  .profile-page-shell,
  .profile-content-grid,
  .organization-hub,
  .organization-panel-main,
  .listing-detail-shell,
  .listing-left,
  .listing-right,
  .listing-editor,
  .listing-editor-layout,
  .analytics-page,
  .comparison-page,
  .notifications-inbox-shell,
  .support-main,
  .support-shell,
  .admin-module-main,
  .admin-module-wrap,
  .todo-container,
  .todo-shell,
  .market-listings-page,
  .listings-page-container,
  #new-listing-container,
  .car-banners,
  .footer-main
) {
  min-width: 0;
}

/* Native horizontal containment for real data tables. Existing wrappers are
   preserved; the JS helper only adds a class and never reparents table nodes. */
.garanit-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.garanit-table-scroll > table {
  width: 100%;
  min-width: max-content;
}

@media (max-width: 900px) {
  table.garanit-responsive-table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

:where(
  .modal,
  .modal-content,
  .modal-window,
  .modal-dialog,
  .organization-invite-dialog,
  .organization-confirm-dialog,
  .organization-leave-dialog,
  .store-subscription-dialog,
  .store-admin-form,
  .profile-review-modal,
  .profile-followers-modal,
  .image-modal-content,
  .analytics-modal-dialog,
  .todo-modal,
  .support-chat,
  .nav-login-modal-window,
  .comparison-manual-popover
) {
  max-width: calc(100vw - 24px);
  max-height: calc(var(--garanit-viewport-height) - 24px);
}

:where(
  .organization-invite-dialog,
  .organization-confirm-dialog,
  .organization-leave-dialog,
  .store-subscription-dialog,
  .store-admin-form,
  .profile-review-modal,
  .analytics-modal-dialog,
  .todo-modal,
  .nav-login-modal-window
) {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Make clickable controls comfortably usable on touch screens without changing
   compact desktop icon controls. */
@media (pointer: coarse) {
  :where(button, [role='button'], input[type='button'], input[type='submit'], a.panel-button) {
    touch-action: manipulation;
  }

  :where(
    .nav-icon-button,
    .profile-icon-button,
    .management-listing-action,
    .inbox-icon-button,
    .notifications-inbox-delete,
    .todo-mini-button,
    .todo-icon-button,
    .comparison-remove
  ) {
    min-width: 40px;
    min-height: 40px;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  :root {
    --sidebar-width: 320px;
    --sidebar-layout-width: 320px;
    --market-sidebar-width: 320px;
    --market-sidebar-offset: 320px;
  }

  .sidebar {
    width: 320px !important;
  }

  .sidebar-separator {
    left: 320px !important;
  }

  .sidebar-profile-banner,
  .sidebar-profile-banner-overlay,
  .profile-search-container {
    width: 320px !important;
    max-width: 320px !important;
  }

  .profile-search-bar,
  .profile-search-bar input {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }

  .sidebar-user-info {
    margin-inline: 10px !important;
  }

  .sidebar-profile-pic-container {
    width: 82px !important;
    height: 82px !important;
    margin-right: 13px !important;
  }

  .sidebar-profile-pic-frame-container {
    width: 98px !important;
    height: 98px !important;
  }

  .sidebar-user-name {
    max-width: 14ch !important;
    font-size: 18px !important;
  }

  body.has-sidebar .footer-container {
    width: calc(100% - 320px) !important;
    margin-left: 320px !important;
    padding-inline: clamp(28px, 4vw, 64px) !important;
  }

  .panel-main,
  .admin-module-main,
  .admin-groups-page,
  .admin-settings-page .panel-main,
  .todo-container,
  .profile-page-shell,
  .profile-blocked-state {
    width: calc(100% - 320px) !important;
    margin-left: 320px !important;
  }

  .panel-main::before {
    left: 320px !important;
  }

  body.panel-page .footer,
  body.panel-page footer {
    margin-left: 320px !important;
  }

  body.garanit-listings-sidebar
    :is(#new-listing-container, .market-listings-page, .listings-page-container, .container) {
    width: calc(100% - 320px) !important;
    margin-left: 320px !important;
  }

  body.garanit-listings-sidebar :is(.top-container, .top-categories) {
    left: 320px !important;
    width: calc(100% - 320px) !important;
  }

  .listing-detail-shell {
    --detail-sidebar-width: 320px !important;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
    --sidebar-layout-width: 0px;
    --market-sidebar-width: 0px;
    --market-sidebar-offset: 0px;
  }

  body.has-sidebar .footer-container,
  .panel-main,
  .admin-module-main,
  .admin-groups-page,
  .admin-settings-page .panel-main,
  .todo-container,
  .profile-page-shell,
  .profile-blocked-state,
  body.garanit-listings-sidebar
    :is(#new-listing-container, .market-listings-page, .listings-page-container, .container) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    left: auto !important;
  }
}

@media (max-width: 1180px) {
  body.garanit-route-market :is(.top-container, .car-banners, .pages),
  body.garanit-route-market-listings-all :is(.top-container, .car-banners, .pages) {
    max-width: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  body.garanit-route-market .top-container,
  body.garanit-route-market-listings-all .top-container {
    left: 330px !important;
    width: calc(100% - 342px) !important;
  }

  body.garanit-route-market .car-banners,
  body.garanit-route-market-listings-all .car-banners,
  body.garanit-route-market .pages,
  body.garanit-route-market-listings-all .pages {
    width: calc(100% - 320px) !important;
    margin-left: 320px !important;
    padding-inline: 18px !important;
  }

  body.garanit-route-market .listings-container,
  body.garanit-route-market-listings-all .listings-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  body.garanit-route-market,
  body.garanit-route-market-listings-all {
    padding-top: var(--garanit-mobile-nav-height);
  }

  body.garanit-route-market .top-container,
  body.garanit-route-market-listings-all .top-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(100% - 20px) !important;
    height: auto !important;
    min-height: 58px !important;
    margin: 10px auto 0 !important;
    padding: 7px !important;
    border-radius: 14px !important;
    z-index: 900 !important;
  }

  body.garanit-route-market .top-links-wrapper,
  body.garanit-route-market-listings-all .top-links-wrapper {
    min-height: 44px;
  }

  body.garanit-route-market .top-links,
  body.garanit-route-market-listings-all .top-links {
    padding-right: 4px !important;
  }

  body.garanit-route-market :is(.top-link, .top-link-active, .top-link-search),
  body.garanit-route-market-listings-all :is(.top-link, .top-link-active, .top-link-search) {
    margin-block: 10px !important;
    font-size: 13px !important;
  }

  body.garanit-route-market .top-link-home,
  body.garanit-route-market-listings-all .top-link-home {
    width: 40px !important;
    height: 40px !important;
    margin: 2px 7px 2px 2px !important;
    border-radius: 12px !important;
  }

  body.garanit-route-market .top-sorting-desktop,
  body.garanit-route-market-listings-all .top-sorting-desktop {
    display: none !important;
  }

  body.garanit-route-market .sorting-phone,
  body.garanit-route-market-listings-all .sorting-phone {
    display: grid !important;
    flex: 0 0 42px;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    place-items: center;
    border-radius: 12px;
  }

  body.garanit-route-market .car-banners,
  body.garanit-route-market-listings-all .car-banners {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px var(--garanit-page-gutter-small) 46px !important;
    min-height: auto !important;
  }

  body.garanit-route-market :is(.listings-container, #myListingsWrapper),
  body.garanit-route-market-listings-all :is(.listings-container, #myListingsWrapper) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    gap: 14px !important;
  }

  body.garanit-route-market :is(.car-banner, .management-listing-card),
  body.garanit-route-market-listings-all :is(.car-banner, .management-listing-card) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.garanit-route-market .pages,
  body.garanit-route-market-listings-all .pages {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px var(--garanit-page-gutter-small) 30px !important;
    flex-wrap: wrap;
  }

  .management-listing-actions {
    --management-mobile-action-size: clamp(36px, calc((100vw - 80px) / 6), 44px);
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
    border-radius: 0 0 16px 16px !important;
  }

  .management-listing-actions > *,
  .management-listing-actions .management-listing-action,
  .management-listing-actions .listing-status-badge {
    box-sizing: border-box;
    width: var(--management-mobile-action-size) !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 0 0 var(--management-mobile-action-size) !important;
  }

  .management-listing-actions .management-listing-action,
  .management-listing-actions .listing-status-badge {
    height: var(--management-mobile-action-size) !important;
    min-height: var(--management-mobile-action-size) !important;
    padding: 0 !important;
    justify-content: center;
  }

  .management-listing-actions
    :is(.management-listing-action, .listing-status-badge)
    :is(span, small, .fa-chevron-down) {
    display: none !important;
  }

  .management-listing-actions
    > :is(.management-status-control, .organization-status-control, .management-listing-status) {
    order: 10 !important;
    margin-left: auto !important;
  }

  .management-listing-actions .management-listing-action > i,
  .management-listing-actions .listing-status-badge > i {
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
  }

  .management-listing-status {
    width: 100%;
    order: 10 !important;
    margin: 2px 0 0 !important;
    justify-content: center;
  }

  .management-listing-status .listing-status-badge {
    max-width: 100%;
  }

  .listing-status-menu,
  .management-listing-dropdown,
  .discount-modal-dialog,
  .expiration-modal-dialog {
    max-width: calc(100vw - 20px) !important;
  }

  .sorting-menu {
    width: calc(100vw - 20px) !important;
    max-height: calc(var(--garanit-viewport-height) - 94px) !important;
    inset: 80px 10px auto !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 480px) {
  .management-listing-action span {
    display: none !important;
  }
}

@media (max-width: 1180px) {
  .listing-detail-shell {
    width: calc(100% - var(--detail-sidebar-width, 320px) - 28px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px) !important;
    gap: 16px !important;
    margin-left: calc(var(--detail-sidebar-width, 320px) + 14px) !important;
  }
}

@media (max-width: 900px) {
  .listing-detail-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .listing-detail-shell .listing-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
  }

  .listing-detail-shell .listing-right > * {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  body.garanit-route-market-listings-view,
  body.listing-unavailable-page {
    padding-top: var(--garanit-mobile-nav-height);
  }

  .listing-detail-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px var(--garanit-page-gutter-small) 42px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .listing-detail-shell .listing-right {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .listing-detail-shell
    :is(
      .photos-area,
      .description-box,
      .user-card,
      .price-card,
      .listing-actions-card,
      .listing-map-card
    ) {
    border-radius: 17px !important;
  }

  .listing-detail-shell .photos-area {
    padding: 8px !important;
  }

  .listing-detail-shell .photo-thumbnails {
    max-width: 100%;
    overflow-x: auto;
  }

  .listing-detail-shell :is(.user-stats, .listing-spec-grid, .listing-summary-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .listing-similar-section,
  .listing-unavailable-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: var(--garanit-page-gutter-small) !important;
  }

  .listing-similar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .listing-unavailable-card {
    padding: 30px 18px !important;
    border-radius: 18px !important;
  }
  .listing-detail-shell .listing-left {
    margin-top: 110px;
  }
}

@media (max-width: 520px) {
  .listing-detail-shell :is(.user-stats, .listing-spec-grid, .listing-summary-grid),
  .listing-similar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 769px) {
  body.sidebar-hidden .listing-detail-shell,
  body.sidebar-collapsed .listing-detail-shell {
    width: min(1360px, calc(100vw - 48px)) !important;
    margin-inline: auto !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .listing-editor,
  #new-listing-container {
    width: calc(100% - 320px - 28px) !important;
    max-width: 100% !important;
    margin-left: 334px !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 768px) {
  body.garanit-route-market-listings-new,
  body.garanit-route-market-listings-edit,
  body.garanit-route-organization-new {
    padding-top: var(--garanit-mobile-nav-height);
  }

  .listing-editor,
  #new-listing-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px var(--garanit-page-gutter-small) 44px !important;
  }

  .listing-editor-header {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .listing-editor-header h1 {
    font-size: clamp(24px, 8vw, 31px) !important;
  }

  .listing-editor-steps,
  .listing-wizard-steps {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .listing-editor-steps::-webkit-scrollbar,
  .listing-wizard-steps::-webkit-scrollbar {
    display: none;
  }

  .listing-editor-steps button,
  .listing-wizard-steps button {
    flex: 0 0 auto;
    min-width: 44px;
  }

  .listing-editor-card,
  .listing-quality,
  .listing-summary {
    padding: 15px !important;
    border-radius: 15px !important;
  }

  .listing-form-grid.two,
  .listing-form-grid.three,
  .listing-form-grid.four,
  .listing-price-row,
  .listing-choice-grid,
  .listing-summary-grid,
  .listing-measurements {
    grid-template-columns: minmax(0, 1fr) !important;
  }

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

  .listing-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .listing-editor-submit,
  .listing-wizard-actions {
    position: sticky !important;
    bottom: max(8px, var(--garanit-safe-bottom)) !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    padding: 11px !important;
  }

  .listing-editor-submit > *,
  .listing-wizard-actions > * {
    min-width: 0;
  }
}

@media (max-width: 460px) {
  .listing-features,
  .listing-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .listing-photo-drop {
    min-height: 150px !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .analytics-page,
  .comparison-page,
  body.garanit-route-market-listings-statistics .container,
  body.garanit-route-market-listings-settings .container {
    width: calc(100% - 320px - 28px) !important;
    max-width: none !important;
    margin-left: 334px !important;
    margin-right: 14px !important;
  }
}

@media (max-width: 768px) {
  .analytics-page,
  .comparison-page,
  body.garanit-route-market-listings-statistics .container,
  body.garanit-route-market-listings-settings .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: calc(var(--garanit-mobile-nav-height) + 16px) var(--garanit-page-gutter-small) 44px !important;
    left: auto !important;
    top: auto !important;
  }

  .analytics-toolbar,
  .comparison-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .analytics-toolbar-actions,
  .comparison-scroll-actions,
  .comparison-modes {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .analytics-toolbar-actions::-webkit-scrollbar,
  .comparison-scroll-actions::-webkit-scrollbar,
  .comparison-modes::-webkit-scrollbar {
    display: none;
  }

  .analytics-kpis,
  .analytics-grid,
  .analytics-grid-main,
  .analytics-grid-breakdowns,
  .analytics-grid-detail,
  .analytics-detail-stats,
  .analytics-listing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .analytics-card,
  .analytics-kpi {
    min-width: 0 !important;
  }

  .comparison-scroll {
    width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }

  .comparison-table {
    min-width: 720px;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .profile-content-grid {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) !important;
    gap: 16px !important;
  }
}

@media (max-width: 980px) {
  .profile-content-grid,
  .organization-public-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-side-column,
  .organization-public-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 768px) {
  body.profile-page,
  body.organization-public-page,
  body.organization-hub-page {
    padding-top: var(--garanit-mobile-nav-height);
    margin-top: calc(0px - var(--garanit-mobile-nav-height));
  }

  .profile-page-shell,
  .profile-blocked-state,
  .organization-hub,
  .organization-public {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .profile-hero,
  .organization-public-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 0px !important;
  }

  .profile-hero-content,
  .organization-public-identity {
    max-width: 100% !important;
  }

  .profile-actions,
  .organization-public-actions,
  .organization-card-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .organization-public-actions > *,
  .organization-card-actions > * {
    flex: 1 1 auto;
  }

  .profile-stat-strip,
  .seller-performance-grid,
  .organization-card-stats,
  .organization-public-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .profile-content-grid,
  .organization-public-layout {
    padding-inline: 0 !important;
  }

  .profile-panel,
  .seller-profile-card,
  .seller-safety-card,
  .organization-public-panel,
  .organization-card,
  .organization-create-card {
    border-radius: 0px !important;
  }

  .profile-panel-heading,
  .seller-friends-heading,
  .organization-hub-header,
  .organization-category-heading {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  body.profile-page .profile-content-grid {
    padding-inline: 14px !important;
  }
  body.profile-page :is(.profile-panel, .seller-profile-card, .seller-safety-card) {
    border-radius: 18px !important;
  }

  .profile-tabs,
  .settings-tabs-scroll {
    width: 100%;
    overflow-x: auto;
  }

  .profile-listing-grid,
  .profile-shared-listing-grid,
  .profile-modal-listing-grid,
  .organization-public-listings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .profile-side-column,
  .organization-public-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-review,
  .organization-review {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  .profile-review-modal,
  .profile-followers-modal,
  .profile-listings-modal {
    width: calc(100vw - 20px) !important;
  }

  .organization-grid,
  .organization-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 520px) {
  .profile-listing-grid,
  .profile-shared-listing-grid,
  .profile-modal-listing-grid,
  .organization-public-listings {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-avatar-wrap,
  .organization-public-identity > img {
    flex: 0 0 auto;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .panel-main {
    padding-inline: 22px !important;
  }
}

@media (max-width: 900px) {
  .store-subscription-grid,
  .store-product-grid,
  .inventory-grid,
  .inventory-grid.is-wide,
  .friends-grid,
  .rewards-grid,
  .settings-security-grid,
  .settings-connections-grid,
  .settings-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .store-coins-layout,
  .settings-profile-visual,
  .rewards-referral {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .panel-main {
    padding-top: calc(var(--garanit-mobile-nav-height) + 18px) !important;
    padding-left: var(--garanit-page-gutter-small) !important;
    padding-right: var(--garanit-page-gutter-small) !important;
    padding-bottom: calc(46px + var(--garanit-safe-bottom)) !important;
  }

  .panel-content {
    width: 100% !important;
  }

  .panel-toolbar,
  .topbar-inventory-container,
  .topbar-store-container,
  .topbar-friends-container,
  .topbar-settings-container,
  .topbar-rewards-container {
    width: 100% !important;
    min-height: 60px !important;
    margin-bottom: 16px !important;
    padding: 7px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    border-radius: 14px !important;
  }

  .panel-toolbar-right {
    flex: 0 0 auto;
  }

  .panel-card:not(.inventory-card):not(.friend-card) {
    padding: 17px !important;
    border-radius: 16px !important;
  }

  .store-section-heading,
  .inventory-section-heading,
  .friends-section-heading,
  .rewards-section-heading,
  .settings-card-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .store-subscription-controls,
  .store-billing-toggle,
  .settings-form-actions {
    width: 100%;
  }

  .store-billing-toggle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-business-toggle-wrapper,
  .store-business-toggle {
    width: 100%;
  }

  .settings-notification-table {
    overflow-x: auto;
  }

  .settings-notification-row {
    min-width: 650px;
  }

  .friend-card {
    min-width: 0;
  }

  .friend-actions {
    flex-wrap: wrap;
  }

  .friend-actions > .panel-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 600px) {
  .store-subscription-grid,
  .store-product-grid,
  .inventory-grid,
  .inventory-grid.is-wide,
  .friends-grid,
  .rewards-grid,
  .settings-security-grid,
  .settings-connections-grid,
  .settings-social-grid,
  .store-choice-grid,
  .store-gateway-grid,
  .settings-theme-options,
  .settings-visibility-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .store-subscription-card,
  .store-product-card,
  .inventory-card,
  .friend-card,
  .reward-game-card {
    min-width: 0 !important;
  }

  .store-subscription-card-header,
  .inventory-card-footer,
  .friends-add-card form,
  .settings-inline-form {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .store-plan-price strong {
    font-size: clamp(30px, 11vw, 44px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1050px) {
  body.garanit-messages-page {
    --inbox-sidebar-width: 330px !important;
    --inbox-content-width: calc(100vw - 330px) !important;
  }

  .inbox-sidebar {
    width: 330px !important;
  }

  .inbox-chat {
    margin-left: 330px !important;
    width: calc(100% - 330px) !important;
  }
}

@media (max-width: 768px) {
  body.garanit-messages-page,
  body.notifications-inbox-page {
    padding-top: var(--garanit-mobile-nav-height);
  }

  body.garanit-messages-page {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .inbox-app {
    inset: auto !important;
    width: 100% !important;
    height: var(--garanit-viewport-height) !important;
    padding-top: var(--garanit-mobile-nav-height) !important;
  }

  .inbox-sidebar {
    width: min(92vw, 380px) !important;
    max-width: 100% !important;
  }

  .inbox-chat,
  .inbox-chat-view,
  .inbox-thread,
  .inbox-composer-shell {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .inbox-chat-header-inner,
  .inbox-composer-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 10px !important;
  }

  .inbox-message-group {
    max-width: 100% !important;
  }

  .inbox-group-bubbles {
    max-width: calc(100% - 48px) !important;
  }

  .inbox-bubble,
  .inbox-message-card,
  .inbox-sent-listing,
  .inbox-sent-image {
    max-width: 100% !important;
  }

  .inbox-composer-row {
    gap: 7px !important;
  }

  .notifications-inbox-shell {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    margin: 12px auto 36px !important;
  }

  .notifications-inbox-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .support-main,
  .faq-page main,
  .report-page main,
  .forgot-email-page main,
  .forgot-password-page main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: calc(var(--garanit-mobile-nav-height) + 18px) var(--garanit-page-gutter-small) 42px !important;
  }

  .support-shell,
  .support-chat,
  .main-container,
  .login-card,
  .register-card,
  .qr-m-card,
  .qr-s-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .support-options,
  .qr-grid,
  .dob-wrapper,
  .gender-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .support-chat {
    max-height: calc(
      var(--garanit-viewport-height) - var(--garanit-mobile-nav-height) - 20px
    ) !important;
  }

  .support-composer {
    padding-bottom: calc(12px + var(--garanit-safe-bottom)) !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .admin-module-main,
  .admin-groups-page,
  .admin-settings-page .panel-main,
  .todo-container {
    padding-inline: 20px !important;
  }

  .todo-container .todo-hero-text,
  .todo-container .todo-hero-side {
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  .admin-grid,
  .admin-form-grid,
  .todo-stats,
  .todo-form-grid,
  .todo-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .admin-module-main,
  .admin-groups-page,
  .admin-settings-page .panel-main,
  .todo-container {
    padding: calc(var(--garanit-mobile-nav-height) + 16px) var(--garanit-page-gutter-small) 44px !important;
  }

  .admin-module-toolbar,
  .admin-row,
  .todo-hero-content,
  .todo-toolbar-grid,
  .todo-form-footer,
  .todo-detail-actions-stack {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .admin-actions,
  .todo-actions {
    width: 100%;
  }

  .todo-container .todo-hero-content {
    padding: 24px 18px !important;
  }

  .todo-container .todo-hero-text,
  .todo-container .todo-hero-side {
    width: 100% !important;
  }

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

  .todo-board {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .todo-table {
    min-width: 760px;
  }

  .todo-modal-overlay {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 10px !important;
  }

  .todo-modal {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .todo-stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 480px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    font-size: 16px !important;
  }

  :where(
    h1,
    .profile-name-row h1,
    .organization-hub-header h1,
    .analytics-toolbar-title,
    .todo-title
  ) {
    overflow-wrap: anywhere;
  }

  .panel-button,
  .profile-primary-button,
  .profile-secondary-button,
  .organization-primary-button,
  .organization-secondary-button {
    white-space: normal !important;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :where(
    .panel-card,
    .profile-panel,
    .organization-card,
    .listing-editor-card,
    .analytics-card,
    .listing-detail-shell .photos-area,
    .listing-detail-shell .description-box
  ) {
    border-width: 2px !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .organization-dashboard {
    margin-left: 320px !important;
    padding-inline: 20px !important;
  }
}

@media (max-width: 900px) {
  .organization-member {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .organization-member > :is(.organization-role, time) {
    grid-column: 1 / 2;
    padding-left: 53px;
  }

  .organization-member-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .organization-inline-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .organization-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: calc(var(--garanit-mobile-nav-height) + 18px) var(--garanit-page-gutter-small) 44px !important;
  }

  .organization-dashboard-inner {
    width: 100%;
    max-width: 100%;
  }

  .organization-dashboard-heading,
  .organization-panel > header,
  .organization-danger-content {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .organization-dashboard-heading .organization-dashboard-button,
  .organization-danger-content .organization-dashboard-button {
    width: 100%;
  }

  .organization-settings-form,
  .organization-current-images {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .organization-settings-form .is-wide,
  .organization-settings-form footer {
    grid-column: auto !important;
  }

  .organization-settings-form footer {
    justify-content: stretch !important;
  }

  .organization-settings-form footer .organization-dashboard-button {
    width: 100%;
  }

  .organization-member {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .organization-member > :is(.organization-role, time) {
    grid-column: auto;
    padding-left: 53px;
  }

  .organization-member-actions {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-start !important;
    padding-left: 53px;
    flex-wrap: wrap;
  }

  .organization-history-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .organization-history-row time {
    grid-column: 2;
  }
}

@media (max-width: 1180px) {
  .hero__content,
  .main-content {
    width: min(100% - 40px, 1180px) !important;
    max-width: 100% !important;
  }

  .hero__content {
    padding-inline: 0 !important;
  }
}

@media (max-width: 768px) {
  body.garanit-route-home {
    padding-top: var(--garanit-mobile-nav-height);
  }

  .hero {
    left: auto !important;
    width: 100% !important;
    min-height: min(
      690px,
      calc(var(--garanit-viewport-height) - var(--garanit-mobile-nav-height))
    ) !important;
    margin-left: 0 !important;
  }

  .hero__content {
    width: 100% !important;
    padding: 58px var(--garanit-page-gutter-small) 42px !important;
  }

  .hero__content h1 {
    font-size: clamp(38px, 12vw, 55px) !important;
  }

  .hero-subtitle-text {
    font-size: 0.78em !important;
  }

  .market-activity {
    width: 100%;
    align-items: stretch !important;
  }

  .market-activity__total {
    width: 100%;
    justify-content: center;
    white-space: normal !important;
  }

  .main-content {
    width: 100% !important;
    padding-inline: var(--garanit-page-gutter-small);
  }

  .brand-row {
    justify-content: flex-start !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 8px;
  }

  .brand-badge {
    flex: 0 0 auto;
  }

  .newsletter {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .newsletter form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  body.garanit-route-market-listings :is(.top-container, .top-categories) {
    left: 320px !important;
    width: calc(100% - 320px) !important;
    margin-left: 0 !important;
  }

  body.garanit-route-market-listings :is(.listing-container, .car-banners, .pages, .container) {
    left: auto !important;
    width: calc(100% - 320px) !important;
    max-width: none !important;
    margin-left: 320px !important;
  }
}

@media (max-width: 768px) {
  body[class*='garanit-route-market-listings'] :is(.top-container, .top-categories) {
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body[class*='garanit-route-market-listings']
    :is(.listing-container, .car-banners, .pages, .container) {
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.garanit-route-market-listings
    :is(
      .car-banner-image-link,
      .car-banner-image-empty-link,
      .car-banner-image,
      .car-banner-image-empty
    ) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .console-shell {
    width: calc(100% - 320px) !important;
    max-width: none !important;
    margin: 82px 0 60px 320px !important;
    padding: 20px !important;
    gap: 16px !important;
  }

  .console-panel {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .console-panel-secondary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .console-title {
    font-size: 26px !important;
  }

  .console-subtitle,
  .console-button,
  .console-line-message,
  .console-line-command,
  .console-line-details,
  .console-line-time,
  .console-line-badge,
  .console-badge {
    font-size: 12px !important;
    letter-spacing: normal !important;
  }

  .console-button {
    min-width: 110px !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
  }

  .console-screen {
    min-height: 310px !important;
    max-height: 520px !important;
    border-radius: 14px !important;
  }

  .console-history {
    height: 420px !important;
    padding: 14px !important;
  }
}

@media (max-width: 768px) {
  .console-shell {
    width: 100% !important;
    margin: 0 !important;
    padding: calc(var(--garanit-mobile-nav-height) + 14px) var(--garanit-page-gutter-small) 42px !important;
  }

  .console-panel,
  .console-line,
  .console-line-details {
    border-radius: 13px !important;
  }

  .console-panel-secondary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .console-topbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .console-topbar-right,
  .console-button {
    width: 100% !important;
  }

  .console-title {
    font-size: clamp(24px, 9vw, 31px) !important;
  }

  .console-subtitle,
  .console-button,
  .console-line-message,
  .console-line-command,
  .console-line-details,
  .console-line-time,
  .console-line-badge,
  .console-badge {
    font-size: 12px !important;
    letter-spacing: normal !important;
  }

  .console-screen {
    min-height: 340px !important;
    max-height: calc(var(--garanit-viewport-height) - 260px) !important;
  }

  .console-history {
    height: 100% !important;
    padding: 12px !important;
  }
}

@media (max-width: 900px) {
  body.garanit-route-login .main-container,
  body.garanit-route-register .main-container,
  body.garanit-route-forgot-password .main-container,
  body.garanit-route-forgot-email .main-container,
  body[class*='garanit-route-login'] .main-container,
  body[class*='garanit-route-register'] .main-container,
  body[class*='garanit-route-forgot-'] .main-container,
  body[class*='garanit-route-auth-'] .main-container {
    height: auto !important;
    min-height: var(--garanit-viewport-height) !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: calc(var(--garanit-mobile-nav-height) + 24px) var(--garanit-page-gutter-small) 42px !important;
  }

  .login-vertical-divider {
    width: 100% !important;
    height: 1px !important;
    align-self: auto !important;
    margin: 16px 0 !important;
  }

  .login-divider-badge {
    background: var(--background) !important;
  }

  .login-card,
  .register-card,
  .qr-login-container,
  .main-login-form-container,
  .main-register-form-container {
    width: 100% !important;
    max-width: 480px !important;
  }

  .login-card,
  .register-card {
    flex-direction: column;
    padding: clamp(22px, 6vw, 38px) !important;
    border-radius: 22px !important;
  }

  .qr-login-container {
    flex-shrink: 1 !important;
  }

  .how-to-scan-content {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .login-card,
  .register-card {
    padding: 20px 15px !important;
    border-radius: 18px !important;
  }

  .reg-register-title,
  .log-login-title,
  .qr-login-container h3 {
    font-size: 25px !important;
  }

  .reg-button-container,
  .qr-btnrow,
  .qr-btnrow-split {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  :where(
    .car-banner,
    .shared-listing-card,
    .profile-listing-card,
    .store-card,
    .organization-card,
    .inventory-item,
    .friend-card
  ):hover {
    transform: none !important;
  }

  :where(button, a, [role='button'], summary) {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) {
  :root {
    --garanit-mobile-nav-height: 58px;
  }

  :where(
    .modal,
    .modal-overlay,
    .organization-invite-dialog,
    .organization-confirm-dialog,
    .organization-leave-dialog,
    .store-subscription-dialog,
    .profile-review-modal,
    .todo-modal-overlay
  ) {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  :where(
    .modal-content,
    .modal-window,
    .modal-dialog,
    .todo-modal,
    .organization-invite-dialog > div,
    .organization-confirm-dialog > div,
    .organization-leave-dialog > div
  ) {
    max-height: calc(var(--garanit-viewport-height) - 16px) !important;
  }
}

:where(main, section, article, aside, header, footer, nav, form, fieldset, div) {
  min-inline-size: 0;
}

:where(a, button, label, summary, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

:where([id]) {
  scroll-margin-top: calc(var(--garanit-mobile-nav-height) + var(--garanit-safe-top) + 14px);
}

:where(
  .tabs,
  [class$='-tabs'],
  [class*='-tabs '],
  .category-container,
  .top-categories,
  .profile-stat-strip,
  .listing-thumbnail-strip
) {
  scroll-padding-inline: var(--garanit-page-gutter-small);
}

:where(
  .modal-overlay,
  .dialog-overlay,
  .image-modal,
  .gallery-modal,
  .profile-followers-modal,
  .profile-review-modal,
  .todo-modal-overlay,
  .organization-invite-dialog,
  .organization-confirm-dialog,
  .organization-leave-dialog,
  .store-subscription-overlay
) {
  padding-left: max(12px, var(--garanit-safe-left));
  padding-right: max(12px, var(--garanit-safe-right));
}

@media (pointer: coarse) {
  :where(
    button,
    [role='button'],
    summary,
    input[type='button'],
    input[type='submit'],
    input[type='reset'],
    .button,
    [class$='-button'],
    [class*='-button ']
  ) {
    min-height: 42px;
    touch-action: manipulation;
  }

  :where(input, select, textarea) {
    touch-action: manipulation;
  }
}

@media (max-width: 1180px) {
  :where(
    .garanit-page-surface,
    main,
    .main-content,
    .panel-main,
    .admin-module-main,
    .organization-dashboard,
    .profile-page-shell,
    .listing-detail-shell,
    .listing-editor,
    .analytics-page,
    .comparison-page,
    .market-listings-page
  ) {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    min-width: 0;
    width: 100%;
  }

  body {
    padding-left: var(--garanit-safe-left);
    padding-right: var(--garanit-safe-right);
  }

  .garanit-page-surface {
    width: 100%;
    min-height: var(--garanit-viewport-height);
    margin-bottom: 35px;
  }

  :where(
    .panel-main,
    .admin-module-main,
    .organization-dashboard,
    .market-main,
    .market-listings-page,
    .listing-detail-page,
    .listing-editor,
    .analytics-page,
    .comparison-page,
    .notifications-inbox-shell,
    .support-main,
    .faq-main,
    .report-main,
    .forgot-email-main
  ) {
    padding-left: max(var(--garanit-page-gutter-small), var(--garanit-safe-left)) !important;
    padding-right: max(var(--garanit-page-gutter-small), var(--garanit-safe-right)) !important;
  }

  :where(
    .panel-main,
    .admin-module-main,
    .organization-dashboard,
    .profile-page-shell,
    .market-main,
    .market-listings-page,
    .listing-detail-page,
    .listing-editor,
    .analytics-page,
    .comparison-page,
    .notifications-inbox-shell,
    .support-main,
    .faq-main,
    .report-main,
    .forgot-email-main,
    .main-container
  ) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :where(.grid, [class$='-grid'], [class*='-grid '], .row, [class$='-row'], [class*='-row ']) > * {
    min-width: 0;
    max-width: 100%;
  }

  :where(form, fieldset, .form-grid, [class$='-form'], [class*='-form ']) {
    max-width: 100%;
  }

  :where(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) {
    width: 100%;
    font-size: 16px !important;
  }

  :where(
    .modal,
    .modal-overlay,
    .dialog-overlay,
    .image-modal,
    .gallery-modal,
    .profile-followers-modal,
    .profile-review-modal,
    .todo-modal-overlay,
    .organization-invite-dialog,
    .organization-confirm-dialog,
    .organization-leave-dialog,
    .store-subscription-overlay
  ) {
    max-width: var(--garanit-viewport-width) !important;
    max-height: var(--garanit-viewport-height) !important;
    overscroll-behavior: contain;
  }

  :where(
    .modal-content,
    .modal-window,
    .modal-dialog,
    .image-modal-content,
    .gallery-modal-content,
    .profile-followers-modal > section,
    .profile-review-modal > section,
    .todo-modal,
    .organization-invite-dialog > section,
    .organization-confirm-dialog > section,
    .organization-leave-dialog > section,
    .store-subscription-dialog
  ) {
    width: min(100%, 680px) !important;
    max-width: 100% !important;
    max-height: calc(
      var(--garanit-viewport-height) - 24px - var(--garanit-safe-top) - var(--garanit-safe-bottom)
    ) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :where(
    .modal-footer,
    .modal-actions,
    [class$='-modal-actions'],
    [class*='-modal-actions '],
    .form-actions,
    [class$='-form-actions']
  ) {
    flex-wrap: wrap;
  }

  :where(
    .table-wrapper,
    .table-scroll,
    [class$='-table-wrap'],
    [class*='-table-wrap '],
    [class$='-table-wrapper'],
    [class*='-table-wrapper ']
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :where(
    .profile-tabs,
    .panel-tabs,
    .admin-tabs,
    .listing-tabs,
    .top-categories,
    .category-container,
    .comparison-modes,
    .analytics-toolbar-actions,
    .listing-thumbnail-strip
  ) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  :where(
    .profile-tabs,
    .panel-tabs,
    .admin-tabs,
    .listing-tabs,
    .top-categories,
    .category-container,
    .comparison-modes,
    .analytics-toolbar-actions,
    .listing-thumbnail-strip
  )::-webkit-scrollbar {
    display: none;
  }

  :where(.profile-tabs, .panel-tabs, .admin-tabs, .listing-tabs, .top-categories, .comparison-modes)
    > * {
    flex: 0 0 auto;
  }

  :where(
    .listing-card,
    .shared-listing-card,
    .profile-listing-card,
    .car-banner,
    .organization-card,
    .store-card,
    .inventory-item,
    .friend-card,
    .admin-card,
    .panel-card
  ) {
    max-width: 100%;
  }

  :where(
    .listing-card img,
    .shared-listing-card img,
    .profile-listing-card img,
    .car-banner img,
    .organization-card img,
    .gallery-main-image,
    .listing-main-photo
  ) {
    object-position: center;
  }

  :where(
    .support-thread,
    .support-admin-thread,
    .inbox-messages,
    .messages-thread,
    .conversation-messages
  ) {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.garanit-keyboard-open
    :where(.support-composer, .inbox-composer, .messages-composer, .listing-wizard-actions) {
    position: relative !important;
    bottom: auto !important;
  }
}

@media (max-width: 560px) {
  :root {
  }

  :where(
    .modal-content,
    .modal-window,
    .modal-dialog,
    .profile-followers-modal > section,
    .profile-review-modal > section,
    .todo-modal,
    .store-subscription-dialog
  ) {
    border-radius: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  :where(
      .modal-actions,
      [class$='-modal-actions'],
      [class*='-modal-actions '],
      .form-actions,
      [class$='-form-actions']
    )
    > :where(button, a) {
    flex: 1 1 100%;
    justify-content: center;
  }

  :where(
    .listing-grid,
    .profile-listing-grid,
    .organization-listing-grid,
    .recommended-grid,
    .inventory-grid,
    .store-grid,
    .friends-grid,
    .admin-grid,
    .analytics-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(
    .listing-price,
    .listing-card-price,
    .shared-listing-card-price,
    .profile-listing-price,
    .car-banner-price
  ) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  :root {
    --garanit-page-gutter-small: 10px;
  }

  :where(
    .panel-card,
    .admin-card,
    .profile-panel,
    .organization-panel,
    .listing-editor-card,
    .analytics-card,
    .support-card
  ) {
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 14px !important;
  }

  :where(
    h1,
    .hero__content h1,
    .profile-name-row h1,
    .organization-public h1,
    .listing-detail-title,
    .todo-title
  ) {
    font-size: clamp(24px, 9vw, 34px) !important;
    line-height: 1.12;
  }
}

@media (min-width: 769px) {
  :root {
    --garanit-adaptive-sidebar-width: clamp(300px, 27.78vw, 400px);
    --sidebar-width: var(--garanit-adaptive-sidebar-width);
    --sidebar-layout-width: var(--garanit-adaptive-sidebar-width);
    --market-sidebar-width: var(--garanit-adaptive-sidebar-width);
    --market-sidebar-offset: var(--garanit-adaptive-sidebar-width);
  }

  body.sidebar-hidden {
    --sidebar-layout-width: 0px;
    --market-sidebar-offset: 0px;
  }

  .sidebar {
    width: var(--sidebar-width) !important;
    max-width: 100vw;
  }

  .sidebar-separator {
    left: var(--sidebar-width) !important;
  }

  .sidebar-profile-banner,
  .sidebar-profile-banner-overlay {
    width: calc(var(--sidebar-width) - 1px) !important;
    max-width: calc(var(--sidebar-width) - 1px) !important;
  }

  .profile-search-container,
  .sidebar-filters-container,
  .sidebar-bottom-actions,
  .sidebar-actions-panel {
    width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
  }

  body.has-sidebar .footer-container {
    width: calc(100% - var(--sidebar-layout-width)) !important;
    margin-left: var(--sidebar-layout-width) !important;
  }

  :is(body.has-sidebar, body.garanit-sidebar)
    :is(
      .panel-main,
      .admin-module-main,
      .admin-groups-page,
      .admin-settings-page .panel-main,
      .todo-container,
      .profile-page-shell,
      .profile-blocked-state,
      .organization-dashboard,
      .organization-panel-main
    ) {
    width: calc(100% - var(--sidebar-layout-width)) !important;
    max-width: none !important;
    margin-left: var(--sidebar-layout-width) !important;
  }

  :is(body.has-sidebar, body.garanit-sidebar) .panel-main::before {
    left: var(--sidebar-layout-width) !important;
  }

  body.garanit-sidebar :is(.top-container, .top-categories) {
    left: calc(var(--sidebar-layout-width) + 15px) !important;
    width: calc(100% - 30px - var(--sidebar-layout-width)) !important;
    margin-top: 5px;
    max-width: none !important;
    margin-left: 0 !important;
  }

  body.garanit-listings-sidebar
    :is(#new-listing-container, .market-listings-page, .listings-page-container, .container) {
    width: calc(100% - var(--sidebar-layout-width)) !important;
    max-width: none !important;
    margin-left: var(--sidebar-layout-width) !important;
  }

  body.garanit-search-sidebar:not(.sidebar-hidden) :is(.car-banners, .pages, .listing-container) {
    width: min(1200px, calc(100vw - var(--sidebar-layout-width) - 50px)) !important;
    margin-left: calc(
      var(--sidebar-layout-width) + 25px +
        (
          (100vw - var(--sidebar-layout-width) - 50px) -
            min(1200px, calc(100vw - var(--sidebar-layout-width) - 50px))
        ) /
        2
    ) !important;
  }

  body.garanit-search-sidebar.sidebar-hidden :is(.top-container, .top-categories) {
    left: 25px !important;
    width: calc(100% - 40px) !important;
    right: 25px !important;
  }

  body.garanit-search-sidebar.sidebar-hidden
    :is(
      .car-banners,
      .pages,
      .listing-container:not(.listing-detail-shell),
      #listings-loading,
      .no-results,
      .footer-container
    ) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .listing-detail-shell {
    --detail-sidebar-width: var(--sidebar-layout-width) !important;
  }
}

@media (max-width: 768px) {
  :is(body.has-sidebar, body.garanit-sidebar)
    :is(
      .panel-main,
      .admin-module-main,
      .admin-groups-page,
      .admin-settings-page .panel-main,
      .todo-container,
      .organization-dashboard,
      .organization-panel-main
    ),
  body.garanit-listings-sidebar
    :is(#new-listing-container, .market-listings-page, .listings-page-container, .container),
  body.garanit-search-sidebar
    :where(.top-container, .top-categories, .car-banners, .pages, #listings-loading, .no-results) {
    left: auto !important;
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    margin: 15px 10px;
  }
}

@media (min-width: 1600px) {
  :where(
    .main-content,
    .profile-page-shell,
    .organization-dashboard-inner,
    .listing-detail-shell,
    .listing-editor-inner,
    .analytics-page-inner,
    .admin-module-wrap,
    .todo-shell
  ) {
    margin-left: auto;
    margin-right: auto;
  }
}

html:has(body.garanit-messages-page),
body.garanit-messages-page {
  height: 100% !important;
  min-height: 100% !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}

body.garanit-messages-page .inbox-app {
  position: fixed !important;
  inset: var(--inbox-nav-offset, 80px) 0 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.garanit-messages-page :is(.footer-container, .scrollbar) {
  display: none !important;
}

@media (max-width: 768px) {
  body.garanit-messages-page .inbox-app {
    inset: var(--garanit-mobile-nav-height, 68px) 0 0 !important;
  }
}

:where(
  .modal-overlay,
  .dialog-overlay,
  .image-modal,
  .gallery-modal,
  [class*='modal'][class*='overlay'],
  [class*='dialog'][class*='overlay'],
  .nav-qr-scanner-modal,
  .nav-login-modal-overlay,
  .nav-redeem-modal,
  .store-admin-modal,
  .store-subscription-modal,
  .image-modal-overlay,
  .profile-followers-modal,
  .profile-review-modal,
  .profile-listings-modal,
  .organization-modal,
  .todo-modal-overlay,
  .analytics-modal,
  .listing-address-modal,
  .management-discount-modal,
  .listing-expiration-modal,
  .listing-map-modal,
  .listing-photo-lightbox,
  .listing-features-modal,
  .listing-drag-overlay,
  .listing-photo-editor-modal,
  .listing-photo-viewer-modal,
  .listing-ai-modal
) {
  z-index: 2147483647 !important;
  isolation: isolate;
  pointer-events: auto;
}

:where(
  [class$='-modal-backdrop'],
  [class*='-modal-backdrop '],
  [class*='modal'][class*='overlay'],
  [class*='dialog'][class*='overlay'],
  .profile-followers-backdrop,
  .listing-expiration-backdrop,
  .listing-photo-lightbox-backdrop,
  .modal-backdrop
) {
  background: color-mix(in srgb, var(--background, #080a0e) 78%, transparent) !important;
  backdrop-filter: blur(9px);
}

:where(
  .nav-login-modal-window,
  .nav-redeem-dialog,
  .nav-qr-scanner-window,
  .store-admin-dialog,
  .store-subscription-dialog,
  .profile-followers-modal > section,
  .profile-review-modal > section,
  .profile-listings-modal > section,
  .organization-confirm-dialog,
  .organization-invite-dialog,
  .modal,
  .todo-modal,
  .analytics-dialog,
  .listing-address-dialog,
  .management-discount-dialog,
  .listing-expiration-dialog,
  .listing-map-modal-dialog,
  .listing-photo-lightbox-dialog,
  .listing-features-dialog,
  .listing-photo-editor-dialog,
  .listing-photo-viewer-dialog,
  .listing-ai-dialog
) {
  color: var(--text) !important;
  border-color: var(--background4, var(--border)) !important;
  background-color: var(--card, var(--background2)) !important;
}

/* Market toolbar and content share one in-flow rail on mobile. These explicit
   page/rail markers also cover rewritten URLs without relying on route classes. */
.market-content-rail {
  display: contents;
}
@media (max-width: 768px) {
  body.garanit-keyboard-open .nav-menu-bottom {
    display: none !important;
  }

  body.garanit-market-page {
    --garanit-market-mobile-gutter: calc(14px + var(--garanit-page-gutter-small, 0px));
    padding-top: var(--garanit-mobile-nav-height);
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 15px var(--garanit-market-mobile-gutter) 42px;
    box-sizing: border-box;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) > .top-container {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    transform: none !important;
    border: 2px solid var(--background3) !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    z-index: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: var(--box-shadow1) !important;
  }
  body.garanit-market-page
    :is(#marketContentRail, #marketDetailRail)
    > :is(.market-category-home, .car-banners, .listing-container, .pages) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  body.garanit-market-page #marketDetailRail > .listing-detail-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.garanit-market-page #marketDetailRail :is(.listing-left, .listing-right) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.garanit-market-page #marketDetailRail .listing-similar-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
  body.garanit-market-page #marketContentRail #listings-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.garanit-market-page #marketContentRail #listings-container .car-banner {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.garanit-market-page #marketContentRail #listings-container .car-banner-image-link {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }
  body.garanit-market-page #marketContentRail #listings-container .no-results {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 160px;
    margin: 0 !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .top-links-wrapper {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    overflow: hidden !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .top-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 4px 0 0 !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .top-link-home {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 2px 7px 2px 2px !important;
    border-radius: 12px !important;
    transform: none !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .top-link-home::before {
    line-height: 1 !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .top-link-home i {
    transform: none !important;
    line-height: 1 !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .top-view-controls {
    display: none !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .sorting-phone {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text2) !important;
    font-size: 20px !important;
    cursor: pointer;
  }
  body.garanit-market-page
    :is(#marketContentRail, #marketDetailRail)
    .top-container
    :is(.top-link, .top-link-active, .top-link-search) {
    margin: 0 2px !important;
    font-size: 13px !important;
  }
  body.garanit-market-page :is(#marketContentRail, #marketDetailRail) .top-link-separator {
    flex: none !important;
    margin: 0 5px !important;
    color: var(--text) !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
}

body:is(.garanit-route-login, .garanit-route-register) .main-container.auth-page-shell {
  --auth-nav-height: 80px;
  --auth-bottom-padding: 16px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--garanit-viewport-height, 100dvh) !important;
  margin: 0 !important;
  padding: calc(var(--auth-nav-height) + 16px) 24px var(--auth-bottom-padding) !important;
  box-sizing: border-box;
}

.auth-page-shell > :is(.login-card, .register-card) {
  flex: 0 0 auto;
  margin: auto 0;
}

@media (max-width: 768px) {
  body:is(.garanit-route-login, .garanit-route-register) .main-container.auth-page-shell {
    --auth-nav-height: var(--garanit-mobile-nav-height, 70px);
    --auth-bottom-padding: calc(86px + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--garanit-page-gutter-small, 10px) !important;
  }

  body:is(.garanit-route-login, .garanit-route-register).garanit-keyboard-open
    .main-container.auth-page-shell {
    --auth-bottom-padding: 16px;
  }
}

/* Image cards keep their full-bleed artwork at every viewport size. */
body.panel-inventory-page .panel-card.inventory-card,
body.panel-friends-page .panel-card.friend-card {
  padding: 0 !important;
}
body.panel-friends-page .friends-add-card input {
  box-sizing: border-box;
  padding-left: 42px !important;
}
body.panel-friends-page .friend-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
body.panel-friends-page .friend-actions > .panel-button {
  flex: 0 1 auto;
  min-width: 115px;
}