/*
 * mobile-contact-us.css
 * Mobile-only overrides for contact-us.html (max-width: 768px)
 * Target design: contact-us-mobile-preview.html (390px viewport)
 *
 * Desktop pin/scrollbar hide is outside MQ; all visual overrides are ≤768px.
 */

/* ============================================================
   1. TOP BAR — match preview .top-bar
   ============================================================ */
@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;
    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;
  }

  .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: #fff !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: #fff !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 — match preview .site-header
   ============================================================ */
@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 #f0efed !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 .site-header__inner,
  .sticky-wrapper.site-header .container.th-container {
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area .row,
  .sticky-wrapper.site-header .site-header__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,
  .sticky-wrapper .site-header__left,
  .sticky-wrapper .site-header__logo-col,
  .sticky-wrapper .site-header__right {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

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

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

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

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

  /* Hamburger — preview .site-header__menu */
  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: -8px !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;
  }

  /* Logo — 22px centered */
  .header-logo a,
  .site-header__logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

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

  /* Hide desktop-only chrome */
  .sticky-wrapper .d-none.d-lg-inline-block,
  .sticky-wrapper .header-button.d-none.d-lg-inline-block,
  .sticky-wrapper.desktop-menu .main-menu,
  .sticky-wrapper .th-user-dropdown,
  #user-profile-info {
    display: none !important;
  }

  /* Actions — search + pinboard only, gap 12px */
  .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: 12px !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,
  #th-header-global-search .fa-regular.fa-magnifying-glass,
  .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,
  a[aria-controls="offcanvasRight"] img,
  img[src*="pinboard-icon"] {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }
}


/* ============================================================
   3. HERO — Contact Us
   ============================================================ */
@media (max-width: 768px) {
  #hero-contactus.th-hero-wrapper,
  #hero-contactus.th-hero-wrapper.th-way-points {
    min-height: 380px !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  #hero-contactus.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;
  }

  #hero-contactus > .container.th-container,
  #hero-contactus .container.th-container.th-hero-section,
  #hero-contactus .th-hero-section {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 380px !important;
    padding: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    z-index: 1;
  }

  #hero-contactus .row {
    flex: 1 1 auto !important;
    margin: 0 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 100% !important;
  }

  #hero-contactus .col-xl-12 {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
  }

  #hero-contactus .th-breadcrumb {
    margin: 0 0 auto 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  #hero-contactus .th-breadcrumb .breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: transparent !important;
  }

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

  #hero-contactus .th-breadcrumb .breadcrumb-item,
  #hero-contactus .th-breadcrumb .breadcrumb-item a,
  #hero-contactus .th-breadcrumb .breadcrumb-item span,
  #hero-contactus .th-breadcrumb .breadcrumb-item.active {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    padding: 0 !important;
  }

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

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

  #hero-contactus .th-hero-container,
  #hero-contactus .th-hero-container.gr-bg4 {
    background: none !important;
    padding: 0 !important;
    margin: auto 0 0 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    display: block !important;
  }

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

  #hero-contactus .th-hero-style,
  #hero-contactus .th-hero-style.th-mt-115 {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #hero-contactus .th-hero-title,
  #hero-contactus h1.th-hero-title,
  #hero-contactus .th-hero-title.th-hero-title-mb {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  #hero-contactus .th-hero-wrapp,
  #hero-contactus .th-hero-wrapp.th-pt-16,
  #hero-contactus [data-v-herocontactus-component-buttons] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }

  #hero-contactus .th-hero-wrapp > .position-relative,
  #hero-contactus .th-hero-wrapp > .position-relative.th-pb-16,
  #hero-contactus .th-hero-wrapp > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #hero-contactus .th-hero-wrapp a.th-btn,
  #hero-contactus .th-hero-wrapp a.th-btn-text,
  #hero-contactus .th-hero-wrapp a.th-btn-outline,
  #hero-contactus [data-v-herocontactus-component-buttons] a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !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;
    position: relative !important;
  }

  #hero-contactus .th-hero-wrapp a.th-btn:before,
  #hero-contactus .th-hero-wrapp a.th-btn:after,
  #hero-contactus .th-hero-wrapp a.th-btn-outline:before,
  #hero-contactus .th-hero-wrapp a.th-btn-outline:after,
  #hero-contactus [data-v-herocontactus-component-buttons] a:before,
  #hero-contactus [data-v-herocontactus-component-buttons] a:after {
    display: none !important;
    content: none !important;
  }

  #hero-contactus .th-hero-wrapp a.th-btn,
  #hero-contactus .th-hero-wrapp a.th-btn:not(.th-btn-outline),
  #hero-contactus .th-hero-wrapp a.th-btn-text:not(.th-btn-outline) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #231f20 !important;
    border: none !important;
  }

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

  #hero-contactus .th-hero-wrapp a span,
  #hero-contactus .th-hero-wrapp a .th-mr-5 {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }
}


