/* product-filter.html */
.ssf-filter-root {
--brand-blue: #034EA2;
      --brand-gold: #F1B209;
      --panel-border: #dcdcdc;
      --soft-gray: #EDEBED;
      --row-gray: #EDEBED;
      --label-gray: #D3D3D3;
      --text-dark: #222222;
}

.ssf-filter-root {
margin: 0;
      font-family: 'Barlow', sans-serif;
      color: var(--text-dark);
      background: linear-gradient(180deg, #fafafa 0%, #efefef 100%);
}

.ssf-filter-root .prototype-shell {
max-width: 1360px;
      margin: 0 auto;
      padding: 28px 18px 42px;
}

.ssf-filter-root .page-title {
margin-bottom: 22px;
      color: var(--brand-blue);
      font-size:2rem;
      font-weight: 700;
      letter-spacing: 0.01em;
}

.ssf-filter-root .panel-card {
background: #fff;
      border: 1px solid var(--panel-border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      padding: 22px;
}

.ssf-filter-root .main-layout {
display: grid;
      grid-template-columns: 424px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
}

.ssf-filter-root .right-column {
display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
}

.ssf-filter-root .field-label {
display: block;
      margin-bottom: 10px;
      font-size: 1.2rem;
      font-weight: 600;
      color: #161616;
}

.ssf-filter-root .custom-select {
height: 44px;
      border-radius: 0;
      border: 1px solid #dfe3ea;
      background-color: #eef1f5;
      font-size: 1rem;
      color: #333;
}

.ssf-filter-root #filterType {
padding-right: 42px;
      background-image: url("img/arrow-black.png");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 14px auto;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}

.ssf-filter-root #filterCategory {
padding-right: 42px;
      background-image: url("img/arrow-black.png");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 14px auto;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}

.ssf-filter-root .filter-group + .filter-group {
margin-top: 18px;
}

.ssf-filter-root .shape-grid {
display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
}

.ssf-filter-root .shape-card {
border: 2px solid #ececec;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      padding: 10px;
      text-align: center;
      cursor: pointer;
      transition: 0.2s ease;
}

.ssf-filter-root .shape-card:hover, .ssf-filter-root .shape-card:focus {
outline: none;
      border-color: #f3c53a;
      box-shadow: 0 4px 12px rgba(255, 191, 0, 0.24);
}

.ssf-filter-root .shape-card.active {
border-color: var(--brand-gold);
      box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.45);
}

.ssf-filter-root .shape-thumb {
position: relative;
      height: 146px;
      margin-bottom: 10px;
      border: 1px solid #dddddd;
      background: linear-gradient(135deg, #fafafa 0%, #e5e5e5 100%);
      overflow: hidden;
}

.ssf-filter-root .shape-thumb::before, .ssf-filter-root .shape-thumb::after, .ssf-filter-root .diagram-placeholder::before, .ssf-filter-root .diagram-placeholder::after {
content: "";
      position: absolute;
}

.ssf-filter-root .shape-thumb::before, .ssf-filter-root .diagram-placeholder::before {
inset: 16% 31%;
      border: 3px solid rgba(15, 76, 151, 0.32);
      border-radius: 50%;
}

.ssf-filter-root .shape-thumb::after, .ssf-filter-root .diagram-placeholder::after {
left: 22%;
      top: 14%;
      width: 56%;
      height: 68%;
      border: 2px dashed rgba(244, 75, 75, 0.65);
}

.ssf-filter-root .shape-title {
display: block;
      margin: 0;
      padding-top: 6px;
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--text-dark);
}

.ssf-filter-root .example-title, .ssf-filter-root .dimension-title, .ssf-filter-root .results-title {
color: var(--brand-blue);
      font-size: 1.15rem;
      font-weight: 700;
}

.ssf-filter-root .filter-right-top {
display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
}

