.subcategory-page {
    background: #f3f3f3;
}

.subcategory-page .subcategory-hero {
    height: clamp(360px, 34vw, 500px);
    margin: 0;
    overflow: hidden;
}

.subcategory-page .subcategory-hero.exteriorHero:before {
    background-image: var(--subcategory-hero-image, url(https://s3.us-east-2.amazonaws.com/dyke-site-assets/resources/subpages/exteriorHero.jpg));
}

.subcategory-page .subcategory-hero.interiorHero:before {
    background-image: var(--subcategory-hero-image, url(https://s3.us-east-2.amazonaws.com/dyke-site-assets/resources/subpages/interiorHero.jpg));
}

/* CMS content pages (pages/app.php). The custom property is always set there, so the
   url() is only a safety net if the property is ever missing. */
.subcategory-page .subcategory-hero.contentHero:before {
    background-image: var(--subcategory-hero-image, url(https://s3.us-east-2.amazonaws.com/dyke-site-assets/resources/subpages/aboutHero.jpg));
}

.subcategory-page .subcategory-hero:after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.12) 100%);
}

.subcategory-page .subcategory-hero__inner {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.subcategory-page .subcategory-hero__panel {
    position: absolute;
    top: 50%;
    left: 56px;
    width: min(530px, calc(100% - 112px));
    min-height: 180px;
    padding: 24px 28px 22px;
    transform: translateY(-50%);
    background: rgba(42, 49, 135, 0.82);
    color: #fff;
}

.subcategory-page .subcategory-hero__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.subcategory-page .subcategory-hero h1 {
    position: static;
    width: auto;
    margin: 0 0 14px;
    padding: 0;
    background: none !important;
    color: #fff;
    /* 768px and up. The max-width:767px block below drops this to 24px, so this
       value only ever renders on tablet and desktop. */
    font-size: 34px;
    line-height: 0.96;
    text-transform: none;
}

.subcategory-page .subcategory-hero__content {
    max-width: 520px;
}

.subcategory-page .subcategory-hero__copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.55;
}

.subcategory-page .subcategory-hero__copy--expanded {
    margin-top: 14px;
}

.subcategory-page .subcategory-hero-detail {
    background: #fff;
}

.subcategory-page .subcategory-hero-detail__inner {
    position: relative;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 36px 56px 40px;
}

.subcategory-page .subcategory-hero-detail__close {
    position: absolute;
    top: 18px;
    right: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6a6f78;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.subcategory-page .subcategory-hero-detail__close:hover,
.subcategory-page .subcategory-hero-detail__close:focus {
    color: #3d4653;
    outline: none;
}

.subcategory-page .door-detail-modal .modal-dialog {
    width: calc(100vw - 48px);
    max-width: 1060px;
    margin: 34px auto;
}

.subcategory-page .door-detail-modal .modal-content {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.subcategory-page .door-detail-modal__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 0;
}

.subcategory-page .door-detail-modal__toolbar .btn {
    min-width: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
}

.subcategory-page .door-detail-modal__quote.btn {
    background: #2f8f2f !important;
    border-color: #2f8f2f !important;
}

.subcategory-page .door-detail-modal__close-icon {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6f747d;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.subcategory-page .door-detail-modal__close-icon:hover,
.subcategory-page .door-detail-modal__close-icon:focus {
    color: #2d3642;
    outline: none;
}

.subcategory-page .door-detail-modal .modal-body {
    max-height: calc(100vh - 140px);
    padding: 14px 20px 24px;
    overflow-y: auto;
}

.subcategory-page .door-detail-modal__loading,
.subcategory-page .door-detail-modal__empty {
    padding: 32px 0;
    color: #5d6168;
    font-size: 15px;
    text-align: center;
}

.subcategory-page .door-detail-modal-panel .doorInfo {
    width: 100%;
    margin: 0;
    padding: 0;
}

.subcategory-page .door-detail-modal-panel #doorPreview {
    width: 100%;
    padding: 20px 0 0;
    text-align: center;
}

.subcategory-page .door-detail-modal-panel .previewDisclaimer {
    margin-left: 0 !important;
}

@media (min-width: 1024px) {
    .subcategory-page .door-detail-modal-panel {
        display: flex;
        align-items: flex-start;
    }

    .subcategory-page .door-detail-modal-panel .doorInfo {
        flex: 1 1 auto;
        width: calc(100% - 280px);
        min-width: 0;
        padding-right: 18px;
    }

    .subcategory-page .door-detail-modal-panel #doorPreview {
        flex: 0 0 260px;
        width: 260px;
        padding: 0;
        text-align: right;
    }

    .subcategory-page .door-detail-modal-panel #doorPreview .doorListViewImage {
        margin-top: 0;
    }
}

.subcategory-page .subcategory-hero-detail__content {
    max-width: 960px;
    color: #454545;
    font-size: 16px;
    line-height: 1.75;
}

.subcategory-page .subcategory-hero-detail__content p {
    margin: 0;
}

.subcategory-page .subcategory-hero__more {
    display: inline;
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none !important;
    color: #89d1ff !important;
    font-size: 16px;
    font-weight: 700;
    line-height: inherit;
    text-decoration: none !important;
}

.subcategory-page .subcategory-hero__more:hover,
.subcategory-page .subcategory-hero__more:focus {
    color: #b9e6ff !important;
}

.subcategory-page .subcategory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 16px 28px 0;
}

.subcategory-page .locateDealer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: #f3f3f3;
}

