/*
 * mobile-product-details.css
 * Mobile-only overrides for product/product.html (max-width: 768px)
 * Target design: Krost-Product-Detail-Mobile.html (430px phone frame / 390px content)
 *
 * These rules are purely additive — they only apply inside media queries
 * and do NOT affect desktop styles.
 * HTML markup and class names are left unchanged.
 *
 * Design tokens (from design “Inherited from home-mobile.css” rules):
 *   padding: 0 20px          — container gutter
 *   padding: 48px 0          — section rhythm (.th-section-py)
 *   font-size: 20px          — .th-section-title
 *   font-size: 12px / 1.65   — .th-section-subtitle / body
 *   min-height: 520px        — hero
 *   font-size: 26px / 1.18   — .th-hero-title
 *   44px round pinboard btn
 *   280px family cards, 10px radius
 *   #f6f5f3 / #eaeaec        — secondary backgrounds
 */


/* ============================================================
   0. SHARED — horizontal strip scrollbar + drag cursor
   ============================================================ */
@media (max-width: 768px) {
  .noscroll,
  .product-related-slider,
  .th-product-may-like-slider,
  .th-product-instagram-slider,
  .th-featured-projects-slider {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .noscroll::-webkit-scrollbar,
  .product-related-slider::-webkit-scrollbar,
  .th-product-may-like-slider::-webkit-scrollbar,
  .th-product-instagram-slider::-webkit-scrollbar,
  .th-featured-projects-slider::-webkit-scrollbar {
    display: none;
  }

  .noscroll.dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
  }

  .noscroll.dragging * {
    pointer-events: none;
  }
}


/* ============================================================
   1. TOP BAR
   ============================================================ */
@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: #fff !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: #fff !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 18px | icons 20px
   ============================================================ */
@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 .menu-area {
    padding: 0;
    border-bottom: 1px solid #ececec;
  }

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

  .header-logo a img {
    height: 18px;
    width: auto;
  }

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

  .th-user-dropdown {
    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;
    margin-right: -8px !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;
    font-size: 18px;
    margin-left: -8px;
    cursor: pointer;
    color: #231f20;
  }

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

  .fa-solid.fa-user {
    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;
  }
}


/* ============================================================
   3. HERO (#hero-product)
   Design: min-height 520px | pad 20px | title 26/1.18/700
   subtitle 14/1.6 | CTAs stacked full-width gap 10
   gradient 180deg rgba(.42)→(.18)→(.72)
   ============================================================ */
@media (max-width: 768px) {
  #hero-product.th-hero-wrapper,
  #hero-product.th-hero,
  section#hero-product {
    position: relative !important;
    min-height: 520px !important;
    height: auto !important;
    padding: 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;
    border-bottom: 0 !important;
  }

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

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

  #hero-product .th-hero-video-overlay {
    background: transparent !important;
  }

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

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

  /* First row = breadcrumb strip — keep top inset on the row itself */
  #hero-product .container.th-container > .row:first-child {
    padding-top: 20px !important;
  }

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

  #hero-product .th-hero-media-col,
  #hero-product .th-hero-img,
  #hero-product .way-points-container,
  #hero-product .th-admin-links,
  #hero-product .th-component-edit-link {
    display: none !important;
  }

  /*
   * Beat component.css (.th-hero.th-hero-transparent#hero-product .th-breadcrumb
   * { padding-top: 60px }) — same specificity, later cascade + explicit sides.
   * Design inset: 20px from hero top.
   */
  #hero-product.th-hero.th-hero-transparent .th-breadcrumb,
  #hero-product.th-hero-wrapper .th-breadcrumb,
  #hero-product .th-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    position: relative !important;
    width: 100% !important;
  }

  #hero-product .th-breadcrumb nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 56px) !important;
  }

  #hero-product .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }

  #hero-product .breadcrumb-item,
  #hero-product .breadcrumb-item a,
  #hero-product .breadcrumb-item span,
  #hero-product .breadcrumb-item.font-white,
  #hero-product .font-white {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    padding: 0 !important;
  }

  #hero-product .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    padding: 0 6px 0 0 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    float: none !important;
  }

  #hero-product .breadcrumb-item:last-child,
  #hero-product .breadcrumb-item:last-child a,
  #hero-product .breadcrumb-item:last-child span {
    color: #fff !important;
  }

  /* Pinboard + control — 44px round, top-right of hero */
  #hero-product .position-absolute.top-right-20,
  #hero-product .position-absolute.top-50 {
    position: static !important;
    top: auto !important;
    right: auto !important;
  }

  #hero-product .th-add-to-pinboard,
  #hero-product .th-pinboard-tooltip {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    color: #231f20 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  #hero-product .th-add-to-pinboard i {
    font-size: 18px !important;
    color: #231f20 !important;
  }

  #hero-product .th-hero-container.gr-bg4,
  #hero-product .th-hero-container {
    background: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  #hero-product .th-hero-style,
  #hero-product .th-hero-style.th-mt-100 {
    margin-top: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Category kicker injected by mobile-product-details.js */
  #hero-product .th-hero-category-kicker {
    display: block !important;
    font-size: 12px !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
  }

  #hero-product .th-hero-title,
  #hero-product .th-hero-title.th-hero-title-mb,
  #hero-product .th-hero-container .th-hero-style .th-hero-title {
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #fff !important;
    max-width: 100% !important;
    word-break: break-word !important;
    padding: 0 !important;
  }

  #hero-product .th-hero-subtitle,
  #hero-product .th-hero-subtitle.th-hero-subtitle-my {
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    display: block !important;
  }

  #hero-product .th-hero-wrapp {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #hero-product .th-hero-wrapp .position-relative,
  #hero-product .th-hero-wrapp .th-pb-16,
  #hero-product .th-hero-wrapp .button {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #hero-product .th-hero-wrapp a.th-btn,
  #hero-product .th-hero-wrapp a.th-btn-outline-black,
  #hero-product .th-hero-wrapp a.th-btn-text-preserve {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
  }

  /* Primary CTA — filled white */
  #hero-product .th-hero-wrapp [data-v-heroproduct-component-buttons] .position-relative:first-child a.th-btn,
  #hero-product .th-hero-wrapp .position-relative:first-child a.th-btn {
    background: #fff !important;
    color: #231f20 !important;
    border: 1px solid #fff !important;
  }

  /* Secondary CTA — outline white */
  #hero-product .th-hero-wrapp [data-v-heroproduct-component-buttons] .position-relative:nth-child(2) a.th-btn,
  #hero-product .th-hero-wrapp .position-relative:nth-child(2) a.th-btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
  }

  #hero-product .th-hero-wrapp a.th-btn::before,
  #hero-product .th-hero-wrapp a.th-btn::after {
    display: none !important;
  }
}


