/*
 * mobile-category-workstations.css
 * Mobile-only overrides for category pages (max-width: 768px):
 *   details-workstations / details-seating / details
 * Target design: category-mobile-new.html (390px viewport)
 *
 * Purely additive — rules only apply inside media queries
 * and do NOT affect desktop styles.
 */

/* Desktop: keep FA plus; hide preview text "+" */
:is(#workstations-categories, #category-seating-details, #category-details) .product-card__pin-plus {
  display: none;
}

/* ============================================================
   1. TOP BAR — match preview .top-bar
   ============================================================ */
@media (max-width: 768px) {
  .th-header [data-v-header-component-link] {
    display: none !important;
  }

  .th-topbar,
  .th-topbar.top-bar {
    height: 44px !important;
    min-height: 44px !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex-direction: row !important;
  }

  .th-topbar .position-relative.container,
  .th-topbar .top-bar__inner,
  .th-topbar.top-bar .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    height: 44px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

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

  .th-topbar-text,
  .th-topbar .top-bar__promo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
  }

  .th-topbar .contact-sales {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

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

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


/* ============================================================
   2. HEADER / NAVIGATION BAR — match preview .site-header
   ============================================================ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

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

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

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

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

  .sticky-wrapper.desktop-menu .menu-area .row,
  .sticky-wrapper.site-header .site-header__row,
  .sticky-wrapper.site-header .row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-content: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 60px !important;
    width: 100% !important;
  }

  .sticky-wrapper .col-4.d-flex,
  .sticky-wrapper .site-header__left,
  .sticky-wrapper .site-header__logo-col,
  .sticky-wrapper .site-header__right {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

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

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

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

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

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

  button.th-menu-toggle.d-block.d-lg-none i,
  button.th-menu-toggle.site-header__menu i {
    font-size: 18px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

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

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

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

  .sticky-wrapper .d-flex.align-items-end.gap-3,
  .sticky-wrapper .site-header__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
    color: #231f20 !important;
  }

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

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

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

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


/* ============================================================
   3. CATEGORY STRIP — match category-mobile-new .cat-strip
      Uses ORIGINAL hero markup (h6 / fa-chevron / card-body).
      No HTML class changes required in the include.
   ============================================================ */
@media (max-width: 768px) {
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-categories-list {
    display: none !important;
  }

  /* Force strip visible through 768 (theme may hide above ~541px) */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: #fff !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories.th-section,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories.pb-0 {
    padding: 0 !important;
    padding-bottom: 0 !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories .container,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories .th-container,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories .row,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories .col-md-12 {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Preview .cat-strip surface */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories-indside {
    display: block !important;
    padding: 0 20px !important;
    margin: 0 !important;
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    box-shadow: none !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories-indside > h6 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }

  /* Toggle — preview .cat-strip__toggle */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories-indside > h6 > a,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-bs-toggle="collapse"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #231f20 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0 !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories-indside > h6 > a:hover,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories-indside > h6 > a:focus,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-bs-toggle="collapse"]:hover,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-bs-toggle="collapse"]:focus {
    color: #231f20 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-categoryhero-taxonomy_item_content-name] {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #231f20 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  /* Match preview .cat-strip__chevron (▾ / ▴) — not FA chevron-down */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories #toggleIcon {
    flex-shrink: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1 !important;
    color: #231f20 !important;
    width: 1em !important;
    height: 1em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: rotate(0deg) !important;
    transition: transform 0.35s ease !important;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
  }

  /* Replace FA glyph with preview ▾ */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories #toggleIcon::before {
    content: "▾" !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1 !important;
    color: #231f20 !important;
  }

  /* Open = ▴ look (▾ rotated 180°) — matches preview open state */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-bs-toggle="collapse"][aria-expanded="true"] #toggleIcon {
    transform: rotate(180deg) !important;
  }

  /* Collapse panel: no padding (avoids jump during height anim) */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories #collapseMenu {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories #collapseMenu.collapsing {
    padding: 0 !important;
    transition: height 0.35s ease !important;
  }

  /* Kill theme card-body spacing; bottom pad on the list instead */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories #collapseMenu .card-body {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-category-hero-subcategories-mobile], 
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-categoryhero-subcategories-mobile] {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border: 0 !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-category-hero-subcategories-mobile] > li,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-categoryhero-subcategories-mobile] > li {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Child link — preview .cat-strip__child */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-category-hero-subcategories-mobile] > li > a,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-categoryhero-subcategories-mobile] > li > a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    text-decoration: none !important;
    text-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #f0efed !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-category-hero-subcategories-mobile] > li > a:hover,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-mobile-categories [data-v-categoryhero-subcategories-mobile] > li > a:hover {
    color: #231f20 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  /* Active subcategory — match desktop li.active (bold + underline) */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero)
    .th-hero-mobile-categories
    [data-v-categoryhero-subcategories-mobile]
    > li.active
    > a,
    :is(#category-workstation-hero, #category-seating-hero, #category-hero)
    .th-hero-mobile-categories
    [data-v-category-hero-subcategories-mobile]
    > li.active
    > a,
    :is(#category-workstation-hero, #category-seating-hero, #category-hero)
    .th-hero-mobile-categories
    [data-v-category-hero-subcategories-mobile]
    > li.active
    > a.th-hero-subcategory,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero)
    .th-hero-mobile-categories
    [data-v-categoryhero-subcategories-mobile]
    > li.active
    > a.th-hero-subcategory {
    font-weight: 700 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }
}


