/* =========================================================
   SPACETOOLS RESPONSIVE LAYER
   Loaded last. Layout only — no functional changes.
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
canvas,
model-viewer {
  max-width: 100%;
}

/* Prevent flex/grid children from forcing horizontal overflow */
main,
.wrap,
.page-wrap,
.page-shell,
.content,
.content-wrap {
  min-width: 0;
}


/* =========================================================
   DESKTOP WINDOW SCALING
   The old fixed 150% zoom is too large when a desktop
   browser window is narrowed.
   ========================================================= */

@media (min-width: 1600px) {
  body {
    zoom: 1.5 !important;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {
  body {
    zoom: 1.25 !important;
  }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  body {
    zoom: 1.08 !important;
  }
}

@media (max-width: 1099px) {
  body {
    zoom: 1 !important;
  }
}


/* =========================================================
   TABLET / PHONE GLOBAL
   ========================================================= */

@media (max-width: 900px) {

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

  body {
    overflow-x: hidden;
  }

  main,
  .wrap {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* iPhone Safari bottom toolbar / safe area */
  main {
    padding-bottom:
      calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .site-header {
    width: 100%;
    max-width: 100%;
  }

  .site-header .topbar {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}


/* =========================================================
   LIBRARY — MOBILE / TABLET
   ========================================================= */

@media (max-width: 900px) {

  #libraryPageRoot {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box;
  }

  .library-clean-head {
    width: 100%;
  }

  .library-clean-head h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .library-clean-head p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* All / Generated / Your Files */
  .library-clean-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .library-clean-tab {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 9px 8px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .library-clean-tab span {
    flex: 0 0 auto;
  }

  /* Search + controls */
  .library-clean-toolbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .library-clean-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .library-clean-search .library-search-wrap {
    width: 100% !important;
  }

  .library-clean-search .library-search {
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box;
  }

  .library-clean-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box;
  }

  .library-clean-view {
    width: 100% !important;
    height: 48px !important;
  }

  .library-clean-upload {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }

  /* Category chips: scroll horizontally instead of overflowing */
  #libraryGroupsToolbar {
    width: calc(100% + 18px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-right: 18px !important;
    padding-bottom: 5px !important;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #libraryGroupsToolbar::-webkit-scrollbar {
    display: none;
  }

  #libraryGroupsToolbar .library-group-filter {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #grid.grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #grid .card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  #grid .thumb-row,
  #grid .placeholder {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }

  #grid .thumb-row img,
  #grid .thumb-row canvas,
  #grid .thumb-row model-viewer {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}


@media (max-width: 480px) {

  #libraryPageRoot {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .library-clean-tab {
    min-height: 54px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
  }

  .library-clean-toolbar {
    gap: 8px !important;
  }

  #grid.grid {
    gap: 12px !important;
  }
}


/* =========================================================
   TELEGRAM — MOBILE / TABLET
   ========================================================= */

@media (max-width: 850px) {

  .telegram-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box;
  }

  .telegram-hero {
    width: 100% !important;
  }

  .telegram-title-row {
    align-items: center !important;
  }

  .telegram-title-row h1 {
    font-size: clamp(34px, 9vw, 46px) !important;
    line-height: 1.05 !important;
  }

  .telegram-connect {
    width: 100% !important;
  }

  .telegram-input-wrap,
  .telegram-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .tgcompact-toolbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .tgcompact-search {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Worker status */
  .tg-worker-control,
  #tgWorkerControl {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;

    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 15px 12px !important;
  }

  .tg-worker-cell,
  #tgWorkerControl .tg-w-state {
    min-width: 0 !important;
  }

  .tg-worker-value {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .tg-worker-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .tg-worker-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* Archive metrics */
  .telegram-page .tgcompact-summary {
    width: 100% !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .telegram-page .tgcompact-metric {
    min-width: 0 !important;
    padding: 15px !important;
  }

  .telegram-page .tg-storage {
    grid-column: 1 / -1 !important;
  }

  .telegram-page .tg-storage strong {
    font-size:
      clamp(38px, 12vw, 58px) !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .tgcompact-metric strong {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .tgcompact-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .tgcompact-tabs::-webkit-scrollbar {
    display: none;
  }
}


@media (max-width: 520px) {

  .telegram-page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Keep worker readable without becoming one huge vertical card */
  .tg-worker-control,
  #tgWorkerControl {
    grid-template-columns:
      1fr 1fr !important;
    padding: 14px !important;
  }

  .tg-worker-label {
    font-size: 10px !important;
  }

  .tg-worker-value {
    font-size: 13px !important;
  }

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

  .tg-worker-btn {
    font-size: 11px !important;
    min-height: 42px !important;
  }

  .telegram-page .tgcompact-metric {
    padding: 13px !important;
  }

  .telegram-page .tgcompact-metric strong {
    font-size: 27px !important;
  }

  .telegram-page .tg-storage strong {
    font-size: clamp(36px, 11vw, 48px) !important;
  }
}


/* =========================================================
   iOS SAFARI SAFE AREA
   ========================================================= */

@supports (
  padding-bottom:
  env(safe-area-inset-bottom)
) {

  @media (max-width: 900px) {

    #libraryPageRoot,
    .telegram-page {
      padding-bottom:
        calc(100px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ===== MOBILE LIBRARY + HEADER V2 ===== */


/* =========================================================
   MOBILE HEADER — CURRENT CLEAN VERSION
   ========================================================= */

@media (max-width: 680px) {

  .site-header {
    width: 100% !important;
    max-width: 100% !important;

    padding:
      8px 0 7px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  .site-header .topbar {
    width: auto !important;
    max-width: none !important;

    min-height: 72px !important;

    margin-left:
      max(14px, env(safe-area-inset-left)) !important;

    margin-right:
      max(14px, env(safe-area-inset-right)) !important;

    padding: 5px 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    box-sizing: border-box !important;
  }


  /* Logo */
  .site-header .brand {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }


  .site-header .brand-logo-wrap {
    width: 66px !important;
    height: 66px !important;

    min-width: 66px !important;
    max-width: 66px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  .site-header .brand img.spacetools-icon-logo,
  .site-header .brand-logo-wrap img.spacetools-icon-logo {
    width: 62px !important;
    height: 62px !important;

    min-width: 62px !important;
    max-width: 62px !important;

    object-fit: contain !important;

    margin: 0 !important;

    transform: none !important;
  }


  /* Right side */
  .site-header .topbar-actions {
    width: auto !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 9px !important;

    flex: 0 0 auto !important;
  }


  /* Star chip stays inside account on phone */
  .site-header .membership-stars-chip {
    display: none !important;
  }


  .site-header .user-avatar-btn {
    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    max-width: 52px !important;

    padding: 0 !important;
    margin: 0 !important;

    flex: 0 0 52px !important;
  }


  .site-header .user-avatar-btn .avatar-fallback {
    width: 100% !important;
    height: 100% !important;

    font-size: 25px !important;
  }


  .site-header .nav-toggle {
    display: flex !important;

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    max-width: 52px !important;

    flex: 0 0 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;

    font-size: 23px !important;
  }


  /*
   * Mobile navigation drawer.
   * Keep it aligned to the same 14 px frame as header.
   */
  .site-header .tabs-island.open {
    position: absolute !important;

    top: 78px !important;

    left:
      max(14px, env(safe-area-inset-left)) !important;

    right:
      max(14px, env(safe-area-inset-right)) !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    z-index: 5000 !important;
  }

}


/* =========================================================
   LIBRARY MOBILE HEADER
   ========================================================= */

@media (max-width: 560px) {

  #libraryPageRoot {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }


  .library-clean-head h1 {
    font-size:
      clamp(36px, 11vw, 48px) !important;

    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
  }


  .library-clean-head p {
    max-width: 100% !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
  }


  /* -----------------------------------------------------
     ALL / GENERATED / YOUR FILES
     ----------------------------------------------------- */

  .library-clean-tabs {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, .92fr)
      minmax(0, 1.18fr)
      minmax(0, 1.04fr) !important;

    gap: 7px !important;
  }


  .library-clean-tab {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 58px !important;

    padding: 8px 7px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 4px !important;

    overflow: hidden !important;

    white-space: normal !important;

    font-size: 11px !important;
    line-height: 1.08 !important;

    box-sizing: border-box !important;
  }


  /*
   * Count bubble: (301), (9), (292)
   * Never allow it to escape the tab.
   */
  .library-clean-tab span {
    position: static !important;

    min-width: 25px !important;
    max-width: 38px !important;

    height: 23px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* -----------------------------------------------------
     GROUP CHIPS
     ----------------------------------------------------- */

  #libraryGroupsToolbar {
    margin-top: 2px !important;
  }


  #libraryGroupsToolbar .library-group-filter {
    min-height: 38px !important;

    padding: 0 13px !important;

    font-size: 11px !important;

    border-radius: 999px !important;
  }

}


/* =========================================================
   LIBRARY MOBILE — LIST MODE
   Completely separate from desktop list mode.
   ========================================================= */

@media (max-width: 699px) {

  #libraryPageRoot #grid.library-clean-list {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 11px !important;

    width: 100% !important;
  }


  #grid.library-clean-list > .card {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 136px !important;
    height: auto !important;

    padding: 10px !important;
    margin: 0 !important;

    display: grid !important;

    grid-template-columns:
      112px minmax(0, 1fr) !important;

    grid-template-rows:
      auto 1fr auto !important;

    column-gap: 12px !important;
    row-gap: 5px !important;

    align-items: stretch !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* Thumbnail */
  #grid.library-clean-list > .card .thumb-row,
  #grid.library-clean-list > .card .placeholder {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;

    width: 112px !important;
    height: 112px !important;

    min-width: 112px !important;
    min-height: 112px !important;

    max-width: 112px !important;
    max-height: 112px !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 !important;

    border-radius: 13px !important;

    overflow: hidden !important;
  }


  #grid.library-clean-list > .card .thumb-row img,
  #grid.library-clean-list > .card .thumb-row canvas,
  #grid.library-clean-list > .card .thumb-row model-viewer {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
  }


  /* 3D badge */
  #grid.library-clean-list > .card .thumb-3d-btn {
    top: 7px !important;
    right: 7px !important;

    min-width: 48px !important;
    min-height: 32px !important;

    padding: 6px 9px !important;

    font-size: 10px !important;

    border-radius: 999px !important;
  }


  /* Model title */
  #grid.library-clean-list > .card .card-name-row,
  #grid.library-clean-list > .card .library-clean-name {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 1px 0 0 !important;
    padding: 0 !important;

    align-self: start !important;
  }


  #grid.library-clean-list > .card .card-name,
  #grid.library-clean-list > .card .card-name-text,
  #grid.library-clean-list > .card .card-name-button,
  #grid.library-clean-list > .card .library-clean-name {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    display: block !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    font-size: 13px !important;
    line-height: 1.25 !important;

    text-align: left !important;
  }


  /* Date/meta */
  #grid.library-clean-list > .card .card-date,
  #grid.library-clean-list > .card .library-clean-date {
    grid-column: 2 !important;
    grid-row: 2 !important;

    position: static !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;

    font-size: 10px !important;
    line-height: 1.3 !important;
  }


  /*
   * Old action sources stay hidden.
   * library-clean.js generates the clean action bar.
   */
  #grid.library-clean-list > .card > .card-actions,
  #grid.library-clean-list > .card > .badge,
  #grid.library-clean-list > .card > .edited-box,
  #grid.library-clean-list > .card > .revision-box {
    display: none !important;
  }


  /* Bottom action row */
  #grid.library-clean-list > .card > .library-clean-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;

    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      40px
      40px !important;

    gap: 6px !important;

    align-self: end !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  #grid.library-clean-list .library-clean-download {
    width: 100% !important;
    min-width: 0 !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 10px !important;

    border-radius: 10px !important;
  }


  #grid.library-clean-list .library-clean-bambu,
  #grid.library-clean-list .library-clean-more {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;
  }


  #grid.library-clean-list .library-clean-menu-wrap {
    width: 40px !important;
    min-width: 40px !important;

    margin: 0 !important;
  }


  #grid.library-clean-list .library-clean-menu {
    right: 0 !important;
    left: auto !important;

    width: min(210px, calc(100vw - 52px)) !important;

    z-index: 999 !important;
  }

}