/* ============================================================
   4. PRODUCT STORY MASONRY (#product-story-masonry)
   Design: title above image, body below with left rule
   ============================================================ */
@media (max-width: 768px) {
  #product-story-masonry {
    padding: 48px 0 0 !important;
    background: #fff !important;
  }

  #product-story-masonry [data-v-productstorymasonry-component-link],
  #product-story-masonry .th-component-edit-link {
    display: none !important;
  }

  #product-story-masonry .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #product-story-masonry .row.featured-product,
  #product-story-masonry .row {
    margin: 0 !important;
  }

  #product-story-masonry .col-12 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #product-story-masonry .section-body,
  #product-story-masonry .th-masonry-col-2 {
    padding: 0 !important;
  }

  #product-story-masonry .th-masonry-grid,
  #product-story-masonry .th-masonry-grid.th-column-gap-column-gap {
    display: flex !important;
    flex-direction: column !important;
    gap: 72px !important;
    column-count: unset !important;
    column-gap: 0 !important;
  }

  #product-story-masonry .th-masonry-grid-item,
  #product-story-masonry .th-masonry-grid-item.grid-col-span-7,
  #product-story-masonry .th-masonry-grid-item.grid-col-span-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    break-inside: avoid !important;
  }

  /* Split title above / body below image without changing HTML */
  #product-story-masonry .th-product-info-wrapper,
  #product-story-masonry .th-item-info {
    display: contents !important;
  }

  #product-story-masonry .th-item-info > h6,
  #product-story-masonry .th-item-info > .th-title-18,
  #product-story-masonry .th-item-info > .th-title-17,
  #product-story-masonry .th-item-info > .th-title-20,
  #product-story-masonry [data-v-productstorymasonry-product-main_image_one_title] {
    order: 1 !important;
    display: block !important;
    padding: 0 20px 0 44px !important;
    margin: 0 0 22px !important;
    font-size: 20px !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    letter-spacing: -0.018em !important;
    text-wrap: pretty;
  }

  #product-story-masonry .th-item-info > h6 .th-link,
  #product-story-masonry .th-item-info > h6 .th-link-icon {
    display: contents !important;
  }

  #product-story-masonry .th-item-info > h6 .th-link-icon {
    display: none !important;
  }

  #product-story-masonry .th-item-img {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    /* aspect-ratio: 5 / 4 !important; */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #product-story-masonry .th-item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #product-story-masonry .item-description,
  #product-story-masonry [data-v-productstorymasonry-product-main_image_one_description] {
    order: 3 !important;
    position: relative !important;
    padding: 24px 20px 0 44px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.85 !important;
    color: #6b6863 !important;
    text-wrap: pretty;
  }

  #product-story-masonry .item-description::before,
  #product-story-masonry [data-v-productstorymasonry-product-main_image_one_description]::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 9px;
    bottom: 4px;
    width: 1px;
    background: #dedbd6;
  }

  #product-story-masonry .th-link.th-pt-10,
  #product-story-masonry .th-item-info > .th-link {
    order: 4 !important;
    display: none !important;
  }

  #product-story-masonry .th-mt-15 {
    margin-top: 0 !important;
  }

  #product-story-masonry .th-pt-15 {
    padding-top: 9px !important;
  }
}


