/*
 * mobile-showroom.css
 * Mobile-only overrides for showroom/index.html (max-width: 768px)
 * Target design: Showroom-Details-Mobile.html (390px phone frame)
 *
 * These rules are purely additive — they only apply inside media queries
 * and do NOT affect desktop styles.
 * HTML markup and class names are left unchanged.
 *
 * Design tokens (from the bundled mobile mock inline styles):
 *   padding: 0 20px          — container gutter
 *   padding: 48px 0          — tour section rhythm
 *   min-height: 520px        — hero
 *   font-size: 26px / 1.18   — .th-hero-title
 *   font-size: 22px / 1.25   — tour title
 *   font-size: 12px / 1.65   — body / subtitle
 *   zone tiles: 4/3, 8px radius, 12px gap, 2-col
 *   detail panel: #f6f5f3, 10px radius, 16px pad
 *   product tiles: 3-col, 10px gap, 10px radius
 */


/* ============================================================
   0. SHARED — gallery strip scrollbar + drop-in
   ============================================================ */
@media (max-width: 768px) {
  #th-resources-images,
  .th-mobile-gallery-strip {
    scrollbar-width: thin;
    -ms-overflow-style: none;
  }

  #th-resources-images::-webkit-scrollbar,
  .th-mobile-gallery-strip::-webkit-scrollbar {
    height: 4px;
  }

  #th-resources-images::-webkit-scrollbar-thumb,
  .th-mobile-gallery-strip::-webkit-scrollbar-thumb {
    background: #cfccc9;
    border-radius: 2px;
  }

  .th-mobile-gallery-strip.dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
  }

  .th-mobile-gallery-strip.dragging * {
    pointer-events: none;
  }

  @keyframes dropIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


/* ============================================================
   1. TOP BAR
   Design: height 44 | pad 0 20px | 13px / 0.02em
   ============================================================ */