/* Smaller iPhones */
@media (max-width: 390px) {

  #grid.library-clean-list > .card {
    grid-template-columns:
      104px minmax(0, 1fr) !important;

    column-gap: 10px !important;

    padding: 9px !important;
  }


  #grid.library-clean-list > .card .thumb-row,
  #grid.library-clean-list > .card .placeholder {
    width: 104px !important;
    height: 104px !important;

    min-width: 104px !important;
    min-height: 104px !important;

    max-width: 104px !important;
    max-height: 104px !important;
  }


  .library-clean-tab {
    font-size: 10.5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

}

/* ===== MOBILE HEADER STABLE + ACCOUNT V3 ===== */

.mobile-membership-access {
  display: none;
}

@media (max-width: 680px) {

  /*
   * No page/header animation on phones.
   * Prevents the controls from visually jumping on refresh.
   */
  body,
  .wrap {
    animation: none !important;
  }

  .site-header .brand,
  .site-header .brand img,
  .site-header .brand-logo-wrap,
  .site-header .brand-logo-wrap img,
  .site-header .topbar,
  .site-header .topbar-actions,
  .site-header .membership-stars-chip,
  .site-header .user-avatar-btn,
  .site-header .nav-toggle {
    transition: none !important;
    animation: none !important;
  }


  /* Header frame */
  .site-header {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 82px !important;

    margin: 0 !important;
    padding: 6px 0 !important;

    box-sizing: border-box !important;
  }


  .site-header .topbar {
    width: auto !important;
    max-width: none !important;

    min-height: 70px !important;

    margin-left:
      max(14px, env(safe-area-inset-left)) !important;

    margin-right:
      max(14px, env(safe-area-inset-right)) !important;

    padding: 4px 0 !important;

    display: grid !important;

    grid-template-columns:
      66px minmax(0, 1fr) auto !important;

    align-items: center !important;

    gap: 8px !important;

    box-sizing: border-box !important;
  }


  /* Logo */
  .site-header .brand {
    grid-column: 1 !important;

    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;

    height: 66px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;
  }


  .site-header .brand-logo-wrap {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;

    height: 66px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .site-header .brand img.spacetools-icon-logo,
  .site-header .brand-logo-wrap img.spacetools-icon-logo {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;

    height: 62px !important;

    object-fit: contain !important;

    margin: 0 !important;

    transform: none !important;
  }


  /* Right side */
  .site-header .topbar-actions {
    grid-column: 3 !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 7px !important;

    flex-wrap: nowrap !important;
  }


  /*
   * IMPORTANT:
   * Keep Star visible on mobile.
   */
  html body .site-header .membership-stars-chip {
    display: inline-flex !important;

    width: auto !important;
    min-width: 67px !important;
    max-width: 88px !important;

    height: 40px !important;

    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    font-size: 10px !important;
    line-height: 1 !important;

    flex: 0 0 auto !important;
  }


  .site-header .membership-stars-chip strong {
    font-size: 11px !important;
  }


  .site-header .membership-stars-chip .stars-symbol {
    font-size: 11px !important;
  }


  /* Avatar */
  .site-header .user-avatar-btn {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 50px !important;
  }


  .site-header .user-avatar-btn .avatar-fallback {
    width: 100% !important;
    height: 100% !important;

    font-size: 23px !important;
  }


  /* Hamburger */
  .site-header .nav-toggle {
    display: flex !important;

    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 50px !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;

    font-size: 22px !important;
  }


  /*
   * Hide navigation without affecting header layout.
   */
  .site-header .tabs-island:not(.open) {
    display: none !important;
  }


  .site-header .tabs-island.open {
    position: absolute !important;

    top: 78px !important;

    left:
      max(14px, env(safe-area-inset-left)) !important;

    right:
      max(14px, env(safe-area-inset-right)) !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    z-index: 5000 !important;
  }


  /* Account shortcuts inside hamburger */
  .mobile-membership-access {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;

    width: 100% !important;

    margin-top: 9px !important;
    padding-top: 9px !important;

    border-top:
      1px solid rgba(185,139,230,.12);

    box-sizing: border-box;
  }


  .mobile-account-shortcut {
    min-width: 0;

    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px;

    box-sizing: border-box;

    border:
      1px solid rgba(185,139,230,.16);

    border-radius: 12px;

    background:
      rgba(255,255,255,.025);

    color: #eee8f2;

    text-decoration: none;
  }


  .mobile-account-shortcut-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
      rgba(185,139,230,.10);

    color: #e3c5ff;

    font-size: 14px;
  }


  .mobile-account-shortcut-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
  }


  .mobile-account-shortcut-copy strong {
    overflow: hidden;

    color: #f5f1f7;

    font-size: 11px;
    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;
  }


  .mobile-account-shortcut-copy small {
    overflow: hidden;

    color: #827a89;

    font-size: 8.5px;
    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;
  }

}