/* ============================================================
   4. SHOWROOMS — swipeable card rail
   Exact match contact-us-mobile-preview .showrooms / .showroom-card
   ============================================================ */

/* Desktop keeps map-pin; mobile pin + custom scrollbar hidden outside mobile MQ */
#th-showrooms .showroom-pin--mobile {
  display: none !important;
}

#th-showrooms .showrooms__scrollbar {
  display: none;
}

@media (max-width: 768px) {
  #th-showrooms {
    padding: 48px 0 !important;
  }

  #th-showrooms [data-v-showrooms-component-link] {
    display: none !important;
  }

  #th-showrooms .container.th-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #th-showrooms > .container > .row {
    margin: 0 !important;
  }

  /* preview .showrooms__heading-wrap */
  #th-showrooms .th-pb-20,
  #th-showrooms .showrooms__heading-wrap {
    padding: 0 20px !important;
    margin: 0 !important;
  }

  #th-showrooms .th-section-header-wrapper {
    text-align: left !important;
  }

  /* preview .showrooms__title */
  #th-showrooms .th-section-title,
  #th-showrooms h2.th-section-title,
  #th-showrooms .th-section-title.th-section-title-mb,
  #th-showrooms .showrooms__title {
    margin: 0 0 20px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
  }

  #th-showrooms .section-body.th-showroom {
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* preview .showrooms__rail — hide native scrollbar; custom bar below */
  #th-showrooms .showroom-list,
  #th-showrooms [data-rail="showrooms"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 0 20px 0 !important;
    margin: 0 0 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    cursor: grab !important;
    touch-action: pan-x !important;
  }

  #th-showrooms .showroom-list::-webkit-scrollbar,
  #th-showrooms [data-rail="showrooms"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* Scrollbar row: ◀ track ▶ (screenshot arrows + preview colors) */
  #th-showrooms .showrooms__scrollbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 20px !important;
    height: 14px !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #th-showrooms .showrooms__scrollbar-btn {
    flex: 0 0 auto !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
  }

  /* Solid triangle arrows — light grey like screenshot */
  #th-showrooms .showrooms__scrollbar-btn--prev {
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-right: 7px solid #cfccc9 !important;
  }

  #th-showrooms .showrooms__scrollbar-btn--next {
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-left: 7px solid #cfccc9 !important;
  }

  #th-showrooms .showrooms__scrollbar-track {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 4px !important;
    background: #f0efed !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    touch-action: none !important;
  }

  #th-showrooms .showrooms__scrollbar-thumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 4px !important;
    min-width: 48px !important;
    background: #cfccc9 !important;
    border-radius: 999px !important;
    will-change: transform, width;
    cursor: grab !important;
    touch-action: none !important;
  }

  #th-showrooms .showrooms__scrollbar-thumb.is-dragging {
    cursor: grabbing !important;
  }

  /* preview card width on item wrapper */
  #th-showrooms .showroom-item,
  #th-showrooms .showroom-item.col-lg-4 {
    flex: 0 0 264px !important;
    flex-shrink: 0 !important;
    width: 264px !important;
    max-width: 264px !important;
    min-width: 264px !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-margin-left: 20px !important;
    float: none !important;
  }

  /* preview .showroom-card */
  #th-showrooms .th-item-showroom,
  #th-showrooms .showroom-card {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* preview .showroom-card__media */
  #th-showrooms .th-img-container,
  #th-showrooms .showroom-card__media {
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #th-showrooms .th-img-container a,
  #th-showrooms .showroom-card__media-link {
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
  }

  #th-showrooms .th-img-container img,
  #th-showrooms .showroom-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
  }

  /* Avoid stacked duplicates */
  #th-showrooms .th-img-container:has(a.showroom-card__media-link) [data-v-showrooms-showroom-inactive_media],
  #th-showrooms .showroom-card__media:has(a.showroom-card__media-link) [data-v-showrooms-showroom-inactive_media] {
    display: none !important;
  }

  #th-showrooms .showroom-card__body:has(a.showroom-card__title-link) [data-v-showrooms-showroom-inactive_title],
  #th-showrooms .th-item-showroom-information:has(a[data-v-showrooms-showroom-slug]) [data-v-showrooms-showroom-inactive_title] {
    display: none !important;
  }

  /* preview .showroom-card__body */
  #th-showrooms .th-item-showroom-information,
  #th-showrooms .showroom-card__body {
    padding: 14px 16px 16px !important;
    margin: 0 !important;
    background: #fff !important;
  }

  #th-showrooms .showroom-card__title-link,
  #th-showrooms .th-item-showroom-information > a[data-v-showrooms-showroom-slug] {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  /* preview .showroom-card__title */
  #th-showrooms .showroom-card__title,
  #th-showrooms .th-showroom-title,
  #th-showrooms h3.th-showroom-title,
  #th-showrooms h3.title.th-showroom-title,
  #th-showrooms .title.th-title-24.th-showroom-title,
  #th-showrooms h3.th-title-24,
  #th-showrooms .th-showroom-title.th-title-24,
  #th-showrooms .th-showroom-title.th-showroom-title-my {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    text-decoration: none !important;
  }

  #th-showrooms .showroom-opening {
    display: none !important;
  }

  /* preview .showroom-card__address-row */
  #th-showrooms .showroom-address-container,
  #th-showrooms .showroom-card__address-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #th-showrooms .showroom-address-container.mt-5,
  #th-showrooms .showroom-card__address-row.mt-5 {
    margin-top: 0 !important;
  }

  #th-showrooms .showroom-pin--desktop {
    display: none !important;
  }

  /* preview .showroom-card__pin — location-dot */
  #th-showrooms .showroom-pin--mobile,
  #th-showrooms .showroom-card__pin {
    display: inline-block !important;
    font-size: 12px !important;
    margin-top: 3px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    color: #231f20 !important;
    flex-shrink: 0 !important;
  }

  #th-showrooms .showroom-card__address-link,
  #th-showrooms .showroom-address-container a {
    text-decoration: none !important;
    color: inherit !important;
  }

  #th-showrooms .showroom-address,
  #th-showrooms .showroom-card__address,
  #th-showrooms .showroom-address-container p {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #33322f !important;
    text-decoration: none !important;
  }

  /* preview .showroom-card__actions */
  #th-showrooms .showroom-card__actions,
  #th-showrooms .th-item-showroom-information > .d-flex.th-mt-30,
  #th-showrooms .th-item-showroom-information > .d-flex.showroom-card__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }

  /* preview .showroom-card__action */
  #th-showrooms .showroom-card__action,
  #th-showrooms .showroom-card__actions > a,
  #th-showrooms .showroom-card__actions > .link {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  #th-showrooms .showroom-card__action .link,
  #th-showrooms .showroom-card__action .link.th-pr-40 {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    text-decoration: inherit !important;
  }

  #th-showrooms .showroom-card__action .link-text,
  #th-showrooms .showroom-card__action .link-text.th-pr-5,
  #th-showrooms .showroom-card__actions [data-v-showrooms-showroom-book_btn],
  #th-showrooms .showroom-card__actions [data-v-showrooms-showroom-view_btn] {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-showrooms .showroom-card__action .link-icon,
  #th-showrooms .th-item-showroom-information .link-icon {
    display: none !important;
  }
}


