/*
 * mobile-blog-details.css
 * Mobile-only overrides for blog/detail.html (max-width: 768px)
 * Target design: Blog-Detail-Baseline-Design-mobile.html (430px artboard)
 *
 * Styles are taken from the design's inline CSS. Rules are purely
 * additive — they only apply inside media queries and do NOT affect
 * desktop styles. HTML markup and class names are left unchanged.
 */


/* ============================================================
   0. SHARED UTILITIES (from design <style>)
   html box-sizing | body Open Sans / 1.5 / #231f20
   strip scrollbar 4px #cfccc9
   ============================================================ */
@media (max-width: 768px) {
  .th-scroll-strip {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cfccc9 transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    cursor: grab;
  }

  .th-scroll-strip:active {
    cursor: grabbing;
  }

  .th-scroll-strip::-webkit-scrollbar {
    height: 4px;
  }

  .th-scroll-strip::-webkit-scrollbar-track {
    background: transparent;
  }

  .th-scroll-strip::-webkit-scrollbar-thumb {
    background: #cfccc9;
    border-radius: 2px;
  }

  .th-clamp3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .th-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ============================================================
   1. TOP BAR
   Design: height 44px | bg #231f20 | pad 0 20px
   text 13px / 0.02em | catalogue underline offset 3px
   ============================================================ */
@media (max-width: 768px) {
  .th-topbar {
    height: 44px !important;
    background-color: #231f20 !important;
    padding: 0 !important;
  }

  .th-topbar .position-relative.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;
    gap: 12px !important;
  }

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

  .th-topbar-text {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    flex: 1 !important;
    min-width: 0 !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 {
    font-size: 13px !important;
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
  }

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


/* ============================================================
   2. HEADER / NAVIGATION BAR
   Design: height 60px | pad 0 20px | logo 22px | icons 20px
   hamburger 40x40 / ml -8px | gap 12px
   border-bottom 1px #eeeeee
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

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

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

  .sticky-wrapper.desktop-menu .menu-area {
    padding: 0;
  }

  .sticky-wrapper.desktop-menu .menu-area .row {
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: 60px;
    align-items: center !important;
  }

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

  .sticky-wrapper .d-none.d-lg-inline-block {
    display: none !important;
  }

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

  .header-button.d-none.d-lg-inline-block {
    display: none !important;
  }

  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    gap: 12px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
  }

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

  .fa-regular.fa-magnifying-glass,
  .fa-solid.fa-magnifying-glass,
  .th-header-search .fa-regular.fa-magnifying-glass,
  #th-header-global-search i,
  #th-header-global-search .fa-regular.fa-magnifying-glass {
    font-size: 20px !important;
  }

  .fa-solid.fa-user,
  .fa-regular.fa-bookmark {
    font-size: 20px !important;
  }

  .th-header-search {
    width: 20px;
    height: 20px;
    display: flex !important;
    align-items: center !important;
  }

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

  .sticky-wrapper .col-4.d-flex {
    flex: none !important;
  }

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

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

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

  .sticky-wrapper.desktop-menu .main-menu {
    display: none !important;
  }
}


/* ============================================================
   3. HERO (#th-blog-hero)
   Design: min-height 440px | cover/center
   overlay linear-gradient(180deg, rgba(35,31,32,0.55) 0%,
     rgba(35,31,32,0.25) 40%, rgba(35,31,32,0.82) 100%)
   breadcrumb pad 16px 20px 0 | 11px / 0.04em
   pin 36px circle | bg rgba(255,255,255,0.95)
   date 14/1.6 / rgba(255,255,255,0.85) | mb 10
   title 26/1.18/600 | pad 0 20px 32px
   ============================================================ */
@media (max-width: 768px) {
  #th-blog-hero.th-hero-wrapper,
  #th-blog-hero.th-hero,
  section#th-blog-hero {
    position: relative !important;
    min-height: 440px !important;
    height: auto !important;
    padding: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden !important;
  }

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

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

  #th-blog-hero .container.th-container.th-hero-section,
  #th-blog-hero .th-hero-section.th-container,
  #th-blog-hero .th-hero-section.th-custom-container,
  #th-blog-hero .th-custom-container {
    position: relative !important;
    z-index: 1 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 440px !important;
  }

  #th-blog-hero .container.th-container.th-hero-section > .row {
    margin: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100% !important;
    width: 100% !important;
  }

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

  #th-blog-hero .col-xl-6,
  #th-blog-hero .th-hero-img {
    display: none !important;
  }

  #th-blog-hero .th-breadcrumb {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 16px 20px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #th-blog-hero .th-breadcrumb > [aria-label="breadcrumb"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #th-blog-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;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    max-width: 100% !important;
  }

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

  #th-blog-hero .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  #th-blog-hero .th-breadcrumb .breadcrumb-item.active {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #th-blog-hero .th-breadcrumb .breadcrumb-item.active span.active {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 400 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #th-blog-hero .th-component-edit-link,
  #th-blog-hero .th-admin-links {
    display: none !important;
  }

  #th-blog-hero .th-breadcrumb > .position-absolute,
  #th-blog-hero .th-breadcrumb > .position-absolute.top-right-20,
  #th-blog-hero .th-breadcrumb .position-absolute.top-right-20,
  #th-blog-hero .th-breadcrumb .position-absolute.top-right-30 {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
  }

  #th-blog-hero .th-add-to-pinboard,
  #th-blog-hero .th-add-to-pinboard.top-right-30,
  #th-blog-hero .th-add-to-pinboard.position-absolute,
  #th-blog-hero .th-pinboard-tooltip,
  #th-blog-hero .th-breadcrumb .th-add-to-pinboard.position-absolute.top-right-30 {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #231f20 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #th-blog-hero .th-add-to-pinboard:hover,
  #th-blog-hero .th-add-to-pinboard:focus,
  #th-blog-hero .th-add-to-pinboard.active,
  #th-blog-hero .th-add-to-pinboard.position-absolute:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #231f20 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #th-blog-hero .th-add-to-pinboard::before,
  #th-blog-hero .th-add-to-pinboard::after {
    display: none !important;
  }

  #th-blog-hero .th-add-to-pinboard i {
    color: #231f20 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #th-blog-hero .th-hero-container,
  #th-blog-hero .th-hero-container.gr-bg4 {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

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

  #th-blog-hero .th-hero-style,
  #th-blog-hero .th-hero-style.th-mt-115 {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 20px 32px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #th-blog-hero .th-hero-subtitle,
  #th-blog-hero .th-hero-subtitle.th-hero-subtitle-top,
  #th-blog-hero .th-hero-subtitle.th-hero-subtitle-my,
  #th-blog-hero .th-hero-container .th-hero-style .th-hero-subtitle {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  #th-blog-hero .th-hero-title,
  #th-blog-hero h1.th-hero-title,
  #th-blog-hero .th-hero-title.th-title-mb-15,
  #th-blog-hero .th-hero-title.th-hero-title-font,
  #th-blog-hero .th-hero-container .th-hero-style .th-hero-title {
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    text-wrap: pretty;
  }

  #th-blog-hero .th-hero-wrapp {
    display: none !important;
  }
}


