/*
 * mobile-resource.css
 * Mobile-only overrides for the Resources pages (max-width: 768px)
 * Target design: Resources-Mobile-Page.html (390px viewport)
 *
 * Pages: resource-images, resource-models, resource-documents,
 *        resource-finishes, resource-textiles
 *
 * Purely additive — rules only apply inside media queries
 * and do NOT affect desktop styles.
 * Existing HTML classes are unchanged.
 */


/* ============================================================
   1. TOP BAR — design: 44px / #231f20 / pad 0 20px
   ============================================================ */
@media (max-width: 768px) {
  .th-header [data-v-header-component-link],
  .th-page-builder-link-button {
    display: none !important;
  }

  .th-topbar,
  .th-topbar.top-bar {
    height: 44px !important;
    min-height: 44px !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex-direction: row !important;
  }

  .th-topbar .position-relative.container,
  .th-topbar .top-bar__inner,
  .th-topbar.top-bar .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    height: 44px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 12px !important;
  }

  .th-topbar .d-flex.align-items-center.justify-content-center {
    display: contents !important;
  }

  .th-topbar-text,
  .th-topbar .top-bar__promo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
  }

  .th-topbar .contact-sales {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .th-topbar-link,
  .th-topbar .top-bar__catalogue {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    line-height: 1.2 !important;
  }

  .th-topbar .fa-envelope,
  .th-topbar .fal.fa-envelope,
  .th-topbar .top-bar__envelope {
    display: none !important;
  }
}


/* ============================================================
   2. HEADER / NAVIGATION BAR
   Design: 60px / pad 0 20px / logo 22px / icons 20px / gap 12px
   ============================================================ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* lightGallery needs a free viewport — overflow-x:hidden clips position:fixed on iOS */
  html.lg-on,
  html.lg-on body,
  body.lg-on {
    overflow: hidden !important;
    max-width: none !important;
  }

  .sticky-wrapper,
  .sticky-wrapper.desktop-menu,
  .menu-area {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .th-menu-wrapper.mobile-menu {
    max-width: none !important;
    overflow: visible !important;
  }

  .sticky-wrapper.desktop-menu {
    background: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area {
    padding: 0 !important;
    background: #ffffff !important;
  }

  .sticky-wrapper.desktop-menu .container,
  .sticky-wrapper.desktop-menu .container.th-container {
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area .row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-content: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 60px !important;
    width: 100% !important;
  }

  .sticky-wrapper .col-4.d-flex {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .sticky-wrapper .col-4:first-child {
    justify-content: flex-start !important;
    grid-column: 1;
  }

  .sticky-wrapper .col-4:nth-child(2) {
    justify-content: center !important;
    grid-column: 2;
  }

  .sticky-wrapper .col-4:last-child {
    justify-content: flex-end !important;
    grid-column: 3;
  }

  .sticky-wrapper .th-nav-section-px {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  button.th-menu-toggle.d-block.d-lg-none {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: -10px !important;
    border: none !important;
    background: transparent !important;
    font-size: 18px !important;
    color: #231f20 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  button.th-menu-toggle.d-block.d-lg-none i {
    font-size: 18px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  .header-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  .header-logo a img {
    height: 22px !important;
    width: auto !important;
    display: block !important;
    max-height: 22px !important;
  }

  .sticky-wrapper .d-none.d-lg-inline-block,
  .sticky-wrapper .header-button.d-none.d-lg-inline-block,
  .sticky-wrapper.desktop-menu .main-menu {
    display: none !important;
  }

  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    color: #231f20 !important;
  }

  .th-header-search {
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fa-regular.fa-magnifying-glass,
  .th-header-search .fa-regular.fa-magnifying-glass,
  #th-header-global-search i,
  #th-header-global-search .fa-regular.fa-magnifying-glass {
    font-size: 20px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  #pinboard-button,
  a[aria-controls="offcanvasRight"] {
    width: 20px !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #pinboard-button img,
  a[aria-controls="offcanvasRight"] img,
  img[src*="pinboard-icon"] {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
  }

  .th-user-dropdown,
  #user-profile-info {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1051 !important;
  }

  .th-user-dropdown .dropdown-toggle,
  #user-profile-info .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    font-size: 20px !important;
  }

  .fa-solid.fa-user,
  .th-user-dropdown .fa-solid.fa-user,
  #user-profile-info .fa-solid.fa-user {
    font-size: 20px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  .th-header {
    position: relative !important;
    z-index: 1050 !important;
  }

  .th-menu-wrapper,
  .sticky-wrapper,
  .sticky-wrapper.desktop-menu,
  .menu-area,
  .sticky-wrapper.desktop-menu .container,
  .sticky-wrapper.desktop-menu .container.th-container,
  .sticky-wrapper.desktop-menu .menu-area .row,
  .sticky-wrapper .col-4:last-child,
  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    overflow: visible !important;
  }
}


/* ============================================================
   3. PAGE SHELL — #design-resources
   Design: 20px page padding, no extra desktop gutters
   ============================================================ */
@media (max-width: 768px) {
  #design-resources {
    padding: 0 !important;
    margin: 0 !important;
  }

  #design-resources > .container.th-container,
  #design-resources > .th-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 !important;
  }

  #design-resources > .container.th-container > .row,
  #design-resources .section-body,
  #design-resources .section-body > .row,
  #design-resources .section-body .col-md-12 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #design-resources .section-header {
    margin-bottom: 0 !important;
    padding: 16px 0 0 !important;
  }

  #design-resources .section-header .w-100,
  #design-resources .th-bredcrum {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #design-resources .breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    color: #33322f !important;
    line-height: 1.4 !important;
  }

  #design-resources .breadcrumb-item {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  #design-resources .breadcrumb-item + .breadcrumb-item {
    padding-left: 0 !important;
  }

  #design-resources .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    padding: 0 6px 0 0 !important;
    color: #a5a2a0 !important;
    float: none !important;
  }

  #design-resources .breadcrumb-item a {
    color: #33322f !important;
    text-decoration: none !important;
  }

  #design-resources .breadcrumb-item.active {
    color: #231f20 !important;
    font-weight: 600 !important;
  }
}