.subcategory-page .breadcrumbs {
    float: none;
    padding: 0;
}

@media screen and (min-width: 768px) {
    .subcategory-page .breadcrumbs {
        padding-left: 20px;
    }
}

.subcategory-page .locateDealerButton2 {
    flex: 0 0 auto;
    border: 0;
    border-radius: 4px;
    background: #2a3187 !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    padding: 12px 18px;
}

.subcategory-page .subcategory-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 18px 28px 56px;
}

.subcategory-page .subcategory-sidebar {
    position: sticky;
    top: 124px;
    align-self: start;
}

.subcategory-page .subcategory-results-panel {
    min-width: 0;
}

.subcategory-page .subcategory-results-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 0 14px;
}

.subcategory-page .subcategory-config-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
}

.subcategory-page .subcategory-config-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.subcategory-page .subcategory-config-option {
    display: block;
    position: relative;
    background: #e3e3e3;
    border: 1px solid #a8a8a8;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.subcategory-page .subcategory-config-option:hover {
    background: #d5d5d5;
    border-color: #9b9b9b;
}

.subcategory-page .subcategory-config-switch input:checked + .subcategory-config-option {
    background: #8d8d8d;
    border-color: #8d8d8d;
}

.subcategory-page .subcategory-config-option.single {
    width: 17px;
    height: 26px;
}

.subcategory-page .subcategory-config-option.double {
    width: 29px;
    height: 26px;
}

.subcategory-page .subcategory-config-option.side-lt,
.subcategory-page .subcategory-config-option.side-rt {
    width: 23px;
    height: 26px;
}

.subcategory-page .subcategory-config-option.side-two {
    width: 30px;
    height: 26px;
}

.subcategory-page .subcategory-config-option::before,
.subcategory-page .subcategory-config-option::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 2px;
    background: #a8a8a8;
}

.subcategory-page .subcategory-config-option.single::before,
.subcategory-page .subcategory-config-option.single::after {
    display: none;
}

.subcategory-page .subcategory-config-option.double::before {
    left: calc(50% - 1px);
}

.subcategory-page .subcategory-config-option.double::after {
    display: none;
}

.subcategory-page .subcategory-config-option.side-lt::before {
    left: calc(25% - 1px);
}

.subcategory-page .subcategory-config-option.side-lt::after {
    display: none;
}

.subcategory-page .subcategory-config-option.side-rt::before {
    left: calc(75% - 1px);
}

.subcategory-page .subcategory-config-option.side-rt::after {
    display: none;
}

.subcategory-page .subcategory-config-option.side-two::before {
    left: calc(24% - 1px);
}

.subcategory-page .subcategory-config-option.side-two::after {
    left: calc(76% - 1px);
}

