.octane-catalog-builders-blocks {
    height: 100%;
    min-height: 0;
}

.octane-catalog-builders-blocks-preview {
    flex: 0 0 150px;
    height: 150px;
    border-radius: 4px;
    background: #2f2f2f;
}

.octane-catalog-builders-blocks-name {
    position: absolute;
    top: 6px;
    left: 8px;
    max-width: 70%;
    color: #ffffff !important;
    text-shadow: 0 1px 0 #000000;
}

.octane-catalog-builders-blocks-shapes {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.octane-catalog-builders-blocks-actions {
    flex: 0 0 auto;
    padding: 4px 2px 2px;
}

/* AIR builderWidget (360 x 60): the hint (u_small) at (5, 3); the error strip over it (0, 0, 25 high) with its
   icon and the red bold message; place_one (button_thick style 5, 0xdda100) and place_many (0x0a9bc5), 130 x 30 at
   y 30. Disabled while the furni cannot be placed, still drawn in their colour. */
.octane-catalog-window .octane-builders-widget {
    position: relative;
    width: 100%;
    height: 60px;
    flex: 0 0 60px;
}

/* On a default-layout page (a Builders Club page like "Verhuur Meubels") the widget sits in the purchase row, a 30 px high flex row made
   for the buy button: there it takes the whole row, 60 px high and anchored at the bottom like AIR's builderWidget, instead of being
   squeezed to its 60 px flex basis and having its buttons clipped. */
.octane-catalog-window .octane-catalog-purchase-row:has(.octane-builders-widget) {
    top: auto;
    bottom: 0;
    height: 60px;
}

.octane-catalog-window .octane-catalog-offer-actions:has(> .octane-builders-widget) {
    width: 100%;
    height: 60px;
    margin: 0;
}

.octane-catalog-window .octane-catalog-offer-actions > .octane-builders-widget {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.octane-catalog-window .octane-builders-widget-hint {
    position: absolute;
    top: 3px;
    left: 5px;
    color: #000000;
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-size: 11px;
    line-height: 15px;
}

.octane-catalog-window .octane-builders-widget-error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 25px;
}

.octane-catalog-window .octane-builders-widget-error::before {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 22px;
    border-radius: 4px;
    background: #f2d193;
    content: "";
}

.octane-catalog-window .octane-builders-widget-error-icon {
    position: absolute;
    top: 0;
    left: 4px;
    width: 25px;
    height: 25px;
    background: no-repeat center / 25px 25px url("../../assets/images/catalog/builders/error_full.png");
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-window .octane-builders-widget-error[data-error="furnilimit"] .octane-builders-widget-error-icon {
    background-image: url("../../assets/images/catalog/builders/error_furnilimit.png");
}

.octane-catalog-window .octane-builders-widget-error[data-error="notroom"] .octane-builders-widget-error-icon {
    background-image: url("../../assets/images/catalog/builders/error_notroom.png");
}

.octane-catalog-window .octane-builders-widget-error[data-error="room"] .octane-builders-widget-error-icon {
    background-image: url("../../assets/images/catalog/builders/error_room.png");
}

.octane-catalog-window .octane-builders-widget-error[data-error="grouproom"] .octane-builders-widget-error-icon {
    background-image: url("../../assets/images/catalog/builders/error_grouproom.png");
}

.octane-catalog-window .octane-builders-widget-error[data-error="userinroom"] .octane-builders-widget-error-icon {
    background-image: url("../../assets/images/catalog/builders/error_userinroom.png");
}

.octane-catalog-window .octane-builders-widget-error-message {
    position: absolute;
    top: 5px;
    left: 38px;
    right: 4px;
    overflow: hidden;
    color: #de0e0a;
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octane-catalog-window .octane-builders-place-button {
    appearance: none;
    position: absolute;
    top: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 30px;
    padding: 0 7px;
    border: 5px solid transparent;
    border-image-slice: 5 fill;
    border-image-width: 5px;
    border-image-repeat: stretch;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    image-rendering: var(--octane-pixel-art, pixelated);
    cursor: pointer;
}

.octane-catalog-window .octane-builders-place-button.is-one {
    border-image-source: var(--habbo-skin-shiny-thick-tint-dda100);
    left: calc(50% - 150px);
}

.octane-catalog-window .octane-builders-place-button.is-one:hover:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-thick-tint-dda100-hover);
}

.octane-catalog-window .octane-builders-place-button.is-one:active:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-thick-tint-dda100-pressed);
}