@media (max-width: 768px) {
  .th-header [data-v-header-component-link] {
    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;
  }

  .th-topbar .position-relative.container,
  .th-topbar .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;
  }

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

  .th-topbar-text {
    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: #fff !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;
  }

  .th-topbar-link {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
  }

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


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

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

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

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

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

  .sticky-wrapper.desktop-menu .menu-area .row,
  .sticky-wrapper.site-header .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,
  button.th-menu-toggle.site-header__menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: 0 !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,
  button.th-menu-toggle.site-header__menu i {
    font-size: 18px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  .header-logo a,
  .site-header__logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header-logo a img,
  .site-header__logo {
    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,
  .sticky-wrapper .site-header__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    margin-bottom: 0 !important;
    color: #231f20 !important;
  }

  .th-header-search,
  .site-header__icon-btn,
  .site-header__search-btn {
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: #231f20 !important;
  }

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

  #pinboard-button,
  .site-header__pin-btn {
    width: 20px !important;
    margin-right: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #pinboard-button img,
  .site-header__pin-icon,
  img[src*="pinboard-icon"] {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

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

  .th-user-dropdown .dropdown-toggle,
  #user-profile-info .dropdown-toggle {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .th-user-dropdown .dropdown-toggle::after {
    display: none !important;
  }

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


/* ============================================================
   3. HERO — #showroom-hero-section
   Design: min-height 520 | gradient 180deg | pad 16px 20px 32px
   title 26/1.18/700 | hours 14/1.6/600 | info 14/1.6 gap 9
   buttons stack, pad 11px 20px, 13/600, radius 2px
   ============================================================ */
@media (max-width: 768px) {
  #showroom-hero-section.th-hero-wrapper,
  #showroom-hero-section.th-hero,
  #showroom-hero-section.th-hero-transparent {
    min-height: 520px !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  #showroom-hero-section.th-hero-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35, 31, 32, 0.15) 0%, rgba(35, 31, 32, 0.78) 100%);
    pointer-events: none;
    z-index: 0;
  }

  #showroom-hero-section > .container.th-container,
  #showroom-hero-section .container.th-container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 520px !important;
    padding: 16px 20px 32px !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    z-index: 1;
  }

  #showroom-hero-section .row {
    margin: 0 !important;
    width: 100% !important;
  }

  #showroom-hero-section .row:first-child {
    flex: 0 0 auto !important;
  }

  #showroom-hero-section .col-md-12,
  #showroom-hero-section .col-xl-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  #showroom-hero-section .col-xl-5,
  #showroom-hero-section .th-hero-img {
    display: none !important;
  }

  #showroom-hero-section .th-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #showroom-hero-section .th-breadcrumb .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
  }

  #showroom-hero-section .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: #fff !important;
    opacity: 0.6 !important;
    padding: 0 !important;
    float: none !important;
  }

  #showroom-hero-section .th-breadcrumb .breadcrumb-item,
  #showroom-hero-section .th-breadcrumb .breadcrumb-item a,
  #showroom-hero-section .th-breadcrumb .breadcrumb-item span,
  #showroom-hero-section .th-breadcrumb .font-white {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    padding: 0 !important;
  }

  #showroom-hero-section .th-admin-links {
    display: none !important;
  }

  #showroom-hero-section .way-points-container {
    display: none !important;
  }

  #showroom-hero-section .th-hero-container,
  #showroom-hero-section .th-hero-container.gr-bg4 {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #showroom-hero-section .gr-bg4:before,
  #showroom-hero-section .th-hero-container.gr-bg4:before {
    display: none !important;
    content: none !important;
  }

  #showroom-hero-section .th-hero-style {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #showroom-hero-section .th-hero-title,
  #showroom-hero-section h1.th-hero-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  #showroom-hero-section .th-hero-title span {
    color: #ffffff !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  #showroom-hero-section .th-showroom-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 0 18px !important;
    color: #ffffff !important;
  }

  #showroom-hero-section .th-showroom-info p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  #showroom-hero-section .th-showroom-info .showroom-hours {
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 4px !important;
  }

  #showroom-hero-section .th-showroom-info .showroom-location,
  #showroom-hero-section .th-showroom-info .showroom-phone {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
  }

  #showroom-hero-section .th-showroom-info p i {
    margin: 0 !important;
    padding-top: 4px !important;
    font-size: 13px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
  }

  #showroom-hero-section .th-showroom-info .showroom-phone i {
    padding-top: 0 !important;
  }

  #showroom-hero-section .th-hero-wrapp {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #showroom-hero-section .th-hero-wrapp > .button,
  #showroom-hero-section .th-hero-wrapp > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #showroom-hero-section .th-hero-wrapp a.th-btn,
  #showroom-hero-section .th-hero-wrapp a.th-btn-outline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #showroom-hero-section .th-hero-wrapp a.th-btn:before,
  #showroom-hero-section .th-hero-wrapp a.th-btn:after,
  #showroom-hero-section .th-hero-wrapp a.th-btn-outline:before,
  #showroom-hero-section .th-hero-wrapp a.th-btn-outline:after {
    display: none !important;
    content: none !important;
  }

  #showroom-hero-section .th-hero-wrapp a.th-btn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #231f20 !important;
    border: none !important;
  }

  #showroom-hero-section .th-hero-wrapp a.th-btn-outline {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
  }

  #showroom-hero-section .th-hero-wrapp a span {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }
}


/* ============================================================
   4. INTERACTIVE TOUR — zone tiles
   Design: pad 48px 0 / 0 20px | title 22/1.25/700
   2-col grid, gap 12px, tiles 4/3 radius 8
   label 12/600 bottom-left | chevron 18px bottom-right
   ============================================================ */