/* ============================================================
   4. TAB NAVIGATION — horizontal pill strip
   Design: 9px 14px pills, 8px gap, drag-scroll, edge fades
   ============================================================ */
@media (max-width: 768px) {
  #design-resources .th-head-tab-navigation-container,
  #design-resources .th-head-tab-navigation-container.d-flex,
  #design-resources .th-head-tab-navigation-container.sticky {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 5 !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin: 18px -20px 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    justify-content: unset !important;
  }

  #design-resources .th-head-tab-navigation-container::before,
  #design-resources .th-head-tab-navigation-container::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 14px !important;
    width: 22px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  #design-resources .th-head-tab-navigation-container::before {
    left: 0 !important;
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0)) !important;
  }

  #design-resources .th-head-tab-navigation-container::after {
    right: 0 !important;
    background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0)) !important;
  }

  #design-resources #th-tab-navigation.nav-tabs,
  #design-resources #th-tab-navigation.th-center-tab,
  #design-resources #th-tab-navigation.d-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 20px 14px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab !important;
    touch-action: pan-x !important;
  }

  #design-resources #th-tab-navigation.is-dragging {
    cursor: grabbing !important;
    user-select: none !important;
  }

  #design-resources #th-tab-navigation.is-dragging .nav-link {
    pointer-events: none !important;
  }

  #design-resources #th-tab-navigation::-webkit-scrollbar {
    height: 4px !important;
  }

  #design-resources #th-tab-navigation::-webkit-scrollbar-thumb {
    background: #cfccc9 !important;
    border-radius: 2px !important;
  }

  #design-resources #th-tab-navigation::-webkit-scrollbar-track {
    background: transparent !important;
  }

  #design-resources #th-tab-navigation .nav-item {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    scroll-snap-align: center !important;
  }

  #design-resources #th-tab-navigation .nav-link,
  #design-resources #th-tab-navigation .nav-link.th-tab-color,
  #design-resources .th-head-tab-navigation-container .nav-link.active,
  #design-resources .th-head-tab-navigation-container .nav-item.show .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 9px 14px !important;
    margin: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    color: #33322f !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    font-family: inherit !important;
  }

  #design-resources #th-tab-navigation .nav-link.active,
  #design-resources .th-head-tab-navigation-container .nav-link.active {
    border-color: #231f20 !important;
    background: #231f20 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }
}