/* ============================================================
   5. FEATURES (#th-product-features)
   Design: title 20 + subtitle 12, then offset grey cards
   ============================================================ */
@media (max-width: 768px) {
  #th-product-features {
    padding: 72px 0 48px !important;
    background: #fff !important;
  }

  #th-product-features.gr-bg8 {
    background: #fff !important;
  }

  #th-product-features [data-v-productfeature-component-link],
  #th-product-features .th-edit-top-0,
  #th-product-features .th-component-edit-link {
    display: none !important;
  }

  #th-product-features .container.th-container {
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  #th-product-features .row {
    margin: 0 !important;
  }

  #th-product-features .th-section-header,
  #th-product-features .th-section-header-pb-50 {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
    width: 100% !important;
  }

  #th-product-features .th-section-header-wrapper {
    width: 100% !important;
  }

  #th-product-features .th-section-header .d-flex.justify-content-between {
    display: block !important;
  }

  #th-product-features .th-section-header .right,
  #th-product-features #online-order-link {
    display: none !important;
  }

  #th-product-features .th-section-title,
  #th-product-features .th-section-title-mb {
    margin: 0 0 16px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
  }

  #th-product-features .th-section-subtitle,
  #th-product-features .th-section-subtitle-mb,
  #th-product-features #feature-description {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #6b6863 !important;
    text-wrap: pretty;
  }

  #th-product-features .section-body {
    margin: 0 !important;
    padding: 0 !important;
  }

  #th-product-features .section-body > .row,
  #th-product-features [data-v-productfeature-items] {
    display: flex !important;
    flex-direction: column !important;
    gap: 72px !important;
    margin: 0 !important;
  }

  #th-product-features .col-md-4,
  #th-product-features .col-sm-12,
  #th-product-features .mb-15,
  #th-product-features .th-product-feature-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 0 26px !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* Grey offset panel behind image (design left:-20px right:40px) */
  #th-product-features .th-product-feature-item::before {
    content: "";
    position: absolute;
    left: -20px;
    /* right: 40px; */
    right: -20px;
    top: 34px;
    bottom: 0;
    background: #f2f1ee;
    z-index: 0;
    pointer-events: none;
  }

  #th-product-features .th-item-card {
    position: relative !important;
    z-index: 1 !important;
    padding: 0 0 0 22px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #th-product-features .th-img-container {
    width: 100% !important;
    /* aspect-ratio: 4 / 3 !important; */
    overflow: hidden !important;
    margin: 0 !important;
    background: #fff !important;
    padding: 20px !important
  }

  #th-product-features .th-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #th-product-features .th-item-card-content,
  #th-product-features .th-item-card-content.th-mt-15 {
    margin-top: 0 !important;
    padding: 20px 62px 0 0 !important;
  }

  #th-product-features .th-item-card-content .mb-10 {
    margin: 0 !important;
  }

  #th-product-features .th-item-card-content h6,
  #th-product-features [data-v-productfeature-product-feature_image_one_title] {
    margin: 0 0 10px !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    letter-spacing: -0.012em !important;
    text-wrap: pretty;
  }

  #th-product-features .th-description,
  #th-product-features [data-v-productfeature-product-feature_image_one_description] {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.75 !important;
    color: #6b6863 !important;
    text-wrap: pretty;
  }
}


/* ============================================================
   6. PRODUCT CONFIGURATOR
   ============================================================ */
@media (max-width: 768px) {
  #th-product-configurator {
    padding: 48px 20px !important;
    background: #fff !important;
  }

  #th-product-configurator .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-product-configurator .th-section-header,
  #th-product-configurator .th-section-header-pb-50 {
    padding: 0 !important;
    margin: 0 0 24px !important;
  }

  #th-product-configurator .th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
    margin: 0 0 16px !important;
  }

  #th-product-configurator .th-section-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #6b6863 !important;
    margin: 0 !important;
  }
}


/* ============================================================
   7. DETAIL TABS / ACCORDION (#product-detail-tabs)
   Design: border-top/bottom #e8e8e8 | row min-height 56
   label 15/600 | caret 14 #6b6863 | open pad 0 0 20
   ============================================================ */
