/*
 * mobile-catalogue.css
 * Mobile-only overrides for catalogue/index.html (max-width: 768px)
 * Target design: Catalogue-Request-mobile.html (390px viewport)
 *
 * 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.
 */


/* ============================================================
   1. TOP BAR
   Design: height 44px | pad 0 20px | promo/link 13px
   ============================================================ */
@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;
    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: #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: 0 !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: height 60px | pad 0 16px | border #ececea | logo 22px
   actions gap 14px | search/user 20px | pin 20×21 | badge 17px
   ============================================================ */
@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: visible !important;
  }

  .sticky-wrapper.desktop-menu,
  .sticky-wrapper.site-header {
    background: #ffffff !important;
    border-bottom: 1px solid #ececea !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 16px !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;
    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;
  }

  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;
  }

  .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;
  }

  .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,
  #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: 21px !important;
    display: block !important;
  }

  .th-pinboard-count-badge {
    top: -8px !important;
    right: -8px !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.8) !important;
  }

  .th-user-dropdown,
  #user-profile-info.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,
  .th-user-dropdown .th-nav-link,
  #user-profile-info .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #231f20 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

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

  .th-user-dropdown .dropdown-menu,
  .th-user-dropdown .dropdown-menu.show,
  #user-profile-info .dropdown-menu,
  #user-profile-info .dropdown-menu.show {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 10px !important;
    min-width: 180px !important;
    z-index: 1052 !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  }

  .th-user-dropdown .dropdown-menu.show,
  #user-profile-info .dropdown-menu.show {
    display: block !important;
  }

  /* Header sits above the hero so the account menu is not clipped */
  .th-header {
    position: relative !important;
    z-index: 1050 !important;
    overflow: visible !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. HERO — Catalogue
   Design: min-height 420px | overlay 180deg 0.15→0.78
   breadcrumb 11px / 0.04em | title 26/1.18/700
   buttons stacked, pad 11px 20px, 13/600, radius 2px
   ============================================================ */
@media (max-width: 768px) {
  #hero.th-hero-wrapper,
  #hero.th-hero-wrapper.th-hero,
  #hero.th-hero-wrapper.gr-bg4 {
    min-height: 420px !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;
  }

  #hero.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.th-hero-wrapper.gr-bg4:before,
  #hero .th-hero-container.gr-bg4:before,
  #hero .gr-bg4:before {
    display: none !important;
    content: none !important;
  }

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

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

  #hero .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 .col-xl-6,
  #hero .th-hero-img {
    display: none !important;
  }

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

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

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

  #hero .th-breadcrumb .breadcrumb-item,
  #hero .th-breadcrumb .breadcrumb-item a,
  #hero .th-breadcrumb .breadcrumb-item span,
  #hero .th-breadcrumb .breadcrumb-item.active,
  #hero .th-breadcrumb .breadcrumb-item.font-white,
  #hero .th-breadcrumb .font-white {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    padding: 0 !important;
  }

  #hero .th-breadcrumb .breadcrumb-item.active,
  #hero .th-breadcrumb .breadcrumb-item.active span,
  #hero .th-breadcrumb .breadcrumb-item.active .font-white {
    color: #ffffff !important;
  }

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

  #hero .th-hero-container,
  #hero .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;
    position: relative !important;
  }

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

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

  #hero .th-hero-subtitle,
  #hero .th-hero-subtitle-my {
    display: none !important;
  }

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

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

  #hero .th-hero-wrapp a.th-btn,
  #hero .th-hero-wrapp a.th-btn-outline,
  #hero [data-v-herocatalogue-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 .th-hero-wrapp a.th-btn:before,
  #hero .th-hero-wrapp a.th-btn:after,
  #hero .th-hero-wrapp a.th-btn-outline:before,
  #hero .th-hero-wrapp a.th-btn-outline:after,
  #hero [data-v-herocatalogue-component-buttons] a:before,
  #hero [data-v-herocatalogue-component-buttons] a:after {
    display: none !important;
    content: none !important;
  }

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

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

  #hero .th-hero-wrapp a span,
  #hero .th-hero-wrapp a .mr-5,
  #hero .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. REQUEST CATALOGUE
   Design: intro bg #f6f5f3 pad 28px 20px | title 20/700 | copy 12/1.65
   image 4/3 cover | form pad 28px 20px 40px
   inputs h44 pad 10px 14px, 13px, border #d9d7d4, radius 6px
   labels 12/600 | submit uppercase 13/700 pad 13px 20px
   ============================================================ */