/* ============================================================
   5. FILTER CARD
   Design: 10px radius card, 42px fields, Show/Hide toggle
   ============================================================ */
@media (max-width: 768px) {
  #design-resources #vue-resource-app {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  #design-resources #vue-resource-app > [class*="col-"],
  #design-resources #filter-navigation-container,
  #design-resources #th-tab-navigation-content {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #design-resources #filter-navigation-container {
    min-height: 0 !important;
    padding-top: 22px !important;
  }

  #design-resources #th-resource-sidebar-sticky,
  #design-resources #th-resource-sidebar-sticky.sticky,
  #design-resources #th-resource-sidebar-sticky.pr-md-40 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #design-resources #filter-images-error {
    display: none !important;
  }

  #design-resources #th-resource-sidebar-sticky > [data-mobile-filter-toggle] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  #design-resources #th-resource-sidebar-sticky > [data-mobile-filter-toggle] span {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  #design-resources #th-resource-sidebar-sticky > [data-mobile-filter-toggle] button {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #33322f !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    line-height: 1 !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #design-resources #th-resource-sidebar-sticky:has([data-mobile-filter-toggle]):not(.th-open) #filter-resource-form {
    display: none !important;
  }

  #design-resources #filter-resource-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  #design-resources #filter-resource-form .th-input-group,
  #design-resources #filter-resource-form .th-input-group.pl-0,
  #design-resources #filter-resource-form .th-input-group.th-border-top,
  #design-resources #filter-resource-form .autocomplete {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: relative !important;
  }

  /* Vue v-show uses inline display:none — !important above was forcing every field visible */
  #design-resources #filter-resource-form .th-input-group[style*="display: none"],
  #design-resources #filter-resource-form .th-input-group[style*="display:none"],
  #design-resources #filter-resource-form .autocomplete[style*="display: none"],
  #design-resources #filter-resource-form .autocomplete[style*="display:none"],
  #design-resources #filter-resource-button[style*="display: none"],
  #design-resources #filter-resource-button[style*="display:none"],
  #design-resources #reset-resource-button[style*="display: none"],
  #design-resources #reset-resource-button[style*="display:none"] {
    display: none !important;
  }

  #design-resources #filter-resource-form .choices,
  #design-resources #filter-resource-form .th-input-group .choices {
    flex: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #design-resources .form-control,
  #design-resources .form-select,
  #design-resources input,
  #design-resources select,
  #design-resources textarea,
  #design-resources #choose-product-name,
  #design-resources #filter-resource-form .choices .choices__inner,
  #design-resources #filter-resource-form .choices[data-type*="select-one"] .choices__inner {
    max-height: 42px !important;
    min-height: 42px !important;
    height: 42px !important;
    width: 100% !important;
    padding: 0 34px 0 12px !important;
    font-size: 12px !important;
    line-height: 42px !important;
    color: #33322f !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    appearance: none !important;
  }

  #design-resources #choose-product-name {
    padding: 0 12px !important;
    color: #231f20 !important;
  }

  #design-resources #filter-resource-form .choices[data-type*="select-one"]::after {
    right: 14px !important;
    margin-top: -3px !important;
    border-width: 5px 4px 0 4px !important;
    border-color: #8a8785 transparent transparent transparent !important;
  }

  #design-resources #filter-resource-form .choices .choices__list--single {
    padding: 0 !important;
  }

  #design-resources #filter-resource-form .choices .choices__list--single .choices__item {
    font-size: 12px !important;
    color: #33322f !important;
    line-height: 40px !important;
  }

  #design-resources #filter-resource-form .choices.is-disabled .choices__inner,
  #design-resources #choose-product-name:disabled {
    background: #f5f5f5 !important;
  }

  #design-resources #filter-resource-form .autocomplete .fa-close,
  #design-resources #filter-resource-form .autocomplete .fa.fa-close {
    top: 14px !important;
    right: 10px !important;
    font-size: 12px !important;
  }

  #design-resources #filter-resource-button,
  #design-resources #filter-resource-button.th-btn-primary {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    max-height: 42px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 2px !important;
    background: #231f20 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #design-resources #filter-resource-button:not([style*="display: none"]):not([style*="display:none"]),
  #design-resources #filter-resource-button.th-btn-primary:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
  }

  /* Documents & Guides has search only — no Filter button */
  #design-resources[data-mobile-tab="documents"] #filter-resource-button {
    display: none !important;
  }

  #design-resources #filter-resource-button:before,
  #design-resources #filter-resource-button:after {
    display: none !important;
  }

  #design-resources #reset-resource-button,
  #design-resources #reset-resource-button.th-btn-outline-black {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    max-height: 42px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 1px solid #231f20 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    color: #231f20 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Only flex when Vue has not hidden the button (no context selected yet) */
  #design-resources #reset-resource-button:not([style*="display: none"]):not([style*="display:none"]),
  #design-resources #reset-resource-button.th-btn-outline-black:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
  }

  #design-resources #reset-resource-button:before,
  #design-resources #reset-resource-button:after {
    display: none !important;
  }
}