@media (max-width: 768px) {
  #th-showroom-interactive-tour-section {
    padding: 48px 0 !important;
    background: #ffffff !important;
  }

  #th-showroom-interactive-tour-section .th-interactive-tour {
    padding: 0 !important;
    background: #ffffff !important;
  }

  #th-showroom-interactive-tour-section .th-interactive-tour .container-fluid {
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  #th-showroom-interactive-tour-section .th-interactive-tour-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  #th-showroom-interactive-tour-section .th-interactive-tour-map {
    display: none !important;
  }

  .th-interactive-tour-grid,
  .th-interactive-tour-grid.th-section-padding {
    padding: 20px 0 0 !important;
  }

  .th-interactive-tour-grid .container.th-container,
  #th-app-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  #th-app-container .row,
  #th-app-container .row.g-4,
  #th-app-container [data-v-section-tour-row] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  #th-app-container .row.pb-30,
  #th-app-container .row.pb-25,
  #th-app-container .row.g-4.pb-30,
  #th-app-container .row.g-4.pb-25 {
    padding-bottom: 0 !important;
  }

  #th-app-container .th-showroom-item-card,
  #th-app-container [data-v-section-item],
  #th-app-container [data-v-section-tour-item] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  .th-interactive-tour-grid .th-tour-card,
  .th-interactive-tour-grid .th-tour-card.h-100 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f6f5f3 !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .th-interactive-tour-grid .th-tour-card-image,
  .th-interactive-tour-grid .th-tour-card-image.position-relative {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .th-interactive-tour-grid .th-tour-card-image img,
  .th-interactive-tour-grid .th-tour-card-image img.img-fluid {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: none !important;
    filter: none !important;
  }

  .th-interactive-tour-grid .th-tour-card-image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(transparent 45%, rgba(35, 31, 32, 0.8)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .th-interactive-tour-grid .th-tour-card-label,
  .th-interactive-tour-grid .th-tour-card-label.position-absolute {
    position: absolute !important;
    left: 10px !important;
    right: 26px !important;
    bottom: 8px !important;
    top: auto !important;
    start: auto !important;
    width: auto !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #ffffff !important;
    text-align: left !important;
    z-index: 2 !important;
    border-radius: 0 !important;
  }

  .th-interactive-tour-grid .th-tour-card-icon {
    position: absolute !important;
    top: auto !important;
    right: 8px !important;
    bottom: 8px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #231f20 !important;
    font-size: 8px !important;
    line-height: 18px !important;
    text-align: center !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .th-interactive-tour-grid .th-tour-card:hover {
    box-shadow: none !important;
    transform: none !important;
  }

  .th-interactive-tour-grid .th-tour-card:hover .th-tour-card-image img {
    transform: none !important;
    filter: none !important;
  }

  .th-interactive-tour-grid .th-tour-card:hover .th-tour-card-icon {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #231f20 !important;
  }

  .th-interactive-tour-grid .th-showroom-item-card.active-mode,
  .th-interactive-tour-grid .th-showroom-item-card.active-mode.active {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .th-interactive-tour-grid .th-showroom-item-card.active-mode .th-tour-card,
  .th-interactive-tour-grid .th-showroom-item-card.active .th-tour-card {
    border: 2px solid #231f20 !important;
    opacity: 1 !important;
  }

  .th-interactive-tour-grid .th-showroom-item-card.active-mode::after {
    display: none !important;
    content: none !important;
  }

  .th-interactive-tour-grid .blur-mode {
    filter: none !important;
    opacity: 0.94 !important;
  }

  #th-product-detail,
  #th-app-container #th-product-detail.col-12,
  #th-app-container #th-product-detail.mt-4 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 4px 0 4px !important;
  }
}


/* ============================================================
   5. SECTION DETAILS — Vue SectionDetails
   Target: title → hero 16/10 → thumbnail strip + scrollbar
           → View all photos → 3-col product tiles
   Vue wraps the .row in an extra div, so columns are unwrapped
   with display:contents and ordered — no DOM moves.
   ============================================================ */
@media (max-width: 768px) {
  .th-section-detail-container,
  .th-section-detail-container.pb-50,
  #th-section-detail-container {
    background: #f6f5f3 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    animation: dropIn 0.22s ease-out !important;
  }

  #th-section-detail-container > div > .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    width: 100% !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  #th-section-detail-container > div > .row > [class*="col-"],
  #th-tab-navigation-content,
  #th-tab-navigation-content .tab-pane,
  #th-tab-navigation-content .tab-pane > .row,
  #th-tab-navigation-content .tab-pane .col-12 {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    flex: unset !important;
    padding: 0 !important;
    float: none !important;
  }

  #th-section-detail-container .tab-pane.fade {
    opacity: 1 !important;
  }

  #th-section-detail-container .th-section-header,
  #th-section-detail-container .th-section-header.sectionHeaderClass {
    order: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 0 14px !important;
    margin: 0 !important;
  }

  #th-resources-images,
  #th-resources-images.th-img-resource-grid {
    order: 2 !important;
  }

  .th-mobile-gallery-scrollbar,
  .th-mobile-gallery-toggle {
    order: 2 !important;
  }

  #th-showroom-section-products {
    order: 3 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }

  #th-section-detail-container .th-section-header-wrapper.left,
  #th-section-detail-container .th-section-header-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  #th-section-detail-container .th-section-header .th-title,
  #th-section-detail-container h2.th-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #th-section-detail-container .th-section-subtitle {
    display: none !important;
  }

  #th-section-detail-container .th-section-header .right {
    flex-shrink: 0 !important;
  }

  .th-section-header-icon-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border: 1px solid #d5d2ce !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    color: #231f20 !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .th-section-header-icon-btn i {
    font-size: 12px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  #th-resources-images.th-img-resource-grid,
  #th-resources-images {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
  }

  #th-resources-images > *,
  #th-resources-images > [class*="th-masonry-img-item"] {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 108px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-resources-images > *:first-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  #th-resources-images.is-gallery-expanded {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 0 4px !important;
  }

  #th-resources-images.is-gallery-expanded > *,
  #th-resources-images.is-gallery-expanded > *:first-child {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 108px !important;
    aspect-ratio: auto !important;
  }

  #th-resources-images > .th-mobile-gallery-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 4px !important;
    margin: 0 !important;
    cursor: grab !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 108px !important;
    flex: 0 0 100% !important;
    border-radius: 0 !important;
  }

  #th-resources-images > .th-mobile-gallery-strip::-webkit-scrollbar {
    display: none !important;
  }

  .th-mobile-gallery-strip > * {
    flex: 0 0 160px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    height: 108px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  #th-resources-images .th-masonry-img,
  .th-mobile-gallery-strip .th-masonry-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  #th-resources-images .th-masonry-img-content,
  .th-mobile-gallery-strip .th-masonry-img-content {
    display: none !important;
  }

  .th-mobile-gallery-scrollbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 10px !important;
    padding: 0 !important;
  }

  .th-mobile-gallery-scrollbar.is-empty {
    display: none !important;
  }

  .th-mobile-gallery-scrollbar-btn {
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: #8a8783 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  .th-mobile-gallery-scrollbar-track {
    position: relative !important;
    flex: 1 1 auto !important;
    height: 4px !important;
    background: #e0ddd8 !important;
    border-radius: 2px !important;
  }

  .th-mobile-gallery-scrollbar-thumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 4px !important;
    min-width: 32px !important;
    background: #8a8783 !important;
    border-radius: 2px !important;
  }

  .th-mobile-gallery-toggle {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  #th-showroom-section-products::before {
    content: "Products in this setting";
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8783;
    margin: 0 0 10px;
    font-weight: 600;
  }

  #th-showroom-section-products .th-pinboard.th-showroom-details-body,
  #th-showroom-section-products .th-showroom-details-body {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-content: start !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #th-section-detail-container .th-showroom-product-item,
  #th-section-detail-container .th-showroom-product-item.row,
  #th-section-detail-container .th-showroom-product-item.row-1 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    padding: 8px 8px 10px !important;
    margin: 0 !important;
    gap: 6px !important;
    cursor: pointer !important;
    text-align: left !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  #th-section-detail-container .th-showroom-product-item > [class*="col-"],
  #th-section-detail-container .th-showroom-product-item > .col-sm-4,
  #th-section-detail-container .th-showroom-product-item > .col-sm-8,
  #th-section-detail-container .th-showroom-product-item > .col-md-4,
  #th-section-detail-container .th-showroom-product-item > .col-md-8 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  #th-section-detail-container .th-showroom-product-item .th-showroom-img,
  #th-section-detail-container .th-showroom-product-item .th-showroom-img.position-relative {
    width: 100% !important;
    height: auto !important;
    border: none !important;
    display: block !important;
    position: static !important;
  }

  #th-section-detail-container .th-showroom-product-item .th-img-container,
  #th-section-detail-container .th-showroom-product-item .itemProjectClass {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    position: relative !important;
  }

  #th-section-detail-container .th-showroom-product-item .th-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
  }

  #th-section-detail-container .th-showroom-product-item .th-showroom-details-button,
  #th-section-detail-container .th-showroom-product-item .th-add-to-pinboard {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    border: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    color: #231f20 !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  #th-section-detail-container .th-showroom-product-item .th-showroom-details-button i {
    font-size: 9px !important;
    color: #231f20 !important;
  }

  #th-section-detail-container .th-showroom-product-item .card-content,
  #th-section-detail-container .th-showroom-product-item .th-showroom-product-details {
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  #th-section-detail-container .th-showroom-product-item a {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  #th-section-detail-container .th-showroom-product-item h3,
  #th-section-detail-container .th-showroom-product-item h3.font-weight-600,
  #th-section-detail-container .th-showroom-product-item a h3,
  #th-showroom-section-products .th-pinboard .card-content h3 {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    text-overflow: clip !important;
  }

  #th-section-detail-container .th-showroom-product-item .th-item-description,
  #th-section-detail-container .th-showroom-product-item .product-finishes,
  #th-section-detail-container .th-showroom-product-item .certification-badges {
    display: none !important;
  }

  #th-section-detail-container .th-img-placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #8a8783 !important;
    border: 1px dashed #d5d2ce !important;
    background: #f6f5f3 !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    line-height: 1.3 !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open {
    grid-column: 1 / -1 !important;
    order: 99 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 2px !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: visible !important;
    animation: dropIn 0.2s ease-out !important;
    cursor: default !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open > .col-sm-4,
  #th-section-detail-container .th-showroom-product-item.is-open > .col-md-4 {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    flex: 0 0 96px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open > .col-sm-8,
  #th-section-detail-container .th-showroom-product-item.is-open > .col-md-8 {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open .th-img-container img {
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open h3 {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open .th-item-description {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #33322f !important;
    margin: 4px 0 0 !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open .product-finishes {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-top: 8px !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open .product-finishes .mb-1,
  #th-section-detail-container .th-showroom-product-item.is-open .product-finishes > div {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #33322f !important;
    margin: 0 !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open .product-finishes strong {
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open .certification-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 12px !important;
    padding-top: 0 !important;
  }

  #th-section-detail-container .th-showroom-product-item.is-open .certification-badges a,
  #th-section-detail-container .th-showroom-product-item.is-open .afrdi-certified,
  #th-section-detail-container .th-showroom-product-item.is-open .obp-certified {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #33322f !important;
    background: #f0efed !important;
    border-radius: 2px !important;
    padding: 5px 8px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    word-break: break-word !important;
  }

  #th-showroom-section-products .text-center.p-4 {
    grid-column: 1 / -1 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    padding: 8px 0 0 !important;
  }
}