/* ============================================================
   PAGE SAFEGUARDS
   Hide desktop chrome leftovers that leak onto mobile
   ============================================================ */
@media (max-width: 768px) {
  .edit-link,
  .th-component-edit-link {
    display: none !important;
  }

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

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


/* ============================================================
   4. EXCERPT (#th-blog-detail)
   Design: pad 32px 20px 8px
   body 12/1.7 #33322f | p mb 14
   ============================================================ */
@media (max-width: 768px) {
  #th-blog-detail.th-blog-detail-section-my,
  #th-blog-detail {
    padding: 32px 0 8px !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  #th-blog-detail .th-custom-container,
  #th-blog-detail .container.th-container,
  #th-blog-detail .container {
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  #th-blog-detail .section-body,
  #th-blog-detail .row,
  #th-blog-detail .col-md-12 {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #th-blog-detail .th-section-header-wrapper h2,
  #th-blog-detail h2.d-none {
    display: none !important;
  }

  #th-blog-detail .th-blog-detail-content,
  #th-blog-detail .th-description,
  #th-blog-detail p,
  #th-blog-detail .th-description p {
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: #33322f !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  #th-blog-detail .th-blog-detail-content > :last-child,
  #th-blog-detail .th-description:last-child,
  #th-blog-detail p:last-child,
  #th-blog-detail .th-description p:last-child {
    margin-bottom: 0 !important;
  }

  #th-blog-detail p:empty,
  #th-blog-detail .th-description p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
}