/* ============================================================
   6. RESULTS HEADER — title + total count
   Design: 20px title / 12px count, space-between
   ============================================================ */
@media (max-width: 768px) {
  #design-resources #totalCount,
  #design-resources #totalCount.row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #33322f !important;
    line-height: 1.25 !important;
  }

  #design-resources #totalCount::before {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    white-space: nowrap !important;
  }

  #design-resources[data-mobile-tab="images"] #totalCount::before {
    content: "Images";
  }

  #design-resources[data-mobile-tab="models"] #totalCount::before {
    content: "2D / 3D Models";
  }

  #design-resources[data-mobile-tab="documents"] #totalCount::before {
    content: "Documents & Guides";
  }

  #design-resources[data-mobile-tab="finishes"] #totalCount::before {
    content: "Finishes";
  }

  #design-resources[data-mobile-tab="textiles"] #totalCount::before {
    content: "Textiles";
  }

  #design-resources #th-tab-navigation-content > div,
  #design-resources #conent,
  #design-resources .tab-pane,
  #design-resources .tab-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #design-resources .tab-pane > .row.row-gap-50,
  #design-resources .tab-pane > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  #design-resources .tab-pane > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   7. IMAGES — 2-column cards
   Design: 12px gap, 10px radius, 1:1 frame, 26px download
   ============================================================ */
@media (max-width: 768px) {
  #design-resources .th-img-masonry-image-resource-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    min-height: 0 !important;
    gap: 12px !important;
    padding: 16px 0 0 !important;
    width: 100% !important;
  }

  #design-resources .th-img-masonry-image-resource-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #eeeeee !important;
    background: #ffffff !important;
  }

  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img,
  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img.th-product {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    background-size: 84% auto !important;
    background-repeat: no-repeat !important;
    background-position: center 40% !important;
    background-color: #ffffff !important;
  }

  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img-content,
  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img:hover .th-masonry-img-content,
  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img.th-product .th-masonry-img-content {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 6px !important;
    height: 100% !important;
    padding: 8px 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img-content .d-flex.flex-column {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img-content p,
  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img-content p.small,
  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img.th-product .th-masonry-img-content p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #6b6a68 !important;
  }

  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img-content h6,
  #design-resources .th-img-masonry-image-resource-grid .th-masonry-img.th-product .th-masonry-img-content h6 {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #231f20 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #design-resources .th-img-masonry-image-resource-grid .th-btn-download-white {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #231f20 !important;
    font-size: 11px !important;
    box-shadow: 0 1px 4px rgba(35, 31, 32, 0.18) !important;
  }
}