@media (max-width: 768px) {
  #product-detail-tabs,
  .th-product-detail-tabs,
  .th-product-tabs-section-p {
    padding: 0 20px 48px !important;
    background: #fff !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #product-detail-tabs .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #product-detail-tabs .nav.nav-tabs {
    display: none !important;
  }

  #accordionProductDetails,
  #product-detail-tabs .accordion {
    border-top: 1px solid #e8e8e8 !important;
    margin: 0 !important;
  }

  #product-detail-tabs .accordion-item {
    border: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #231f20 !important;
  }

  #product-detail-tabs .accordion-header {
    margin: 0 !important;
  }

  #product-detail-tabs .accordion-button,
  #product-detail-tabs .accordion-button.collapsed,
  #product-detail-tabs .accordion-button:not(.collapsed) {
    width: 100% !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-align: left !important;
  }

  #product-detail-tabs .accordion-button::after {
    width: 14px !important;
    height: 14px !important;
    background-size: 14px !important;
    margin-left: auto !important;
    opacity: 0.7 !important;
  }

  #product-detail-tabs .accordion-button:focus {
    box-shadow: none !important;
    border: 0 !important;
  }

  #product-detail-tabs .accordion-body {
    padding: 0 0 20px !important;
  }

  #product-detail-tabs .accordion-body .row {
    margin: 0 !important;
  }

  #product-detail-tabs .accordion-body .col-lg-6,
  #product-detail-tabs .accordion-body .px-0 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #product-detail-tabs .accordion-body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #product-detail-tabs .accordion-body li,
  #product-detail-tabs .accordion-body .font-size-14,
  #product-detail-tabs .accordion-body .mb-10 {
    display: flex !important;
    /* justify-content: space-between !important; */
    gap: 0px !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #6b6863 !important;
    /* border-bottom: 1px solid #f0eeec !important; */
    padding: 0 0 0px !important;
    margin: 0 !important;
    text-indent: 0 !important;
  }
  #product-detail-tabs #collapseDimensions .accordion-body .mb-10 {
    justify-content:flex-start !important;
    gap: 5px !important;
  }
  #product-detail-tabs #collapseDimensions .accordion-body .mb-10 span {
    color: #33322f !important;
  }

  #product-detail-tabs .accordion-body .th-link {
    margin-top: 14px !important;
  }

  #product-detail-tabs .accordion-body .th-link a,
  #product-detail-tabs .accordion-body .th-view-link a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    border-bottom: 1px solid #231f20 !important;
    padding-bottom: 2px !important;
    text-decoration: none !important;
  }

  /*
   * Downloads — design list rows:
   * bold format · regular name | border #f0eeec | 12px
   * e.g. "PDF  Krost User Guide …"
   * Fixes the overlapping horizontal icon/link layout on mobile.
   */
  #product-detail-tabs #collapseDownloads > .accordion-body {
    padding: 0 0 20px !important;
  }

  #product-detail-tabs #collapseDownloads .row,
  #product-detail-tabs #collapseDownloads .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #product-detail-tabs #collapseDownloads ul[data-v-downloads-items-mobile],
  #product-detail-tabs #collapseDownloads ul.list-unstyled {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #f0eeec !important;
  }

  #product-detail-tabs #collapseDownloads li,
  #product-detail-tabs #collapseDownloads li[data-v-downloads-item-mobile],
  #product-detail-tabs #collapseDownloads .accordion-body li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f0eeec !important;
    text-indent: 0 !important;
    float: none !important;
  }

  #product-detail-tabs #collapseDownloads .download-item-container,
  #product-detail-tabs #collapseDownloads .download-item-container.d-flex,
  #product-detail-tabs #collapseDownloads .download-item-container.mb-10,
  #product-detail-tabs #collapseDownloads .accordion-body .mb-10.download-item-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* Design rows have no file-type icons */
  #product-detail-tabs #collapseDownloads .download-item-container > img,
  #product-detail-tabs #collapseDownloads img[data-v-downloads-item-icon-src-mobile] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #product-detail-tabs #collapseDownloads .download-item-container a,
  #product-detail-tabs #collapseDownloads .download-item-link,
  #product-detail-tabs #collapseDownloads .design-resource-tag,
  #product-detail-tabs #collapseDownloads .download-mobile-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #6b6863 !important;
    text-align: right !important;
    text-decoration: none !important;
    text-underline-offset: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #product-detail-tabs #collapseDownloads .download-item-container a::after,
  #product-detail-tabs #collapseDownloads .download-item-link::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
  }

  /* Injected by mobile-product-details.js — bold format before file name */
  #product-detail-tabs #collapseDownloads .th-download-meta {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  #product-detail-tabs #collapseDownloads .th-link {
    margin-top: 14px !important;
  }

  #product-detail-tabs #collapseDownloads .th-view-link,
  #product-detail-tabs #collapseDownloads #download-all-link-mobile {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  /*
   * Pictures & Videos (design: Krost-Product-Detail-Mobile.html)
   * Layout: [chevron 28px] [horizontal 155px cards, gap 10] [chevron]
   * Pure CSS overrides — leaves main-new.js / lightGallery alone.
   */
  #product-detail-tabs #collapseMedia .th-product-mobile-accordian {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    padding: 0 0 4px !important;
    margin: 0 !important;
  }

  /* Plain side chevrons — not the old dark circular arrows */
  #product-detail-tabs #collapseMedia .slider-arrow-mobile {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #231f20 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 2 !important;
  }

  #product-detail-tabs #collapseMedia .slider-arrow-mobile:hover,
  #product-detail-tabs #collapseMedia .slider-arrow-mobile:focus {
    background: transparent !important;
    color: #231f20 !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Single-row horizontal strip (beats .two-row-mode from SCSS/main.js) */
  #product-detail-tabs #product-media-gallery-mobile,
  #product-detail-tabs #product-media-gallery-mobile.single-row-mode,
  #product-detail-tabs #product-media-gallery-mobile.two-row-mode {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    cursor: grab !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }

  #product-detail-tabs #product-media-gallery-mobile::-webkit-scrollbar {
    display: none !important;
  }

  #product-detail-tabs #product-media-gallery-mobile .th-product-media-item,
  #product-detail-tabs #product-media-gallery-mobile.two-row-mode .th-product-media-item,
  #product-detail-tabs #product-media-gallery-mobile.single-row-mode .th-product-media-item {
    flex: 0 0 155px !important;
    width: 155px !important;
    max-width: 155px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    box-sizing: border-box !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #product-detail-tabs #product-media-gallery-mobile .th-product-media-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    pointer-events: none;
    -webkit-user-drag: none;
  }
}


