.dynamic-kit {
    --kit-blue: #0b2d5c;
    --kit-blue-soft: #eef4fb;
    --kit-green: #17834f;
    --kit-border: #d7dde5;
    --kit-muted: #5e6977;
    margin: 8px 0 24px;
    width: 100%;
}

.dynamic-kit h2,
.dynamic-kit h3,
.dynamic-kit p {
    margin: 0;
}

.dynamic-kit__heading {
    align-items: center;
    border-bottom: 1px solid var(--kit-border);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding-bottom: 14px;
}

.dynamic-kit__heading h2 {
    color: #1d2733;
    font-size: 21px;
    font-weight: 700;
}

.dynamic-kit__modes {
    border: 1px solid var(--kit-border);
    border-radius: 6px;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 760px;
    min-width: 0;
    overflow: hidden;
    width: auto;
}

.dynamic-kit__mode {
    align-items: center;
    background: #fff;
    border: 0;
    border-right: 1px solid var(--kit-border);
    color: var(--kit-blue);
    display: inline-flex;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
}

.dynamic-kit__mode span {
    line-height: 1.15;
}

.dynamic-kit__mode:last-child {
    border-right: 0;
}

.dynamic-kit__mode:hover,
.dynamic-kit__mode.is-active {
    background: var(--kit-blue);
    border-color: var(--kit-blue);
    color: #fff;
}

.dynamic-kit__mode[data-business-kit="5033"] {
    color: #789000;
}

.dynamic-kit__mode[data-business-kit="5034"] {
    color: #187ca5;
}

.dynamic-kit__mode[data-business-kit="5035"] {
    color: #b25d00;
}

.dynamic-kit__mode[data-business-kit="5033"]:hover,
.dynamic-kit__mode[data-business-kit="5033"].is-active {
    background: #b7d81b;
    border-color: #b7d81b;
    color: #1d2733;
}

.dynamic-kit__mode[data-business-kit="5034"]:hover,
.dynamic-kit__mode[data-business-kit="5034"].is-active {
    background: #4ebfed;
    border-color: #4ebfed;
    color: #1d2733;
}

.dynamic-kit__mode[data-business-kit="5035"]:hover,
.dynamic-kit__mode[data-business-kit="5035"].is-active {
    background: #fd9710;
    border-color: #fd9710;
    color: #1d2733;
}

.dynamic-kit__mode:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.dynamic-kit__insole,
.dynamic-kit__catalog,
.dynamic-kit__business-panel,
.dynamic-kit__shirts,
.dynamic-kit__complimentary-shirt {
    border-bottom: 1px solid var(--kit-border);
    padding: 18px 0;
}

.dynamic-kit__complimentary-shirt[hidden] {
    display: none;
}

.dynamic-kit__complimentary-shirt {
    align-items: end;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.2fr);
}

.dynamic-kit__complimentary-shirt h3 {
    color: #1d2733;
    font-size: 17px;
    font-weight: 700;
}

.dynamic-kit__complimentary-shirt-heading p {
    color: var(--kit-muted);
    font-size: 14px;
    margin-top: 3px;
}

.dynamic-kit__complimentary-shirt-fields {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-kit__complimentary-shirt-fields label {
    color: #222b35;
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
}

.dynamic-kit__complimentary-shirt-fields .form-select.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
}

.dynamic-kit__insole {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.2fr);
}

.dynamic-kit__insole h3,
.dynamic-kit__catalog h3 {
    color: #1d2733;
    font-size: 17px;
    font-weight: 700;
}

.dynamic-kit__insole p,
.dynamic-kit__catalog p {
    color: var(--kit-muted);
    font-size: 14px;
    margin-top: 3px;
}

.dynamic-kit__insole-options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-kit__insole-option {
    align-items: center;
    border: 1px solid var(--kit-border);
    border-radius: 6px;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 72px;
    padding: 11px 14px;
}

.dynamic-kit__insole-option:has(input:checked) {
    background: var(--kit-blue-soft);
    border-color: var(--kit-blue);
}

.dynamic-kit__insole-option.is-unavailable {
    cursor: not-allowed;
    opacity: 0.5;
}