/* ============================================================
   8. MODELS & DOCUMENTS — stacked file cards
   Design: 16/9 image, 10px radius, 24px stack gap
   ============================================================ */
@media (max-width: 768px) {
  #design-resources .model-list,
  #design-resources .document-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 16px 0 0 !important;
    width: 100% !important;
  }

  #design-resources .model-item,
  #design-resources .document-item,
  #design-resources .design-item.model-item,
  #design-resources .design-item.document-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #design-resources .model-item .th-tab-card-wrapper,
  #design-resources .document-item .th-tab-card-wrapper {
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    height: auto !important;
  }

  #design-resources .model-item .th-res-img-wraper,
  #design-resources .document-item .th-res-img-wraper,
  #design-resources .model-item .th-res-img-wraper.border,
  #design-resources .document-item .th-res-img-wraper.border {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border: none !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #design-resources .model-item .th-res-img-wraper img,
  #design-resources .document-item .th-res-img-wraper img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  #design-resources .model-item .th-res-info,
  #design-resources .document-item .th-res-info {
    padding: 18px 18px 20px !important;
    margin: 0 !important;
    gap: 14px !important;
  }

  #design-resources .model-item .th-res-info h4,
  #design-resources .document-item .th-res-info h4,
  #design-resources .model-item .th-title-22,
  #design-resources .document-item .th-title-22 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
  }

  #design-resources .model-item .th-res-info h4 a,
  #design-resources .document-item .th-res-info h4 a {
    color: #231f20 !important;
    text-decoration: none !important;
  }

  #design-resources .model-item .th-info-list,
  #design-resources .document-item .th-info-list,
  #design-resources .design-resource-tags {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #design-resources .design-resource-tag {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #33322f !important;
    text-decoration: none !important;
    word-break: break-word !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #design-resources .design-resource-tag:hover {
    text-shadow: none !important;
    color: #231f20 !important;
  }

  #design-resources .file-icon,
  #design-resources .design-resource-tag .file-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    margin: 0 !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  #design-resources .model-item .link,
  #design-resources .document-item .link {
    padding: 0 !important;
    margin-top: 2px !important;
  }

  #design-resources .model-item .link-text,
  #design-resources .document-item .link-text,
  #design-resources .model-item .link a,
  #design-resources .document-item .link a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  #design-resources .link-icon {
    display: none !important;
  }
}


/* ============================================================
   9. FINISHES & TEXTILES — 3-column swatches
   Design: 1:1 swatch, 8px radius, 30px 16px gap
   ============================================================ */
@media (max-width: 768px) {
  #design-resources .finishe-list,
  #design-resources .textile-list,
  #design-resources .finishe-list.row,
  #design-resources .textile-list.row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px 16px !important;
    margin: 0 !important;
    padding: 18px 0 0 !important;
    width: 100% !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  #design-resources .th-finishe-item-card,
  #design-resources .finishes-item,
  #design-resources .textiles-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #design-resources .th-finishe-item-card .th-tab-card-wrapper {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  #design-resources .th-res-img-wraper-textile,
  #design-resources .th-res-img-wraper-textile.border {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(35, 31, 32, 0.08) !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #design-resources .th-res-img-wraper-textile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #design-resources .th-finishe-item-card .th-res-info,
  #design-resources .textiles-item .th-res-info {
    margin: 0 !important;
    padding: 0 !important;
    gap: 9px !important;
  }

  #design-resources .th-finishes-title,
  #design-resources .th-textiles-title {
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #231f20 !important;
  }

  #design-resources .th-finishe-item-card .th-res-info > span,
  #design-resources .th-resourece-subtitle-textile {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #8a8785 !important;
  }

  #design-resources .th-finishe-item-card .link,
  #design-resources .textiles-item .link {
    padding: 0 !important;
    margin-top: 2px !important;
  }

  #design-resources .th-finishe-item-card .link a,
  #design-resources .textiles-item .link a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
}