.subcategory-page .subcategory-results-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

.subcategory-page .subcategory-results-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-left: auto;
    padding-right: 30px;
}

.subcategory-page .subcategory-results-count {
    white-space: nowrap;
}

.subcategory-page .subcategory-results-count strong {
    color: #1c1c1c;
}

.subcategory-page .subcategory-display-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.subcategory-page .subcategory-display-control label {
    margin: 0;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

.subcategory-page .subcategory-display-control select {
    min-width: 74px;
    height: 32px;
    border: 1px solid #d7d7d7;
    background: #fff;
    color: #444;
    font-size: 13px;
    padding: 0 12px;
}

.subcategory-page .subcategory-results-content {
    position: relative;
    margin: 0;
    padding: 0 !important;
}

.subcategory-page #doorResults {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.subcategory-page #doorResults > #noResults {
    grid-column: 1 / -1;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #e7e7e7;
    color: #4e4e4e;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.subcategory-page .debugQueryDump {
    display: none;
}

.subcategory-page .loadingContainer {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(243, 243, 243, 0.88);
}

.subcategory-page .filter-a {
    width: 100% !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #e7e7e7;
}

.subcategory-page .filter-a .config-nav {
    width: 100%;
    padding: 0;
}

.subcategory-page .subcategory-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 16px;
}

.subcategory-page .subcategory-filter-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.subcategory-page .subcategory-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.subcategory-page .filter-a .filterTitle {
    margin: 0;
    padding: 0;
    color: #202020;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subcategory-page .filter-a .filterSpacer {
    display: none;
}

.subcategory-page .filter-a .filterTitle .reset,
.subcategory-page .subcategory-filter-reset {
    margin-left: auto;
    color: #2a3187;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
}

.subcategory-page .subcategory-filter-count {
    margin-left: 4px;
    color: #8dc46f;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.subcategory-page .subcategory-filter-toggle {
    display: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d8d8e4;
    background: #fff;
    color: #2a3187;
    cursor: pointer;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
}

.subcategory-page .subcategory-filter-toggle:hover,
.subcategory-page .subcategory-filter-toggle:focus {
    color: #2a3187;
    outline: none;
    background: #f2f4ff;
}

.subcategory-page .subcategory-filter-toggle.is-open {
    background: #2a3187;
    border-color: #2a3187;
    color: #fff;
}

.subcategory-page .subcategory-filter-body {
    display: block;
}

.subcategory-page .filter-a .cell {
    display: block;
    width: 100%;
    margin: 0;
    border-top: 1px solid #ececec;
}

.subcategory-page .filter-a .cell.imglink {
    padding: 16px 18px !important;
}

.subcategory-page .filter-a .cell.imglink img {
    display: block;
    width: 100%;
    height: auto;
}

.subcategory-page .filter-a .cell .hx {
    position: relative;
    height: auto;
    margin: 0;
    padding: 18px 40px 18px 18px;
    border: 0;
    background: transparent;
    color: #202020 !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.subcategory-page .filter-a .cell .hx span {
    display: inline;
}

.subcategory-page .filter-a .cell .hx:after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: #202020;
    font-size: 18px;
    font-weight: 500;
}

.subcategory-page .filter-a .cell.open .hx:after {
    content: '-';
}

.subcategory-page .filter-a .cell.on .hx {
    background: transparent;
}