@media (max-width: 768px) {
  #th-request-catalogue,
  #th-request-catalogue.th-request-contact {
    padding: 0 !important;
    margin: 0 !important;
    scroll-margin-top: 0 !important;
  }

  #th-request-catalogue [data-v-requestcatalogue-component-link],
  #th-request-catalogue .th-component-edit-link {
    display: none !important;
  }

  #th-request-catalogue .gr-bg8-request-catalogue,
  #th-request-catalogue .gr-bg8-request-catalogue.pt-40 {
    background: #f6f5f3 !important;
    background-image: none !important;
    padding: 28px 20px !important;
  }

  #th-request-catalogue .gr-bg8-request-catalogue .container,
  #th-request-catalogue .gr-bg8-request-catalogue .container.th-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-request-catalogue .th-requset-catalouge-content,
  #th-request-catalogue .th-requset-catalouge-content.pt-15 {
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-request-catalogue .th-requset-catalouge-content h2,
  #th-request-catalogue [data-v-requestcatalogue-component-section_title] {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  #th-request-catalogue .th-requset-catalouge-content p,
  #th-request-catalogue [data-v-requestcatalogue-component-section_subtitle] {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
    text-wrap: pretty;
  }

  #th-request-catalogue .th-requset-catalouge-content p br {
    display: none !important;
  }

  #th-request-catalogue > .container.th-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-request-catalogue .section-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-request-catalogue .section-body .row {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  #th-request-catalogue .section-body .col-lg-7,
  #th-request-catalogue .section-body .col-lg-5,
  #th-request-catalogue .section-body .col-md-12,
  #th-request-catalogue .section-body .col-sm-12,
  #th-request-catalogue .section-body [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  #th-request-catalogue .th-img-container,
  #th-request-catalogue .th-request-catalouge-img {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: #f0efed !important;
    height: auto !important;
  }

  #th-request-catalogue .th-request-catalouge-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  #th-request-catalogue .th-request-catalouge-form {
    margin: 0 !important;
    padding: 28px 20px 40px !important;
  }

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

  #th-request-catalogue #request-catalogue-alert-message {
    margin-bottom: 14px !important;
    font-size: 13px !important;
  }

  #th-request-catalogue #request-catalogue-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #th-request-catalogue #request-catalogue-form .form-group {
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #th-request-catalogue #request-catalogue-form .form-group.mb-0 {
    margin-bottom: 0 !important;
  }

  /* Keep desktop format switching: .d-none must still hide fields */
  #th-request-catalogue #request-catalogue-form .form-group.d-none,
  #th-request-catalogue #request-catalogue-form .d-none {
    display: none !important;
  }

  /* Address autocomplete map — hidden on mobile (inline display:none was overridden) */
  #th-request-catalogue #map,
  #th-request-catalogue #map *,
  #th-request-catalogue .form-group:has(> #map) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #th-request-catalogue #request-catalogue-form label,
  #th-request-catalogue #request-catalogue-form .form-group > label,
  #th-request-catalogue #request-catalogue-form .custom-input > label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  #th-request-catalogue #request-catalogue-form .required {
    color: #dc3545 !important;
  }

  #th-request-catalogue #request-catalogue-form .form-control,
  #th-request-catalogue #request-catalogue-form input.form-control,
  #th-request-catalogue #request-catalogue-form select.form-control,
  #th-request-catalogue #request-catalogue-form #address-input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: #231f20 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #d9d7d4 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: none !important;
  }

  #th-request-catalogue #request-catalogue-form input.form-control::placeholder,
  #th-request-catalogue #request-catalogue-form #address-input::placeholder {
    color: #8d8b88 !important;
    font-size: 13px !important;
    font-style: normal !important;
    opacity: 1 !important;
  }

  #th-request-catalogue #request-catalogue-form select.form-control,
  #th-request-catalogue #request-catalogue-form select.form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 40px !important;
    background-image: url("/images/icons/down-arrow.svg") !important;
    background-position: right 16px center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 8px !important;
    cursor: pointer !important;
  }

  #th-request-catalogue #request-catalogue-form select.form-control:focus,
  #th-request-catalogue #request-catalogue-form select.form-select:focus {
    background-image: url("/images/icons/down-arrow.svg") !important;
    background-position: right 16px center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 8px !important;
    border-color: #231f20 !important;
  }

  #th-request-catalogue #request-catalogue-form input.form-control:focus,
  #th-request-catalogue #request-catalogue-form #address-input:focus {
    border-color: #231f20 !important;
    outline: 2px solid #231f20 !important;
    outline-offset: 1px !important;
  }

  /* Hide native format select — replaced by injected cards */
  #th-request-catalogue .mc-format-select-group > select#catalogue-format {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #th-request-catalogue .mc-format-heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }

  #th-request-catalogue .mc-format-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  #th-request-catalogue .mc-format-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
    padding: 14px !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    border: 1px solid #d9d7d4 !important;
    background: #ffffff !important;
    color: #231f20 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #th-request-catalogue .mc-format-card.is-active {
    border: 1px solid #231f20 !important;
    background: #f6f5f3 !important;
    box-shadow: inset 0 0 0 1px #231f20 !important;
  }

  #th-request-catalogue .mc-format-card i,
  #th-request-catalogue .mc-format-card .mc-format-card-icon {
    font-size: 18px !important;
    color: #231f20 !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: auto !important;
  }

  /* These two glyphs are not in the site's solid.min.css subset */
  #th-request-catalogue .mc-format-card .fa-book-open:before,
  #th-request-catalogue .mc-format-card-icon--book:before {
    content: "\f518" !important;
    display: inline-block !important;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
  }

  #th-request-catalogue .mc-format-card .fa-tablet-screen-button:before,
  #th-request-catalogue .mc-format-card-icon--tablet:before {
    content: "\f3fa" !important;
    display: inline-block !important;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
  }

  #th-request-catalogue .mc-format-card-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
  }

  #th-request-catalogue .mc-format-card-hint {
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: 0.75 !important;
    color: #231f20 !important;
    font-weight: 400 !important;
  }

  #th-request-catalogue #mailing-address-group {
    margin-bottom: 0 !important;
  }

  #th-request-catalogue #mailing-address-group .d-flex.justify-content-between {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
  }

  #th-request-catalogue #mailing-address-group .d-flex.justify-content-between > label {
    margin-bottom: 0 !important;
  }

  #th-request-catalogue #mailing-address-group .d-flex.justify-content-between > div {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
  }

  #th-request-catalogue #toggle-map {
    font-size: 11px !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    color: #33322f !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }

  #th-request-catalogue #autocomplete-card {
    position: relative !important;
    margin-bottom: 0 !important;
  }

  #th-request-catalogue #stateInput {
    margin-top: 0 !important;
  }

  #th-request-catalogue #stateSelect {
    margin-top: 0 !important;
  }

  #th-request-catalogue .crm-agree-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-top: 2px !important;
  }

  #th-request-catalogue .crm-agree-input,
  #th-request-catalogue #agreetocheckbox {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    border: 1px solid #231f20 !important;
    border-radius: 3px !important;
    background: #fff !important;
    background-image: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
  }

  #th-request-catalogue .crm-agree-input:checked,
  #th-request-catalogue #agreetocheckbox:checked {
    background-color: #231f20 !important;
    background-image: none !important;
    border-color: #231f20 !important;
  }

  #th-request-catalogue .crm-agree-input:checked::after,
  #th-request-catalogue #agreetocheckbox:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
  }

  #th-request-catalogue .crm-agree-label,
  #th-request-catalogue .crm-agree-label.mb-0,
  #th-request-catalogue .form-check-label {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #33322f !important;
    font-weight: 400 !important;
  }

  #th-request-catalogue .crm-agree-label a {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    color: #33322f !important;
  }

  #th-request-catalogue #request-catalogue-form .form-group:has(> button[type="submit"].d-none) {
    display: none !important;
  }

  #th-request-catalogue #request-catalogue-form button.th-btn-primary,
  #th-request-catalogue #request-catalogue-form button[type="submit"],
  #th-request-catalogue #request-my-copy-button,
  #th-request-catalogue #requestCatalogueSubmitButton {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 13px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #ffffff !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #th-request-catalogue #request-catalogue-form button.th-btn-primary.mt-30 {
    margin-top: 6px !important;
  }

  #th-request-catalogue #request-catalogue-form button.d-none,
  #th-request-catalogue #request-my-copy-button.d-none,
  #th-request-catalogue #requestCatalogueSubmitButton.d-none {
    display: none !important;
  }

  #th-request-catalogue .recaptcha-disclaimer,
  #th-request-catalogue .recaptcha-disclaimer.small {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #7c7a77 !important;
  }

  #th-request-catalogue .recaptcha-disclaimer a {
    color: #7c7a77 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }

  #th-request-catalogue #recaptcha-feedback {
    font-size: 12px !important;
    margin: 0 !important;
  }
}