/* ============================================================
   8. MEET THE FAMILY (#th-product-related-family)
   Design: bg #f6f5f3 | 280px cards | 10px radius | + pin 44
   ============================================================ */
@media (max-width: 768px) {
  #th-product-related-family,
  #th-product-related-family.bg-gray-lighter {
    padding: 48px 0 !important;
    background: #f6f5f3 !important;
  }

  #th-product-related-family [data-v-productrelatedfamily-component-link],
  #th-product-related-family .th-component-edit-link {
    display: none !important;
  }

  #th-product-related-family .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-product-related-family .row {
    margin: 0 !important;
  }

  #th-product-related-family .th-section-header,
  #th-product-related-family .th-section-header-pb-50 {
    padding: 0 20px !important;
    margin: 0 0 28px !important;
    display: block !important;
  }

  #th-product-related-family .th-section-title {
    margin: 0 0 16px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
  }

  #th-product-related-family .th-section-subtitle {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #6b6863 !important;
  }

  #th-product-related-family .th-section-body {
    padding: 0 !important;
  }

  #th-product-related-family .col-md-12 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /*
   * Swiper owns the scroll (transform + touch).
   * Side insets MUST come from slidesOffsetBefore/After in JS —
   * CSS padding on .swiper shortens maxTranslate and the strip
   * cannot reach the last card.
   */
  #th-product-related-family .swiper.product-related-slider {
    margin: 0 !important;
    padding: 0 0 8px !important;
    overflow: hidden !important;
    touch-action: pan-x !important;
    -webkit-user-select: none;
    user-select: none;
  }

  #th-product-related-family .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important; /* spaceBetween handled by Swiper */
    box-sizing: content-box !important;
    will-change: transform;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  }

  #th-product-related-family .swiper-slide {
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Keep taps on cards snappy without fighting the drag */
  #th-product-related-family .swiper-slide a,
  #th-product-related-family .swiper-slide img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;
  }

  #th-product-related-family .th-item-product,
  #th-product-related-family .th-item-product.p-20,
  #th-product-related-family .th-item-product.border {
    width: 100% !important;
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Product shots — fit entire image (no crop), centred on white */
  #th-product-related-family .th-img-container,
  #th-product-related-family .th-img-container.bg-white {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    aspect-ratio: auto !important;
    background: #fff !important;
    border: 0 !important;
    overflow: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  #th-product-related-family .th-img-container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  #th-product-related-family .th-img-container img,
  #th-product-related-family .th-img-container > a img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  #th-product-related-family .th-add-to-pinboard,
  #th-product-related-family .th-pinboard-tooltip {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 44px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    color: #231f20 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  #th-product-related-family .th-item-footer {
    padding: 14px 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    flex-shrink: 0 !important;
    min-height: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #th-product-related-family .th-item-title,
  #th-product-related-family .th-prouct-title-my {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
  }

  #th-product-related-family .th-tag-name {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #th-product-related-family .th-tag,
  #th-product-related-family .th-tag-p {
    font-size: 10.5px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border: 0 !important;
    border-radius: 2px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #th-product-related-family .swiper-scrollbar,
  #th-product-related-family .swiper-pagination {
    display: none !important;
  }
}


