/* Temperature Sensor Simple Step Page */
.tss-page,
.tss-page * {
    box-sizing: border-box;
}

.tss-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 72px;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.tss-page button,
.tss-page input,
.tss-page select,
.tss-page textarea {
    font-family: inherit;
}

.tss-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.tss-breadcrumb a {
    color: #64748b;
    text-decoration: none;
}

.tss-breadcrumb span::before,
.tss-breadcrumb strong::before {
    content: "/";
    margin-right: 8px;
    color: #cbd5e1;
}

.tss-breadcrumb strong {
    color: #0f172a;
}

.tss-subvisual {
    display: flex;
    align-items: center;
    min-height: 240px;
    margin: 0 0 18px;
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    background: radial-gradient(circle at 92% 18%, rgba(5,150,105,.16), transparent 34%), linear-gradient(135deg,#fff 0%,#f0fdf4 100%);
    box-shadow: 0 12px 34px rgba(15,23,42,.055);
}

.tss-subvisual > div {
    max-width: 860px;
}

.tss-subvisual span,
.tss-quote-head span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
    font-size: 12px;
    font-weight: 950;
}

.tss-subvisual h1 {
    margin: 14px 0 14px;
    color: #0f172a;
    font-size: clamp(34px, 4.3vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.065em;
    font-weight: 950;
}

.tss-subvisual p,
.tss-quote-head p,
.tss-step-title p,
.tss-mini p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.72;
    word-break: keep-all;
}

.tss-quote-head {
    margin: 0 0 18px;
}

.tss-quote-head h2 {
    margin: 10px 0 8px;
    color: #0f172a;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.tss-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.tss-step-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0 0 18px;
}

.tss-step-menu button {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 70px;
    padding: 12px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    text-align: center;
}

.tss-step-menu button em {
    color: #059669;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.tss-step-menu button strong {
    color: inherit;
    font-size: 15px;
    font-weight: 950;
}

.tss-step-menu button.is-active {
    border-color: #059669;
    background: #059669;
    color: #fff;
}

.tss-step-menu button.is-active em {
    color: rgba(255,255,255,.78);
}

.tss-step-menu button.is-complete:not(.is-active) {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.tss-step {
    display: none;
    width: 100%;
    margin: 0 0 18px;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid #e2e8f0;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.04);
}

.tss-step.is-active {
    display: block;
}

.tss-step-title {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 0 0 22px;
}

.tss-step-title b {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: #059669;
    color: #fff;
    font-size: 20px;
    font-weight: 950;
}

.tss-step-title h3 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.055em;
    font-weight: 950;
}

.tss-block {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #eef2f7;
}

.tss-block:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.tss-well-block {
    margin-top: 38px;
    padding-top: 32px;
}

.tss-mini {
    margin: 0 0 14px;
}

.tss-mini h4 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 20px;
    letter-spacing: -0.045em;
    font-weight: 950;
}

.tss-select-grid,
.tss-image-grid,
.tss-info-grid,
.tss-well-grid,
.tss-model-grid,
.tss-fields {
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.tss-select-grid,
.tss-image-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tss-info-grid,
.tss-well-grid,
.tss-model-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tss-fields.cols3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tss-fields.cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tss-select-grid button,
.tss-image-grid button,
.tss-info-grid button,
.tss-info-grid article,
.tss-well-grid button {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    color: #0f172a;
    text-align: left;
}

.tss-select-grid button,
.tss-image-grid button,
.tss-info-grid button,
.tss-well-grid button {
    cursor: pointer;
    transition: .16s ease;
}

.tss-select-grid button:hover,
.tss-image-grid button:hover,
.tss-info-grid button:hover,
.tss-well-grid button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15,23,42,.075);
}

.tss-select-grid button.is-selected,
.tss-image-grid button.is-selected,
.tss-info-grid button.is-selected,
.tss-well-grid button.is-selected,
.tss-model-card.is-selected {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,.16);
}

.tss-select-grid strong,
.tss-image-grid strong,
.tss-info-grid strong,
.tss-well-grid strong {
    display: block;
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -0.04em;
    font-weight: 950;
}

.tss-select-grid span,
.tss-select-grid small,
.tss-image-grid span,
.tss-image-grid small,
.tss-info-grid span,
.tss-well-grid span {
    display: block;
    color: #64748b;
    font-size: 13px;
    line-height: 1.58;
    word-break: keep-all;
}

.tss-select-grid small,
.tss-image-grid small {
    margin-top: 8px;
    color: #059669;
    font-weight: 900;
}

.tss-image-grid figure,
.tss-well-grid figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 2.45;
    margin: 0 0 12px;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
}

.tss-image-grid img,
.tss-well-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.tss-fields {
    margin-top: 16px;
}

.tss-fields label,
.tss-textarea {
    display: grid;
    gap: 8px;
}

.tss-fields label span,
.tss-textarea span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
}

.tss-fields label i {
    color: #059669;
    font-style: normal;
}

.tss-fields input,
.tss-fields select,
.tss-textarea textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
}

.tss-textarea {
    margin-top: 16px;
}