/* ============================================================
   5. NEED HELP / TAKE THE NEXT STEP
   Design: pad 12px 20px 48px | title 20/700 | copy 12/1.65
   2-col grid gap 32×20 | circle 72 #f0efed | icon 26px
   title 15/700 | desc 12 | link 12/700 underline
   ============================================================ */
@media (max-width: 768px) {
  #need-help-section {
    padding: 12px 20px 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.th-container,
  #need-help-section .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

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

  #need-help-section .th-section-header,
  #need-help-section .th-section-header-pb-50,
  #need-help-section .sectionHeaderClass {
    display: block !important;
    padding: 0 0 28px 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

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

  #need-help-section .th-section-title,
  #need-help-section .th-section-title-mb {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
  }

  #need-help-section .th-section-subtitle,
  #need-help-section .th-section-subtitle-mb {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 !important;
    text-wrap: pretty;
  }

  #need-help-section .section-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  #need-help-section .section-body .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #need-help-section .th-need-help-container,
  #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;
    margin: 0 !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;
    padding: 0 !important;
    gap: 0 !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;
    border: none !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: 26px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

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

  #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;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !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;
  }

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

  #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 .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;
    padding: 0 !important;
    margin: 0 !important;
  }

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

  #need-help-section .th-item-help [style*="flex: 1"] {
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}