/* ============================================================
   9. FEATURED PROJECTS
   Same scroll pattern as Meet the Family: no CSS side padding
   on .swiper (use slidesOffset*), 280px slides, freeMode JS.
   ============================================================ */
@media (max-width: 768px) {
  #th-featured-projects-slider,
  .product-detail-featured-projects-section {
    padding: 48px 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #th-featured-projects-slider [data-v-productfeaturedprojectslider-component-link],
  #th-featured-projects-slider .th-component-edit-link {
    display: none !important;
  }

  #th-featured-projects-slider .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-featured-projects-slider .row,
  #th-featured-projects-slider .featured-projects-row {
    margin: 0 !important;
  }

  #th-featured-projects-slider .th-section-header,
  #th-featured-projects-slider .th-section-header.sectionHeaderClass {
    padding: 0 20px !important;
    margin: 0 0 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #th-featured-projects-slider .th-section-header .d-flex.justify-content-between {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Mobile: title becomes the /projects link; desktop title + View All hide */
  #th-featured-projects-slider .th-section-header .section-header-link-mobile {
    display: block !important;
  }

  #th-featured-projects-slider .th-section-header .section-header-link-desktop {
    display: none !important;
  }

  #th-featured-projects-slider .th-section-header .right {
    display: none !important;
  }

  #th-featured-projects-slider .th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
    margin: 0 0 12px !important;
    flex: 1 1 auto !important;
  }

  #th-featured-projects-slider .th-section-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #6b6863 !important;
    margin: 0 !important;
  }

  #th-featured-projects-slider .section-body,
  #th-featured-projects-slider .col-md-12 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #th-featured-projects-slider .swiper.th-featured-projects-slider {
    margin: 0 !important;
    padding: 0 0 8px !important;
    overflow: hidden !important;
    touch-action: pan-x !important;
  }

  #th-featured-projects-slider .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    will-change: transform;
  }

  #th-featured-projects-slider .swiper-slide {
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  #th-featured-projects-slider .th-item-project {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #th-featured-projects-slider .th-img-container,
  #th-featured-projects-slider .th-img-container.itemProjectClass {
    width: 100% !important;
    min-height: 200px !important;
    height: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 2px !important;
  }

  #th-featured-projects-slider .th-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 2px !important;
  }

  #th-featured-projects-slider .th-add-to-pinboard,
  #th-featured-projects-slider .th-pinboard-tooltip {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  #th-featured-projects-slider .th-item-footer {
    padding-top: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
  }

  #th-featured-projects-slider .th-item-footer h3,
  #th-featured-projects-slider h3.th-title.th-item-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 6px !important;
  }

  #th-featured-projects-slider .th-description,
  #th-featured-projects-slider .th-description-my {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #6b6863 !important;
    margin: 0 0 10px !important;
  }

  #th-featured-projects-slider .th-link .th-link-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    border-bottom: 1px solid #231f20 !important;
    text-decoration: none !important;
    padding-bottom: 2px !important;
  }

  #th-featured-projects-slider .swiper-scrollbar,
  #th-featured-projects-slider .swiper-pagination {
    display: none !important;
  }
}


/* ============================================================
   10. SUSTAINABILITY (#ocean)
   ============================================================ */
@media (max-width: 768px) {
  #ocean {
    padding: 48px 20px !important;
    background: #fff !important;
  }

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

  #ocean .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #ocean .row {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  #ocean .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #ocean .left-column img,
  #ocean .th-product-sustainability-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  #ocean .th-mt-50 {
    margin-top: 0 !important;
  }

  #ocean .th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
    margin: 0 0 16px !important;
  }

  #ocean .th-section-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #6b6863 !important;
    margin: 0 0 18px !important;
  }

  #ocean .th-section-header-link-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }
}


/* ============================================================
   11. YOU MAY ALSO LIKE (#th-product-may-like)
   Same scroll pattern as Meet the Family.
   ============================================================ */