/* ============================================================
   4. HERO — match preview .hero
   ============================================================ */
@media (max-width: 768px) {
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) {
    padding: 0 !important;
    margin: 0 !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-wrapper,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) #hero.th-hero-wrapper {
    position: relative !important;
    min-height: 380px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-wrapper::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(35, 31, 32, 0.3) 0%,
      rgba(35, 31, 32, 0.78) 100%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-wrapper .container,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-section {
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px !important;
    margin: 0 !important;
    min-height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-wrapper .row,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-wrapper .col-xl-12 {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* preview .hero__breadcrumb — Home / Workstations */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-breadcrumb {
    padding: 0 0 24px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-breadcrumb > [aria-label="breadcrumb"] {
    width: 100% !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-admin-links {
    display: none !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb {
    --bs-breadcrumb-divider: "/";
    --bs-breadcrumb-item-padding-x: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: transparent !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    color: #fff !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item + .breadcrumb-item {
    padding-left: 0 !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    opacity: 0.6 !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item a,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item span,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item.font-white,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb .font-white {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  /* Current crumb (last) — match preview .hero__breadcrumb-current */
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item:last-child a[href=""],
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item:last-child a:not([href]),
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item.active,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .breadcrumb-item:last-child span {
    color: #fff !important;
    pointer-events: none !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .way-points-container,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .way-point {
    display: none !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-style,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-style-category {
    margin: 0 !important;
    padding: 0 0 8px !important;
    margin-top: auto !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-title {
    font-size: 26px !important;
    line-height: 1.18 !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    color: #fff !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-title span {
    color: #fff !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  :is(#category-workstation-hero, #category-seating-hero, #category-hero) .th-hero-subtitle,
  :is(#category-workstation-hero, #category-seating-hero, #category-hero) [data-v-categoryhero-taxonomy_item_content-content] {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ============================================================
   5. PRODUCT SECTIONS — pixel match category-mobile-new
      .product-section / .rail / .product-card
   ============================================================ */
@media (max-width: 768px) {
  :is(#workstations-categories, #category-seating-details, #category-details) {
    padding-top: 48px !important;
    padding-bottom: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details).pt-60 {
    padding-top: 48px !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) > section,
  :is(#workstations-categories, #category-seating-details, #category-details) :is(section, div)[id^="th-product-slider"],
  :is(#workstations-categories, #category-seating-details, #category-details) section.th-section-py {
    padding: 0 0 48px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .container.th-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .row {
    margin: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header.th-section-header-pb-50 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 20px 20px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header-wrapper.left,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-title,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-title.th-section-title-mb,
  :is(#workstations-categories, #category-seating-details, #category-details) h2[data-v-categorydetails-taxonomy_item_content-name],
  :is(#workstations-categories, #category-seating-details, #category-details) h2[data-v-categoryseatingdetails-taxonomy_item_content-name],
  :is(#workstations-categories, #category-seating-details, #category-details) h2[data-v-categoryworkstationdetails-taxonomy_item_content-name] {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #231f20 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-subtitle,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-subtitle.th-section-subtitle-mb,
  :is(#workstations-categories, #category-seating-details, #category-details) [data-v-categorydetails-taxonomy_item_content-content],
  :is(#workstations-categories, #category-seating-details, #category-details) [data-v-categoryseatingdetails-taxonomy_item_content-content],
  :is(#workstations-categories, #category-seating-details, #category-details) [data-v-categoryworkstationdetails-taxonomy_item_content-content] {
    font-size: 12px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header .right {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header-link,
  :is(#workstations-categories, #category-seating-details, #category-details) a.th-section-header-link,
  :is(#workstations-categories, #category-seating-details, #category-details) a[data-v-categorydetails-taxonomy_item_content-products_link],
  :is(#workstations-categories, #category-seating-details, #category-details) a[data-v-categoryseatingdetails-taxonomy_item_content-products_link],
  :is(#workstations-categories, #category-seating-details, #category-details) a[data-v-categoryworkstationdetails-taxonomy_item_content-products_link] {
    display: inline !important;
    align-items: center !important;
    gap: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-view-all-btn,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header-link span.th-view-all-btn,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-mr-7 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-header-link-btn {
    display: none !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-section-body .col-md-12 {
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Exact preview .rail {
       display: flex; gap: 16px; overflow-x: auto;
       padding: 0 20px 16px;
     } */
  :is(#workstations-categories, #category-seating-details, #category-details) .swiper.th-featured-products-slider,
  :is(#workstations-categories, #category-seating-details, #category-details) .swiper.product-rail {
    --swiper-scrollbar-sides-offset: 0px;
    --swiper-scrollbar-size: 2px;
    --swiper-scrollbar-bottom: 0px;
    --swiper-scrollbar-bg-color: transparent;
    --swiper-scrollbar-drag-bg-color: #cfccc9;
    padding: 0 20px 30px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .swiper-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .swiper-slide {
    width: 262px !important;
    min-width: 262px !important;
    max-width: 262px !important;
    height: auto !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
  }

  /* Scrollbar = preview rail ::-webkit-scrollbar (full width of rail) */
  :is(#workstations-categories, #category-seating-details, #category-details) .swiper-horizontal > .swiper-scrollbar,
  :is(#workstations-categories, #category-seating-details, #category-details) .swiper-scrollbar.swiper-scrollbar-horizontal,
  :is(#workstations-categories, #category-seating-details, #category-details) .swiper-scrollbar {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 2px !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 10 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .swiper-scrollbar-drag {
    background: #cfccc9 !important;
    border-radius: 5px !important;
    height: 2px !important;
    top: -3px !important;
  }

  /* Product card: no outer padding (preview .product-card) */
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card {
    width: 100% !important;
    max-width: 262px !important;
    min-width: 0 !important;
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-img-container,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-product-image,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-product-image-px,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__media {
    position: relative !important;
    border: 1px solid #e8e8e8 !important;
    background: #fff !important;
    padding: 10px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-img-container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-img-container img,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-img-container > a img,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__img {
    width: 100% !important;
    height: 212px !important;
    max-height: 212px !important;
    object-fit: contain !important;
    display: block !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-add-to-pinboard,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-add-to-pinboard,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-add-to-pinboard.top-right-30,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__pin {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: #f0efed !important;
    background-color: #f0efed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #231f20 !important;
    text-transform: none !important;
    text-shadow: none !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-add-to-pinboard:hover,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-add-to-pinboard.active,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__pin:hover {
    background: #f0efed !important;
    background-color: #f0efed !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* Preview pin "+" (category-mobile-new .product-card__pin) — hide FA + theme pseudos */
  :is(#workstations-categories, #category-seating-details, #category-details) .th-add-to-pinboard::before,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-add-to-pinboard::after {
    content: none !important;
    display: none !important;
  }

  /* Workstations: text "+" ; seating/details: FA plus (no pin-plus span) */
  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard:has(.product-card__pin-plus)
    i,
  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard:has(.product-card__pin-plus)
    .fa-plus {
    display: none !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard:not(:has(.product-card__pin-plus))
    i,
  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard:not(:has(.product-card__pin-plus))
    .fa-plus {
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #231f20 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard
    .product-card__pin-plus {
    display: block !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #231f20 !important;
    text-transform: none !important;
    text-shadow: none !important;
  }

  /*
   * Click loader: hide + so spinner stays centered (same as desktop).
   * vue-universal-app appends .spinner-border and sets aria-busy.
   */
  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard[aria-busy="true"]
    .product-card__pin-plus,
  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard:has(.spinner-border)
    .product-card__pin-plus,
  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard[aria-busy="true"]
    i,
  :is(#workstations-categories, #category-seating-details, #category-details)
    .th-add-to-pinboard:has(.spinner-border)
    i {
    display: none !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-add-to-pinboard .spinner-border {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
    --bs-spinner-width: 18px !important;
    --bs-spinner-height: 18px !important;
    --bs-spinner-border-width: 2px !important;
    border-width: 2px !important;
    color: #231f20 !important;
    vertical-align: middle !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-footer,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__body {
    padding: 16px 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-footer > a {
    text-decoration: none !important;
    display: block !important;
    text-shadow: none !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-title,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-item-title,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-prouct-title-my,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product h3.th-title,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__name,
  :is(#workstations-categories, #category-seating-details, #category-details) h3[data-v-categorydetails-product_content-name],
  :is(#workstations-categories, #category-seating-details, #category-details) h3[data-v-categoryseatingdetails-product_content-name],
  :is(#workstations-categories, #category-seating-details, #category-details) h3[data-v-categoryworkstationdetails-product_content-name] {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-description,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-product .th-mb-10,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__desc,
  :is(#workstations-categories, #category-seating-details, #category-details) p[data-v-categorydetails-product_content-tag_line],
  :is(#workstations-categories, #category-seating-details, #category-details) p[data-v-categoryseatingdetails-product_content-tag_line],
  :is(#workstations-categories, #category-seating-details, #category-details) p[data-v-categoryworkstationdetails-product_content-tag_line] {
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-tag-name,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-card__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-tag,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-tag-p,
  :is(#workstations-categories, #category-seating-details, #category-details) .th-tag-name .th-tag,
  :is(#workstations-categories, #category-seating-details, #category-details) .product-tag,
  :is(#workstations-categories, #category-seating-details, #category-details) [data-v-categorydetails-tag],
  :is(#workstations-categories, #category-seating-details, #category-details) [data-v-categoryseatingdetails-tag],
  :is(#workstations-categories, #category-seating-details, #category-details) [data-v-categoryworkstationdetails-tag] {
    display: inline-block !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    padding: 6px 9px !important;
    margin: 0 !important;
    color: #33322f !important;
    background: #e9e8e6 !important;
    background-color: #e9e8e6 !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 0 !important;
    text-transform: none !important;
  }

  :is(#workstations-categories, #category-seating-details, #category-details) .th-item-finish-circle {
    display: none !important;
  }
}

/* ============================================================
   6. SUBCATEGORY PRODUCT GRID — #th-products-list
      Pixel match Sub-Category Mobile (standalone).html
      Header: padding 40px 20px 0 | title 20/700 | subtitle 12/1.65
      Grid: 2 col | gap 28px 16px | pad 24px 20px 0
      Card: 1:1 image radius 10 | pin 34 white | name 15/600
      Mobile-only — desktop product-list styles are unchanged.
   ============================================================ */
@media (max-width: 768px) {
  #th-products-list {
    padding: 40px 0 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  #th-products-list > .container.th-container,
  #th-products-list .container.th-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  #th-products-list #product-desk-modesty-panel {
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-products-list .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #th-products-list .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Header — standalone <section style="padding:40px 20px 0"> */
  #th-products-list .th-section-header,
  #th-products-list .th-section-header.th-section-header-pb-50 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 20px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #th-products-list .th-section-header-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #th-products-list .th-section-title,
  #th-products-list .th-section-title.th-section-title-mb,
  #th-products-list h2[data-v-productlist-section_title] {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #231f20 !important;
  }

  #th-products-list .th-section-subtitle,
  #th-products-list .th-section-subtitle.th-section-subtitle-mb,
  #th-products-list [data-v-productlist-section_subtitle] {
    font-size: 12px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 34em !important;
  }

  #th-products-list .product-filters {
    display: none !important;
  }

  /* Grid — standalone gap:28px 16px; padding:24px 20px 0 */
  #th-products-list .th-products-list-wrapper,
  #th-products-list .row.th-products-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 16px !important;
    row-gap: 28px !important;
    column-gap: 16px !important;
    padding: 24px 20px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #th-products-list .th-item-product,
  #th-products-list .th-item-product.col-6,
  #th-products-list .th-item-product.col-sm-6,
  #th-products-list .th-item-product.col-md-4,
  #th-products-list .th-item-product.col-lg-4 {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    grid-column: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
  }

  /* Image — 1:1, radius 10px, border #e8e8e8, inner pad 4px */
  #th-products-list .th-item-product .th-img-container,
  #th-products-list .th-item-product .th-cateogry-product-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 4px !important;
    margin: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #th-products-list .th-item-product .th-img-container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  #th-products-list .th-item-product .th-img-container img,
  #th-products-list .th-item-product .th-img-container > a img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  #th-products-list .th-item-product .th-img-container:hover {
    border-color: #231f20 !important;
  }

  /* Pin — 34px white circle, 1px #e0e0e0, top/right 10px */
  #th-products-list .th-add-to-pinboard,
  #th-products-list .th-item-product .th-add-to-pinboard,
  #th-products-list .th-item-product .th-add-to-pinboard.top-right-30 {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-color: #ffffff !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;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #231f20 !important;
    text-transform: none !important;
    text-shadow: none !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    cursor: pointer !important;
  }

  #th-products-list .th-add-to-pinboard:hover,
  #th-products-list .th-add-to-pinboard.active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e0e0e0 !important;
    text-shadow: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }

  #th-products-list .th-add-to-pinboard::before,
  #th-products-list .th-add-to-pinboard::after {
    content: none !important;
    display: none !important;
  }

  #th-products-list .th-add-to-pinboard i,
  #th-products-list .th-add-to-pinboard .fa-plus {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #231f20 !important;
  }

  #th-products-list .th-add-to-pinboard[aria-busy="true"] i,
  #th-products-list .th-add-to-pinboard:has(.spinner-border) i {
    display: none !important;
  }

  #th-products-list .th-add-to-pinboard .spinner-border {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 16px !important;
    --bs-spinner-width: 16px !important;
    --bs-spinner-height: 16px !important;
    --bs-spinner-border-width: 2px !important;
    border-width: 2px !important;
    color: #231f20 !important;
    vertical-align: middle !important;
  }

  /* Name + description — title margin 12px 0 4px */
  #th-products-list .th-item-footer {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  #th-products-list .th-item-footer > a {
    display: block !important;
    margin: 12px 0 4px !important;
    padding: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  #th-products-list .th-item-product .th-item-title,
  #th-products-list .th-item-product .th-prouct-title-my,
  #th-products-list .th-item-product h3.th-item-title,
  #th-products-list h3[data-v-productlistitem-name] {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
  }

  #th-products-list .th-item-footer > a:hover .th-item-title,
  #th-products-list .th-item-footer > a:hover h3 {
    text-decoration: underline !important;
    text-shadow: none !important;
  }

  #th-products-list .th-item-product .th-description,
  #th-products-list .th-item-product .th-mb-10,
  #th-products-list p[data-v-productlistitem-description] {
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Standalone product cards do not show tags */
  #th-products-list .th-tag-name,
  #th-products-list .th-item-finish-circle {
    display: none !important;
  }
}

/* ============================================================
   13. TAKE THE NEXT STEP (NEED HELP)
   Header: Untitled-1 / home mobile title+subtitle
   Items: pad 48/20 | grid 2 | circle 72 | orphan centred
   ============================================================ */
@media (max-width: 768px) {
  #need-help-section {
    padding: 48px 20px !important;
    background: #ffffff !important;
  }

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

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

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

  /* Header (need-help-section.html 8–17) — from Untitled-1 */
  #need-help-section .th-section-header,
  #need-help-section .th-section-header.th-section-header-pb-50,
  #need-help-section .th-section-header.sectionHeaderClass {
    display: block !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

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

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

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

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

  .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: 2px !important;
    text-decoration: none !important;
    padding-top: 10px !important;
  }

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

/* ============================================================
   7. SMALL PHONE TWEAKS (≤390px)
   ============================================================ */
@media (max-width: 390px) {
  :is(#workstations-categories, #category-seating-details, #category-details) .swiper-slide {
    width: 262px !important;
  }
}