/* ============================================================
   5. GET IN TOUCH
   ============================================================ */
@media (max-width: 768px) {
  #contact-getin-touch {
    padding: 0 !important;
  }

  #contact-getin-touch [data-v-getintouch-component-link] {
    display: none !important;
  }

  #contact-getin-touch .gr-bg8-get-in-touch {
    background: #f6f5f3 !important;
    padding: 32px 0 20px !important;
  }

  #contact-getin-touch .gr-bg8-get-in-touch .container.th-container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #contact-getin-touch .gr-bg8-get-in-touch .th-section-header,
  #contact-getin-touch .gr-bg8-get-in-touch .th-section-header.th-pt-20 {
    padding: 0 !important;
  }

  #contact-getin-touch .gr-bg8-get-in-touch .th-section-title,
  #contact-getin-touch .gr-bg8-get-in-touch .th-section-title.th-section-title-mb {
    margin: 0 0 8px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
  }

  #contact-getin-touch .gr-bg8-get-in-touch .th-section-subtitle,
  #contact-getin-touch .gr-bg8-get-in-touch .th-section-subtitle.th-section-subtitle-mb {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    text-wrap: pretty;
  }

  #contact-getin-touch > .container.th-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #contact-getin-touch .section-body .row {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  #contact-getin-touch .section-body .col-lg-7,
  #contact-getin-touch .section-body .col-sm-12,
  #contact-getin-touch .section-body .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  #contact-getin-touch .th-get-in-touch-img {
    width: 100% !important;
    margin: 0 !important;
  }

  #contact-getin-touch .th-get-in-touch-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  #contact-getin-touch .th-get-in-touch-form {
    margin: 0 !important;
    padding: 24px 20px 48px !important;
  }

  #contact-getin-touch .form-container.th-cf-wrapper,
  #contact-getin-touch .th-cf-wrapper.th-bg-cf-white,
  #contact-getin-touch .th-cf-wrapper.overlap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    top: auto !important;
    align-items: stretch !important;
  }

  #contact-getin-touch .th-cf-wrapper form .form-group {
    margin-bottom: 12px !important;
  }

  #contact-getin-touch .th-cf-wrapper form .form-group .form-control,
  #contact-getin-touch #getin-touch-form .form-control {
    width: 100% !important;
    height: 44px !important;
    padding: 10px 12px !important;
    /* font-size বাড়িয়ে 16px করা হয়েছে যাতে iOS Safari-তে টেক্সট ছোট না হয়ে যায় */
    /* font: 400 16px/1.4 "Open Sans", sans-serif !important;  */
    font: 400 12px/1.4 "Open Sans", sans-serif !important;
    color: #231f20 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  
  #contact-getin-touch #getin-touch-form select.form-control {
    color: #8a8784 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
  }
  
  /* ড্রপডাউন অপশনগুলোর (select option) ফন্ট সাইজ এবং কালার নিশ্চিত করার জন্য */
  #contact-getin-touch #getin-touch-form select.form-control option {
    font-size: 12px !important;
    color: #231f20 !important;
    background-color: #ffffff !important;
    padding: 10px !important;
  }

  #contact-getin-touch #getin-touch-form input::placeholder,
  #contact-getin-touch #getin-touch-form textarea::placeholder {
    font-size: 12px !important;
    color: #8a8784 !important;
    font-style: normal !important;
  }

  #contact-getin-touch .th-contact-attachments.th-project-submission-modal {
    padding: 0 !important;
  }

  #contact-getin-touch .th-contact-attachments .th-submission-field {
    margin-bottom: 12px !important;
  }

  #contact-getin-touch .th-submission-field-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
    align-items: start !important;
  }

  #contact-getin-touch .th-submission-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 !important;
  }

  #contact-getin-touch .th-submission-optional {
    font-size: 11px !important;
    color: #8a8784 !important;
  }

  #contact-getin-touch .th-upload-dropzone {
    padding: 20px 16px !important;
    border: 1px dashed #cfccc9 !important;
    border-radius: 2px !important;
    background: #fff !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #contact-getin-touch .th-upload-dropzone-icon,
  #contact-getin-touch .th-upload-dropzone-icon i {
    font-size: 16px !important;
    color: #231f20 !important;
  }

  #contact-getin-touch .th-upload-dropzone p {
    margin: 8px 0 2px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  #contact-getin-touch .th-upload-dropzone p span {
    font-weight: 400 !important;
    color: #33322f !important;
  }

  #contact-getin-touch .th-upload-dropzone small {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #8a8784 !important;
  }

  #contact-getin-touch #getin-touch-form textarea.form-control,
  #contact-getin-touch .text-section textarea.form-control {
    min-height: 96px !important;
    height: auto !important;
    padding: 12px !important;
    font: 400 12px/1.6 "Open Sans", sans-serif !important;
    color: #231f20 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 2px !important;
    background: #fff !important;
    resize: none !important;
  }

  #contact-getin-touch #getin-touch-form button.th-btn-primary,
  #contact-getin-touch #getin-touch-form button[type="submit"] {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 13px 20px !important;
    font: 600 13px/1 "Open Sans", sans-serif !important;
    text-align: center !important;
    background: #231f20 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
  }

  #contact-getin-touch #getin-touch-form .form-group:last-child {
    margin-bottom: 0 !important;
  }

  #contact-getin-touch .recaptcha-disclaimer,
  #contact-getin-touch .recaptcha-disclaimer.small {
    margin: 12px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #8a8784 !important;
  }

  #contact-getin-touch .recaptcha-disclaimer a {
    color: #8a8784 !important;
    text-decoration: underline !important;
  }
}