.octane-catalog-window .octane-builders-place-button.is-many {
    border-image-source: var(--habbo-skin-shiny-thick-tint-0a9bc5);
    left: calc(50% + 21px);
}

.octane-catalog-window .octane-builders-place-button.is-many:hover:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-thick-tint-0a9bc5-hover);
}

.octane-catalog-window .octane-builders-place-button.is-many:active:not(:disabled) {
    border-image-source: var(--habbo-skin-shiny-thick-tint-0a9bc5-pressed);
}

.octane-catalog-window .octane-builders-place-button:disabled {
    opacity: 1;
    cursor: default;
}


.octane-color-preview-box {
    display: flex;
    flex: 0 0 100px;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 90px;
    overflow: hidden;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #cfcfcf;
}

.octane-color-preview-box .furni-image {
    max-width: 100%;
    max-height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-color-preview-arrow {
    flex: 0 0 auto;
    color: #3ba63b;
    font-size: 26px;
}

.octane-color-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    min-height: 32px;
    max-height: 150px;
    padding: 6px;
    overflow-y: auto;
    border-radius: 6px;
    background: #d6d6d6;
    border: 1px solid #b4b4b4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.octane-color-swatch-grid.is-room {
    max-height: 64px;
    background: #e2e2e2;
}

.octane-color-swatch {
    width: 26px;
    height: 20px;
    flex: 0 0 26px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #8d8d8d;
    cursor: pointer;
}

.octane-color-swatch:hover {
    box-shadow: 0 0 0 1px #3d3d3d;
}

.octane-color-swatch.is-active {
    box-shadow: 0 0 0 2px #1d1d1d;
}

.octane-furni-recolor {
    width: 320px;
}

/* recolorable_furniture page: the palette sits between the furni and the place button. */
.octane-catalog-recolorable-palette {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* layout_recolorable_furniture: itemGridWidget 116 px, then the palette (174 px: the u_small caption and a 152 px
   bordered box) with AIR's 27 x 22 swatches: ctlg_clr_27x22_1 frame, _2 tinted with the colour, _3 when chosen. */
.octane-catalog-recolorable .octane-catalog-builders-blocks-shapes {
    flex: 0 0 116px;
}

/* The catalogue window is shorter than AIR's 515 px page: the palette gives way (its box scrolls) so the builder
   widget under it always stays whole. */
.octane-catalog-recolorable .octane-catalog-recolorable-palette {
    flex: 0 1 174px;
    min-height: 48px;
}

.octane-catalog-recolorable-palette-caption {
    color: #000000;
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-size: 11px;
    line-height: 17px;
}

.octane-catalog-recolorable-palette-box {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: 0;
    padding: 3px;
    overflow-y: auto;
    border: 1px solid #a5a5a5;
    border-radius: 5px;
    background: #d9d9d9;
}

.octane-catalog-recolorable-swatch {
    appearance: none;
    position: relative;
    flex: 0 0 27px;
    width: 27px;
    height: 22px;
    padding: 0;
    border: 0;
    background: no-repeat url("../../assets/images/catalog/builders/ctlg_clr_27x22_1.png");
    image-rendering: var(--octane-pixel-art, pixelated);
    cursor: pointer;
}

.octane-catalog-recolorable-swatch::before {
    position: absolute;
    inset: 0;
    background-color: var(--swatch-color);
    content: "";
    -webkit-mask: no-repeat url("../../assets/images/catalog/builders/ctlg_clr_27x22_2.png");
    mask: no-repeat url("../../assets/images/catalog/builders/ctlg_clr_27x22_2.png");
}

.octane-catalog-recolorable-swatch.is-chosen::after {
    position: absolute;
    inset: 0;
    background: no-repeat url("../../assets/images/catalog/builders/ctlg_clr_27x22_3.png");
    content: "";
}

.octane-catalog-recolorable-palette .octane-color-swatch-grid {
    max-height: 96px;
}