.subcategory-page .filter-a .cell ul {
    display: none;
    position: static;
    margin: 0;
    padding: 0 18px 16px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.subcategory-page .filter-a .cell.open ul {
    display: block;
}

.subcategory-page .filter-a .cell ul:before {
    display: none;
}

.subcategory-page .filter-a .cell li {
    margin: 0;
    padding: 0;
    color: #2a3187;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: capitalize;
}

.subcategory-page .filter-a .cell li ~ li {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

.subcategory-page .filter-a .cell li input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.subcategory-page .filter-a .cell li label {
    display: block;
    margin: 0;
    cursor: pointer;
    color: #1f2d83;
    transition: color 0.2s ease;
}

.subcategory-page .filter-a .cell li label:hover {
    color: #5e678d;
}

.subcategory-page .filter-a .cell li input:checked + label {
    color: #a4a7b0;
}

.subcategory-page .filter-a .cell.oneOffCheckbox {
    padding: 16px 18px !important;
}

.subcategory-page .filter-a .cell.oneOffCheckbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.subcategory-page .filter-a .cell.oneOffCheckbox label {
    display: block;
    margin: 0;
    color: #1f2d83;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    cursor: pointer;
}

.subcategory-page .filter-a .cell.oneOffCheckbox input:checked + label {
    color: #a4a7b0;
}

.subcategory-page .subcategory-filter-note {
    margin: 0;
    padding: 18px;
    border-top: 1px solid #ececec;
    color: #6f6f6f;
    font-size: 11px;
    line-height: 1.45;
}

.subcategory-page .subcategory-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 408px;
    margin: 0;
    padding: 20px 16px 16px;
    background: #fff;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    text-align: center;
}

/* min-height matches the badge's outer height -- 50px tall less its -10px bottom
   margin -- so the row occupies 40px whether the card carries badges or not. The
   two have to be kept in step: if this is lower, a badged card's row grows past
   it and every card below the badges (door image, title, buttons) sits 4px lower
   than on its unbadged neighbours in the same grid row. */
.subcategory-page .subcategory-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 8px;
}

/* Special-order / fire-rated / impact-rated / wind-zone marks. Fixed height with
   automatic width so the icons, which are not all the same aspect ratio, line up
   on their baseline and the row keeps its height whether a card has none or
   several. The negative bottom margin pulls the door image back up under the
   row: the circular artwork carries its own internal padding, so the 8px gap
   below .subcategory-card__badges reads as too much space once a badge is
   present. */
.subcategory-page .subcategory-card__badge {
    display: block;
    width: auto;
    height: 50px;
    margin-bottom: -10px;
}

.subcategory-page .subcategory-card__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 228px;
    margin-bottom: 18px;
}

.subcategory-page .subcategory-card .doorListViewImage {
    width: 100%;
    max-width: 170px;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    margin: 0 !important;
    pointer-events: none;
}

.subcategory-page .subcategory-card .doorName {
    margin: 0;
    color: #1e1e1e;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.subcategory-page .subcategory-card .doorMaterial {
    margin: 6px 0 0;
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.subcategory-page .subcategory-card__actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
}

.subcategory-page .subcategory-card .doorOptionsLink {
    height: auto;
    padding: 7px 12px;
    border: 1px solid #d8d8e4;
    border-radius: 0;
    background: #fff;
    color: #2a3187;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: none;
}

.subcategory-page .subcategory-card .doorOptionsLink:hover,
.subcategory-page .subcategory-card .doorOptionsLink:focus {
    background: #f2f4ff;
    color: #2a3187;
    text-decoration: none;
}

