/*
 * BinikStock V516 — Batch 1 public responsive audit.
 *
 * This final layer is intentionally limited to the public homepage, search /
 * listing, pack-detail and single-asset modal components. Desktop declarations
 * are left untouched; the rules below only intervene below tablet widths.
 */

@media (max-width: 1024px) {
  html body.binikstock-public-ui {
    overflow-x: clip;
  }

  html body.binikstock-public-ui :where(img, video) {
    max-width: 100%;
  }
}

/* Shared global navigation: undo V170's desktop-only forced menu at mobile. */
@media (max-width: 760px) {
  html body.binikstock-public-ui .binikstock-v170-global-header > .iconsol-container.iconsol-nav {
    width: min(calc(100% - 28px), 680px) !important;
    min-height: 68px !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: 68px auto !important;
    gap: 0 12px !important;
    position: relative !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-logo {
    max-width: min(52vw, 174px) !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-logo .binikstock-logo-img,
  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-logo img {
    max-width: min(52vw, 174px) !important;
    max-height: 32px !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .menu-toggle {
    display: inline-grid !important;
    place-content: center !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-actions {
    display: flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    gap: 0 !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-actions > :not(.iconsol-v88-user-menu):not(.signin) {
    display: none !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-actions > .signin {
    display: inline-flex !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    align-items: center !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-v88-avatar,
  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-v88-avatar-btn img {
    width: 38px !important;
    height: 38px !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-menu {
    display: none !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 8px !important;
    border: 1px solid rgba(151, 180, 214, .25) !important;
    border-radius: 16px !important;
    background: #10253d !important;
    box-shadow: 0 18px 42px rgba(0, 6, 22, .36) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-menu.is-open {
    display: flex !important;
  }

  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-menu a {
    min-height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  /* When the homepage menu is open it remains in document flow, never over hero copy. */
  html body.home .bs-home-v156 > .binikstock-v170-global-header.is-menu-open,
  html body.front-page .bs-home-v156 > .binikstock-v170-global-header.is-menu-open {
    position: relative !important;
    background: #020918 !important;
  }
}

/* V591 homepage: centered light hero with no right-side art layer. */
@media (max-width: 1024px) {
  html body.home .bs-home-v156 .bs-v591-home-hero .bs-v156-hero-inner,
  html body.front-page .bs-home-v156 .bs-v591-home-hero .bs-v156-hero-inner {
    width: min(calc(100% - 40px), 900px) !important;
    padding: 62px 0 72px !important;
    gap: 0 !important;
  }
}

@media (max-width: 760px) {
  html body.home .bs-home-v156 .bs-v591-home-hero .bs-v156-hero-inner,
  html body.front-page .bs-home-v156 .bs-v591-home-hero .bs-v156-hero-inner {
    width: min(calc(100% - 28px), 600px) !important;
    padding: 46px 0 58px !important;
    gap: 0 !important;
  }

  html body.home .bs-home-v156 .bs-v156-copy h1,
  html body.home .bs-home-v156 .bs-v156-copy h1 span,
  html body.front-page .bs-home-v156 .bs-v156-copy h1,
  html body.front-page .bs-home-v156 .bs-v156-copy h1 span {
    font-size: clamp(32px, 9.4vw, 42px) !important;
    line-height: 1.12 !important;
  }

  html body.home .bs-home-v156 .bs-v156-copy p,
  html body.front-page .bs-home-v156 .bs-v156-copy p {
    margin: 14px 0 20px !important;
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.58 !important;
  }

  html body.home .bs-home-v156 .bs-v156-search,
  html body.front-page .bs-home-v156 .bs-v156-search {
    width: 100% !important;
    height: 58px !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    padding: 6px !important;
  }

  html body.home .bs-home-v156 .bs-v591-search-leading,
  html body.front-page .bs-home-v156 .bs-v591-search-leading {
    display: none !important;
  }

  html body.home .bs-home-v156 .bs-v156-search input,
  html body.front-page .bs-home-v156 .bs-v156-search input {
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  html body.home .bs-home-v156 .bs-v156-search button,
  html body.front-page .bs-home-v156 .bs-v156-search button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  html body.home .bs-home-v156 .bs-v156-popular,
  html body.front-page .bs-home-v156 .bs-v156-popular {
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }

  html body.home .bs-home-v156 .bs-v156-popular a,
  html body.front-page .bs-home-v156 .bs-v156-popular a {
    min-height: 34px !important;
    height: auto !important;
    padding: 6px 12px !important;
  }

}

/* Main search and category listings: controls remain inside fluid containers. */
@media (max-width: 1024px) {
  html body .iconsol-v105-search-shell,
  html body .category-listing-template .icons-page-hero > .iconsol-container,
  html body .category-listing-template .icons-page-grid-shell > .iconsol-container,
  html body .icons-listing-template .icons-page-hero > .iconsol-container,
  html body .icons-listing-template .icons-page-grid-shell > .iconsol-container {
    width: min(calc(100% - 40px), 920px) !important;
  }

  html body .bs-v448-search-form,
  html body .bs-v453-filter-interface,
  html body .bs-v457-results-layout {
    min-width: 0 !important;
  }
}

@media (max-width: 680px) {
  html body .iconsol-v105-search-shell,
  html body .category-listing-template .icons-page-hero > .iconsol-container,
  html body .category-listing-template .icons-page-grid-shell > .iconsol-container,
  html body .icons-listing-template .icons-page-hero > .iconsol-container,
  html body .icons-listing-template .icons-page-grid-shell > .iconsol-container {
    width: min(calc(100% - 28px), 560px) !important;
  }

  html body .bs-v448-search-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body .bs-v454-search-category,
  html body .bs-v454-search-category .bs-v454-search-category-button,
  html body .bs-v461-search-field,
  html body .bs-v462-search-field {
    width: 100% !important;
    border-radius: 14px !important;
  }

  html body .bs-v454-search-category {
    border: 1px solid #e6ebf3 !important;
  }

  html body .bs-v453-quick-cluster {
    grid-template-columns: 1fr !important;
  }

  html body .bs-v453-quick-filter,
  html body .bs-v453-more-filters {
    min-width: 0 !important;
  }

  html body .bs-v453-quick-menu,
  html body .bs-v454-search-category .bs-v454-search-category-menu {
    width: min(280px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }

  html body .iconsol-v105-grid.is-mixed,
  html body .category-listing-template .icons-page-grid,
  html body .icons-listing-template .icons-page-grid {
    grid-template-columns: 1fr !important;
  }

  html body .iconsol-v105-result-card,
  html body .icons-page-grid > * {
    min-width: 0 !important;
  }

  html body .icons-page-search {
    width: 100% !important;
  }
}

/* Pack detail: stack without squeezing controls or media. */
@media (max-width: 760px) {
  html body .pack-detail-main > .iconsol-container {
    width: min(calc(100% - 28px), 680px) !important;
  }

  html body .v43-pack-detail .pack-breadcrumb {
    white-space: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html body .v43-pack-detail .pack-detail-hero {
    gap: 22px !important;
  }

  html body .v43-pack-detail .pack-hero-art {
    min-height: clamp(220px, 68vw, 330px) !important;
    height: clamp(220px, 68vw, 330px) !important;
  }

  html body .v43-pack-detail .pack-hero-content h1 {
    font-size: clamp(27px, 8vw, 34px) !important;
    overflow-wrap: anywhere;
  }

  html body .v43-pack-detail .pack-meta-line {
    gap: 10px 14px !important;
  }

  html body .v43-pack-detail .pack-meta-line span {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  html body .v43-pack-detail .pack-format-wrap > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body .v43-pack-detail .pack-format-wrap button {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body .v43-pack-detail .pack-grid-tools.pack-grid-tools--search-only,
  html body .v43-pack-detail .pack-grid-tools--search-only .pack-search,
  html body .v43-pack-detail .bs-v459-search-field {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .v43-pack-detail .bs-v459-search-field input {
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  html body .v43-pack-detail .pack-action-row > .pack-action-btn {
    padding-inline: 14px !important;
    font-size: 14px !important;
  }

  html body .v43-pack-detail .v43-assets-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Single asset detail modal: fit the phone viewport and allow text to wrap. */
@media (max-width: 760px) {
  html body .iconsol-v66-modal {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  html body .iconsol-v66-card {
    width: 100% !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 18px !important;
    gap: 20px !important;
    border-radius: 18px !important;
  }

  html body .iconsol-v66-preview-wrap {
    height: clamp(220px, 66vw, 330px) !important;
  }

  html body .iconsol-v66-preview {
    padding: 20px !important;
  }

  html body .iconsol-v66-right h2 {
    margin-right: 42px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body .iconsol-v66-description,
  html body .iconsol-v66-owner,
  html body .iconsol-v66-meta strong,
  html body .iconsol-v66-keywords span {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  html body .iconsol-v66-formats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body .iconsol-v66-formats a {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .iconsol-v66-keywords-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

@media (max-width: 390px) {
  html body .iconsol-v66-modal {
    padding: 8px !important;
  }

  html body .iconsol-v66-card {
    padding: 16px !important;
  }

  html body .iconsol-v66-formats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.binikstock-public-ui .binikstock-v170-global-header .iconsol-menu,
  html body.binikstock-public-ui .iconsol-v66-card,
  html body.binikstock-public-ui .iconsol-v105-result-card {
    transition: none !important;
  }
}