.dynamic-kit__insole-copy,
.dynamic-kit__insole-copy strong,
.dynamic-kit__insole-copy small,
.dynamic-kit__insole-price,
.dynamic-kit__insole-price strong,
.dynamic-kit__insole-price small {
    display: block;
}

.dynamic-kit__insole-copy {
    min-width: 0;
    text-align: left;
}

.dynamic-kit__insole-copy strong {
    color: #222b35;
    font-size: 14px;
    line-height: 1.25;
}

.dynamic-kit__insole-copy small,
.dynamic-kit__insole-price small {
    color: var(--kit-muted);
    font-size: 12px;
    inset: auto;
    line-height: 1.25;
    position: static;
    transform: none;
    width: auto;
    font-weight: 500;
}

.dynamic-kit__insole-copy small {
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    margin-top: 3px;
    text-align: left;
}

.dynamic-kit__insole-price small {
    text-align: right;
}

.dynamic-kit__insole-price {
    border-left: 1px solid var(--kit-border);
    min-width: 82px;
    padding-left: 14px;
    text-align: right;
}

.dynamic-kit__insole-price strong {
    color: var(--kit-blue);
    font-size: 16px;
    line-height: 1.25;
    margin-top: 3px;
    white-space: nowrap;
}

.dynamic-kit__catalog-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.dynamic-kit__selected-count {
    background: var(--kit-blue-soft);
    border-radius: 5px;
    color: var(--kit-blue);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 10px;
    white-space: nowrap;
}

.dynamic-kit__loading,
.dynamic-kit__error,
.dynamic-kit__empty,
.dynamic-kit__validation {
    align-items: center;
    color: var(--kit-muted);
    display: flex;
    font-size: 14px;
    gap: 8px;
    margin-top: 14px;
}

.dynamic-kit__error,
.dynamic-kit__validation {
    background: #fff1f1;
    border-left: 3px solid #c73737;
    color: #a21f1f;
    padding: 9px 11px;
}

.dynamic-kit__empty {
    background: #f7f9fb;
    border-left: 3px solid var(--kit-blue);
    padding: 9px 11px;
}

.dynamic-kit__business-panel {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
}

.dynamic-kit__business-panel[hidden] {
    display: none;
}

.dynamic-kit__business-meta {
    align-items: center;
    border-bottom: 1px solid var(--kit-border);
    border-top: 1px solid var(--kit-border);
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;
    max-width: 100%;
    padding: 10px;
}

.dynamic-kit__business-code {
    align-items: center;
    color: var(--kit-muted);
    display: inline-flex;
    font-size: 12px;
    line-height: 1;
}

.dynamic-kit__business-copy h3 {
    color: #1d2733;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.dynamic-kit__business-separator {
    background: var(--kit-border);
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

.dynamic-kit__business-price {
    align-items: center;
    background: #f1f3f5;
    border-radius: 5px;
    display: inline-flex;
    line-height: 1;
    padding: 5px 8px;
    white-space: nowrap;
}

.dynamic-kit__business-price strong {
    color: var(--kit-blue);
    font-size: 17px;
}

.dynamic-kit__business-copy ul {
    color: #343d47;
    font-size: 14px;
    line-height: 1.4;
    margin: 12px 0 0;
    padding-left: 18px;
}

.dynamic-kit__business-copy li + li {
    margin-top: 5px;
}

.dynamic-kit__business-image {
    border-radius: 30px;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    width: 100%;
}

.dynamic-kit__brand-tabs {
    border-bottom: 1px solid var(--kit-border);
    display: flex;
    gap: 4px;
    margin-top: 16px;
    overflow-x: auto;
}

.dynamic-kit__brand-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--kit-muted);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 12px;
    white-space: nowrap;
}

.dynamic-kit__brand-tab.is-active {
    border-bottom-color: var(--kit-blue);
    color: var(--kit-blue);
}

.dynamic-kit__products {
    max-height: 410px;
    overflow-y: auto;
}