/* ============================================================
   6. TAKE THE NEXT STEP (NEED HELP)
   ============================================================ */
@media (max-width: 768px) {
  #need-help-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    background: #ffffff !important;
  }

  #need-help-section .th-component-edit-link,
  #need-help-section [data-v-needhelp-component-link] {
    display: none !important;
  }

  #need-help-section .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #need-help-section .th-section-header {
    display: block !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

  #need-help-section .th-section-header-wrapper.text-center {
    text-align: center !important;
  }

  #need-help-section .th-section-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
    font-weight: 700;
  }

  #need-help-section .th-section-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
  }

  #need-help-section .th-need-help-container {
    margin: 0 !important;
  }

  #need-help-section .th-need-help-container.grid-3,
  #need-help-section .th-need-help-container.grid-4,
  #need-help-section .th-need-help-container.grid-5 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 20px !important;
  }

  #need-help-section .th-need-help-container .th-item-help:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: calc(50% - 10px) !important;
    margin: 0 auto !important;
  }

  #need-help-section .th-item-help {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  #need-help-section .th-item-help .th-btn-circle-icon {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border-radius: 50% !important;
    background: #f0efed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    color: #231f20 !important;
    aspect-ratio: 1 !important;
    flex-shrink: 0 !important;
  }

  #need-help-section .th-item-help .th-btn-circle-icon i {
    font-size: 28px !important;
  }

  #need-help-section .th-item-help h6.th-item-title-bold,
  #need-help-section .th-item-help h6,
  #need-help-section .th-item-help .th-needhelp-title-custom-height {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    min-height: auto !important;
    color: #231f20 !important;
    text-decoration: none !important;
  }

  /* Icon + title wrap link — no underline */
  #need-help-section .th-item-help > a.th-link-text,
  #need-help-section .th-item-help > a[data-v-needhelp-component_item-link] {
    text-decoration: none !important;
    color: #231f20 !important;
  }

  #need-help-section .th-item-help > a.th-link-text h6,
  #need-help-section .th-item-help > a[data-v-needhelp-component_item-link] h6 {
    text-decoration: none !important;
  }

  #need-help-section .th-item-help .th-description,
  #need-help-section .th-item-help .th-need-to-help-des-my {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    color: #33322f !important;
  }

  /* Bottom CTA links only — underlined */
  #need-help-section .th-item-help .th-link a,
  #need-help-section .th-item-help .th-link a.th-link-text,
  #need-help-section .th-item-help .th-link [data-v-needhelp-component_item-link_text] {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  #need-help-section .th-item-help .th-link-icon {
    display: none !important;
  }
}