@media (max-width: 768px) {
  #th-product-may-like,
  .may-also-like {
    padding: 48px 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #th-product-may-like [data-v-productalsolike-component-link],
  #th-product-may-like .th-component-edit-link {
    display: none !important;
  }

  #th-product-may-like .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-product-may-like .row {
    margin: 0 !important;
  }

  #th-product-may-like .th-mb-60,
  #th-product-may-like .col-md-12.text-center {
    margin-bottom: 28px !important;
    padding: 0 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #th-product-may-like .section-title,
  #th-product-may-like .th-section-title-mb {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
    margin: 0 0 16px !important;
  }

  #th-product-may-like .section-subtitle,
  #th-product-may-like .th-section-subtitle-mb {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #6b6863 !important;
    margin: 0 !important;
  }

  #th-product-may-like .col-md-12:not(.text-center) {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #th-product-may-like .swiper.th-product-may-like-slider {
    margin: 0 !important;
    padding: 0 0 8px !important;
    overflow: hidden !important;
    touch-action: pan-x !important;
  }

  #th-product-may-like .th-pb-40 {
    padding-bottom: 8px !important;
  }

  #th-product-may-like .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    will-change: transform;
  }

  #th-product-may-like .swiper-slide {
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  #th-product-may-like .th-item-product {
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  #th-product-may-like .th-img-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    background: #fff !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #th-product-may-like .th-img-container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  #th-product-may-like .th-img-container img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  #th-product-may-like .th-add-to-pinboard,
  #th-product-may-like .th-pinboard-tooltip {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  #th-product-may-like .th-item-card-content,
  #th-product-may-like .th-item-card-content.mt-15 {
    margin-top: 0 !important;
    padding: 14px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  #th-product-may-like .th-item-card-content-label {
    font-size: 12px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #999 !important;
    margin: 0 !important;
  }

  #th-product-may-like .th-link.th-mb-10 {
    margin: 0 !important;
  }

  #th-product-may-like .th-title,
  #th-product-may-like .font-20 {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 !important;
  }

  #th-product-may-like .th-description {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #6b6863 !important;
    margin: 0 !important;
  }

  #th-product-may-like .swiper-scrollbar,
  #th-product-may-like .swiper-pagination {
    display: none !important;
  }
}


/* ============================================================
   12. INSTAGRAM (#th-product-instagram)
   ============================================================ */
@media (max-width: 768px) {
  #th-product-instagram {
    padding: 48px 0 !important;
    background: #fff !important;
  }

  #th-product-instagram .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #th-product-instagram .section-title,
  #th-product-instagram .th-section-title-mb {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
    margin: 0 0 28px !important;
    padding: 0 20px !important;
  }

  #th-product-instagram .swiper.th-product-instagram-slider {
    padding: 0 20px 30px !important;
  }

  #th-product-instagram .th-pb-80 {
    padding-bottom: 8px !important;
  }
}


/* ============================================================
   13. TAKE THE NEXT STEP (NEED HELP)
   Design: pad 48px 20px | title 20 | grid 2 | circle 72
   orphan last item centred at calc(50% - 10px)
   ============================================================ */
@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-pb-50 {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 36px !important;
  }

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

  #need-help-section .th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #33322f !important;
    margin: 0 0 16px !important;
  }

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

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

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

  .th-need-help-container.grid-5 .th-item-form:last-child:nth-child(odd),
  .th-need-help-container.grid-5 .th-item-help:last-child:nth-child(odd),
  .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;
  }

  .th-item-help {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .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: 1px solid #e8e8e8 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    color: #231f20 !important;
    font-size: 24px !important;
    aspect-ratio: 1 !important;
    flex-shrink: 0 !important;
  }

  .th-item-help .th-btn-circle-icon i {
    font-size: 24px !important;
  }

  .th-item-help h6.th-item-title-bold,
  .th-item-help .th-item-title-bold {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    min-height: auto !important;
    color: #231f20 !important;
    padding-top: 10px !important;
  }

  .th-item-help .th-description.th-need-to-help-des-my,
  .th-item-help .th-description {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    color: #6b6863 !important;
  }

  .th-item-help .th-link a,
  .th-item-help .th-link .th-link-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    border-bottom: 1px solid #231f20 !important;
    padding-bottom: 0px !important;
    text-decoration: none !important;
    padding-top: 10px !important;
  }

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


/* ============================================================
   14. FOOTER
   Design: bg #eaeaec | pad 32px 0 0 / 0 20px
   News: title 16/600, desc 12 mb12
   form: column gap 10 | input 100% h44 | btn 100% pad 11px 0
   nav: flex wrap, links 12px pad 4px 8px, NO pipe borders
   social: 36px circles gap 16 | copyright left, 11px #6c757d
   ============================================================ */