.tss-textarea textarea {
    min-height: 130px;
    padding: 14px;
    resize: vertical;
}

.tss-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.tss-tabs button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.tss-tabs button.is-active {
    border-color: #059669;
    background: #059669;
    color: #fff;
}

.tss-model-card {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}

.tss-model-card figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    margin: 0;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

.tss-model-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    background: #fff;
}

.tss-model-card div {
    padding: 16px;
}

.tss-model-card em {
    display: block;
    margin-bottom: 6px;
    color: #059669;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.tss-model-card strong {
    display: block;
    margin-bottom: 7px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.tss-model-card p {
    min-height: 42px;
    margin: 0 0 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
    word-break: keep-all;
}

.tss-model-card mark {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
    font-size: 12px;
    font-weight: 950;
}

.tss-summary {
    width: 100%;
    margin: 0 0 22px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #f8fafc;
}

.tss-summary h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
}

.tss-code {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
}

.tss-code span {
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
}

.tss-code strong {
    color: #059669;
    font-size: 15px;
    font-weight: 950;
}

.tss-summary-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px 16px;
}

.tss-summary-rows div {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.tss-summary-rows b,
.tss-summary-rows span {
    font-size: 13px;
}

.tss-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 24px;
}

.tss-actions button,
.tss-copy,
.tss-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
}

.tss-prev {
    background: #f1f5f9;
    color: #334155;
}

.tss-next,
.tss-submit {
    background: #059669;
    color: #fff;
}

.tss-copy {
    margin-top: 14px;
    background: #0f172a;
    color: #fff;
}