/* ============================================================
   7. FOOTER
   ============================================================ */
/* @media (max-width: 768px) {
  #footer-section-container.th-footer {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
    background: #eaeaec !important;
  }

  #footer-section-container .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #footer-section-container .row.component-footer {
    flex-direction: column !important;
  }

  #footer-section-container .col-lg-8,
  #footer-section-container .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  #footer-section-container .border-right-dark {
    border-right: 0 !important;
  }

  #footer-section-container h4.th-footer-title {
    font-size: 18px !important;
    margin-bottom: 16px !important;
    font-weight: 600;
  }

  #footer-section-container .footer-left-content .text-weight-600.pt-10 {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }

  #footer-section-container .footer-left-content .d-flex.align-items-center p,
  #footer-section-container .footer-left-content .d-flex.align-items-center a {
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  #footer-section-container .d-grid.grid-col-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .th-showroom-address p.th-footer-heading {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }

  .th-showroom-address p.th-address-line,
  .th-showroom-address p.th-opening-hours,
  .th-showroom-address .footer-phone-link {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  #footer-section-container .col-lg-4 .th-subscription,
  #footer-section-container .th-subscription.pl-20,
  #footer-section-container .th-subscription.th-pl-20 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(33, 37, 41, 0.18) !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  #footer-section-container .th-subscription .th-subscription-heading {
    margin-bottom: 0 !important;
  }

  #footer-section-container .th-subscription h4.th-footer-title,
  #footer-section-container .th-subscription .th-subscription-details h4.th-footer-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    color: #212529 !important;
  }

  #footer-section-container .th-subscription .description,
  #footer-section-container .th-subscription .th-description.description,
  #footer-section-container .th-subscription .th-subscription-details .description {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #33322f !important;
  }

  #footer-section-container .th-subscription #subscription-form {
    width: 100% !important;
    margin: 0 !important;
  }

  #footer-section-container .th-subscription .th-subscription-form,
  #footer-section-container .th-subscription-form#subscription-form-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #footer-section-container .th-subscription .th-subscription-form label,
  #footer-section-container .th-subscription .th-subscription-form label.pr-10 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  #footer-section-container .th-subscription .th-subscription-form input[type="email"],
  #footer-section-container .th-subscription .th-subscription-form input.form-control,
  #footer-section-container .th-subscription .th-subscription-form #subscriptionEmail {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
    border: 1px solid #212529 !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #212529 !important;
    box-sizing: border-box !important;
  }

  #footer-section-container .th-subscription .th-subscription-form input::placeholder {
    font-size: 14px !important;
    color: #6c757d !important;
  }

  #footer-section-container .th-subscription .th-subscription-form .link {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
  }

  #footer-section-container .th-subscription .th-subscription-form button#subscription-form-button,
  #footer-section-container .th-subscription .th-subscription-form button.link-text,
  #footer-section-container .th-subscription .th-subscription-form .link-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 11px 0 !important;
    background: #212529 !important;
    color: #eaeaec !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    white-space: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  #footer-section-container .th-footer-navigation {
    padding-top: 0 !important;
    padding-left: 0 !important;
    margin-top: 16px !important;
  }

  #footer-section-container .th-footer-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul li {
    padding: 4px 0 !important;
    border-right: none !important;
  }

  #footer-section-container .th-footer-navigation ul li a {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  #footer-section-container .th-footer-navigation ul li .link {
    border-right: 0 !important;
  }

  #footer-section-container .th-footer-follow {
    padding-top: 16px !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  #footer-section-container .th-footer-follow p {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  #footer-section-container .social-media-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  #footer-section-container .social-media-item .link a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 1px solid #212529 !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    color: #212529 !important;
    text-decoration: none !important;
  }

  #footer-section-container .th-footer-copyright,
  #footer-section-container .th-footer-copyright.mt-30 {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    padding: 12px 0 !important;
    border-top: 1px solid rgba(33, 37, 41, 0.12) !important;
  }

  #footer-section-container .th-footer-copyright .container,
  #footer-section-container .th-footer-copyright .container.th-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  #footer-section-container .th-footer-copyright-content,
  #footer-section-container .th-footer-copyright .th-footer-copyright-content,
  #footer-section-container .th-footer-copyright .d-flex.flex-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  #footer-section-container .th-footer-copyright .text-muted,
  #footer-section-container .th-footer-copyright .copyright-text-right,
  #footer-section-container .th-footer-copyright .flex-grow-1,
  #footer-section-container .th-footer-copyright a.btn-link,
  #footer-section-container .th-footer-copyright a.text-muted,
  #footer-section-container .th-footer-copyright span.text-muted {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #6c757d !important;
    text-decoration: none !important;
    text-align: left !important;
  }

  #footer-section-container .th-footer-copyright a.btn-link:hover,
  #footer-section-container .th-footer-copyright a.text-muted:hover {
    color: #55524f !important;
    text-decoration: none !important;
  }
} */


/* ============================================================
   8. GENERAL TYPOGRAPHY & SPACING
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-size: 16px !important;
  }

  .th-section-title,
  h2,
  .h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .th-section-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .th-section-py {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .th-footer-section-py {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
  }

  .th-section-header-pb-50 {
    padding-bottom: 20px !important;
  }

  .th-container,
  .th-container-md {
    max-width: 100% !important;
  }

  img {
    max-width: 100% !important;
    height: auto;
  }

  .th-component-edit-link {
    display: none !important;
  }
}