@media (max-width: 768px) {
  #footer-section-container,
  #footer-section-container.th-footer,
  #footer-section-container.bg-gray {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
    background: #eaeaec !important;
    background-color: #eaeaec !important;
  }

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

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

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

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

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

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

  /* Top contact email/phone only — NOT office phone rows
     (those also use .text-weight-600.pt-10) */
  #footer-section-container .footer-left-content > .text-weight-600.pt-10 {
    margin-bottom: 24px !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  #footer-section-container .footer-left-content > .text-weight-600.pt-10 .d-flex.align-items-center {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !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;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 0 1 auto !important;
  }

  /* Kill .pr-5 / .th-pr-5 and the old width:0 hack so email + phone
     share the same tight 8px gap (phone glyph was reading much looser) */
  #footer-section-container .footer-left-content .d-flex.align-items-center > i,
  #footer-section-container .th-showroom-address .d-flex.align-items-center > i {
    padding: 0 !important;
    margin: 0 !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    flex: 0 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

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

  /* Kill desktop grid that left a 1fr gap and centered phone rows */
  #footer-section-container .th-showroom-address {
    display: block !important;
    padding-top: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }

  #footer-section-container .th-showroom-address p.th-footer-heading {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    color: #231f20 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address p.th-address-line {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    min-height: 0 !important;
    text-align: left !important;
  }

  /* Office phone — keep icon + number on one left-aligned row */
  #footer-section-container .th-showroom-address .d-flex.align-items-center,
  #footer-section-container .th-showroom-address .d-flex.align-items-center.text-weight-600 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address .d-flex.align-items-center p {
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address p.th-opening-hours,
  #footer-section-container .th-showroom-address .footer-phone-link,
  #footer-section-container .th-showroom-address a {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* ---- Krost News / subscription ---- */
  #footer-section-container .col-lg-4 .th-subscription,
  #footer-section-container .th-subscription {
    padding: 24px 0 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(33, 37, 41, 0.18) !important;
    margin: 24px 0 0 !important;
    width: 100% !important;
  }

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

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

  /* Kill desktop side-by-side form (541px sets input width:175px) */
  #footer-section-container .th-subscription .th-subscription-form,
  #footer-section-container #subscription-form-container,
  #footer-section-container .th-subscription-form {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 0 !important;
    width: 100% !important;
  }

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

  #footer-section-container .th-subscription-form input,
  #footer-section-container .th-subscription-form input[type="email"],
  #footer-section-container .th-subscription-form input.form-control,
  #footer-section-container .th-subscription .th-subscription-form input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

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

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

  /* ---- Nav links: no pipe separators ---- */
  #footer-section-container .th-footer-navigation {
    padding: 12px 0 0 !important;
    margin: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

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

  #footer-section-container .th-footer-navigation ul li .link,
  #footer-section-container .th-footer-navigation ul li .link.class,
  #footer-section-container .th-footer-navigation ul li .link.border-right-0 {
    display: block !important;
    border: none !important;
    border-right: 0 !important;
    padding: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul li a {
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #231f20 !important;
    padding: 4px 8px !important;
    text-decoration: none !important;
  }

  /* ---- Follow Us ---- */
  #footer-section-container .th-footer-follow {
    padding: 16px 0 0 !important;
    margin: 0 !important;
  }

  #footer-section-container .th-footer-follow p {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  #footer-section-container .social-media-list,
  #footer-section-container .social-media ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #footer-section-container .social-media-item {
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer-section-container .social-media-item .link a,
  #footer-section-container .social-media-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !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;
    background: transparent !important;
  }

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

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

  #footer-section-container .th-footer-copyright-content,
  .th-footer-copyright-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !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 a,
  .th-footer-copyright .text-muted,
  .th-footer-copyright .copyright-text-right,
  .th-footer-copyright a {
    font-size: 11px !important;
    color: #6c757d !important;
    text-align: left !important;
  }
}


/* ============================================================
   15. GENERAL TYPOGRAPHY & SPACING
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-size: 14px !important;
    color: #33322f;
  }

  .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-section-header-pb-50 {
    padding-bottom: 20px !important;
  }

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

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

  a {
    color: inherit;
    text-decoration: none;
  }
}


/* ============================================================
   16. EXTRA SMALL DEVICES (max-width: 390px)
   ============================================================ */
@media (max-width: 390px) {
  /* Keep hero title at design 26px — do not shrink */
  #hero-product .th-hero-title,
  #hero-product .th-hero-title.th-hero-title-mb,
  #hero-product .th-hero-container .th-hero-style .th-hero-title {
    font-size: 26px !important;
  }

  #need-help-section .th-section-title,
  #th-product-features .th-section-title,
  #th-product-related-family .th-section-title {
    font-size: 20px !important;
  }

  .th-need-help-container,
  .th-need-help-container.grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 16px !important;
  }

  #footer-section-container .th-subscription-form,
  #footer-section-container .th-subscription .th-subscription-form {
    flex-direction: column !important;
  }

  #footer-section-container .th-subscription-form .link,
  #footer-section-container .th-subscription .th-subscription-form .link {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   17. HIDE DESKTOP-ONLY ELEMENTS ON MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .th-component-edit-link {
    display: none !important;
  }

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

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

  .th-label.th-item-subtitle-my {
    display: none !important;
  }
}