/* Very narrow phones: show only ★ number in header */
@media (max-width: 370px) {

  html body .site-header .membership-stars-chip {
    min-width: 58px !important;
    max-width: 62px !important;

    padding: 0 7px !important;

    font-size: 0 !important;
  }

  html body .site-header .membership-stars-chip strong,
  html body .site-header .membership-stars-chip .stars-symbol {
    font-size: 11px !important;
  }

}


/* =========================================================
   MOBILE HEADER + HOME FINAL
   ========================================================= */

@media (max-width: 680px) {

  /* Star + plan already exists inside profile menu.
     Don't squeeze it into the phone header. */
  .site-header .membership-stars-chip {
    display: none !important;
  }

  .site-header .topbar {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    box-sizing: border-box !important;
  }

  .site-header .topbar-actions {
    min-width: 0 !important;
    gap: 10px !important;
    margin-left: auto !important;
  }

  .site-header .user-menu {
    flex: 0 0 auto !important;
  }

  .site-header .user-avatar-btn {
    flex: 0 0 auto !important;
  }

  .site-header .nav-toggle {
    flex: 0 0 auto !important;
  }


  /* ---------- HOME ---------- */

  .st-home-workspace {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hero must never make page wider than viewport */
  .st-home-workspace > *,
  .st-home-workspace section,
  .st-home-workspace article,
  .st-home-workspace aside {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Long Turkish words/headings */
  .st-home-workspace h1,
  .st-home-workspace h2,
  .st-home-workspace h3,
  .st-home-workspace p {
    overflow-wrap: break-word;
  }

  /* Main home buttons */
  .st-home-primary-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}


@media (max-width: 430px) {

  .site-header .topbar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

}

/* =========================================================
   MOBILE HEADER — FINAL
   ========================================================= */

@media (max-width: 680px) {

  /* Star balance is already available inside the mobile menu */
  /* Own the mobile layout rule: earlier compact-chip rules must not
     reserve an invisible slot. Balance remains in the profile menu. */
  #st-navigation .membership-stars-chip {
    display: none !important;
  }

  /* Keep only logo + avatar + hamburger */
  .topbar {
    grid-template-columns: auto 1fr auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-menu {
    margin-left: auto !important;
  }

  .nav-toggle {
    margin-left: 8px !important;
  }
}

/* =========================================================
   PROFILE — STAR HISTORY / MEMBERSHIPS
   ========================================================= */

.profile-account-shortcut {
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 9px 10px !important;
}

.profile-account-shortcut-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: rgba(126, 68, 190, .15);
  color: #d5a7ff;

  font-size: 16px;
  font-weight: 800;
}

.profile-account-shortcut-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  line-height: 1.2;
}