.tss-note {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

@media (min-width: 1500px) {
    .tss-model-grid,
    .tss-well-grid {
        grid-template-columns: repeat(5, minmax(0,1fr));
    }
}

@media (max-width: 1180px) {
    .tss-select-grid,
    .tss-image-grid,
    .tss-info-grid,
    .tss-well-grid,
    .tss-model-grid,
    .tss-fields.cols3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .tss-subvisual {
        min-height: 220px;
        padding: 26px 20px;
        border-radius: 22px;
    }

    .tss-step {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .tss-step-menu {
        grid-template-columns: repeat(4, 150px);
        overflow-x: auto;
    }

    .tss-select-grid,
    .tss-image-grid,
    .tss-info-grid,
    .tss-well-grid,
    .tss-model-grid,
    .tss-fields.cols3,
    .tss-fields.cols2 {
        grid-template-columns: 1fr;
    }

    .tss-summary-rows {
        grid-template-columns: 1fr;
    }

    .tss-actions {
        flex-direction: column;
    }

    .tss-actions span {
        display: none;
    }

    .tss-actions button {
        width: 100%;
    }
}


/* FORM LAYOUT FIX - prevent theme inquiry form grid from hijacking step layout */
.tss-page .tss-form {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.tss-page .tss-form > .tss-step-menu,
.tss-page .tss-form > .tss-step {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.tss-page .tss-step-menu {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.tss-page .tss-step-menu button {
    min-height: 74px !important;
    height: 74px !important;
    max-height: 74px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.tss-page .tss-step {
    display: none !important;
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.tss-page .tss-step.is-active {
    display: block !important;
}

.tss-page .tss-actions {
    display: flex !important;
}

@media (max-width: 760px) {
    .tss-page .tss-step-menu {
        display: flex !important;
        overflow-x: auto !important;
    }

    .tss-page .tss-step-menu button {
        flex: 0 0 150px !important;
    }
}


/* WIDTH FIX - align page to Tamtec subpage/menu-builder container width */
.tss-page {
    --tss-container-width: var(--tamtec-menu-builder-width, var(--tamtec-container-width, var(--theme-container-width, 1320px)));
    width: min(100%, var(--tss-container-width)) !important;
    max-width: var(--tss-container-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tss-page .tss-breadcrumb,
.tss-page .tss-subvisual,
.tss-page .tss-quote-head,
.tss-page .tss-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 1360px) {
    .tss-page {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
    }
}

@media (max-width: 760px) {
    .tss-page {
        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;
    }
}


/* SUBVISUAL FIX - match existing Tamtec subpage visual card rhythm */
.tss-page .tss-breadcrumb {
    margin-bottom: 14px !important;
}

.tss-page .tss-subvisual {
    width: 100% !important;
    min-height: 220px !important;
    height: auto !important;
    margin: 0 0 36px !important;
    padding: 42px 48px !important;
    border: 1px solid #e5eee8 !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(159,232,112,.22), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f6fbf7 52%, #e9f8ee 100%) !important;
    box-shadow: 0 16px 40px rgba(15,23,42,.045) !important;
    overflow: hidden !important;
}

.tss-page .tss-subvisual > div {
    max-width: 760px !important;
}

.tss-page .tss-subvisual span {
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(5,150,105,.10) !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em !important;
}

.tss-page .tss-subvisual h1 {
    margin: 14px 0 12px !important;
    color: #0f172a !important;
    font-size: clamp(34px, 4vw, 52px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.065em !important;
    font-weight: 950 !important;
}

.tss-page .tss-subvisual p {
    max-width: 620px !important;
    color: #64748b !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
}

.tss-page .tss-quote-head {
    margin-top: 0 !important;
}

@media (max-width: 760px) {
    .tss-page .tss-subvisual {
        min-height: 190px !important;
        margin-bottom: 28px !important;
        padding: 30px 22px !important;
        border-radius: 20px !important;
    }

    .tss-page .tss-subvisual h1 {
        font-size: 32px !important;
    }
}


/* TYPE COMPACT FIX - thermocouple type cards in one row */
.tss-page .tss-image-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.tss-page .tss-image-grid button {
    padding: 12px 8px !important;
    border-radius: 16px !important;
    text-align: center !important;
}

.tss-page .tss-image-grid figure {
    aspect-ratio: 1 / 1 !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto 8px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.tss-page .tss-image-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.tss-page .tss-image-grid strong {
    margin: 0 0 3px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.tss-page .tss-image-grid span {
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.tss-page .tss-image-grid small {
    display: none !important;
}

@media (max-width: 1180px) {
    .tss-page .tss-image-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .tss-page .tss-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tss-page .tss-image-grid figure {
        width: 58px !important;
        height: 58px !important;
    }
}


/* TYPE COLOR FIX - thermocouple type as compact color chips */
.tss-page .tss-type-color-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0 0 16px;
}

.tss-page .tss-type-color-grid button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    width: 100%;
    min-height: 58px;
    padding: 10px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
}

.tss-page .tss-type-color-grid button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15,23,42,.07);
}

.tss-page .tss-type-color-grid button.is-selected {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,.16);
}

.tss-page .tss-type-color-grid i {
    grid-row: 1 / span 2;
    display: block;
    width: 22px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
}

.tss-page .tss-type-color-grid .tc-k { background: #facc15; }
.tss-page .tss-type-color-grid .tc-j { background: #111827; }
.tss-page .tss-type-color-grid .tc-t { background: #2563eb; }
.tss-page .tss-type-color-grid .tc-e { background: #7c3aed; }
.tss-page .tss-type-color-grid .tc-n { background: #f97316; }
.tss-page .tss-type-color-grid .tc-rs { background: #16a34a; }
.tss-page .tss-type-color-grid .tc-c { background: #dc2626; }

.tss-page .tss-type-color-grid strong {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 950;
}

.tss-page .tss-type-color-grid span {
    display: block;
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
}

/* Connector images stay in production options, slightly more product-like */
.tss-page .tss-image-grid button[data-choice^="terminal"] figure {
    aspect-ratio: 4 / 2.2;
}

@media (max-width: 1180px) {
    .tss-page .tss-type-color-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tss-page .tss-type-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* CONNECTOR REFINE FIX */

/* sensor specification: color icon must be perfect circle, not oval */
.tss-page .tss-type-color-grid i {
    width: 24px !important;
    height: 24px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    align-self: center !important;
}

/* connector type: restore three large cards taking full row */
.tss-page .tss-connector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.tss-page .tss-connector-grid button {
    padding: 18px !important;
    border-radius: 20px !important;
    text-align: left !important;
}

.tss-page .tss-connector-grid figure {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 2.25 !important;
    margin: 0 0 12px !important;
    border-radius: 16px !important;
}

.tss-page .tss-connector-grid strong {
    font-size: 17px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.tss-page .tss-connector-grid span,
.tss-page .tss-connector-grid small {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

.tss-page .tss-fields.cols4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tss-page .tss-fields.cols5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .tss-page .tss-connector-grid,
    .tss-page .tss-fields.cols4,
    .tss-page .tss-fields.cols5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .tss-page .tss-connector-grid,
    .tss-page .tss-fields.cols4,
    .tss-page .tss-fields.cols5 {
        grid-template-columns: 1fr !important;
    }
}


/* CONNECTOR COLOR ROW + REMOVE TOP BREADCRUMB SPACE */
.tss-page > .tss-subvisual:first-child {
    margin-top: 0 !important;
}

/* type chips: keep thermocouple color icons perfectly circular */
.tss-page .tss-type-color-grid i {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
}

/* connector type color photos: compact one-row selector under connector type cards */
.tss-page .tss-connector-color-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 14px 0 16px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
}

.tss-page .tss-connector-color-row button {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    text-align: center;
    cursor: pointer;
    transition: .16s ease;
}

.tss-page .tss-connector-color-row button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(15,23,42,.07);
}

.tss-page .tss-connector-color-row button.is-selected {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,.16);
}

.tss-page .tss-connector-color-row figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 2.4;
    margin: 0 0 6px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.tss-page .tss-connector-color-row img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tss-page .tss-connector-color-row strong {
    display: block;
    margin: 0;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.02em;
}

@media (max-width: 1180px) {
    .tss-page .tss-connector-color-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tss-page .tss-connector-color-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* TOP SPACE FIX - give subvisual breathing room below menu */
.tss-page {
    padding-top: 28px !important;
}

.tss-page .tss-subvisual {
    margin-top: 0 !important;
}

@media (max-width: 760px) {
    .tss-page {
        padding-top: 18px !important;
    }
}