.dynamic-kit__product {
    align-items: center;
    border-bottom: 1px solid #e7ebf0;
    display: grid;
    gap: 12px;
    grid-template-columns: 58px minmax(0, 1fr) auto 116px;
    min-height: 80px;
    padding: 10px 6px;
}

.dynamic-kit__product[hidden] {
    display: none;
}

.dynamic-kit__product-image {
    height: 54px;
    object-fit: contain;
    width: 54px;
}

.dynamic-kit__product-info strong,
.dynamic-kit__product-info span {
    display: block;
}

.dynamic-kit__product-info strong {
    color: #202832;
    font-size: 14px;
    line-height: 1.3;
}

.dynamic-kit__product-info span {
    color: var(--kit-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    margin-top: 3px;
}

.dynamic-kit__product-price {
    color: #202832;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.dynamic-kit__quantity {
    display: grid;
    grid-template-columns: 34px 42px 34px;
}

.dynamic-kit__quantity button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--kit-border);
    color: var(--kit-blue);
    display: flex;
    font-size: 18px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.dynamic-kit__quantity button:first-child {
    border-radius: 5px 0 0 5px;
}

.dynamic-kit__quantity button:last-child {
    border-radius: 0 5px 5px 0;
}

.dynamic-kit__quantity button:disabled {
    opacity: 0.4;
}

.dynamic-kit__quantity output {
    align-items: center;
    border-bottom: 1px solid var(--kit-border);
    border-top: 1px solid var(--kit-border);
    display: flex;
    font-size: 14px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
}

.dynamic-kit__summary {
    align-items: stretch;
    background: #f7f9fb;
    border-top: 1px solid var(--kit-border);
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding: 12px 14px;
}

.dynamic-kit__summary > div {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-width: 106px;
    padding: 0 14px;
    text-align: right;
}

.dynamic-kit__summary > div:first-child {
    padding-left: 0;
}

.dynamic-kit__summary > div + div {
    border-left: 1px solid var(--kit-border);
}

.dynamic-kit__summary span {
    color: var(--kit-muted);
    font-size: 13px;
}

.dynamic-kit__summary strong {
    color: #202832;
    font-size: 14px;
}

.dynamic-kit__summary .dynamic-kit__total strong {
    color: var(--kit-blue);
    font-size: 17px;
}

.shirt-inventory-msg {
    color: #dc3545;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.shirt-stock-sold-out .shirt-stock-content {
    opacity: 0.65;
}

.shirt-plus:disabled,
.shirt-minus:disabled {
    cursor: not-allowed;
    opacity: 0.45 !important;
}

@media (max-width: 1264px) {
    .dynamic-kit__heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dynamic-kit__modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
        width: 100%;
    }

    .dynamic-kit__mode {
        border-right: 0;
    }

    .dynamic-kit__mode:nth-child(odd) {
        border-right: 1px solid var(--kit-border);
    }

    .dynamic-kit__mode:nth-child(-n + 2) {
        border-bottom: 1px solid var(--kit-border);
    }

    .dynamic-kit__insole {
        grid-template-columns: 1fr;
    }

    .dynamic-kit__complimentary-shirt {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .dynamic-kit__insole-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-container:has(.dynamic-kit) {
        padding-left: 12px;
        padding-right: 12px;
    }

    .info-form:has(.dynamic-kit) {
        padding-left: 0;
        padding-right: 0;
    }

    .info-form:has(.dynamic-kit) > .container {
        padding-left: 0;
        padding-right: 0;
    }

    .dynamic-kit__catalog-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dynamic-kit__complimentary-shirt-fields {
        grid-template-columns: 1fr;
    }

    .dynamic-kit__business-panel {
        grid-template-columns: 1fr;
    }

    .dynamic-kit__business-image {
        justify-self: center;
        max-width: 280px;
    }

    .dynamic-kit__product {
        align-items: start;
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .dynamic-kit__product-image {
        grid-row: 1 / span 3;
        height: 46px;
        width: 46px;
    }

    .dynamic-kit__product-price {
        grid-column: 2;
    }

    .dynamic-kit__quantity {
        grid-column: 2;
        justify-self: start;
    }

    .dynamic-kit__summary {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dynamic-kit__summary > div {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }
}