.profile-account-shortcut-copy strong {
  color: #f3edf7;
  font-size: 13px;
  font-weight: 700;
}

.profile-account-shortcut-copy small {
  margin-top: 3px;

  color: #817888;
  font-size: 11px;
  font-weight: 500;
}


/* These account links must never remain in hamburger navigation. */
#navLinks > a[href="/profile#stars-history"],
#navLinks > a[href="/membership"],
#navLinks a[href="/profile#stars-history"],
#navLinks a[href="/membership"] {
  display: none !important;
}

/* =========================================================
   PROFILE SHORTCUTS — DESKTOP / MOBILE
   ========================================================= */

/* Desktop: Star History is already accessible from header Star chip */
@media (min-width: 681px) {
  #userMenuDropdown
  .profile-account-shortcut[href="/profile#stars-history"] {
    display: none !important;
  }
}

/* Mobile: header Star chip is hidden, so keep Star History here */
@media (max-width: 680px) {
  #userMenuDropdown
  .profile-account-shortcut[href="/profile#stars-history"] {
    display: flex !important;
  }
}


/* =========================================================
   PROFILE DROPDOWN STAR SUMMARY
   Desktop: hidden
   Mobile: visible
   ========================================================= */

@media (min-width: 681px) {
  #userMenuDropdown .user-menu-credits {
    display: none !important;
  }
}