/* ============================================================
   5. MAIN COPY + IMAGES (#th-blog-main)
   Design: pad 8px 20px 40px
   body 12/1.7 #33322f | p mb 14
   h3 14/1.4/600 mt 26 mb 10
   h2 16/1.3/600 mt 32 mb 12
   ul pad-left 18 | gap 8 | li 12/1.65
   strong 600 #231f20
   a underline / offset 3px / 600
   img 100% auto radius 8
   ============================================================ */
@media (max-width: 768px) {
  #th-blog-main,
  #th-blog-main.pt-0,
  #th-blog-main.pb-60 {
    padding: 8px 0 40px !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow-x: hidden !important;
    font-size: 12px !important;
  }

  #th-blog-main .th-blog-main-header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
  }

  #th-blog-main .th-custom-container,
  #th-blog-main .container.th-container,
  #th-blog-main .container {
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  #th-blog-main .section-body,
  #th-blog-main .section-body > .row,
  #th-blog-main .row {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #th-blog-main .section-body > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  #th-blog-main .section-body > .row.th-mt-50 {
    margin-top: 16px !important;
    gap: 14px !important;
  }

  #th-blog-main .col-lg-6,
  #th-blog-main .col-md-12,
  #th-blog-main .th-blog-main-content,
  #th-blog-main .th-blog-main-content.th-blog-main-content-px {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
  }

  #th-blog-main .th-section-header,
  #th-blog-main .th-section-header.th-section-header-pb-50 {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-blog-main .th-section-header h2 {
    display: none !important;
  }

  #th-blog-main .th-img-container.blog-detail,
  #th-blog-main .th-img-container {
    margin: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    z-index: auto !important;
  }

  #th-blog-main .th-img-container img,
  #th-blog-main img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 0 0 26px !important;
  }

  #th-blog-main .th-img-container img {
    margin: 0 !important;
  }

  #th-blog-main p,
  #th-blog-main .font-size-16,
  #th-blog-main .th-section-subtitle,
  #th-blog-main .font-size-16 p {
    font-size: 12px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  #th-blog-main .th-pb-40 {
    padding-bottom: 0 !important;
  }

  #th-blog-main h2,
  #th-blog-main .th-section-title {
    margin: 32px 0 12px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    padding: 0 !important;
  }

  #th-blog-main h3,
  #th-blog-main h4 {
    margin: 26px 0 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    padding: 0 !important;
  }

  #th-blog-main ul,
  #th-blog-main ol {
    margin: 0 0 18px !important;
    padding-left: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #th-blog-main li {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
  }

  #th-blog-main strong,
  #th-blog-main b {
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  #th-blog-main a,
  #th-blog-main a:hover {
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  #th-blog-main p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  /* CMS stores h2s as <p><strong>…</strong></p> */
  #th-blog-main p:has(> strong:only-child) {
    margin: 32px 0 12px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  #th-blog-main p:has(> strong:only-child) strong {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  /* First-column h3-like intro before the opening list */
  #th-blog-main .th-blog-main-content > .font-size-16 p:has(> span:only-child) {
    margin: 26px 0 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  #th-blog-main .th-blog-main-content > .font-size-16 p:has(> span:only-child) span {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  #th-blog-main p:has(> img:only-child) {
    margin: 0 0 26px !important;
    padding: 0 !important;
  }

  #th-blog-main p:has(> img:only-child) img {
    margin: 0 !important;
  }
}


/* ============================================================
   6. GALLERY (#blog-detail-gallery)
   Design: pad 8px 0 40px
   title 20/1.25/600 | pad 0 20px 16px
   main 100% x 240px cover radius 8
   thumbs 88x64 radius 6 | gap 8 | pad 12px 20px 4px
   active border 1px #231f20 | idle #e8e8e8
   hint 10/0.06em/600 uppercase #8a8681
   ============================================================ */