/* ============================================================
   10. LOAD MORE
   Design: 180×44 / #f0efed / 12px / weight 600
   Hidden on Models / Documents / Finishes / Textiles (Images keeps it).
   ============================================================ */
@media (max-width: 768px) {
  #design-resources[data-mobile-tab="models"] #loadMore,
  #design-resources[data-mobile-tab="documents"] #loadMore,
  #design-resources[data-mobile-tab="finishes"] #loadMore,
  #design-resources[data-mobile-tab="textiles"] #loadMore,
  #design-resources #loadMoreModelsButton,
  #design-resources #loadMoreDocumentsButton,
  #design-resources #loadMoreFinishesButton,
  #design-resources #loadMoreTextilesButton {
    display: none !important;
  }

  #design-resources[data-mobile-tab="models"],
  #design-resources[data-mobile-tab="documents"],
  #design-resources[data-mobile-tab="finishes"],
  #design-resources[data-mobile-tab="textiles"] {
    padding-bottom: 50px !important;
  }

  #design-resources #loadMore {
    width: 100% !important;
    padding: 28px 0 48px !important;
    margin: 0 !important;
  }

  #design-resources #loadMore .row {
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  #design-resources #loadMore .col-lg-4 {
    display: none !important;
  }

  #design-resources #loadMore .col-lg-8,
  #design-resources #loadMore .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: none !important;
  }

  #design-resources #loadMore .th-btn-gray,
  #design-resources #loadMore button {
    min-width: 180px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: 2px !important;
    background: #f0efed !important;
    color: #231f20 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
  }

  #design-resources #loadMore .th-btn-gray:before,
  #design-resources #loadMore .th-btn-gray:after {
    display: none !important;
  }

  #design-resources .spinner-border {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  #design-resources #images .text-center.p-4 {
    width: 100% !important;
    padding: 16px 0 8px !important;
  }
}


/* ============================================================
   12. LIGHTGALLERY — fullscreen lightbox on mobile
   Desktop gallery JS is unchanged. These rules only apply
   at max-width 768px on the resources pages.
   ============================================================ */
@media (max-width: 768px) {
  #design-resources .th-img-masonry-image-resource-grid > [data-src] {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  .lg-container.lg-show,
  .lg-container.lg-show .lg-backdrop,
  .lg-container.lg-show .lg-outer,
  .lg-container.lg-show .lg-outer.lg-visible {
    z-index: 200000 !important;
  }

  .lg-container.lg-show {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
  }

  .lg-container.lg-show .lg-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.9) !important;
  }

  .lg-container.lg-show .lg-outer,
  .lg-container.lg-show .lg-outer.lg-visible {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .lg-container.lg-show .lg-inner,
  .lg-container.lg-show .lg-item,
  .lg-container.lg-show .lg-img-wrap,
  .lg-container.lg-show .lg-image {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .lg-container.lg-show .lg-toolbar,
  .lg-container.lg-show .lg-actions .lg-next,
  .lg-container.lg-show .lg-actions .lg-prev,
  .lg-container.lg-show .lg-close {
    z-index: 200001 !important;
    pointer-events: auto !important;
  }
}


/* ============================================================
   11. NARROW PHONE — 2-column swatches below 390px
   ============================================================ */
@media (max-width: 389px) {
  #design-resources .finishe-list,
  #design-resources .textile-list,
  #design-resources .finishe-list.row,
  #design-resources .textile-list.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}