@media (max-width: 680px) {
  #userMenuDropdown .user-menu-credits {
    display: flex !important;
  }
}



/* =========================================================
   LIBRARY MOBILE — FINAL POLISH
   ========================================================= */

@media (max-width: 680px) {

  body:has(#libraryPageRoot) {
    overflow-x: hidden !important;
  }

  body:has(#libraryPageRoot) > .wrap,
  body:has(#libraryPageRoot) .wrap {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    box-sizing: border-box !important;
  }

  #libraryPageRoot {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* Search */
  .library-clean-search,
  .library-search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  .library-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* Category chips */
  #libraryGroupsToolbar {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 8px !important;

    margin:
      14px 0 18px !important;

    padding:
      0 3px 6px 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    box-sizing: border-box !important;
  }

  #libraryGroupsToolbar::-webkit-scrollbar {
    display: none;
  }

  #libraryGroupsToolbar
  .library-group-filter {
    flex: 0 0 auto !important;

    min-width: 0 !important;
    min-height: 42px !important;

    padding:
      0 15px !important;

    white-space: nowrap !important;

    font-size: 13px !important;

    box-sizing: border-box !important;
  }

  /*
   * Empty library:
   * only All is visible, so don't create
   * a fake horizontal scrolling area.
   */
  #libraryGroupsToolbar
  .library-group-filter[hidden] {
    display: none !important;
  }

  #libraryGroupsToolbar.library-groups-only-all {
    overflow: hidden !important;
  }


  /* Empty state */
  #grid > .empty-state {
    width: 100% !important;

    min-height: 210px !important;
    height: auto !important;

    margin:
      8px 0 0 !important;

    padding:
      28px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    border-radius: 20px !important;

    box-sizing: border-box !important;
  }


  /* Grid must never widen the viewport */
  #grid,
  #grid.grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }

  #grid > .card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