@media (max-width: 768px) {
  #blog-detail-gallery,
  #blog-detail-gallery.pb-60,
  #blog-detail-gallery.pt-0 {
    padding: 8px 0 40px !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow-anchor: none;
  }

  #blog-detail-gallery .th-custom-container,
  #blog-detail-gallery .container.th-container,
  #blog-detail-gallery .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #blog-detail-gallery .th-section-header,
  #blog-detail-gallery .th-section-header.th-section-header-pb-50 {
    display: block !important;
    padding: 0 20px 16px !important;
    margin: 0 !important;
  }

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

  #blog-detail-gallery .th-section-subtitle,
  #blog-detail-gallery .th-section-subtitle-mb {
    display: none !important;
  }

  #blog-detail-gallery .section-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  #blog-detail-gallery .section-body > .row {
    display: flex !important;
    flex-direction: column-reverse !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  #blog-detail-gallery .section-body .col-md-2,
  #blog-detail-gallery .section-body .col-md-10,
  #blog-detail-gallery .section-body .col-sm-12,
  #blog-detail-gallery .th-main-des-three-px {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }

  /*
   * Reserve a fixed preview slot and stack panes on top of it.
   * Forcing display:none on inactive Bootstrap tabs collapses this
   * height for a frame (the click "jolt"). Same approach as #photo-gallery.
   */
  #blog-detail-gallery .th-gallery-img-container,
  #blog-detail-gallery .tab-content {
    display: block !important;
    position: relative !important;
    padding: 0 20px !important;
    height: 240px !important;
    min-height: 240px !important;
  }

  #blog-detail-gallery .th-gallery-img,
  #blog-detail-gallery .tab-pane.th-gallery-img,
  #blog-detail-gallery .tab-pane.th-gallery-img-preview,
  #blog-detail-gallery .tab-pane.d-none,
  #blog-detail-gallery .tab-pane.d-none.d-sm-block,
  #blog-detail-gallery .tab-pane.fade {
    position: absolute !important;
    top: 0 !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    height: 240px !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #e8e8e8 !important;
    margin: 0 !important;
    transition: none !important;
  }

  #blog-detail-gallery .tab-pane.active,
  #blog-detail-gallery .tab-pane.show,
  #blog-detail-gallery .th-gallery-img.active,
  #blog-detail-gallery .th-gallery-img.show,
  #blog-detail-gallery .tab-pane.th-gallery-img-preview.active,
  #blog-detail-gallery .tab-pane.d-none.active,
  #blog-detail-gallery .tab-pane.d-none.d-sm-block.active,
  #blog-detail-gallery .tab-pane.d-none.d-sm-block.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  #blog-detail-gallery .th-gallery-img img,
  #blog-detail-gallery .th-gallery-img-container img,
  #blog-detail-gallery .tab-pane img {
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }

  #blog-detail-gallery #gallery-tabs,
  #blog-detail-gallery .th-gallery-blog-container,
  #blog-detail-gallery .d-flex.flex-column.th-gallery-blog-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    padding: 12px 20px 8px !important;
    margin: 0 !important;
    cursor: grab !important;
    user-select: none;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #blog-detail-gallery #gallery-tabs::-webkit-scrollbar,
  #blog-detail-gallery .th-gallery-blog-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #blog-detail-gallery .th-mobile-gallery-scrollbar {
    display: block !important;
    position: relative !important;
    height: 4px !important;
    margin: 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  #blog-detail-gallery .th-mobile-gallery-scrollbar-drag {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 4px !important;
    min-width: 32px !important;
    background: #cfccc9 !important;
    border-radius: 2px !important;
    cursor: grab !important;
    will-change: transform;
    touch-action: none;
  }

  #blog-detail-gallery .th-mobile-gallery-scrollbar-drag.is-dragging {
    cursor: grabbing !important;
  }

  #blog-detail-gallery .th-gallery-thumb,
  #blog-detail-gallery button.th-gallery-thumb {
    flex: none !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: transparent !important;
    cursor: pointer !important;
    outline: none !important;
  }

  #blog-detail-gallery .th-gallery-thumb.active,
  #blog-detail-gallery button.th-gallery-thumb.active {
    border: 1px solid #231f20 !important;
  }

  #blog-detail-gallery .th-gallery-thumb img {
    display: block !important;
    width: 88px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin: 0 !important;
    user-select: none !important;
    pointer-events: none;
  }

  #blog-detail-gallery .th-main-des-three-px::after {
    content: "Drag the strip · tap a thumbnail to load it above";
    display: block;
    padding: 10px 20px 0;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: #8a8681;
    line-height: 1.4;
  }
}