.ssf-filter-root .diagram-placeholder {
position: relative;
      min-height: 318px;
      margin-top: 10px;
      border: 1px solid #dddddd;
      background: linear-gradient(135deg, #f9f9f9 0%, #e1e1e1 100%);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8c8c8c;
      font-weight: 600;
}

.ssf-filter-root .dimension-panel {
display: none;
}

.ssf-filter-root .dimension-panel.is-visible {
display: block;
}

.ssf-filter-root .dimensions-grid {
margin-top: 8px;
}

.ssf-filter-root .dimension-measurements {
position: relative;
}

.ssf-filter-root .dimension-divider {
display: none; /* replaced by border-right on .dimension-name */
}

/* Divider column — the 2px grid cell between mm and Tolerance */
.ssf-filter-root .dim-divider-col {
background: #E7EAEF;
      align-self: stretch;
      width: 2px;
}

.ssf-filter-root .dimension-row {
display: grid;
      grid-template-columns: 70px 1.5fr 74px 48px 100px 88px;
      align-items: center;
      min-height: 38px;
      margin-bottom: 0;
      background: transparent;
}

.ssf-filter-root .dimension-row.has-row-bg {
background: var(--row-gray);
}

.ssf-filter-root .dimension-row.thread-row {
background: var(--row-gray);
}

.ssf-filter-root .dimension-code {
align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 7px;
      background: var(--label-gray);
      font-size: 0.92rem;
      font-weight: 700;
}

.ssf-filter-root .dimension-name, .ssf-filter-root .dimension-unit, .ssf-filter-root .dimension-tolerance {
padding: 0 6px;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
}

.ssf-filter-root .dimension-input, .ssf-filter-root .thread-input {
width: calc(100% - 8px);
      height: 27px;
      margin-left: 4px;
      border: 1px solid #dbdbdb;
      background: #fff;
      padding: 0 6px;
      font-size: 0.86rem;
}

.ssf-filter-root .thread-input, .ssf-filter-root .thread-select {
width: 100%;
      margin-left: 0;
}

.ssf-filter-root .thread-select {
width: fit-content;
      height: 27px;
      border: 1px solid #dbdbdb;
      border-radius: 0;
      background-color: #fff;
      background-image:
        url("img/arrow-white.png"),
        linear-gradient(to right, #ffffff 0, #ffffff calc(100% - 29px), #F1B209 calc(100% - 29px), #F1B209 100%);
      background-repeat: no-repeat, no-repeat;
      background-position: right 6px center, left top;
      background-size: 16px auto, 100% 100%;
      padding: 0 34px 0 8px;
      font-size: 0.86rem;
      white-space: nowrap;
      color: #555;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}

.ssf-filter-root .tolerance-select {
width: 100%;
      height: 27px;
      border: 1px solid #dbdbdb;
      border-radius: 0;
      background-color: #fff;
      background-image:
        url("img/arrow-white.png"),
        linear-gradient(to right, #ffffff 0, #ffffff calc(100% - 29px), #F1B209 calc(100% - 29px), #F1B209 100%);
      background-repeat: no-repeat, no-repeat;
      background-position: right 6px center, left top;
      background-size: 16px auto, 100% 100%;
      padding: 0 34px 0 8px;
      font-size: 0.82rem;
      font-weight: 500;
      color: #555;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}

.ssf-filter-root .search-action {
display: flex;
      justify-content: flex-end;
      margin-top: 26px;
}

.ssf-filter-root .search-button {
display: inline-flex;
      align-items: center;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ssf-filter-root .search-button:hover, .ssf-filter-root .search-button:focus {
outline: none;
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(3, 78, 162, 0.18);
}

.ssf-filter-root .search-button:active {
transform: translateY(0);
      box-shadow: 0 2px 6px rgba(3, 78, 162, 0.16);
}

.ssf-filter-root .search-button-label {
min-width: 165px;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      background: #f1f2f5;
      font-size: 0.96rem;
      font-weight: 500;
      transition: background-color 0.18s ease, color 0.18s ease;
}

.ssf-filter-root .search-button-icon {
width: 52px;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-gold);
      position: relative;
      color: transparent;
      font-size: 0;
      line-height: 0;
      transition: background-color 0.18s ease;
}

.ssf-filter-root .search-button-icon::before {
content: "";
      width: 16px;
      height: 16px;
      background-image: url("img/arrow-white.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 16px auto;
      transform: rotate(-90deg);
      transition: transform 0.18s ease;
}

.ssf-filter-root .search-button:hover .search-button-label, .ssf-filter-root .search-button:focus .search-button-label {
background: #e6eef8;
      color: var(--brand-blue);
}

.ssf-filter-root .search-button:hover .search-button-icon, .ssf-filter-root .search-button:focus .search-button-icon {
background: #034EA2;
}

.ssf-filter-root .search-button:hover .search-button-icon::before, .ssf-filter-root .search-button:focus .search-button-icon::before {
transform: rotate(-90deg) scale(1.08);
}

.ssf-filter-root .search-button:active .search-button-label {
background: #dbe7f7;
}

.ssf-filter-root .search-button:active .search-button-icon {
background: #023b7c;
}

.ssf-filter-root .results-panel {
display: none;
}

.ssf-filter-root .results-panel.is-visible {
display: block;
}

.ssf-filter-root .result-meta {
margin-top: 4px;
      margin-bottom: 14px;
      color: #8d8d8d;
      font-size: 0.95rem;
      font-weight: 500;
}

.ssf-filter-root .results-table-wrap {
overflow-x: visible;
      width: 100%;
}

.ssf-filter-root .results-scrollbar {
display: none;
}

.ssf-filter-root .results-table {
width: 100%;
      min-width: 0;
      margin-bottom: 20px;
      border: 1px solid #dfe3ea;
      table-layout: fixed;
}

.ssf-filter-root .results-table th {
background: var(--brand-gold);
      color: #fff;
      border-color: #f6d978;
      text-align: center;
      vertical-align: middle;
      font-size: 1rem;
      font-weight: 700;
      white-space: nowrap;
}

.ssf-filter-root .results-table th small {
font-size: 0.78rem;
      font-weight: 500;
      color: #3C3C3C;
      padding-left: 3px;
      opacity: 1;
}

.ssf-filter-root .results-table td {
text-align: center;
      vertical-align: middle;
      border-color: #dfe3ea;
      font-size: 0.95rem;
      background: #fff;
      white-space: nowrap;
}

.ssf-filter-root .results-table tbody tr:nth-child(even) td {
background: #edf1f6;
}

.ssf-filter-root .results-table tbody tr {
cursor: pointer;
}

.ssf-filter-root .sku-link {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 72px;
      min-height: 26px;
      padding: 0 8px;
      border: 1px solid var(--brand-gold);
      border-radius: 999px;
      background: #fff;
      color: #222;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
}

.ssf-filter-root .sku-link:hover, .ssf-filter-root .sku-link:focus {
background: var(--brand-gold);
      color: #fff;
      text-decoration: none;
}

.ssf-filter-root .pagination-shell {
display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
}

.ssf-filter-root .page-button {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      height: 38px;
      padding: 0 6px;
      border: 1px solid #dddddd;
      border-radius: 10px;
      background: #fff;
      font-size: 0.95rem;
      font-weight: 500;
      color: #334155;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
      cursor: pointer;
      line-height: 1;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ssf-filter-root .page-button:hover:not(.disabled):not(.active) {
background: #f1f5f9;
      border-color: #bbb;
}

.ssf-filter-root .page-button.nav-button {
font-size: 1.25rem;
      min-width: 38px;
      padding: 0 10px;
      color: #555;
}

.ssf-filter-root .page-button.nav-button::before,
.ssf-filter-root .page-button.nav-button::after {
display: none;
}

.ssf-filter-root .page-button.active {
border-color: var(--brand-gold);
      background: var(--brand-gold);
      color: #fff;
      font-weight: 700;
}

.ssf-filter-root .page-button.disabled {
opacity: 0.4;
      cursor: default;
      pointer-events: none;
}

.ssf-filter-root .page-ellipsis {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 38px;
      color: #94a3b8;
      font-size: 0.9rem;
      pointer-events: none;
}

@media (max-width: 1199.98px) {
.ssf-filter-root .main-layout {
grid-template-columns: 1fr;
}

}

@media (max-width: 991.98px) {
.ssf-filter-root .page-title {
font-size: 2.5rem;
}

.ssf-filter-root .filter-right-top {
grid-template-columns: 1fr;
}

.ssf-filter-root .dimension-row {
grid-template-columns: 55px 3fr 66px 30px 2px 62px 78px;
}

}

@media (max-width: 767.98px) {
.ssf-filter-root .prototype-shell {
padding: 22px 12px 30px;
}

.ssf-filter-root .page-title {
font-size: 1.95rem;
        margin-bottom: 16px;
}

.ssf-filter-root .panel-card {
padding: 14px;
}

.ssf-filter-root .shape-thumb {
height: 116px;
}

.ssf-filter-root .shape-title {
font-size: 1rem;
}

.ssf-filter-root .dimension-row {
grid-template-columns: 44px 2fr 56px 28px 2px 54px 68px;
        gap: 0;
        padding: 0;
        min-height: 34px;
        margin-bottom: 6px;
}

.ssf-filter-root .dimension-code {
min-height: 34px;
        padding: 0 8px;
        font-size: 0.95rem;
}

.ssf-filter-root .dimension-name {
display: none;
}

.ssf-filter-root .dimension-input {
width: calc(100% - 8px);
        margin-left: 4px;
        height: 24px;
        font-size: 0.82rem;
}

.ssf-filter-root .dimension-unit, .ssf-filter-root .dimension-tolerance {
padding: 0 8px;
        font-size: 0.82rem;
}

.ssf-filter-root .dimension-divider {
display: none;
}

.ssf-filter-root .tolerance-select {
width: 100%;
        height: 24px;
        font-size: 0.76rem;
        padding: 0 30px 0 6px;
        background-position: right 5px center, left top;
        background-size: 14px auto, 100% 100%;
}

.ssf-filter-root .thread-row {
grid-template-columns: 64px 1fr 74px 28px;
        min-height: 34px;
}

.ssf-filter-root .thread-select {
width: 100%;
        height: 34px;
        min-height: 24px;
        font-size: 0.78rem;
        background-position: right 5px center, left top;
        background-size: 14px auto, 100% 100%;
        padding: 0 30px 0 6px;
}

.ssf-filter-root .thread-row .dimension-name {
display: block;
        padding: 0 8px;
        font-size: 0.82rem;
}

.ssf-filter-root .thread-row .dimension-unit, .ssf-filter-root .thread-row .dimension-tolerance {
display: none;
}

.ssf-filter-root .thread-row > div:empty {
display: none;
}

.ssf-filter-root .thread-row .thread-select {
height: 24px;
}

.ssf-filter-root .search-action {
justify-content: stretch;
}

.ssf-filter-root .search-button {
width: 100%;
}

.ssf-filter-root .search-button-label {
flex: 1;
}

.ssf-filter-root .results-table-wrap {
overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #034EA2 #D9D9D9;
        scrollbar-width: none;
        padding-bottom: 0;
}

.ssf-filter-root .results-scrollbar {
position: relative;
        display: block;
        height: 6px;
        margin-top: 0;
        background: #D9D9D9;
        border-radius: 999px;
        overflow: hidden;
}

.ssf-filter-root .results-scrollbar-thumb {
position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 30%;
        background: #034EA2;
        border-radius: 999px;
}

.ssf-filter-root .results-table-wrap::-webkit-scrollbar {
height: 0;
}

.ssf-filter-root .results-table {
min-width: 860px;
        margin: 0;
}

.ssf-filter-root .pagination-shell {
justify-content: center;
        gap: 6px;
        padding-top: 10px;
}

.ssf-filter-root .page-button {
min-width: 36px;
        height: 34px;
        border-radius: 10px;
        font-size: 0.9rem;
}

.ssf-filter-root .page-button.wide {
min-width: 86px;
        padding: 0 10px;
}

.ssf-filter-root .page-button.nav-button {
gap: 6px;
}

.ssf-filter-root .page-button.nav-button::before, .ssf-filter-root .page-button.nav-button::after {
width: 12px;
        height: 12px;
        background-size: 12px auto;
        flex-basis: 12px;
}

.ssf-filter-root .page-button-label-text {
font-size: 0.88rem;
}

}

/* product-detail.html */
.ssf-detail-root {
--brand-blue:#0f4c97; --brand-gold:#ffbf00; --panel-header:#ececf2; --panel-border:#dddddd;
}

.ssf-detail-root {
margin: 0;
      font-family: 'Barlow', sans-serif;
      background: linear-gradient(180deg, #fcfcfc 0%, #efefef 100%);
      color: #232323;
}

.ssf-detail-root .prototype-shell {
max-width: 1240px; margin: 0 auto; padding: 46px 15px 40px;
}

.ssf-detail-root .utility-row {
margin-bottom: 18px; display: flex; justify-content: flex-end;
}

.ssf-detail-root .back-link {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid var(--brand-blue);
      background: #fff;
      color: var(--brand-blue);
      font-weight: 600;
      text-decoration: none;
}

.ssf-detail-root .back-link:hover {
color: #fff; background: var(--brand-blue); text-decoration: none;
}

.ssf-detail-root .gallery-layout {
display: grid;
      grid-template-columns: 96px minmax(280px,445px) minmax(0,1fr);
      gap: 22px;
      align-items: stretch;
      margin-bottom: 24px;
}

.ssf-detail-root .thumb-stack {
display: flex;
      flex-direction: column;
      gap: 12px;
      height: 380px;
      max-height: 380px;
      box-sizing: border-box;
      justify-content: flex-end;
      align-self: start;
}

.ssf-detail-root .thumb-button, .ssf-detail-root .main-image {
position: relative;
      border: 1px solid #d9d9d9;
      background: linear-gradient(135deg, #fafafa 0%, #e0e0e0 100%);
      overflow: hidden;
      box-sizing: border-box;
}

.ssf-detail-root .thumb-button {
width: 100%;
      flex: 0 0 auto;
      min-height: 0;
      padding: 0;
      cursor: pointer;
      transition: .2s ease;
      height: 110px;
}

.ssf-detail-root .thumb-button::before, .ssf-detail-root .main-image::before {
content: "";
      position: absolute;
      inset: 18% 22%;
      background:
        linear-gradient(90deg, #d59020 0 8%, #8b6a2b 8% 12%, #d59020 12% 20%, #8b6a2b 20% 24%, #d59020 24% 32%, #8b6a2b 32% 36%, #d59020 36% 44%, #8b6a2b 44% 48%, #d59020 48% 56%, #8b6a2b 56% 60%, #d59020 60% 68%, #8b6a2b 68% 72%, #d59020 72% 80%, #8b6a2b 80% 84%, #d59020 84% 100%);
      border-radius: 12px 12px 38px 38px;
      border: 3px solid #8d8d8d;
      box-shadow: inset 0 0 0 10px rgba(255,255,255,.06);
      transform: rotate(var(--filter-rotate, 0deg));
}

.ssf-detail-root .thumb-button::after, .ssf-detail-root .main-image::after {
content: attr(data-label);
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 4px 8px;
      font-size: .8rem;
      font-weight: 600;
      color: #fff;
      background: rgba(15,76,151,.76);
      border-radius: 3px;
}

.ssf-detail-root .thumb-button img, .ssf-detail-root .main-image img {
width: 100%; display: block; opacity: 0;
}

.ssf-detail-root .thumb-button:hover, .ssf-detail-root .thumb-button.active {
border-color: var(--brand-gold); box-shadow: 0 4px 10px rgba(255,191,0,.28);
}

.ssf-detail-root .main-image {
      height: 380px;
      max-height: 380px;
      align-self: start;
}

.ssf-detail-root .product-info {
display: flex;
      flex-direction: column;
      height: 100%;
}

.ssf-detail-root .main-image[data-view="front"], .ssf-detail-root .thumb-button[data-view="front"] {
--filter-rotate: 0deg;
}

.ssf-detail-root .main-image[data-view="side"], .ssf-detail-root .thumb-button[data-view="side"] {
--filter-rotate: 72deg;
}

.ssf-detail-root .main-image[data-view="top"], .ssf-detail-root .thumb-button[data-view="top"] {
--filter-rotate: 180deg;
}

.ssf-detail-root .product-title {
margin: 0 0 6px; color: var(--brand-gold); font-size: 4rem; font-weight: 700; line-height: 1;
}

.ssf-detail-root .product-copy {
margin-bottom: 20px; font-size: 1.25rem; line-height: 1.35; max-width: 720px;
}

.ssf-detail-root .product-detail-table-wrap {
margin-top: auto;
}

.ssf-detail-root .detail-table, .ssf-detail-root .accordion-card {
width: 100%;
      border: 1px solid var(--panel-border);
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
      background: #fff;
}

.ssf-detail-root .detail-table td {
padding: 12px 26px;
      border: 1px solid #e6e6e6;
      font-size: 1rem;
      vertical-align: middle;
}

.ssf-detail-root .detail-table td:first-child {
width: 220px;
      color: #fff;
      font-weight: 700;
      font-size: 1.15rem;
      background: var(--brand-gold);
}

.ssf-detail-root .accordion-card {
margin-bottom: 18px;
}

.ssf-detail-root .accordion-button {
width: 100%;
      border: 0;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--panel-header);
      color: var(--brand-blue);
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
}

.ssf-detail-root .accordion-button:hover, .ssf-detail-root .accordion-button:focus {
outline: none; background: #e5e5ee;
}

.ssf-detail-root .accordion-button .icon {
width: 18px;
      height: 18px;
      display: inline-block;
      background-image: url("img/arrow-blue.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 18px auto;
      transition: transform .2s ease;
}

.ssf-detail-root .accordion-button[aria-expanded="false"] .icon {
transform: rotate(180deg);
}

.ssf-detail-root .spec-table {
width: 100%; margin-bottom: 0;
}

.ssf-detail-root .spec-table td {
border: 1px solid #e6e6e6; padding: 10px 24px; font-size: 1rem;
}

.ssf-detail-root .spec-table td:first-child {
width: 52%; background: #fff;
}

.ssf-detail-root .cross-list {
list-style: none; padding: 0; margin: 0; font-size: .98rem;
}

.ssf-detail-root .cross-list > li {
border-top: 1px solid var(--brand-blue);
}

.ssf-detail-root .cross-list > li:first-child {
border-top: 0;
}

.ssf-detail-root .cross-brand {
width: 100%;
      border: 0;
      background: #fff;
      padding: 12px 26px 12px 66px;
      text-align: left;
      font-weight: 700;
      cursor: pointer;
      position: relative;
}

.ssf-detail-root .cross-brand:hover, .ssf-detail-root .cross-brand:focus {
outline: none; background: #f8fbff;
}

.ssf-detail-root .cross-brand::before {
content: "";
      position: absolute;
      left: 40px;
      top: 50%;
      width: 13px;
      height: 13px;
      background-image: url("img/plus.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transform: translateY(-50%);
}

.ssf-detail-root .cross-brand[aria-expanded="true"]::before {
background-image: url("img/minus.png");
}

.ssf-detail-root .cross-items {
display: none; padding: 0 26px 12px 66px; margin: 0; list-style: none;
}

.ssf-detail-root .cross-items li {
position: relative; padding: 3px 0;
}

.ssf-detail-root .cross-items li::before {
content: "└"; position: absolute; left: -18px; color: var(--brand-blue);
}

@media (max-width: 991.98px) {
.ssf-detail-root .gallery-layout {
grid-template-columns: 80px minmax(0,1fr);
}

.ssf-detail-root .product-info {
grid-column: 1 / -1;
}

.ssf-detail-root .thumb-stack {
padding-top: 0; height: auto;
}

.ssf-detail-root .product-title {
font-size: 3.2rem; margin-top: 22px;
}

}

@media (max-width: 767.98px) {
.ssf-detail-root .prototype-shell {
padding: 24px 12px 32px;
}

.ssf-detail-root .gallery-layout {
grid-template-columns: 1fr 96px; gap: 12px;
}

.ssf-detail-root .product-info {
display: contents;
        height: auto;
}

.ssf-detail-root .product-title, .ssf-detail-root .product-copy, .ssf-detail-root .product-detail-table-wrap {
grid-column: 1 / -1;
}

.ssf-detail-root .product-title {
order: 1;
}

.ssf-detail-root .product-copy {
order: 2;
}

.ssf-detail-root .main-image {
order: 3; min-height: 230px; height: auto;
}

.ssf-detail-root .thumb-stack {
order: 4; gap: 10px; height: auto;
}

.ssf-detail-root .product-detail-table-wrap {
order: 5;
}

.ssf-detail-root .thumb-button {
flex: 0 0 96px; min-height: 96px;
}

.ssf-detail-root .detail-table {
margin-top: 16px;
}

.ssf-detail-root .product-title {
margin-top: 16px; font-size: 2.65rem;
}

.ssf-detail-root .product-copy {
font-size: 1rem; margin-bottom: 16px;
}

.ssf-detail-root .detail-table td {
padding: 10px 14px;
}

.ssf-detail-root .detail-table td:first-child {
width: 40%; font-size: 1rem;
}

.ssf-detail-root .accordion-button {
padding: 12px 16px;
}

.ssf-detail-root .spec-table td {
padding: 10px 14px;
}

.ssf-detail-root .spec-table td:first-child {
width: 58%;
}

.ssf-detail-root .cross-brand {
padding: 12px 16px 12px 58px;
}

.ssf-detail-root .cross-items {
padding: 0 16px 12px 58px;
}

}

.ssf-detail-root .cross-brand.cross-brand-empty {
cursor: default;
}

.ssf-detail-root .cross-brand.cross-brand-empty::before {
display: none;
}

.ssf-detail-root .cross-item-empty {
padding: 8px 0;
text-align: center;
color: #666;
}

.ssf-detail-root .cross-item-empty::before {
display: none;
}

/* =======================================================================
   WordPress overrides — applied at end of file (higher cascade priority)
   ======================================================================= */

/* 1. Body: prototype background + Barlow font */
body.ssf-page {
  background: linear-gradient(180deg, #fafafa 0%, #efefef 100%) !important;
  font-family: 'Barlow', sans-serif !important;
}

/* Hide WP post header — title is rendered inside the shortcode instead */
body.ssf-page .fl-post-header {
  display: none !important;
}

/* 2. WP page title → brand-blue, 2rem, Barlow 700 */
body.ssf-page .fl-post-header .fl-post-title,
body.ssf-page .fl-post-title {
  color: #034EA2 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 22px !important;
  line-height: 1.2 !important;
}

/* 3. Root container — exact prototype: max-width 1360px, padding 28 18 42 */
.ssf-filter-root {
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 28px 18px 42px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
}

/* 4. Dropdowns: full width + left padding for text */
.ssf-filter-root .custom-select {
  width: 100% !important;
  display: block !important;
  padding-left: 12px !important;
}

/* 5. Left panel: exact prototype 424px, right fills remaining */
.ssf-filter-root .main-layout {
  grid-template-columns: 424px minmax(0, 1fr) !important;
  gap: 18px !important;
}

/* 6a. Dimension panel: hidden until type+category+shape selected */

/* 6b. Diagram exact prototype 280px, min-height 318px */
.ssf-filter-root .filter-right-top {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 22px !important;
}
.ssf-filter-root .diagram-placeholder {
  min-height: 318px !important;
  aspect-ratio: unset !important;
}

/* Search Filter button: label text always black */
.ssf-filter-root .search-button-label {
  color: #222222 !important;
}

/* 7. Dimension rows — prototype: 70px 1.5fr 74px 48px 100px 88px
      + 2px divider col between mm and Tolerance */
.ssf-filter-root .dimension-row {
  grid-template-columns: 70px 1.5fr 74px 48px 2px 100px 88px !important;
  min-height: 38px !important;
}
.ssf-filter-root .dimension-code {
  white-space: nowrap !important;
}
.ssf-filter-root .dimension-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.82rem !important;
  padding: 0 8px !important;
}
.ssf-filter-root .dimension-unit {
  white-space: nowrap !important;
  text-align: center !important;
  padding: 0 6px !important;
}
.ssf-filter-root .dimension-tolerance {
  white-space: nowrap !important;
  overflow: hidden !important;
  font-size: 0.82rem !important;
  padding: 0 6px !important;
}
/* Thread row: same 7-col grid */
.ssf-filter-root .dimension-row.thread-row {
  grid-template-columns: 70px 1.5fr 74px 48px 2px 100px 88px !important;
}
.ssf-filter-root .thread-row .thread-select {
  grid-column: 3 / -1 !important;
  width: 100% !important;
}
.ssf-filter-root .thread-row > div:empty {
  display: none !important;
}

/* 8. Shape thumb: fixed height for placeholder; natural height when image present */
.ssf-filter-root .shape-thumb {
  height: 146px !important;
  aspect-ratio: unset !important;
}
.ssf-filter-root .shape-thumb-img {
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  background: #fff !important;
}
.ssf-filter-root .shape-thumb-img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
}
/* When shape-thumb has an image, suppress CSS pseudo-element placeholders */
.ssf-filter-root .shape-thumb-img::before,
.ssf-filter-root .shape-thumb-img::after {
  display: none !important;
}

/* 9. Diagram placeholder: image shown with contain (no distortion) */
.ssf-filter-root .diagram-placeholder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
}
/* Suppress CSS pseudo-element when a real image is shown */
.ssf-filter-root .diagram-placeholder:not(.no-image)::before,
.ssf-filter-root .diagram-placeholder:not(.no-image)::after {
  display: none !important;
}

/* =======================================================================
   Detail page: show real product images (prototype had opacity:0)
   ======================================================================= */

/* Make uploaded images visible */
.ssf-detail-root .thumb-button img,
.ssf-detail-root .main-image img {
  opacity: 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hide the CSS-drawn orange placeholder when a real image is showing */
.ssf-detail-root .thumb-button::before,
.ssf-detail-root .main-image::before {
  display: none !important;
}

/* =======================================================================
   Detail page root — same fix as filter root:
   .ssf-detail-root .prototype-shell never matches (same element),
   so max-width + padding must be applied directly.
   ======================================================================= */
.ssf-detail-root {
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 0 42px !important;  /* no horizontal padding — accordions fill edge-to-edge */
  box-sizing: border-box !important;
  font-size: 16px !important;
  overflow: hidden;
}

/* Give horizontal padding only to gallery + back-button so they stay inset */
.ssf-detail-root .utility-row,
.ssf-detail-root .hero-card {
  padding-left: 18px;
  padding-right: 18px;
}

/* Gallery cells: prevent individual cells from overflowing their column */
.ssf-detail-root .gallery-layout > * {
  min-width: 0;
  overflow: hidden;
}

/* Allow box-shadow to show on accordion cards (not clipped) */
.ssf-detail-root .accordion-card,
.ssf-detail-root .detail-table,
.ssf-detail-root .hero-card {
  overflow: visible;
}

/* =======================================================================
   Detail page: remove horizontal padding so tables fill the accordion card
   ======================================================================= */

/* Dimensions & Weight — spec-table cells flush to card edges */
.ssf-detail-root .spec-table td {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Cross Reference — reduce indent so list fills full card width */
.ssf-detail-root .cross-brand {
  padding-left: 36px !important;
  padding-right: 12px !important;
}
.ssf-detail-root .cross-brand::before {
  left: 10px !important;
}
.ssf-detail-root .cross-items {
  padding-left: 36px !important;
  padding-right: 12px !important;
}
.ssf-detail-root .cross-items li::before {
  left: -16px !important;
}



/* Cross-reference clickable part numbers */
.ssf-detail-root .cross-ref-link {
  color: #034EA2;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ssf-detail-root .cross-ref-link:hover,
.ssf-detail-root .cross-ref-link:focus {
  color: #F1B209;
  border-bottom-color: #F1B209;
  text-decoration: none;
}