@media (max-width: 430px) {

  body:has(#libraryPageRoot) > .wrap,
  body:has(#libraryPageRoot) .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #libraryGroupsToolbar
  .library-group-filter {
    min-height: 40px !important;

    padding:
      0 13px !important;

    font-size: 12px !important;
  }

  #grid > .empty-state {
    min-height: 190px !important;
  }
}



/* =========================================================
   SPACE TOOLS — GLOBAL PAGE SHELL
   One width system for every signed-in page.
   ========================================================= */

:root {
  --st-shell-max: 1480px;
  --st-shell-gutter: clamp(20px, 3.5vw, 64px);

  --st-mobile-gutter: 16px;
  --st-mobile-header-gap: 24px;
}


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/*
 * Header and page content use exactly the same
 * horizontal coordinate system.
 */
.wrap,
.site-header .topbar {
  width:
    min(
      var(--st-shell-max),
      calc(
        100% -
        (var(--st-shell-gutter) * 2)
      )
    ) !important;

  max-width:
    var(--st-shell-max) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   CANCEL PAGE-SPECIFIC WIDTH OVERRIDES
   --------------------------------------------------------- */

body:has(#libraryPageRoot) .wrap,
body:has(.ai-chat-shell) > .wrap,
body:has(.telegram-page) .wrap,
body.etsy-theme .wrap {
  width:
    min(
      var(--st-shell-max),
      calc(
        100% -
        (var(--st-shell-gutter) * 2)
      )
    ) !important;

  max-width:
    var(--st-shell-max) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;
}


/*
 * Internal page roots fill the standard shell;
 * they no longer decide their own viewport width.
 */
.st-home-workspace,
.ai-chat-shell,
#libraryPageRoot,
.telegram-page,
.maker-shell,
.maker-page {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/* Library had several viewport-based width overrides. */
body:has(#libraryPageRoot) main,
body:has(#libraryPageRoot) .page-shell,
body:has(#libraryPageRoot) .page-wrap,
body:has(#libraryPageRoot) .content-wrap,
body:has(#libraryPageRoot) .content,
body:has(#libraryPageRoot) .container {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/* Nothing inside a page may force the shell wider. */
.wrap > *,
.st-home-workspace > *,
.ai-chat-shell > *,
#libraryPageRoot > *,
.telegram-page > * {
  min-width: 0;
  max-width: 100%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  :root {
    --st-shell-gutter: 24px;
  }

  .wrap,
  .site-header .topbar,
  body:has(#libraryPageRoot) .wrap,
  body:has(.ai-chat-shell) > .wrap,
  body:has(.telegram-page) .wrap,
  body.etsy-theme .wrap {
    width:
      calc(
        100% -
        (var(--st-shell-gutter) * 2)
      ) !important;

    max-width: none !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

  :root {
    --st-shell-gutter:
      var(--st-mobile-gutter);
  }

  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* Header */
  .site-header {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    margin-bottom:
      var(--st-mobile-header-gap) !important;

    box-sizing: border-box !important;
  }

  .site-header .topbar {
    width:
      calc(
        100% -
        (var(--st-mobile-gutter) * 2)
      ) !important;

    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* Every page gets the same 16px side spacing. */
  .wrap,
  body:has(#libraryPageRoot) .wrap,
  body:has(.ai-chat-shell) > .wrap,
  body:has(.telegram-page) .wrap,
  body.etsy-theme .wrap {
    width:
      calc(
        100% -
        (var(--st-mobile-gutter) * 2)
      ) !important;

    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /*
   * Pages must begin BELOW the header.
   * Prevent old page-specific negative positioning
   * from pulling headings underneath it.
   */
  .st-home-workspace,
  .ai-chat-shell,
  #libraryPageRoot,
  .telegram-page,
  .maker-shell,
  .maker-page,
  body.etsy-theme .wrap > section:first-child {
    margin-top: 0 !important;
    transform: none;
  }


  /*
   * Avoid oversized headings pushing into
   * header controls on narrow screens.
   */
  .st-home-workspace h1,
  .ai-chat-shell h1,
  #libraryPageRoot h1,
  .telegram-page h1,
  .maker-shell h1,
  .maker-page h1,
  body.etsy-theme h1 {
    max-width: 100% !important;

    overflow-wrap: break-word;
    word-break: normal;

    box-sizing: border-box;
  }


  main,
  .wrap,
  .st-home-workspace,
  .ai-chat-shell,
  #libraryPageRoot,
  .telegram-page {
    min-width: 0 !important;
  }
}


/* Very narrow phones */
@media (max-width: 390px) {

  :root {
    --st-mobile-gutter: 14px;
    --st-mobile-header-gap: 20px;
  }
}



/* =========================================================
   SPACETOOLS — FINAL GLOBAL SHELL
   Same horizontal boundary on every app page.
   ========================================================= */

:root {
  --st-page-max: 1480px;
  --st-page-side: 64px;
}


/* Desktop ------------------------------------------------ */

@media (min-width: 1101px) {

  html body .wrap,
  html body .site-header .topbar {
    width:
      min(
        var(--st-page-max),
        calc(100vw - 128px)
      ) !important;

    max-width: var(--st-page-max) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }
}


/* Laptop / tablet ---------------------------------------- */

@media (min-width: 681px) and (max-width: 1100px) {

  html body .wrap,
  html body .site-header .topbar {
    width: calc(100vw - 48px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }
}


/* Mobile ------------------------------------------------- */

@media (max-width: 680px) {

  html body .wrap,
  html body .site-header .topbar {
    width: calc(100vw - 32px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }

  html body .site-header {
    margin-bottom: 22px !important;
  }
}


/* =========================================================
   LIBRARY — HARD SHELL
   library-clean.css has its own old viewport width rules.
   Force it to stay inside the global shell.
   ========================================================= */

html body:has(#libraryPageRoot) #libraryPageRoot {
  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  left: auto !important;
  right: auto !important;

  transform: none !important;

  box-sizing: border-box !important;
}


/* Old Library wrappers may also try to escape .wrap */
html body:has(#libraryPageRoot) main,
html body:has(#libraryPageRoot) .page-shell,
html body:has(#libraryPageRoot) .page-wrap,
html body:has(#libraryPageRoot) .content,
html body:has(#libraryPageRoot) .content-wrap,
html body:has(#libraryPageRoot) .container {
  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/* Library controls/grid are never allowed beyond the shell */
html body:has(#libraryPageRoot)
#libraryPageRoot .library-clean-head,

html body:has(#libraryPageRoot)
#libraryPageRoot .library-clean-tabs,

html body:has(#libraryPageRoot)
#libraryPageRoot .library-clean-toolbar,

html body:has(#libraryPageRoot)
#libraryPageRoot .library-search-wrap,

html body:has(#libraryPageRoot)
#libraryPageRoot #libraryGroupsToolbar,

html body:has(#libraryPageRoot)
#libraryPageRoot #grid {
  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/* Desktop grid remains responsive INSIDE the page shell */
@media (min-width: 1101px) {

  html body:has(#libraryPageRoot)
  #libraryPageRoot
  #grid:not(.library-clean-list) {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(235px, 1fr)
      ) !important;

    gap: 14px !important;
  }
}


/* =========================================================
   ETSY — ORANGE CONVERT MODAL
   ========================================================= */

body.etsy-theme #convertModalOverlay .modal-box {
  border:
    1px solid rgba(255, 106, 0, .38) !important;

  background:
    linear-gradient(
      155deg,
      rgba(15, 7, 5, .98),
      rgba(6, 4, 7, .99)
    ) !important;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, .72),
    0 0 55px rgba(255, 106, 0, .08) !important;
}


body.etsy-theme #convertModalOverlay h3 {
  color: #fff !important;
}


body.etsy-theme #convertModalOverlay
.modal-field label {
  color: #b9a8a4 !important;
}


body.etsy-theme #convertModalOverlay
#convertPresetSelect {
  border-color:
    rgba(255, 106, 0, .22) !important;

  background:
    rgba(8, 5, 7, .95) !important;

  color: #fff !important;
}


body.etsy-theme #convertModalOverlay
#convertPresetSelect:focus {
  border-color: #ff6a00 !important;

  box-shadow:
    0 0 0 3px
    rgba(255, 106, 0, .10) !important;

  outline: none !important;
}


body.etsy-theme #convertModalOverlay
#convertTextureCheckbox {
  accent-color: #ff6a00 !important;
}


body.etsy-theme #convertModalOverlay
.modal-checkbox {
  color: #f4eded !important;
}


/* Estimated cost panel */
body.etsy-theme #convertModalOverlay
.modal-cost,

body.etsy-theme #convertModalOverlay
.convert-cost,

body.etsy-theme #convertModalOverlay
:has(> #convertCostValue) {
  border:
    1px solid rgba(255, 106, 0, .38) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 106, 0, .14),
      rgba(100, 32, 0, .18)
    ) !important;
}


body.etsy-theme #convertModalOverlay
#convertCostValue {
  color: #ff8a24 !important;
}


/* Cancel */
body.etsy-theme #convertModalOverlay
#convertModalCancel {
  border-color:
    rgba(255, 106, 0, .18) !important;

  background: #080609 !important;

  color: #f4edf1 !important;
}


body.etsy-theme #convertModalOverlay
#convertModalCancel:hover {
  border-color:
    rgba(255, 106, 0, .48) !important;
}


/* Convert */
body.etsy-theme #convertModalOverlay
#convertModalConfirm {
  border:
    1px solid rgba(255, 138, 36, .7) !important;

  background:
    linear-gradient(
      135deg,
      #b84300,
      #ff6a00,
      #ff8a24
    ) !important;

  color: #fff !important;

  box-shadow:
    0 10px 28px
    rgba(255, 106, 0, .22) !important;
}


body.etsy-theme #convertModalOverlay
#convertModalConfirm:hover {
  transform: translateY(-1px);

  box-shadow:
    0 14px 32px
    rgba(255, 106, 0, .30) !important;
}



/* =========================================================
   FINAL RESPONSIVE FOUNDATION
   Browser zoom must be the ONLY zoom.
   ========================================================= */

html,
body {
  zoom: 1 !important;
}


/* =========================================================
   3D MAKER — RESPONSIVE GRID
   ========================================================= */

.maker-layout {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 340px) !important;

  gap: 20px !important;

  align-items: stretch !important;

  box-sizing: border-box !important;
}


.maker-layout > .upload-card,
.maker-layout > .settings-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  box-sizing: border-box !important;
}


.upload-card #dropzone,
.upload-card .url-section,
.upload-card .url-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;
}


.upload-card .url-row input {
  min-width: 0 !important;
}


/* Laptop */
@media (max-width: 1180px) {

  .maker-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 310px) !important;

    gap: 16px !important;
  }
}


/* Tablet / narrow desktop */
@media (max-width: 900px) {

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

  .settings-card {
    width: 100% !important;
  }
}


/* =========================================================
   GLOBAL SHELL SAFETY
   ========================================================= */

.wrap,
.site-header .topbar {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.wrap {
  overflow: visible !important;
}

main,
section,
article,
aside {
  min-width: 0;
}


/* No app page may create horizontal viewport overflow */
@media (min-width: 681px) {

  body {
    overflow-x: hidden !important;
  }

  .wrap {
    width:
      min(
        1480px,
        calc(100% - 96px)
      ) !important;

    max-width: 1480px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-header .topbar {
    width:
      min(
        1480px,
        calc(100% - 96px)
      ) !important;

    max-width: 1480px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* Mobile */
@media (max-width: 680px) {

  .wrap,
  .site-header .topbar {
    width: calc(100% - 32px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }
}