/* ============================================================
   7. RELATED ARTICLES (#th-blog-related-article-slider)
   Design: bg #f6f5f3 | pad 48px 0
   header pad 0 20px 20px | title 20/1.25/600 | sub 12/1.65
   cards 280px gap 16 | white | 1px #e8e8e8 | radius 10
   image 190px cover
   body pad 14px 16px 16px | gap 6
   title 15/1.45/600 | desc 12/1.65
   Read More 12/600 underline offset 3
   ============================================================ */
@media (max-width: 768px) {
  #th-blog-related-article-slider,
  #th-blog-related-article-slider.th-section,
  #th-blog-related-article-slider.th-section-py,
  #th-blog-related-article-slider.th-mb-80,
  #th-blog-related-article-slider.bg-gray {
    padding: 48px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #f6f5f3 !important;
    background-color: #f6f5f3 !important;
  }

  #th-blog-related-article-slider .edit-link,
  #th-blog-related-article-slider .th-component-edit-link {
    display: none !important;
  }

  #th-blog-related-article-slider .container.th-container,
  #th-blog-related-article-slider .container,
  #th-blog-related-article-slider .th-custom-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-blog-related-article-slider .row {
    margin: 0 !important;
  }

  #th-blog-related-article-slider .th-section-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 20px 20px !important;
    margin: 0 !important;
  }

  #th-blog-related-article-slider .th-section-header .right,
  #th-blog-related-article-slider .th-section-header-link {
    display: none !important;
  }

  #th-blog-related-article-slider .th-section-header-wrapper,
  #th-blog-related-article-slider .th-section-header-wrapper.left {
    display: block !important;
    width: 100% !important;
    flex: none !important;
  }

  #th-blog-related-article-slider .th-section-title,
  #th-blog-related-article-slider h2.th-section-title,
  #th-blog-related-article-slider .th-section-title.th-section-title-mb {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding-bottom: 8px !important;
  }

  #th-blog-related-article-slider .th-section-subtitle-mb,
  #th-blog-related-article-slider .font-size-16.th-section-subtitle-mb {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 !important;
  }

  #th-blog-related-article-slider .th-section-body,
  #th-blog-related-article-slider .th-section-body .row,
  #th-blog-related-article-slider .th-section-body .col-md-12 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #th-blog-related-article-slider .swiper.th-related-articles-slider,
  #th-blog-related-article-slider .th-related-articles-slider {
    --swiper-scrollbar-sides-offset: 20px;
    --swiper-scrollbar-size: 4px;
    --swiper-scrollbar-bottom: 6px;
    --swiper-scrollbar-bg-color: transparent;
    --swiper-scrollbar-drag-bg-color: #cfccc9;
    position: relative !important;
    padding: 0 0 22px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #th-blog-related-article-slider .th-related-articles-slider.th-pb-60 {
    padding-bottom: 22px !important;
  }

  #th-blog-related-article-slider .swiper-wrapper {
    padding-left: 20px !important;
    cursor: grab;
    box-sizing: border-box !important;
  }

  #th-blog-related-article-slider .swiper-slide {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    margin-right: 16px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  #th-blog-related-article-slider .list-img,
  #th-blog-related-article-slider .list-img.position-relative {
    position: relative !important;
    width: 100% !important;
    height: 190px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #e8e8e8 !important;
  }

  #th-blog-related-article-slider .img-container,
  #th-blog-related-article-slider .img-container a {
    display: block !important;
    width: 100% !important;
    height: 190px !important;
    border: none !important;
  }

  #th-blog-related-article-slider .img-container img {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    user-select: none !important;
  }

  #th-blog-related-article-slider .th-add-to-pinboard,
  #th-blog-related-article-slider .th-add-to-pinboard.top-right-30,
  #th-blog-related-article-slider .th-add-to-pinboard.position-absolute,
  #th-blog-related-article-slider .th-pinboard-tooltip {
    display: none !important;
  }

  #th-blog-related-article-slider .slider-footer {
    padding: 14px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  #th-blog-related-article-slider .slider-footer > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #th-blog-related-article-slider .th-blog-title {
    display: block !important;
    min-height: 0 !important;
    text-decoration: none !important;
  }

  #th-blog-related-article-slider .th-item-title-bold,
  #th-blog-related-article-slider h3.th-item-title-bold,
  #th-blog-related-article-slider .th-item-title-bold.th-mt-20,
  #th-blog-related-article-slider .slider-footer h3 {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 !important;
  }

  #th-blog-related-article-slider .th-blog-title,
  #th-blog-related-article-slider .slider-footer a.hover {
    color: #231f20 !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  #th-blog-related-article-slider .th-description,
  #th-blog-related-article-slider .th-description-my {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 !important;
  }

  #th-blog-related-article-slider .th-read-more-btn,
  #th-blog-related-article-slider .link.th-read-more-btn {
    margin-top: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
  }

  #th-blog-related-article-slider .th-link-text,
  #th-blog-related-article-slider .link-text.th-link-text,
  #th-blog-related-article-slider .th-link-text.th-pr-5 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 0 !important;
  }

  #th-blog-related-article-slider .swiper-scrollbar,
  #th-blog-related-article-slider .swiper-horizontal > .swiper-scrollbar,
  #th-blog-related-article-slider .swiper-scrollbar.swiper-scrollbar-horizontal {
    display: block !important;
    position: absolute !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    top: auto !important;
    width: auto !important;
    height: 4px !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #th-blog-related-article-slider .swiper-scrollbar-drag {
    background: #cfccc9 !important;
    border-radius: 2px !important;
    height: 4px !important;
    cursor: grab !important;
    top: 0 !important;
  }
}


