.kit-item-list .kit-item[qty] .product-box-quantity {
    display: flex;
}

.mounting-container {
    margin-bottom: 1rem;
}

.mounting-container .summary-item {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.75rem;
    height: 2.25rem;
    border-radius: 0.25rem;
    background: rgba(3, 130, 185, 0.35);
    color: #003C56;
}

.mounting-container .summary-item.incomplete {
    color: var(--failure-700, #A11219);
    background: var(--failure-300, #F7C9CE);
}

.mounting-container .array-watts {
    margin-right: auto;
}

.mounting-overview {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 0.5rem;
}

.mounting-overview .mounting-summary {
    display: flex;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    background-color: var(--neutral-200, #F2F2F2);
}

.mounting-overview .mounting-summary .summary-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.mounting-overview .mounting-summary .summary-items h4 {
    margin-right: 0.5rem;
}

.mounting-overview .mounting-summary .summary-btn {
    margin-left: 1rem;
    background: var(--neutral-100, #FFFFFF);
    font-weight: unset;
    height: 2.25rem;
}

.mounting-overview .mounting-summary .summary-btn:hover {
    background: var(--neutral-400, #C6C6C6);
}

.mounting-overview .mounting-summary .summary-btn:disabled {
    background: var(--neutral-600, #4A4A4A);
    color: var(--neutral-100, #FFFFFF);
    cursor: not-allowed;
}

@media (max-width: 500px) {
    .mounting-container .summary-item,
    .mounting-overview .mounting-summary .summary-btn {
        padding: 0 0.5rem;
        height: 1.75rem;
    }
}

.mounting-bom {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    align-self: stretch;

    padding: 0.375rem;
    background: #F2F2F2;
    border-radius: 0.25rem;
    border: 1px solid #003c56;
}

.mounting-bom:not(.empty):hover {
    cursor: pointer;
    background: #E8E8E8;
}

.mounting-bom .overview-item {
    background: transparent;
    padding: 0;
    height: 46px;
}

.mounting-bom .overview-item .product-box-price ._loading-spinner-wrapper .spinner {
    width: 32px;
    height: 32px;
}

.mounting-bom .overview-item .product-box-price ._loading-spinner-wrapper span {
    display: none;
}

.mounting-bom .overview-item .dropdown-icon {
    margin: 0.5rem;
    margin-left: 0;
    transition: transform 250ms ease;
    transform-origin: center;
}

.mounting-bom .overview-item .product-box-price:empty ~ .dropdown-icon {
    display: none;
}

.mounting-bom.open {
    border-radius: 0.5rem;
}

.mounting-bom.open .overview-item .dropdown-icon {
    transform: rotate(180deg);
}

.mounting-bom .kit-item-list {
    display: none;
}

.mounting-bom.open .kit-item-list {
    display: flex;
}

.mounting-bom .kit-item-list .kit-item.default-item {
    border: 1px solid transparent;
    padding-right: 2.75rem;
}

.mounting-bom .kit-item-list .kit-item.default-item.not-available:not(.hidden) {
    display: flex;
    opacity: 0.25;
}

.roof-list {
    align-self: stretch;
}

.roof {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--neutral-300, #E8E8E8);
    border-radius: 0.5rem;
    padding: 1rem;
    gap: 0.5rem;
}

.roof .roof-delete-btn {
    position: absolute;
    right: 1rem;
}

.roof .roof-type-selector,
.roof .system-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.roof .roof-type-selector .roof-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.roof .roof-type-selector:not(:has(.kit-item-list .selected)) ~ :is(.system-selector, .roof-designer),
.roof .system-selector:not(:has(.kit-item-list .selected)) ~ .roof-designer {
    display: none;
}

.mounting-preferences .preferences-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

.mounting-preferences .preferences-selector .hooks,
.mounting-preferences .preferences-selector .sub-hooks .sub-hook-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 1 300px;
}

.mounting-preferences .preferences-selector .sub-hooks,
.mounting-preferences .preferences-selector .sub-hooks .sub-hook-selector.multi-select {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
}

.roof-editor {
    align-self: stretch;
}

.roof-designer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    --color-panel: #003C56;
    --color-panel-selecting: #4395D7;
    --color-panel-deleting: #C11F24;

    --color-roof-background: #D9D9D9;
    --color-roof-border: #C6C6C6;
    --color-tooltip-border: #C6C6C6;
}

.roof-designer .roof-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.roof-designer .roof-controls .switch-orientation .orientation-icon {
    display: none;
}

@media (max-width: 500px) {
    .roof-designer .roof-controls .switch-orientation {
        min-width: 2rem;
        padding: 0.5rem;
    }

    .roof-designer .roof-controls .switch-orientation .orientation-icon {
        display: inline-block;
    }

    .roof-designer .roof-controls .switch-orientation .orientation-text {
        display: none;
    }
}

.roof-designer .roof-controls .roof-info {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 0.375rem;
}

.roof-designer .roof-controls .roof-help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.roof-designer .roof-controls .roof-size {
    color: var(--neutral-600, #4A4A4A);
    font-weight: 700;
}

.roof-designer .roof-controls .size-controls {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 1120px) {
    .roof-designer .roof-controls .size-controls button {
        padding: 0;
    }

    .roof-designer .roof-controls .size-controls .size-text {
        display: none;
    }
}

.roof-designer .roof-table-wrapper {
    position: relative;
    border: 4px solid var(--color-roof-border);
    background-color: var(--color-roof-background);
}

.roof-designer .roof-table-wrapper .roof-table {
    cursor: pointer;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    transition: width 0.4s ease-in-out;
}

.roof-designer .roof-table-wrapper .roof-table:has(.roof-panel.portrait) {
    width: min(100%, 60vh);
}

.roof-designer .roof-table-wrapper .roof-table td {
    padding: 0;
}

.roof-designer .roof-table-wrapper .roof-table .roof-panel {
    transition: background-color 0.4s;
    touch-action: none;
    border: 2px solid var(--color-roof-background);
    /* sub-pixel rounding issues */
    outline: 0.1px solid var(--color-roof-background);
    background-color: white;
}

.roof-designer .roof-table-wrapper .roof-table .roof-panel.landscape {
    aspect-ratio: 3 / 2;
}

.roof-designer .roof-table-wrapper .roof-table .roof-panel.portrait {
    aspect-ratio: 2 / 3;
}

@media (hover: hover) {
    .roof-designer .roof-table-wrapper .roof-table .roof-panel:hover {
        background-color: var(--color-panel-selecting);
    }

    .roof-designer .roof-table-wrapper .roof-table .roof-panel.selected:hover {
        background-color: var(--color-panel-deleting);
    }
}

.roof-designer .roof-table-wrapper .roof-table .roof-panel.selected,
.roof-designer .roof-table-wrapper .roof-table .roof-panel.selected.selecting {
    background-color: var(--color-panel);
}

.roof-designer .roof-table-wrapper .roof-table .roof-panel.selecting {
    background-color: var(--color-panel-selecting);
}

.roof-designer .roof-table-wrapper .roof-table .roof-panel.deleting {
    background-color: var(--color-panel-deleting);
}

@media (max-width: 500px) {
    .roof-designer .roof-table-wrapper {
        border-width: 2px;
    }

    .roof-designer .roof-table-wrapper .roof-table .roof-panel {
        border-width: 1px;
    }
}

.roof-designer .roof-designer-tooltip {
    position: fixed;
    opacity: 0;
    top: 50vh;
    left: 50vw;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: nowrap;

    margin: 1rem 0 0 1rem;
    padding: 0.75rem;
    background: #FFFFFF;
    border: 2px solid var(--color-tooltip-border);
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
}

@media (pointer: coarse) {
    .roof-designer .roof-designer-tooltip {
        transform: translate(-50%, -150%);
        margin: 0;
    }
}

.roof-designer .roof-designer-tutorial {
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.8s;
    pointer-events: none;
}

.roof-designer .roof-designer-tutorial .helper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    font-size: 1.5rem;
    color: #003C56;
    padding: 1.5rem;
    max-width: 80%;
    text-align: center;
}

.roof-designer .roof-designer-tutorial .helper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    filter: blur(0.5rem);
    border-radius: 1.5rem;
}

.roof-designer .roof-designer-tutorial .helper span {
    z-index: 1
}

.roof-designer .roof-designer-tutorial .helper .additional-text {
    font-size: 1rem;
}

.roof-designer .roof-designer-tutorial .zoom-helper {
    flex-direction: row;
    align-items: baseline;
    padding: 1rem;
    text-align: right;
    position: absolute;
    top: 0;
    right: 3.5rem;
}

@media (max-width: 1120px) {
    .roof-designer .roof-designer-tutorial .zoom-helper {
        right: 0;
    }
}

.roof-designer .roof-designer-tutorial .zoom-helper::before {
    border-radius: 1rem;
}

.roof-designer .roof-designer-tutorial .zoom-helper .look-here {
    flex-shrink: 0;
    background-image: url("/icon/look-here.svg");
    height: 20px;
    width: 48px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

@media (max-width: 600px) {
    .roof-designer .roof-designer-tutorial .helper {
        font-size: 1.25rem;
        max-width: 90%;
    }

    .roof-designer .roof-designer-tutorial .helper .additional-text {
        font-size: 0.875rem;
    }

    /* the extra text usually ends up overlapping at this sort of width */
    .roof-designer:has(.roof-panel.landscape) .roof-designer-tutorial .zoom-helper {
        display: none;
    }
}

.roof-designer .roof-designer-tooltip.visible,
.roof-designer .roof-designer-tutorial.visible {
    opacity: 1;
}

@media (hover: hover) {
    .roof-designer:has(.roof-help:hover) .roof-designer-tutorial {
        opacity: 1;
    }
}

.mounting-container:has(.roof-editor:not(.hidden)) ~ .container {
    display: none;
}

.mounting-container .incomplete-warning {
    display: flex;
    margin-top: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    gap: 0.25rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 2.5rem;
    border: 2px solid var(--warning-700, #A9580E);
    color: var(--warning-700, #A9580E);
    font-weight: 700;
    background-color: var(--warning-300, #F9F7C9);
}

.mounting-container .incomplete-warning .incomplete-warning-button {
    background-color: var(--warning-500, #E8B214);
    height: 2rem;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
}

.mounting-container .incomplete-warning .incomplete-warning-button:hover {
    background-color: #D39412;
}

.mounting-container .incomplete-warning .incomplete-warning-button:hover .icon {
    animation: arrow-bounce 0.4s infinite alternate ease-in;
}

@media (max-width: 500px) {
    .mounting-container .incomplete-warning {
        font-size: 0.875rem;
    }
}

@keyframes arrow-bounce {
	from { transform: translateY(0.1rem) }
    to { transform: translateY(-0.1rem) }
}

.inverter-container .inverter-filters {
    display: flex;
    flex-wrap: wrap;
    align-self: stretch;
    gap: 0.5rem;
}

.choice-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-self: stretch;
}

.choice-bar .optimiser-choice-btn {
    flex: 1 0 250px;
    font-size: 1.25rem;
    height: 55px;
}

.kit-item-list .kit-item.default-item {
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #003C56;
}

.kit-item-list .kit-item.default-item .product-box-title h3 {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.kit-item-list.hide-kit-item .kit-item.default-item:hover {
    background: #FFFFFF;
}

.kit-item-list .kit-item.default-item img {
    width: 30px;
    height: 30px;
}

.kit-item-list .kit-items:empty + .no-results-found .reset-filters {
    display: none;
}

/* override rule from kit-builder.css for mounting container only - just want to hide the add kit button */
.container.mounting-container:has(._loading-spinner-wrapper) ~ .extra-bar {
    display: flex;
}

.container.mounting-container:has(._loading-spinner-wrapper) ~ .extra-bar .add-kit {
    display: none;
}