@media screen and (min-width: 1600px) {
    .subcategory-page .subcategory-toolbar {
        max-width: 1680px;
    }

    .subcategory-page .subcategory-hero-detail__inner {
        max-width: 1680px;
    }

    .subcategory-page .subcategory-body {
        max-width: 1680px;
    }

    .subcategory-page #doorResults {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1279px) {
    .subcategory-page #doorResults {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1023px) {
    .subcategory-page .subcategory-body {
        grid-template-columns: 1fr;
    }

    .subcategory-page .subcategory-sidebar {
        position: static;
    }

    .subcategory-page .subcategory-filter-toggle {
        display: inline-block;
    }

    .subcategory-page .subcategory-filters.is-collapsed .subcategory-filter-body {
        display: none;
    }

    .subcategory-page #doorResults {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .subcategory-page .subcategory-hero {
        height: 380px;
    }

    .subcategory-page .subcategory-hero__inner {
        padding-left: 0;
        padding-right: 0;
    }

    .subcategory-page .subcategory-hero-detail__inner,
    .subcategory-page .subcategory-toolbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .subcategory-page .subcategory-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .subcategory-page .subcategory-hero__panel {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: none;
        min-height: 0;
        height: auto;
        padding: 14px 16px 14px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .subcategory-page .subcategory-hero__content {
        max-width: none;
    }

    .subcategory-page .subcategory-hero h1 {
        margin-bottom: 8px;
        font-size: 24px;
    }

    .subcategory-page .subcategory-hero__eyebrow {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .subcategory-page .subcategory-hero__copy {
        font-size: 14px;
        line-height: 1.45;
    }

    .subcategory-page .subcategory-toolbar,
    .subcategory-page .locateDealer,
    .subcategory-page .subcategory-results-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .subcategory-page .subcategory-results-actions,
    .subcategory-page .subcategory-results-summary {
        width: 100%;
        justify-content: space-between;
    }

    .subcategory-page .subcategory-results-actions {
        padding-right: 0;
    }

    .subcategory-page .subcategory-config-switch {
        width: 100%;
        padding-left: 0;
        flex-wrap: nowrap;
    }

    .subcategory-page .locateDealerButton2 {
        width: 100%;
    }

    .subcategory-page .locateDealerButton2 {
        display: none !important;
    }

    .subcategory-page #doorResults {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .subcategory-page .subcategory-card {
        min-height: 360px;
        padding: 16px 12px 14px;
    }

    .subcategory-page .subcategory-card__media {
        height: 180px;
        margin-bottom: 12px;
    }

    .subcategory-page .subcategory-card .doorListViewImage {
        max-width: 128px;
        height: 172px !important;
        min-height: 172px !important;
        max-height: 172px !important;
    }

    .subcategory-page .subcategory-card__actions {
        flex-direction: column;
    }
}

@media screen and (max-width: 479px) {
    .subcategory-page #doorResults {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Filter options with no results behind them. Separate from .hide, which the
   glassType show/hide logic in pages/exteriorDoors.php owns. */
.subcategory-filters .is-unavailable {
    display: none !important;
}

/* The interior size chart is a 6-column grid where exterior's is 3, and screen.css
   hands .doorFilters and #doorSizes half of the doorInfo column each. Six columns do
   not fit in that half at modal width, so every column header and row label broke
   onto two lines: the chart read as squished, sat pushed to the right of a mostly
   empty Style/Material column, and its doubled row height forced the panel to
   scroll. Give the chart the room it needs and hold the labels on one line.

   Scoped to the modal, and the column split scoped further to data-use="interior".
   The standalone product pages do not render .door-detail-modal, and the exterior
   chart already fits its half, so both keep the 50/50 split they have today. */
@media (min-width: 1024px) {
    .subcategory-page .door-detail-modal-panel .doorWrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* the rating badges are a third child of .doorWrapper; keep them on their own
       row underneath rather than letting them join the two columns */
    .subcategory-page .door-detail-modal-panel .doorWrapper > .col-12 {
        flex: 0 0 100%;
    }

    .subcategory-page .door-detail-modal-panel[data-use="interior"] .doorFilters {
        flex: 0 0 190px;
        width: 190px;
        padding-right: 12px;
    }

    .subcategory-page .door-detail-modal-panel[data-use="interior"] .doorInfo #doorSizes {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}

.subcategory-page .door-detail-modal-panel #doorSizes .sizeTable tr th {
    white-space: nowrap;
}

.subcategory-page .door-detail-modal-panel[data-use="interior"] #doorSizes .sizeTable tr th,
.subcategory-page .door-detail-modal-panel[data-use="interior"] #doorSizes .sizeTable tr td {
    padding: 3px 10px;
}

/* getEpicorSizeChart() wraps the size-options heading in a bootstrap .col-12 and
   nudges it with an inline margin-left:6px, so the heading is 6px wider than the
   column it sits in -- enough to arm the overflow-x below with a scrollbar under a
   chart that otherwise fits. Drop the gutter and the nudge so the heading lines up
   with the chart's left edge instead. */
.subcategory-page .door-detail-modal-panel #doorSizes > .col-12 {
    width: auto;
    margin-left: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* last resort below 1024px, where the chart is wider than the stacked panel */
.subcategory-page .door-detail-modal-panel #doorSizes {
    max-width: 100%;
    overflow-x: auto;
}