/* ============================================================
   8. TAKE THE NEXT STEP (NEED HELP)
   Design: pad 48px 20px | title 20/1.25/600 mb 8
   sub 12/1.65 mb 28
   grid 2 col | gap 32px 20px
   last odd item centred | max-width calc(50% - 10px)
   icon 72px #f0efed | svg 26 | mb 14
   item title 15/600 mb 8 | desc 12/1.5 mb 10
   link 12/700 underline offset 3
   ============================================================ */
@media (max-width: 768px) {
  #need-help-section {
    padding: 48px 20px !important;
    background: #ffffff !important;
  }

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

  #need-help-section .container.th-container,
  #need-help-section .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #need-help-section .th-section-header,
  #need-help-section .th-section-header.th-section-header-pb-50 {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

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

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

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

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

  #need-help-section .th-need-help-container,
  #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.grid-5 .th-item-help:last-child:nth-child(odd),
  #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;
    gap: 0 !important;
    padding: 0 !important;
  }

  #need-help-section .th-item-help > a,
  #need-help-section .th-item-help .th-link-text.pr-5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !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: 26px !important;
  }

  #need-help-section .th-item-help h6.th-item-title-bold,
  #need-help-section .th-item-help .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: 600 !important;
    margin: 0 0 8px !important;
    min-height: auto !important;
    color: #231f20 !important;
    line-height: 1.3 !important;
  }

  #need-help-section .th-item-help .th-description.th-need-to-help-des-my,
  #need-help-section .th-item-help .th-description {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    color: #33322f !important;
    max-width: none !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 .th-link-text,
  #need-help-section .th-item-help .th-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;
  }
}


/* ============================================================
   EXTRA SMALL (max-width: 390px)
   Keep hero title at design 26px — desktop CSS shrinks it
   ============================================================ */
@media (max-width: 390px) {
  #th-blog-hero .th-hero-title,
  #th-blog-hero h1.th-hero-title,
  #th-blog-hero .th-hero-container .th-hero-style .th-hero-title,
  #th-blog-hero .th-hero-subtitle,
  #th-blog-hero .th-hero-container .th-hero-style .th-hero-subtitle {
    font-size: 26px !important;
  }

  #th-blog-hero .th-hero-subtitle,
  #th-blog-hero .th-hero-container .th-hero-style .th-hero-subtitle {
    font-size: 14px !important;
  }

  #need-help-section .th-section-title,
  #th-blog-related-article-slider .th-section-title,
  #blog-detail-gallery .th-section-title {
    font-size: 20px !important;
  }
}