.octane-catalog-window {
    /* AIR: the window body is #e9e9e1; the navigation and item-grid boxes are #d2d1cb inside a #757571 line with a
       #f4f4f0 inner edge. */
    --catalog-standard-bg: #e9e9e1;
    --catalog-standard-box: #d2d1cb;
    --catalog-standard-box-line: #757571;
    --catalog-standard-box-edge: #f4f4f0;
    --catalog-standard-panel: #f7f7f2;
    --catalog-standard-panel-2: #e7e7df;
    --catalog-standard-border: #9d9d96;
    --catalog-standard-border-dark: #6f6f6a;
    --catalog-standard-text: #222222;
    --catalog-standard-muted: #666666;
    --catalog-standard-blue: #418db0;
    --catalog-standard-blue-dark: #0e3f52;
    --catalog-standard-blue-border: #376275;
    --catalog-standard-select: #63c5e9;
    --catalog-standard-select-outer: #82d1ed;
    --catalog-standard-bc: #ff8d00;
    --catalog-standard-bc-outer: #ffb53c;
    /* Quantity stepper +/- sprites, kept identical to origin/main so the
       glyphs stay put through hover/active/disabled states. */
    --habbo-stepper-plus: url("../../assets/images/catalog/buttons/plus.png");
    --habbo-stepper-plus-hover: url("../../assets/images/catalog/buttons/plus_hover.png");
    --habbo-stepper-plus-pressed: url("../../assets/images/catalog/buttons/plus_pressed.png");
    --habbo-stepper-plus-disabled: url("../../assets/images/catalog/buttons/plus_disabled.png");
    --habbo-stepper-minus: url("../../assets/images/catalog/buttons/minus.png");
    --habbo-stepper-minus-hover: url("../../assets/images/catalog/buttons/minus_hover.png");
    --habbo-stepper-minus-pressed: url("../../assets/images/catalog/buttons/minus_pressed.png");
    --habbo-stepper-minus-disabled: url("../../assets/images/catalog/buttons/minus_disabled.png");

    width: var(--octane-catalog-window-width, 570px) !important;
    height: var(--octane-catalog-window-height, 635px) !important;
    min-width: var(--octane-catalog-window-width, 570px) !important;
    max-width: var(--octane-catalog-window-width, 570px) !important;
    min-height: 570px !important;
    max-height: calc(100vh - 24px) !important;
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--catalog-standard-text);
    overflow: hidden;
    box-sizing: border-box;
}

.draggable-window:has(> .octane-catalog-window) {
    width: var(--octane-catalog-window-width, 570px) !important;
    height: var(--octane-catalog-window-height, 635px) !important;
    min-width: var(--octane-catalog-window-width, 570px) !important;
    max-width: var(--octane-catalog-window-width, 570px) !important;
}

.octane-catalog-window img,
.octane-catalog-window canvas,
.octane-catalog-window .octane-icon,
.octane-catalog-window [class*='octane-catalog-standard-button'],
.octane-catalog-window [class*='octane-catalog-standard-buy-button'],
.octane-catalog-window [class*='octane-catalog-standard-gift-button'] {
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-mobile-header,
.octane-catalog-admin-banner,
.octane-catalog-layout-header-shell,
.octane-catalog-layout-hero,
.octane-catalog-window .octane-catalog-header,
.octane-catalog-window .builders-club-status-shell {
    display: none !important;
}

.octane-catalog-window .octane-catalog-header-publish {
    position: absolute !important;
    top: 5px !important;
    right: 32px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 22px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 22px !important;
    z-index: 10 !important;
}

.octane-catalog-window .octane-catalog-header-publish.has-pending {
    animation: octanePublishPulse 1.4s ease-in-out infinite;
}

@keyframes octanePublishPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(61, 204, 69, 0); }
    50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 8px rgba(61, 204, 69, 0.75); }
}

.octane-catalog-window .octane-catalog-default-admin {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.octane-catalog-window .octane-catalog-default-admin button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 10px !important;
    border: 3px solid transparent !important;
    border-image-source: var(--habbo-skin-button) !important;
    border-image-slice: 3 fill !important;
    border-image-width: 3px !important;
    border-image-repeat: stretch !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    image-rendering: var(--octane-pixel-art, pixelated) !important;
}

.octane-catalog-window .octane-catalog-default-admin button:hover {
    filter: none;
    border-image-source: var(--habbo-skin-button-hover) !important;
    color: #111111 !important;
}

.octane-catalog-window .octane-catalog-default-admin button:active {
    filter: none;
    border-image-source: var(--habbo-skin-button-pressed) !important;
    box-shadow: none !important;
}

.octane-catalog-window .octane-catalog-default-admin button.text-success,
.octane-catalog-window .octane-catalog-default-admin button[class*="success"] {
    border-width: 5px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image-source: var(--habbo-skin-shiny-thick-green) !important;
    border-image-slice: 5 fill !important;
    border-image-width: 5px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}

.octane-catalog-window .octane-catalog-default-admin button.text-success:hover,
.octane-catalog-window .octane-catalog-default-admin button[class*="success"]:hover {
    border-image-source: var(--habbo-skin-shiny-thick-green-hover) !important;
    color: #ffffff !important;
}

.octane-catalog-window .octane-catalog-default-admin button svg {
    width: 11px !important;
    height: 11px !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

.octane-catalog-window .octane-catalog-default-admin button .font-mono {
    color: #4a4a44 !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
}

.octane-catalog-tabs-shell .octane-card-tab-item.octane-catalog-admin-tab {
    flex: 0 0 auto !important;
    /* 18px of caps + 12px for the 10px gear. */
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 4px 13px 8px !important;
    margin-left: 0 !important;
}

.octane-catalog-admin-modal {
    --catalog-admin-bg: #ecece4;
    --catalog-admin-panel: #f7f7f2;
    --catalog-admin-panel-alt: #e5e5dc;
    --catalog-admin-panel-top: #fffdf5;
    --catalog-admin-border: #9d9d96;
    --catalog-admin-border-dark: #5f5f59;
    --catalog-admin-text: #20201d;
    --catalog-admin-muted: #60605a;
    --catalog-admin-blue: #418db0;
    --catalog-admin-blue-dark: #0e3f52;
    --catalog-admin-danger: #b83b32;

    color: var(--catalog-admin-text) !important;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-admin-modal .octane-card-header-shell {
    background: linear-gradient(180deg, #58a8c5 0%, var(--catalog-admin-blue) 45%, var(--catalog-admin-blue-dark) 100%) !important;
}

.octane-catalog-admin-modal .octane-card-title {
    padding: 0 28px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.octane-catalog-admin-body {
    background: var(--catalog-admin-bg);
    color: var(--catalog-admin-text);
}

.octane-catalog-admin-modal :where(.bg-white, .bg-gray-50, .bg-card-grid-item) {
    background: linear-gradient(180deg, var(--catalog-admin-panel-top) 0%, var(--catalog-admin-panel) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}

.octane-catalog-admin-modal :where(.border, .border-card-grid-item-border, .border-primary\/40) {
    border-color: var(--catalog-admin-border) !important;
}

.octane-catalog-admin-modal :where(.text-primary) {
    color: var(--catalog-admin-blue-dark) !important;
}

.octane-catalog-admin-modal :where(.text-muted, .text-dark) {
    color: var(--catalog-admin-muted) !important;
}

.octane-catalog-admin-body :where(label, p),
.octane-catalog-admin-body :where(span[class*="text-"], div[class*="text-"]) {
    color: inherit;
}

.octane-catalog-admin-modal :where(input, select, .octane-select-trigger, textarea) {
    min-height: 24px;
    background: #fffdf4 !important;
    border-color: var(--catalog-admin-border-dark) !important;
    color: var(--catalog-admin-text) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}

.octane-catalog-admin-modal :where(input:focus, select:focus, .octane-select-trigger:focus, textarea:focus) {
    border-color: var(--catalog-admin-blue) !important;
    box-shadow: 0 0 0 2px rgba(99, 197, 233, 0.35), inset 0 1px 0 rgba(0, 0, 0, 0.16) !important;
}

.octane-catalog-admin-modal :where(input::placeholder, textarea::placeholder) {
    color: #77766d !important;
}

.octane-catalog-admin-modal :where(input[type="checkbox"]) {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 14px !important;
    height: 14px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    accent-color: var(--catalog-admin-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.octane-catalog-admin-input {
    min-height: 24px;
    padding: 4px 8px;
    border: 2px solid var(--catalog-admin-border-dark);
    border-radius: 4px;
    background: #fffdf4;
    color: var(--catalog-admin-text);
    font-size: 11px;
    line-height: 1.2;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.octane-catalog-admin-input::placeholder {
    color: #77766d;
}

.octane-catalog-admin-input:focus {
    border-color: var(--catalog-admin-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 197, 233, 0.35), inset 0 1px 0 rgba(0, 0, 0, 0.16);
}

.octane-catalog-admin-panel,
.octane-catalog-admin-note {
    border: 2px solid var(--catalog-admin-border);
    border-radius: 4px;
    background: linear-gradient(180deg, var(--catalog-admin-panel-top) 0%, var(--catalog-admin-panel) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 1px 0 rgba(0, 0, 0, 0.08);
}

.octane-catalog-admin-panel {
    padding: 10px;
}

.octane-catalog-admin-note {
    padding: 4px 10px;
    color: var(--catalog-admin-muted);
    font-size: 10px;
}

.octane-catalog-admin-label,
.octane-catalog-admin-section-title {
    color: var(--catalog-admin-muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
}

.octane-catalog-admin-label.is-primary,
.octane-catalog-admin-label.is-uppercase,
.octane-catalog-admin-section-title {
    color: var(--catalog-admin-blue-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.octane-catalog-admin-section-title {
    margin-bottom: 6px;
}

.octane-catalog-admin-check-label {
    color: var(--catalog-admin-text);
    font-size: 10px;
    cursor: pointer;
}

/* ---- Admin edit modals: structured form layout ---- */
.octane-catalog-admin-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.octane-catalog-admin-form-sheet {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--catalog-admin-border);
    border-radius: 6px;
    background: linear-gradient(180deg, #fffdf8 0%, var(--catalog-admin-panel) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

.octane-catalog-admin-form-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow-y: auto;
}

.octane-catalog-admin-form-hero,
.octane-catalog-admin-page-preview-card,
.octane-catalog-admin-offer-preview-card {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #c5d5dc;
    background: linear-gradient(180deg, #eef6fa 0%, #e2edf2 100%);
}

.octane-catalog-admin-form-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.octane-catalog-admin-form-section + .octane-catalog-admin-form-section {
    border-top: 1px solid #d8d8d0;
}

.octane-catalog-admin-form-section .octane-catalog-admin-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    color: var(--catalog-admin-text);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.octane-catalog-admin-label.is-field {
    color: var(--catalog-admin-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.octane-catalog-admin-form-grid {
    display: grid;
    gap: 10px 12px;
}

.octane-catalog-admin-form-grid.is-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.octane-catalog-admin-form-grid.is-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.octane-catalog-admin-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.octane-catalog-admin-form-field.is-span-2 {
    grid-column: span 2;
}

.octane-catalog-admin-form-field.is-span-3 {
    grid-column: span 3;
}

.octane-catalog-admin-form-field-hint {
    color: var(--catalog-admin-muted);
    font-size: 9px;
    font-weight: 400;
}

.octane-catalog-admin-form-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 28px;
}

.octane-catalog-admin-form-toggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #c9c9c0;
    border-radius: 4px;
    background: #f7f7f2;
    color: var(--catalog-admin-text);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.octane-catalog-admin-form-toggle:has(input:checked),
.octane-catalog-admin-form-toggle:has(.octane-checkbox[data-checked]) {
    border-color: var(--catalog-admin-blue);
    background: rgba(65, 141, 176, 0.12);
    color: var(--catalog-admin-blue-dark);
}

.octane-catalog-admin-form-toggle input[type="checkbox"],
.octane-catalog-admin-form-toggle .octane-checkbox {
    pointer-events: none;
}

.octane-catalog-admin-form-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid #d8d8d0;
    background: linear-gradient(180deg, var(--catalog-admin-panel-alt) 0%, #deded6 100%);
}

.octane-catalog-admin-savebar {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 8px 12px;
    border-top: 1px solid #c9c9c0;
    background: linear-gradient(180deg, var(--catalog-admin-panel-alt) 0%, #deded6 100%);
}

.octane-catalog-admin-savebar-status {
    display: flex;
    flex-direction: column;
    min-width: 112px;
    color: #53606a;
    font-size: 11px;
    line-height: 1.15;
}

.octane-catalog-admin-savebar-status small {
    margin-top: 3px;
    color: #88929a;
    font-size: 9px;
}

.octane-catalog-admin-savebar.is-dirty .octane-catalog-admin-savebar-status { color: #865a05; }
.octane-catalog-admin-savebar.is-saving .octane-catalog-admin-savebar-status { color: #296786; }
.octane-catalog-admin-savebar.is-error .octane-catalog-admin-savebar-status,
.octane-catalog-admin-savebar.is-conflict .octane-catalog-admin-savebar-status { color: #a83232; }
.octane-catalog-admin-savebar.is-saved .octane-catalog-admin-savebar-status { color: #397046; }

.octane-catalog-admin-savebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.octane-catalog-admin-field-error {
    color: #a83232;
    font-size: 10px;
    line-height: 1.2;
}

@media (max-width: 520px) {
    .octane-catalog-admin-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .octane-catalog-admin-savebar-actions {
        justify-content: stretch;
    }

    .octane-catalog-admin-savebar-actions .octane-catalog-admin-button {
        flex: 1 1 auto;
    }
}

.octane-catalog-admin-form .octane-catalog-admin-input,
.octane-catalog-admin-form-sheet .octane-catalog-admin-input {
    min-height: 28px;
    padding: 5px 9px;
    border-width: 1px;
    font-size: 11px;
}

.octane-catalog-admin-page-preview-icon,
.octane-catalog-admin-offer-preview-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #b8c8cf;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.octane-catalog-admin-page-preview-icon img,
.octane-catalog-admin-offer-preview-icon img {
    width: 36px;
    height: 36px;
    image-rendering: var(--octane-pixel-art, pixelated);
    object-fit: contain;
}

.octane-catalog-admin-page-preview-info,
.octane-catalog-admin-offer-preview-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.octane-catalog-admin-page-preview-name,
.octane-catalog-admin-offer-preview-name {
    overflow: hidden;
    color: var(--catalog-admin-blue-dark);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-admin-page-preview-sub,
.octane-catalog-admin-offer-preview-sub {
    color: var(--catalog-admin-muted);
    font-size: 10px;
    line-height: 1.35;
}

.octane-catalog-admin-translate-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--catalog-admin-border);
    border-radius: 4px;
    background: var(--catalog-admin-panel-alt);
}

.octane-catalog-admin-translate-error {
    color: var(--catalog-admin-danger);
    font-size: 9px;
}

.octane-catalog-admin-form-status {
    color: var(--catalog-admin-muted);
    font-size: 9px;
}

/* Legacy preview card rules kept for specificity elsewhere */
.octane-catalog-admin-offer-preview-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.octane-catalog-admin-offer-preview-icon-empty {
    color: #8aa3ad;
    font-size: 20px;
}

.octane-catalog-admin-offer-preview-price {
    display: flex;
    gap: 6px;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 700;
}

.octane-catalog-admin-offer-preview-price .is-credits {
    color: #b07a17;
}

.octane-catalog-admin-offer-preview-price .is-points {
    color: #2c7fb0;
}

.octane-catalog-admin-offer-preview-price .is-free {
    color: #6a8a3a;
}

.octane-catalog-admin-modal button {
    text-shadow: none !important;
}

.octane-catalog-admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 24px;
    padding: 4px 12px;
    border: 3px solid transparent;
    border-image-source: var(--habbo-skin-button);
    border-image-slice: 3 fill;
    border-image-width: 3px;
    border-image-repeat: stretch;
    border-radius: 0;
    background: transparent;
    color: #111111;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-admin-button:disabled {
    cursor: default;
    opacity: 0.55;
}

.octane-catalog-admin-button:not(:disabled):hover {
    filter: brightness(1.06);
}

.octane-catalog-admin-button.is-compact {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 9px;
}

.octane-catalog-admin-button.is-primary {
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-image-source: var(--habbo-skin-shiny-thick-green);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    border-image-repeat: stretch;
    background: transparent;
    color: #ffffff;
}

.octane-catalog-admin-button.is-danger {
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-image-source: var(--habbo-skin-shiny-red);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    border-image-repeat: stretch;
    background: transparent;
    color: #ffffff;
}

.octane-catalog-admin-button.is-muted,
.octane-catalog-admin-button.is-ghost {
    border-image-source: var(--habbo-skin-button);
    background: transparent;
    color: #111111;
}

.octane-catalog-admin-modal button.bg-primary,
.octane-catalog-admin-modal button.text-primary,
.octane-catalog-admin-modal button.text-success {
    border-width: 5px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image-source: var(--habbo-skin-shiny-thick-green) !important;
    border-image-slice: 5 fill !important;
    border-image-width: 5px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.octane-catalog-admin-modal button.bg-primary:hover,
.octane-catalog-admin-modal button.text-primary:hover,
.octane-catalog-admin-modal button.text-success:hover {
    border-image-source: var(--habbo-skin-shiny-thick-green-hover) !important;
}

.octane-catalog-admin-modal button.text-danger,
.octane-catalog-admin-modal button[class*="danger"] {
    border-width: 5px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image-source: var(--habbo-skin-shiny-red) !important;
    border-image-slice: 5 fill !important;
    border-image-width: 5px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.octane-catalog-admin-modal button.text-muted {
    border: 3px solid transparent !important;
    border-image-source: var(--habbo-skin-button) !important;
    border-image-slice: 3 fill !important;
    border-image-width: 3px !important;
    background: transparent !important;
    color: #111111 !important;
    box-shadow: none !important;
}

.octane-catalog-admin-body :where(.uppercase.font-bold) {
    color: var(--catalog-admin-blue-dark) !important;
    letter-spacing: 0.04em;
}

.octane-catalog-admin-body :where(.font-mono) {
    color: #383833 !important;
}

.octane-catalog-admin-modal .font-mono {
    color: #383833 !important;
}

.octane-catalog-window :where(.bg-white, .bg-gray-50, .bg-card-grid-item),
.octane-catalog-window :where(.bg-gray-100, .bg-light) {
    background: var(--catalog-standard-panel) !important;
    color: var(--catalog-standard-text) !important;
    box-shadow: none !important;
}

.octane-catalog-window :where(.bg-white\/50, .bg-white\/80) {
    background: rgba(247, 247, 242, 0.82) !important;
    color: var(--catalog-standard-text) !important;
}

.octane-catalog-window :where(.border, .border-card-grid-item-border, .border-muted, .border-white, .border-white\/10, .border-white\/20, .border-white\/30) {
    border-color: var(--catalog-standard-border) !important;
    box-shadow: none !important;
}

.octane-catalog-window :where(.text-muted, .text-dark) {
    color: var(--catalog-standard-muted) !important;
}

.octane-catalog-window :where(.text-primary) {
    color: var(--catalog-standard-blue-dark) !important;
}

.octane-catalog-window :where(input, select, .octane-select-trigger, textarea) {
    min-height: 22px;
    border: 1px solid var(--catalog-standard-border-dark) !important;
    border-radius: 3px !important;
    background: #fffdf4 !important;
    color: var(--catalog-standard-text) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
    font-size: 11px !important;
}

.octane-catalog-window :where(input[type="checkbox"], input[type="radio"]) {
    min-height: 0;
    accent-color: var(--catalog-standard-blue);
    box-shadow: none !important;
}

/* standard: bordo esterno #376275 (2px), body #0e3f52 -> border 2px + bg body. */
.octane-catalog-standard-header {
    position: relative;
    flex: 0 0 90px;
    height: 90px;
    margin: 0 1px;
    border: 2px solid #376275;
    background: #0e3f52;
    overflow: hidden;
}

/* The Builders Club warehouse has no tab row, so the staff admin toggle sits in the header's corner. */
.octane-catalog-builder-admin-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    cursor: pointer;
}

.octane-catalog-builder-admin-toggle[data-pressed] {
    background: rgba(255, 255, 255, 0.25);
}

/* standard: header image blend 0.1, greyscale, zoom 2, pivot center.
   L'immagine reale per-pagina arriva inline da currentPage.getImage(0);
   se assente resta il body #0e3f52 (nessun finto gradiente). */
.octane-catalog-standard-header-bg {
    position: absolute;
    inset: -2px;
    opacity: 0.1;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    /* AIR zooms the header picture 2x into its 568 px header; the window can be wider here, so the picture covers
       the whole header instead of leaving dark bands beside it. */
    background-size: cover;
    filter: grayscale(1);
}

.octane-catalog-standard-header-icon {
    position: absolute;
    left: 22px;
    top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 35px;
    overflow: hidden;
}

.octane-catalog-standard-header-icon img {
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    max-height: none !important;
    transform: scale(2);
    transform-origin: center;
}

.octane-catalog-standard-header-copy {
    position: absolute;
    left: 78px;
    top: 9px;
    width: 475px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

.octane-catalog-standard-header-title {
    height: 24px;
    min-height: 24px;
    overflow: hidden;
    font-family: UbuntuRegular, Ubuntu, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}

.octane-catalog-standard-header-description {
    margin-top: -1px;
    font-family: UbuntuRegular, Ubuntu, sans-serif;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    text-shadow: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    max-height: 51px;
    overflow: hidden;
}

/* AIR's Builders Club warehouse header runs edge to edge under the title bar: no side frame, no side margin. */
.octane-catalog-standard-header.is-builder {
    margin: 0;
    border-left-width: 0;
    border-right-width: 0;
}

.octane-catalog-standard-header.is-builder .octane-catalog-standard-header-title {
    height: 30px;
    min-height: 30px;
    font-size: 24px;
    line-height: 30px;
}

.octane-catalog-standard-header.is-builder .octane-catalog-standard-header-description {
    position: absolute;
    left: 0;
    width: 475px;
    height: 19px;
    margin-top: 0;
    display: block;
    -webkit-line-clamp: initial;
    line-clamp: initial;
    max-height: 19px;
    line-height: 19px;
}

.octane-catalog-standard-header.is-builder .octane-catalog-standard-header-description.is-builder-membership {
    top: 30px;
}

.octane-catalog-standard-header.is-builder .octane-catalog-standard-header-description.is-builder-limit {
    top: 45px;
}

.octane-catalog-standard-header-description b,
.octane-catalog-standard-header-description strong {
    font-weight: 400;
}

/* builder.header.status.*: AIR draws the duration, count and limit as <font color="#ff8d00"><b>. */
.octane-catalog-standard-header .octane-catalog-builder-header-value {
    color: #ff8d00;
    font-weight: 700;
}

.octane-catalog-window .octane-catalog-tabs-shell {
    flex: 0 0 35px;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    gap: 0;
    padding: 3px 6px 0 !important;
    align-items: flex-end;
    overflow: hidden;
    flex-wrap: nowrap;
    /* Same grey as the stage below, so the strip and the page read as one surface. */
    background: var(--catalog-standard-bg);
}

/*
 * A tab never shrinks on its own: the strip is measured to decide how wide the window should
 * be, so a tab whose width depended on that window would feed its own measurement. Past the
 * window's maximum width the strip used to run under the shell's `overflow: hidden` and the
 * last categories became unreachable - no scrolling, no wrapping, just gone. The hook adds
 * `is-condensed` in exactly that case, and only then are they allowed to shrink, the label
 * ellipsising down to its icon the way the original client's tab context does.
 */
.octane-catalog-window .octane-catalog-tabs-shell .octane-card-tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex: 0 0 auto;
    max-width: none;
    /* AIR tab_button: label only, at least 80 px; 9px of the side padding is the tab's cap bitmap. */
    min-width: 80px;
    padding: 4px 12px 8px !important;
    /* Tabs sit edge to edge: a gap would show the white shelf as a line. */
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* Only once the window has run out of room to widen. Until then the tabs keep their natural
   width, which is what the strip is measured at. */
.octane-catalog-window .octane-catalog-tabs-shell.is-condensed .octane-card-tab-item {
    min-width: 34px;
    flex: 0 1 auto;
    flex-shrink: 1;
}

.octane-catalog-window .octane-catalog-tabs-shell .octane-card-tab-item:last-of-type {
    margin-right: 0;
}

.octane-catalog-window .octane-catalog-tabs-shell .octane-card-tab-item.octane-catalog-admin-tab {
    min-width: 0;
    padding: 4px 13px 8px !important;
}

.octane-catalog-window .octane-catalog-tabs-shell .octane-card-tab-item > div {
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    min-width: 0;
    width: auto;
    height: 18px;
    line-height: 17px;
}

.octane-catalog-tab-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    image-rendering: var(--octane-pixel-art, pixelated);
    flex-shrink: 0;
}

.octane-catalog-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octane-catalog-tab-count {
    flex: 0 0 auto;
    font-size: 10px;
    opacity: 0.85;
}

.octane-catalog-content-shell {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 8px 8px !important;
    background: var(--catalog-standard-bg) !important;
    overflow: hidden;
}

.octane-catalog-stage {
    display: grid;
    grid-template-columns: 184px 1fr;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.octane-catalog-stage.is-navigation-hidden {
    grid-template-columns: 1fr;
}

.octane-catalog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow: hidden;
}

/* standard search: border x8 y131 w184 h24 style 105 (inset chiaro). */
.octane-catalog-search-shell {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 1px solid #b7b7ae;
    border-radius: 3px;
    background: #f7f7f2;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.07);
}

.octane-catalog-search-shell input {
    flex: 1 1 auto;
    width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
    line-height: 22px !important;
    padding: 0 16px 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--catalog-standard-muted) !important;
    font-size: 11px !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

.octane-catalog-search-shell > div {
    width: 100% !important;
    height: 100% !important;
}

.octane-catalog-search-shell svg {
    color: #888 !important;
    font-size: 11px !important;
}

.octane-catalog-search-shell svg:first-child {
    left: 4px !important;
}

.octane-catalog-search-shell button {
    right: 4px !important;
}

/* standard navigationContainer: x8 y159 w184 h433 style 6 (bordo beveled inset). */
.octane-catalog-navigation-shell {
    flex: 1 1 auto;
    min-height: 0;
    padding: 5px 3px;
    border: 1px solid var(--catalog-standard-box-line);
    border-radius: 3px;
    background: var(--catalog-standard-box);
    box-shadow: inset 0 0 0 2px var(--catalog-standard-box-edge);
    overflow: auto;
}

.octane-catalog-navigation-list {
    display: flex;
    flex-direction: column;
}

.octane-catalog-navigation-node {
    min-height: 21px;
}

/* normal_topitem_template / normal_subitem_template: 20 px rows. AIR's #b4b4ae etching is a 1 px highlight its
   bitmap text renderer blends away; as a browser text-shadow it doubles the glyphs and blurs them, so it is left
   out. A row keeps room on the right only when it has a drop_button. */
.octane-catalog-navigation-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    min-height: 20px;
    padding: 0 4px 0 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    color: var(--catalog-standard-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    cursor: pointer;
    text-shadow: none;
}

.octane-catalog-navigation-item.is-branch {
    padding-right: 30px;
}

.octane-catalog-navigation-node.is-child .octane-catalog-navigation-item {
    padding-left: 15px;
    color: #52819a;
    font-style: italic;
}

.octane-catalog-navigation-item::before {
    position: absolute;
    inset: 0 1px 1px 1px;
    z-index: 0;
    display: none;
    content: "";
    border: 1px solid var(--catalog-standard-select-outer);
    background: linear-gradient(180deg, var(--catalog-standard-select-outer) 0 2px, var(--catalog-standard-select) 2px calc(100% - 2px), var(--catalog-standard-select-outer) calc(100% - 2px));
}

.octane-catalog-navigation-list.is-builders-club .octane-catalog-navigation-item::before {
    --catalog-standard-select: var(--catalog-standard-bc);
    --catalog-standard-select-outer: var(--catalog-standard-bc-outer);
}

.octane-catalog-navigation-list.is-builders-club .octane-catalog-navigation-node.is-child .octane-catalog-navigation-item {
    color: #b77734;
}

.octane-catalog-navigation-item:hover::before,
.octane-catalog-navigation-item.is-active::before {
    display: block;
}

.octane-catalog-navigation-icon,
.octane-catalog-navigation-label,
.octane-catalog-navigation-caret,
.octane-catalog-navigation-favorite,
.octane-catalog-navigation-admin,
.octane-catalog-navigation-drag {
    position: relative;
    z-index: 1;
}

.octane-catalog-navigation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.octane-catalog-navigation-icon img,
.octane-catalog-navigation-icon canvas {
    width: auto;
    height: auto;
    max-width: 20px;
    max-height: 20px;
}

.octane-catalog-navigation-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* normal_topitem_template drop_button: AIR's grey arrow, pointing right while closed and down while open. */
.octane-catalog-navigation-caret {
    position: absolute;
    right: 18px;
    top: 5px;
    width: 9px;
    height: 11px;
    background: no-repeat center url("../../assets/images/catalog/navigation/arrow_right.png");
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-navigation-caret.is-open {
    background-image: url("../../assets/images/catalog/navigation/arrow_down.png");
}

/* searchContainer (184 x 24): white box, the helper/input at (4, 3), common_small_pen at (160, 2). */
.octane-catalog-search .octane-catalog-search-input {
    height: 24px;
    padding: 3px 26px 3px 4px;
    border: 1px solid #9a9a9a;
    border-radius: 4px;
    background: #ffffff;
    outline: none;
}

.octane-catalog-search .octane-catalog-search-pen,
.octane-catalog-search .octane-catalog-search-clear {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 18px;
    height: 18px;
}

.octane-catalog-search .octane-catalog-search-pen {
    background: no-repeat center url("../../assets/images/catalog/navigation/small_pen.png");
    image-rendering: var(--octane-pixel-art, pixelated);
    pointer-events: none;
}

.octane-catalog-search .octane-catalog-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #666666;
    font-size: 11px;
    cursor: pointer;
}

.octane-catalog-layout-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: transparent;
    border: 0;
    overflow: hidden;
}

.octane-catalog-layout-container {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
}

.octane-catalog-window .octane-catalog-forum-text {
    font-size: 12px;
    line-height: 15px;
}

.octane-catalog-window .octane-catalog-forum-text p,
.octane-catalog-window .octane-catalog-forum-text div {
    margin: 0 0 8px;
}

.octane-catalog-window .octane-catalog-forum-text > :last-child {
    margin-bottom: 0;
}

.octane-catalog-window .octane-catalog-guild-join-btn {
    min-height: 20px !important;
    width: auto !important;
    padding: 1px 10px !important;
    border: 1px solid #1c1c1c !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #ffffff 0%, #eaeaea 55%, #d8d8d8 100%) !important;
    box-shadow: inset 0 1px 0 #ffffff !important;
    color: #000 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

.octane-catalog-window .octane-catalog-guild-join-btn:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 55%, #e2e2e2 100%) !important;
}

.octane-catalog-window .octane-catalog-guild-join-btn:active {
    background: linear-gradient(180deg, #d8d8d8 0%, #eaeaea 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.octane-catalog-default-layout {
    position: relative;
    display: block !important;
    width: 100%;
    height: 460px;
    min-height: 460px;
    max-height: 460px;
}

.octane-catalog-grid-shell,
.octane-catalog-price-row,
.octane-catalog-purchase-row {
    width: 100% !important;
}

.octane-catalog-grid-shell {
    border: 1px solid var(--catalog-standard-box-line);
    border-radius: 5px;
    background: var(--catalog-standard-box);
    box-shadow: inset 0 0 0 2px var(--catalog-standard-box-edge);
}

/*
 * The original's `productViewWidget` is a fixed 360x240 because its window is a fixed 570. Ours
 * sizes itself from its tab strip, up to 1040, and pinning this box to 360 left the rest of that
 * width as dead grey beside the preview. It follows the page instead; 240 stays, since the room
 * canvas behind it is drawn taller than the box and cropped, exactly as the original does.
 *
 * Everything placed inside it is anchored to an edge rather than to an offset measured from the
 * old 360 - see `.octane-catalog-preview-limited` and `.octane-catalog-preview-controls`.
 */
.octane-catalog-product-view {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.octane-catalog-product-view::before {
    display: none;
}

.octane-catalog-offer-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.octane-catalog-offer-panel:has(> .octane-catalog-offer-info) {
    justify-content: center;
}

.octane-catalog-offer-preview {
    position: relative;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: #000;
}

/* Follows the product view now that the product view follows the page. */
.octane-catalog-offer-panel > .octane-catalog-offer-preview {
    width: 100%;
    min-width: 0;
}

.octane-catalog-preview-title {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 15px !important;
    text-shadow: 0 1px 0 #000;
}

.octane-catalog-offer-preview > .shadow-room-previewer {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 348px !important;
    min-height: 348px !important;
    max-height: 348px !important;
    max-width: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.octane-catalog-offer-preview > .shadow-room-previewer > .shadow-room-previewer-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0 !important;
    image-rendering: var(--octane-pixel-art, pixelated);
    transform: none;
    transform-origin: center center;
    transition: transform 180ms ease-out;
}

.octane-catalog-offer-preview:has(.octane-catalog-preview-zoom-btn[aria-pressed="true"])
    > .shadow-room-previewer
    > .shadow-room-previewer-canvas {
    transform: translateY(-41px) scale(2);
}

/* Badge offers: the black 3D-preview stage is meant for furni room previews.
   Badges get a light panel, a dark title and a larger, centered badge. */
.octane-catalog-offer-preview.is-badge {
    background: var(--catalog-standard-panel, #e9e9e1);
}

.octane-catalog-offer-preview.is-badge .octane-catalog-preview-title {
    color: #33332e !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.octane-catalog-offer-preview.is-badge .group-badge,
.octane-catalog-offer-preview.is-badge > *:not(.octane-catalog-preview-title) {
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-color-grid-shell {
    max-height: 154px;
}

.octane-catalog-badge-display-layout {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 460px;
    min-height: 460px;
    overflow: hidden;
    color: #000000;
    background: var(--catalog-standard-bg, #e4e3db);
}

.octane-catalog-badge-product-picker {
    position: absolute;
    top: 245px;
    left: 0;
    width: 95px;
    height: 175px;
    padding: 3px;
    border: 1px solid #777;
    border-radius: 4px;
    background: #c9c9c3;
    overflow: hidden;
}

.octane-catalog-badge-product-picker .octane-catalog-item-grid-scroll-area,
.octane-catalog-badge-product-picker .octane-classic-scroll-area-viewport {
    width: 87px;
    height: 167px;
}

.octane-catalog-badge-product-picker .octane-classic-scroll-area-viewport {
    padding-right: 17px;
}

.octane-catalog-badge-offer-list {
    display: grid !important;
    grid-template-columns: 70px !important;
    grid-auto-rows: 70px !important;
    align-content: start;
    justify-content: start;
    gap: 3px !important;
    overflow: visible !important;
}

@layer utilities {
    .octane-catalog-window .octane-catalog-badge-offer-list .layout-grid-item {
        width: 70px !important;
        min-width: 70px !important;
        height: 70px !important;
        min-height: 70px !important;
        border-radius: 4px !important;
    }
}

.octane-catalog-badge-picker {
    position: absolute;
    top: 245px;
    left: 105px;
    width: 255px;
    height: 175px;
    overflow: hidden;
}

.octane-catalog-badge-selector {
    position: absolute;
    top: 0;
    left: 0;
    width: 255px;
    height: 175px;
    overflow: hidden;
}

.octane-catalog-badge-scroll-area {
    position: absolute;
    top: 30px;
    left: 0;
    width: 255px;
    height: 145px;
}

.octane-catalog-badge-scroll-area .octane-classic-scroll-area-viewport {
    width: 255px;
    height: 145px;
    padding-right: 17px;
}

.octane-catalog-badge-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 44px) !important;
    grid-auto-rows: 44px !important;
    align-content: start;
    justify-content: start;
    gap: 1px !important;
    padding: 0;
    overflow: visible !important;
}

@layer utilities {
    .octane-catalog-window .octane-catalog-badge-tile {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        border: 1px solid #aeb4aa !important;
        border-radius: 0 !important;
        background: #d9ddd5 !important;
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75), inset -1px -1px 0 rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
    }

    .octane-catalog-window .octane-catalog-badge-tile:hover {
        background: #e5e8e1 !important;
    }

    .octane-catalog-window .octane-catalog-badge-tile.is-grid-active {
        border-color: #222 !important;
        background: #fff !important;
        box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #222 !important;
    }
}

.octane-catalog-badge-tile > div {
    max-width: 40px;
    max-height: 40px;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-badge-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 153px;
    min-height: 80px;
    padding: 8px;
    color: #777;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
}

.octane-catalog-badge-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    height: 240px;
    overflow: hidden;
    background: #000;
}

.octane-catalog-badge-preview.is-empty {
    top: 0;
    left: 0;
    width: 360px;
    height: 240px;
}

.octane-catalog-badge-product-copy {
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 280px;
    max-height: 64px;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
}

.octane-catalog-badge-product-name {
    width: 165px;
    min-height: 17px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octane-catalog-badge-product-description {
    width: 165px;
    max-height: 30px;
    overflow: hidden;
    font-size: 10px;
    font-style: italic;
    line-height: 15px;
    text-overflow: ellipsis;
}

.octane-catalog-badge-product-render {
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    height: 240px;
    overflow: hidden;
}

.octane-catalog-badge-product-render .shadow-room-previewer {
    width: 360px !important;
    max-width: 360px !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    border-radius: 0 !important;
}

.octane-catalog-badge-intro {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 360px;
    min-height: 240px;
    gap: 4px;
    overflow: hidden;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    color: #fff;
}

.octane-catalog-badge-intro img {
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 54px;
    object-fit: contain;
}

.octane-catalog-badge-limited {
    position: absolute;
    top: 20px;
    left: 180px;
    width: 170px;
    height: 30px;
    overflow: hidden;
}

.octane-catalog-badge-total-price {
    position: absolute;
    right: 6px;
    bottom: 7px;
    z-index: 4;
    min-width: 90px;
}

.octane-catalog-badge-purchase {
    position: absolute;
    top: 430px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 360px;
    height: 30px;
    gap: 10px;
    padding: 3px 5px;
    overflow: hidden;
}

.octane-catalog-badge-purchase .octane-catalog-standard-gift-button,
.octane-catalog-badge-purchase .octane-catalog-standard-buy-button {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
}

.octane-catalog-badge-product-copy .octane-catalog-product-details-name,
.octane-catalog-badge-product-copy .octane-catalog-product-details-description {
    color: #fff !important;
    opacity: 1 !important;
}

.octane-catalog-badge-preview .octane-catalog-preview-controls {
    top: 8px;
    right: 6px;
}

.octane-catalog-badge-search {
    position: absolute;
    top: 0;
    left: 0;
    width: 255px;
    height: 26px;
    border: 1px solid #aaa;
    background: #fff;
}

.octane-catalog-badge-search input {
    position: absolute;
    top: 3px;
    left: 6px;
    width: 171px;
    height: 19px;
    padding: 1px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #333;
    font-size: 10px;
    line-height: 20px;
}

.octane-catalog-badge-search input:focus {
    outline: 0;
}

.octane-catalog-badge-search-clear {
    position: absolute;
    top: 3px;
    left: 232px;
    width: 19px;
    height: 19px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 16px;
    line-height: 17px;
    cursor: pointer;
}

.octane-catalog-badge-preview .octane-catalog-price-frame {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 46px;
    height: 29px;
    padding: 0;
    border: 8px solid transparent;
    border-radius: 0;
    border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABrSURBVDhP7dSxEYBACETR7dJmbMEy7MROLATHQAb2cOTQMbrgE8ELgYjABuAc6Zp7hvZt7ophxXixtwsNwXWZUoVgFbtDHcjL2QY4wEL/gRXU3ipYRQMsBispyE+VF5+yt+59fZH72G9gaxwJZL9A0RMtPQAAAABJRU5ErkJggg==");
    border-image-slice: 8 fill;
    border-image-width: 8px;
    border-image-repeat: stretch;
    background: transparent;
    box-shadow: none;
}

.octane-catalog-badge-preview .octane-catalog-price-frame .octane-catalog-standard-price-display {
    height: 13px;
    min-height: 13px;
    gap: 1px;
}

.octane-catalog-badge-preview .octane-catalog-price-frame .octane-catalog-standard-price-pill {
    min-width: 0;
    height: 13px;
    gap: 1px;
    padding: 0;
}

.octane-catalog-badge-preview .octane-catalog-price-frame .octane-catalog-standard-price-text {
    color: #111 !important;
    font-family: Ubuntu, Arial, sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 13px !important;
    text-shadow: none !important;
}

.octane-catalog-badge-preview .octane-catalog-price-frame .octane-currency-icon {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    background-size: auto;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-badge-preview .octane-catalog-price-frame .is-credits .octane-currency-icon {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVEhLtZSBDYMwDAQzTTtNR2GmrlBW6SBlhFSO9OFsnJRKraUngPH5ZSCl1lr+oXZ43i8HtWQpdhhqWhuTBNZtrlGDA1hQFa7LXGxATgvdIFSF2+pFt3bNBoQ7MKECqXC57mA7l9hAcAeObgnmqrwacGR03cEZNILlUhCtmevTYCq6jNdfgW2lToBvHSw3hBMc8wSz2WmwxDydfwRbIhZzLMpRbKAX68DRdSwcic8ZuEMF5g8i5ywcSUA1GoHdSASO89a5VgO/HgGqzw1gu+lczcAGTKApuMOzmVMAOuhhE3Jb3v4gizPRZYNmm1AMV3RCPiZgRQRE5SHwr/UG8Hq+iW3+jYQAAAAASUVORK5CYII=") !important;
}

.octane-catalog-sound-layout {
    position: relative;
    width: 100%;
    max-width: none;
    height: 460px;
    min-height: 460px;
    overflow: hidden;
    color: #000000;
    background: var(--catalog-standard-bg, #e4e3db);
}

.octane-catalog-sound-product {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: var(--catalog-standard-bg, #e4e3db);
}

.octane-catalog-sound-title,
.octane-catalog-sound-description,
.octane-catalog-sound-length {
    position: absolute;
    left: 10px;
    z-index: 3;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octane-catalog-sound-title {
    top: 16px;
    height: 17px;
    font-size: 12px;
    line-height: 17px;
}

.octane-catalog-sound-description {
    top: 34px;
    height: 15px;
    font-size: 10px;
    line-height: 15px;
}

.octane-catalog-sound-length {
    top: 53px;
    height: 15px;
    font-size: 10px;
    line-height: 15px;
}

.octane-catalog-sound-product-render {
    position: absolute;
    top: 70px;
    right: auto;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 108px;
    overflow: hidden;
}

.octane-catalog-sound-product-render .furni-image {
    flex: 0 0 auto;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-sound-price {
    position: absolute;
    right: 7px;
    bottom: 10px;
    z-index: 4;
}

.octane-catalog-sound-listen-panel {
    position: absolute;
    top: 195px;
    left: 7px;
    z-index: 4;
    width: 175px;
    height: 36px;
    border: 1px solid rgba(204, 204, 204, 0.9);
    background: rgba(204, 204, 204, 0.5);
    font-size: 10px;
}

.octane-catalog-sound-listen-panel > span {
    position: absolute;
    top: 11px;
    left: 9px;
    height: 15px;
    line-height: 15px;
    white-space: nowrap;
}

.octane-catalog-sound-listen-button {
    position: absolute !important;
    top: 8px;
    left: 102px;
    width: 66px;
    min-width: 66px;
    height: 22px;
    min-height: 22px;
    padding: 0 4px !important;
    border: 1px solid #111111 !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #f7f7f7 0%, #dedede 100%) !important;
    color: #111111 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-shadow: 0 1px 0 #ffffff !important;
    box-shadow: inset 0 0 0 1px #ffffff, 0 1px 0 rgba(0, 0, 0, 0.16) !important;
}

.octane-catalog-sound-listen-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 100%) !important;
    filter: none;
}

.octane-catalog-sound-listen-button:active:not(:disabled) {
    background: linear-gradient(180deg, #cdcdcd 0%, #eeeeee 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.octane-catalog-sound-select-product {
    position: absolute;
    top: 130px;
    left: 6px;
    font-size: 10px;
}

.octane-catalog-sound-grid {
    position: absolute;
    top: 245px;
    left: 0;
    width: 100%;
    height: 180px;
    min-height: 0;
    padding: 3px;
    overflow: hidden;
    border: 1px solid #777;
    border-radius: 6px;
    background: #c9c9c3;
}

.octane-catalog-sound-grid .octane-classic-scroll-area-viewport {
    padding-right: 17px;
}

.octane-catalog-sound-purchase {
    position: absolute;
    top: 430px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 30px;
    gap: 6px;
}

.octane-catalog-sound-purchase > button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 24px;
}

.octane-catalog-marketplace-item-icon {
    width: 40px;
    height: 40px;
}

.octane-catalog-vip-hc-banner {
    width: 34px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.octane-catalog-offer-info {
    display: none !important;
}

.octane-catalog-offer-info .octane-text,
.octane-catalog-offer-info span,
.octane-catalog-offer-info div {
    color: inherit;
}


.octane-catalog-welcome {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 18px;
    color: var(--catalog-standard-muted);
}

.octane-catalog-welcome img {
    width: auto !important;
    height: auto !important;
    max-width: 96px;
    max-height: 120px;
    border: 0;
    background: transparent;
}

.octane-catalog-welcome.is-image-only img {
    max-width: 100%;
    max-height: 100%;
}

.octane-catalog-grid-shell {
    position: absolute;
    left: 0;
    top: 245px;
    width: 360px;
    height: 155px;
    min-height: 0;
    padding: 3px;
    overflow: auto;
}

.octane-catalog-default-layout:has(.octane-catalog-default-admin) .octane-catalog-grid-shell {
    top: 280px !important;
}

.octane-catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--octane-grid-column-min-width, 53px), 1fr)) !important;
    grid-auto-rows: var(--octane-grid-column-min-height, 70px);
    align-content: start;
    justify-content: start;
    column-gap: 3px !important;
    row-gap: 3px !important;
    overflow: visible !important;
}

.octane-catalog-grid-virtual .grid {
    column-gap: 3px !important;
    row-gap: 3px !important;
}

.octane-catalog-grid-density-standard,
.octane-catalog-grid-virtual.octane-catalog-grid-density-standard .grid {
    grid-template-columns: repeat(var(--octane-air-column-count, 6), 53px) !important;
    row-gap: 0 !important;
}

.octane-catalog-grid-density-standard.uses-base-grid-template,
.octane-catalog-grid-virtual.octane-catalog-grid-density-standard.uses-base-grid-template .grid {
    grid-template-columns: repeat(var(--octane-air-column-count, 8), 36px) !important;
    grid-auto-rows: 36px;
}

.octane-catalog-air-mixed-grid.uses-mixed-grid-template {
    --octane-grid-column-min-width: 53px;
    --octane-grid-column-min-height: 74px;
    display: block !important;
    position: relative;
    grid-template-columns: none !important;
    grid-auto-rows: auto;
}

.octane-catalog-item-grid-scroll-area:has(.octane-catalog-grid-density-standard) > .octane-classic-scroll-area-viewport,
.octane-catalog-grid-virtual.octane-catalog-grid-density-standard .octane-classic-scroll-area > .octane-classic-scroll-area-viewport {
    padding-right: 17px;
    overflow-x: auto;
}

@layer utilities {
    .octane-catalog-window .layout-grid-item {
        width: 100% !important;
        height: var(--octane-grid-column-min-height, 70px) !important;
        min-width: 0 !important;
        min-height: var(--octane-grid-column-min-height, 70px) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-image: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .octane-catalog-window .layout-grid-item:not(.has-highlight) {
        background-color: #e4e7df !important;
        border: 2px solid transparent !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }

    .octane-catalog-window .octane-catalog-pet-breeds .layout-grid-item {
        width: 84px !important;
        min-width: 84px !important;
        height: 74px !important;
        min-height: 74px !important;
    }

    .octane-catalog-window .layout-grid-item:not(.has-highlight):not(.is-active):hover {
        background-image: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .octane-catalog-window .layout-grid-item.is-active {
        background-color: #ffffff !important;
        background-image: none !important;
        border: 2px solid #62c4e8 !important;
        box-shadow: none !important;
    }

    .octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item:not(.has-highlight),
    .octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.is-active {
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #a1a19b;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #63c5e9;
    pointer-events: none;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.is-active.uses-single-price-template::before {
    height: 62px;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.uses-base-grid-template {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.is-active.uses-base-grid-template::before {
    width: 36px;
    height: 36px;
}

.octane-catalog-window .octane-catalog-grid-density-standard.is-builder-grid .layout-grid-item.is-active::before {
    border-color: var(--catalog-standard-bc-outer);
}

.octane-catalog-window .is-builder-grid .layout-grid-item.is-active {
    border-color: var(--catalog-standard-bc-outer) !important;
}

.octane-catalog-window .layout-grid-item.has-highlight {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin: 1px !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 2px !important;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.35),
        inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
    cursor: pointer !important;
}

.octane-catalog-window .layout-grid-item.has-highlight:hover {
    border-color: #000 !important;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.5),
        inset -1px -1px 0 rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}

.octane-catalog-window .layout-grid-item.has-highlight.is-active {
    border-color: #000 !important;
    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 3px #000,
        0 0 0 1px #63c5e9 !important;
}

.octane-catalog-grid-offer-icon {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    image-rendering: var(--octane-pixel-art, pixelated);
    object-fit: contain;
    pointer-events: none;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item > .octane-catalog-grid-offer-icon {
    position: absolute;
    top: 2px;
    left: 8px;
    z-index: 1;
    width: 36px !important;
    height: 36px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: none !important;
    margin: 0;
}

/* The selected tile paints an opaque plate through ::before at z-index 0, so the
   habbicon has to be lifted over it the way the furni icon already is. */
.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item > .octane-catalog-grid-habbicon-icon {
    position: relative;
    z-index: 1;
}

/* AIR gridItem_with_price: multiContainer is painted after the 36px image at
   icon-local x=18/y=21, so the quantity badge sits above its lower-right edge. */
.octane-catalog-window
    .octane-catalog-grid-density-standard
    .layout-grid-item:not(.uses-base-grid-template):not(.unique-item)
    > .layout-item-count {
    top: 23px !important;
    right: auto !important;
    left: 26px !important;
    z-index: 6;
    min-width: 17px;
    height: 13px;
    padding: 0 3px !important;
    border: 1px solid #283f5d !important;
    border-radius: 4px !important;
    background: #ff3300 !important;
    color: #cccc66 !important;
    font-family: Volter, monospace;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 11px !important;
}

.octane-catalog-window
    .octane-catalog-grid-density-standard
    .layout-grid-item:not(.uses-base-grid-template):not(.unique-item)
    > .layout-item-count::before {
    content: "x";
}

.octane-catalog-window
    .octane-catalog-grid-density-standard
    .layout-grid-item.uses-base-grid-template:not(.unique-item)
    > .layout-item-count {
    top: 21px !important;
    right: auto !important;
    left: 18px !important;
    z-index: 6;
}

.octane-catalog-window
    .octane-catalog-grid-density-standard
    .layout-grid-item.uses-base-grid-template:not(.unique-item)
    > .octane-catalog-grid-offer-icon {
    top: 0;
    left: 0;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item > .avatar-image {
    top: 2px !important;
    right: auto !important;
    bottom: auto !important;
    left: 8px !important;
    width: 36px !important;
    height: 36px !important;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.uses-base-grid-template > .avatar-image {
    top: 0 !important;
    left: 0 !important;
}

/* ---- Limited edition (LTD) tiles in the catalog grid ----
   The unique-bg-override placeholder carries no image here (the furni is the
   separate icon img), but its w-full/h-full sizing lives in the flex flow and
   eats the whole 70px tile, pushing the icon and price down/out. Take it out
   of the flow, layer the icon between the backdrop (z-2) and the glass (z-4),
   and overlay the price as a chip so double-currency offers can't overflow.
   Scoped to the catalog window: inventory/trade LTD tiles are untouched. */
.octane-catalog-window .unique-item .unique-bg-override {
    position: absolute !important;
    inset: 0 !important;
}

.octane-catalog-window .unique-item .octane-catalog-grid-offer-icon {
    position: relative;
    z-index: 3;
    /* keep the furni inside the glass, clear of the bottom counter strip */
    max-height: calc(100% - 22px) !important;
    margin-bottom: 8px;
}

.octane-catalog-window .unique-item .octane-catalog-grid-price {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 5;
    width: auto;
    max-width: calc(100% - 4px);
    justify-content: center;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
}

.octane-catalog-window .unique-item .octane-catalog-grid-price.is-multi-price {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 0;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.unique-item:not(.is-active)::before,
.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.unique-item::after {
    top: 2px;
    left: 8px;
    right: auto;
    bottom: auto;
    width: 36px;
    height: 36px;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.unique-item > .unique-bg-override {
    display: none;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.unique-item > .octane-catalog-grid-offer-icon {
    z-index: 2;
}

.octane-catalog-window .octane-catalog-grid-density-standard .layout-grid-item.unique-item > .unique-item-counter {
    top: 28px;
    right: auto;
    bottom: auto;
    left: 8px;
    z-index: 3;
    width: 36px;
    margin: 0;
}

.octane-catalog-window .octane-catalog-grid-density-standard .unique-item .octane-catalog-grid-price {
    right: auto;
    bottom: auto;
    transform: none;
    max-width: none;
    justify-content: flex-end;
    padding: 0;
    border-radius: 0;
    background: none;
}

.octane-catalog-window .octane-catalog-grid-density-standard .unique-item .octane-catalog-grid-price.is-single-price {
    top: 36px;
    left: -3px;
    width: 54px;
    height: 19px;
    min-height: 19px;
}

.octane-catalog-window .octane-catalog-grid-density-standard .unique-item .octane-catalog-grid-price.is-multi-price {
    top: 36px;
    left: 8px;
    display: block;
    width: 43px;
    height: 34px;
    min-height: 34px;
}


.octane-catalog-grid-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    width: 100%;
    padding-right: 4px;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    line-height: 12px;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price {
    position: absolute;
    z-index: 2;
    gap: 1px;
    width: auto;
    padding: 0;
    font-size: 12px;
    line-height: 17px;
    text-shadow: none;
}

.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .layout-grid-item:has(.avatar-image) .octane-catalog-grid-price,
.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .layout-grid-item:has(> .avatar-image) > .octane-catalog-grid-price,
.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .avatar-image ~ .octane-catalog-grid-price {
    /* Without absolute positioning the bottom/left offsets below are ignored
       on the statically-positioned badge while translateX(-50%) still applies,
       leaving the price floating mid-tile and shifted left (bots page). */
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 1px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    min-height: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}

/* Bots (avatar offers): keep the bottom strip of the tile clear of the
   avatar so the price badge sits UNDER the bot instead of on its feet.
   The avatar img itself arrives with its transparent border already
   cropped off (LayoutAvatarImageView fit variant), so object-contain
   centers the actual figure in this box. */
.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .layout-grid-item > .avatar-image {
    bottom: 18px;
}

/* Give bot tiles more room than the default furni tile — a full-body figure
   plus the price strip doesn't fit in 74px, and the multi-currency price pill
   (e.g. "35 credits + 5 diamonds") is wider than a 6-column tile. 4 columns
   makes the tiles wide enough for the pill; the height !important is needed
   to beat the grid's inline --octane-grid-column-min-height (set by AutoGrid);
   grid-auto-rows and the tile height both read this variable. */
.octane-catalog-grid:not(.octane-catalog-grid-density-standard):has(.layout-grid-item > .avatar-image) {
    grid-template-columns: repeat(4, 1fr) !important;
    --octane-grid-column-min-height: 100px !important;
}

.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .layout-grid-item:has(.avatar-image) .octane-catalog-grid-price-entry,
.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .avatar-image ~ .octane-catalog-grid-price .octane-catalog-grid-price-entry {
    height: auto !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}

.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .layout-grid-item:has(.avatar-image) .octane-catalog-grid-price-currency,
.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .avatar-image ~ .octane-catalog-grid-price .octane-catalog-grid-price-currency {
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

.octane-catalog-grid-price.is-single-price {
    height: auto;
    min-height: 0;
}

.octane-catalog-grid-price.is-multi-price {
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 1px;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price.is-single-price {
    top: 36px;
    left: -3px;
    width: 54px;
    height: 19px;
    min-height: 19px;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price.is-multi-price {
    top: 36px;
    left: 8px;
    display: block;
    width: 43px;
    height: 34px;
    min-height: 34px;
}

.octane-catalog-grid-price-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 13px;
    white-space: nowrap;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price-entry {
    justify-content: flex-end;
    gap: 3px;
    height: 19px;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price.is-single-price .octane-catalog-grid-price-entry {
    min-width: 54px;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price.is-multi-price .octane-catalog-grid-price-entry {
    position: absolute;
    right: 0;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price.is-multi-price .octane-catalog-grid-price-entry:first-child {
    top: 0;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price.is-multi-price .octane-catalog-grid-price-entry:nth-child(2) {
    top: 15px;
}

.octane-catalog-grid-price-plus {
    padding-right: 3px;
}

.octane-catalog-grid-price-currency {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: none !important;
}

.octane-catalog-grid-density-standard .octane-catalog-grid-price-currency {
    /* Match the 13px coin size used by the legacy grid rows. */
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    object-fit: contain !important;
}

.octane-catalog-price-row {
    position: absolute;
    left: 0;
    top: 405px;
    width: 360px;
    height: 25px;
    padding: 0;
    overflow: visible;
}

.octane-catalog-spinner-slot {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 25px;
}

.octane-catalog-total-price-slot {
    position: absolute;
    left: 180px;
    top: 0;
    width: 180px;
    min-width: 180px;
    height: 25px;
    z-index: 2;
    display: block;
    padding: 0;
}

.octane-catalog-total-price-label {
    position: absolute;
    top: 3px;
    left: 20px;
    width: 158px;
    height: 17px;
    overflow: hidden;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    white-space: nowrap;
}

.octane-catalog-total-price-value {
    position: absolute !important;
    top: 1px;
    left: 85px;
    display: block !important;
    width: 92px;
    height: 24px;
    min-height: 24px;
    padding: 0;
}

.octane-catalog-purchase-row {
    position: absolute;
    left: 0;
    top: 430px;
    width: 360px;
    height: 30px;
    padding: 0;
    overflow: hidden;
}

.octane-catalog-offer-actions {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px !important;
    width: 350px;
    height: 24px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 3px;
    padding: 0;
}

.octane-catalog-default-layout .octane-catalog-offer-actions > .octane-catalog-standard-buy-button {
    margin-left: auto !important;
}

.octane-catalog-window .octane-catalog-standard-button {
    appearance: none;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    min-height: 24px;
    height: 24px;
    margin: 0;
    padding: 0 8px !important;
    /* AIR's grey `button` (style 3): habbo_skin_button_shiny, button_shiny_regular 12 px black. */
    border: 5px solid transparent !important;
    border-radius: 0 !important;
    border-image-source: var(--habbo-skin-shiny) !important;
    border-image-slice: 5 fill !important;
    border-image-width: 5px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    color: #000000 !important;
    font-family: HabboAirUbuntu, UbuntuRegular, Ubuntu, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    image-rendering: var(--octane-pixel-art, pixelated) !important;
}

.octane-catalog-window button.octane-catalog-preview-btn,
.octane-catalog-window button.octane-catalog-preview-btn *,
.octane-catalog-window button.octane-catalog-preview-btn svg {
    border-radius: 0 !important;
}

.octane-catalog-window .octane-catalog-standard-button:hover {
    border-image-source: var(--habbo-skin-shiny-hover) !important;
    filter: none !important;
}

.octane-catalog-window .octane-catalog-standard-button:active {
    border-image-source: var(--habbo-skin-shiny-pressed) !important;
    filter: none !important;
    box-shadow: none !important;
}

.octane-catalog-window .octane-catalog-standard-button.pointer-events-none,
.octane-catalog-window .octane-catalog-standard-button:disabled {
    border-image-source: var(--habbo-skin-shiny-disabled) !important;
    color: #777777 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

.octane-catalog-window .octane-catalog-standard-buy-button {
    width: 170px !important;
    min-width: 170px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-weight: 700 !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image-source: var(--habbo-skin-shiny-thick-green) !important;
    border-image-slice: 5 fill !important;
    border-image-width: 5px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    color: #ffffff !important;
}

.octane-catalog-window .octane-catalog-standard-gift-button {
    width: 170px !important;
    min-width: 170px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-weight: 700 !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image-source: var(--habbo-skin-shiny) !important;
    border-image-slice: 5 fill !important;
    border-image-width: 5px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
}

.octane-catalog-pet-card .octane-catalog-standard-buy-button {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 14px !important;
}

.octane-catalog-window .layout-grid,
.octane-catalog-window [class*="grid-cols-["] {
    overflow-x: hidden !important;
}

.octane-catalog-standard-spinner {
    position: relative;
    width: 200px;
    height: 25px;
    color: #000;
}

.octane-catalog-standard-spinner-label {
    position: absolute;
    left: 0;
    top: 3px;
    width: 53px;
    height: 17px;
    overflow: hidden;
    color: #666666;
    font-family: UbuntuRegular, Ubuntu, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The active AIR Ubuntu layout hides its legacy stacked spinner buttons.
   Polaris intentionally keeps quantity controls visible, using the existing
   Habbo +/- sprite family without increasing AIR's 25px purchase row. */
.octane-catalog-window button.octane-catalog-standard-spinner-button {
    appearance: none;
    position: absolute;
    top: 1px;
    z-index: 3;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-image-source: none !important;
    outline: 0;
    background-color: transparent !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-size: 22px 22px !important;
    box-shadow: none !important;
    image-rendering: var(--octane-pixel-art, pixelated) !important;
    touch-action: none;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: -2px;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-less {
    left: 54px;
    background-image: var(--habbo-stepper-minus) !important;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-less:hover {
    background-image: var(--habbo-stepper-minus-hover) !important;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-less:active {
    background-image: var(--habbo-stepper-minus-pressed) !important;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-less:disabled {
    background-image: var(--habbo-stepper-minus-disabled) !important;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-more {
    left: 110px;
    background-image: var(--habbo-stepper-plus) !important;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-more:hover {
    background-image: var(--habbo-stepper-plus-hover) !important;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-more:active {
    background-image: var(--habbo-stepper-plus-pressed) !important;
}

.octane-catalog-window button.octane-catalog-standard-spinner-button-more:disabled {
    background-image: var(--habbo-stepper-plus-disabled) !important;
}

.octane-catalog-standard-spinner-input-frame {
    position: absolute;
    top: 0;
    left: 78px;
    width: 30px;
    height: 25px;
    z-index: 2;
}

.octane-catalog-standard-spinner-discount {
    position: absolute;
    top: 0;
    left: 65px;
    width: 135px;
    height: 25px;
    overflow: visible;
    border: 0;
    color: #000000;
}

/* AIR border style 3: the white border-slot alpha mask colorized to the
   discount container's #92d27c window color. */
.octane-catalog-standard-spinner-discount::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #92d27c;
    -webkit-mask-box-image: url("../../assets/images/catalog/air/gift/border-slot-e9e9e9.png") 3 fill / 3px / 0 stretch;
    image-rendering: var(--octane-pixel-art, pixelated);
    pointer-events: none;
}

/* Firefox has no mask-box-image, so the slot drew as a plain green square. These steps are the 3px
   corner alpha of the 7px discount slot. */
@supports not (-webkit-mask-box-image-source: none) {
    .octane-catalog-standard-spinner-discount::before {
        clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 1px) calc(100% - 2px), calc(100% - 1px) calc(100% - 1px), calc(100% - 2px) calc(100% - 1px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 1px 2px, 1px 1px, 2px 1px);
    }
}

.octane-catalog-standard-spinner-discount-copy {
    /* Keep the localized "+ N free!" visible between the requested plus
       control and AIR's fixed x=173 bonus star. */
    position: absolute;
    top: 5px;
    left: 68px;
    z-index: 2;
    width: 67px;
    height: 15px;
    overflow: hidden;
    color: #000000;
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 15px;
    white-space: nowrap;
}

.octane-catalog-standard-spinner-discount-star {
    position: absolute;
    top: -2px;
    left: 108px;
    z-index: 1;
    width: 30px;
    height: 30px;
    background: url("../../assets/images/catalog/air/bundle-star.png") 0 0 / 29px 29px no-repeat;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-standard-spinner-input-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-width: 6px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    border-image-source: var(--habbo-skin-border-white) !important;
    border-image-slice: 6 fill !important;
    border-image-width: 6px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    image-rendering: var(--octane-pixel-art, pixelated);
    pointer-events: none;
}

.octane-catalog-window .octane-catalog-standard-spinner-value {
    position: absolute;
    left: 3px;
    top: 5px;
    width: 22px !important;
    height: 15px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    font-family: UbuntuRegular, Ubuntu, sans-serif;
    font-size: 10px !important;
    font-weight: 400;
    line-height: 15px !important;
    text-align: left;
}

.octane-catalog-window .octane-catalog-standard-spinner-value:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.octane-catalog-standard-price-display {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-height: 24px;
    color: #000000;
    font-size: 11px;
}

.octane-catalog-standard-price-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 22px;
    min-width: 34px;
    padding: 0 2px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.octane-catalog-standard-price-text {
    color: #000000 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
}

.octane-catalog-standard-price-original {
    position: relative;
    display: inline-block;
    color: #999999 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
}

.octane-catalog-standard-price-original::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    left: 0;
    height: 2px;
    background: #ff0000;
    pointer-events: none;
}

.octane-catalog-total-price-value .octane-catalog-standard-price-display {
    align-items: flex-start;
    width: max-content;
    height: 24px;
    min-height: 24px;
    gap: 0;
    font-size: 12px;
    margin-left: auto;
}

.octane-catalog-total-price-value .octane-catalog-standard-price-pill {
    align-items: flex-start;
    height: 24px;
    min-width: 0;
    gap: 0;
    padding: 0;
}

.octane-catalog-total-price-value .octane-catalog-standard-price-text {
    font-size: 12px !important;
    margin-top: 3px;
}

.octane-catalog-total-price-value .octane-catalog-standard-price-original {
    font-size: 12px !important;
    margin-top: 3px;
}

.octane-catalog-total-price-value .octane-catalog-standard-price-original::after {
    top: 7px;
}

.octane-catalog-total-price-value .octane-catalog-standard-price-plus {
    display: inline-block;
    width: 8px;
    height: 17px;
    margin-left: -2px;
    margin-top: 3px;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    line-height: 17px;
    text-align: left;
}

.octane-catalog-total-price-value .octane-currency-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin-top: 1px;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.octane-catalog-total-price-value [data-currency-type="-1"] .octane-currency-icon {
    background-image: url("../../assets/images/catalog/air/currency-credit-big.png") !important;
}

.octane-catalog-total-price-value [data-currency-type="0"] .octane-currency-icon {
    background-image: url("../../assets/images/catalog/air/currency-ducket-big.png") !important;
}

.octane-catalog-total-price-value [data-currency-type="5"] .octane-currency-icon {
    background-image: url("../../assets/images/catalog/air/currency-diamond-big.png") !important;
}

.octane-catalog-window .octane-catalog-preview-price .octane-catalog-standard-price-text {
    color: #ffffff !important;
    text-shadow:
        0 0 2px #000,
        1px 1px 1px #000,
        -1px 1px 1px #000,
        1px -1px 1px #000,
        -1px -1px 1px #000 !important;
}

.octane-catalog-standard-price-plus {
    display: inline-block;
    width: 7px;
    height: 17px;
    color: #666;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.octane-catalog-preview-btn {
    position: absolute;
    z-index: 4;
    width: 25px;
    height: 24px;
    min-width: 25px;
    padding: 0 !important;
    overflow: hidden;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.octane-catalog-preview-btn svg {
    width: 14px !important;
    height: 14px !important;
    color: #111 !important;
    fill: #111 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.octane-catalog-preview-rotate {
    top: 8px;
    right: 35px;
}

.octane-catalog-preview-state {
    top: 8px;
    right: 6px;
}

.octane-catalog-window button.octane-catalog-preview-btn {
    width: 25px !important;
    height: 24px !important;
    min-width: 25px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-image-source: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    z-index: 10 !important;
}

.octane-catalog-window button.octane-catalog-preview-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 6px 6px 7px;
    border-image-source: var(--habbo-skin-shiny-large);
    border-image-slice: 6 6 7 6 fill;
    border-image-width: 6px 6px 7px;
    border-image-repeat: stretch;
    pointer-events: none;
}

.octane-catalog-window button.octane-catalog-preview-btn:hover::before {
    border-image-source: var(--habbo-skin-shiny-large-hover);
}

.octane-catalog-window button.octane-catalog-preview-btn:active::before {
    border-image-source: var(--habbo-skin-shiny-large-pressed);
}

.octane-catalog-window button.octane-catalog-preview-btn:disabled::before {
    border-image-source: var(--habbo-skin-shiny-large-disabled);
}

.octane-catalog-window button.octane-catalog-preview-btn > svg {
    position: relative;
    z-index: 1;
}

.octane-catalog-breadcrumb {
    display: none;
}

.octane-catalog-preview-controls {
    position: absolute;
    top: 8px;
    right: 6px;
    z-index: 10;
    width: 54px;
    height: 77px;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-btn {
    position: absolute;
    top: 0;
    width: 25px !important;
    min-width: 25px !important;
    height: 24px !important;
    min-height: 24px !important;
    overflow: hidden;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-btn.is-left {
    left: 0;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-btn.is-right {
    left: 29px;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-btn:disabled {
    opacity: 1 !important;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-region {
    position: absolute;
    left: 31px;
    display: block;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-zoom-btn {
    top: 29px;
    width: 20px !important;
    min-width: 20px !important;
    height: 22px !important;
    min-height: 22px !important;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-action-btn {
    top: 55px;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-region:hover {
    filter: brightness(1.12);
}

.octane-catalog-window .octane-catalog-preview-controls button.octane-catalog-preview-region:active {
    filter: brightness(0.9);
}

.octane-catalog-window .octane-catalog-preview-controls .octane-catalog-preview-arrow {
    position: absolute;
    top: 7px;
    display: block;
    width: 10px !important;
    height: 9px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: none !important;
    z-index: 1;
    filter: none !important;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-window .octane-catalog-preview-controls button.is-left .octane-catalog-preview-arrow {
    left: 7px;
}

.octane-catalog-window .octane-catalog-preview-controls button.is-right .octane-catalog-preview-arrow {
    left: 9px;
}

.octane-catalog-window .octane-catalog-preview-controls .octane-icon.icon-zoom-more {
    position: absolute;
    top: 0;
    left: 3px;
    width: 13px;
    height: 22px;
    background-repeat: no-repeat;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-window .octane-catalog-preview-controls .octane-icon.icon-zoom-more:hover,
.octane-catalog-window .octane-catalog-preview-controls .octane-icon.icon-zoom-more:active {
    transform: none;
    filter: none;
}

.octane-catalog-window .octane-catalog-preview-controls .octane-catalog-preview-action-icon {
    position: absolute;
    top: 0;
    left: -10px;
    width: 41px;
    height: 22px;
    background: url("@/assets/images/catalog/preview-avatar-action.svg") no-repeat;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-grid-club-level {
    position: absolute;
    top: 4px;
    left: 23px;
    z-index: 5;
    display: inline-flex;
    pointer-events: none;
}

.octane-catalog-grid-density-standard .layout-grid-item.uses-base-grid-template .octane-catalog-grid-club-level {
    top: 2px;
    left: 15px;
}

/* Bots (avatar offers): pin the HC badge to the tile's top-left corner —
   the default 23px offset suits furni tiles. */
.octane-catalog-grid:not(.octane-catalog-grid-density-standard) .layout-grid-item:has(.avatar-image) .octane-catalog-grid-club-level {
    left: 4px;
}

/* purchaseWidget with nothing picked: AIR shows "Select an item!" (u_headline_small, #666666) on the greyed
   full-width buy bar. */
.octane-catalog-purchase-selection-prompt {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: 30px;
    border: 5px solid transparent;
    border-image-source: var(--habbo-skin-shiny-thick-disabled);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    color: #666666;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

/* ============================================================================
   Phones and tablets
   The AIR window (570 x 635) stays as it is wherever it fits. Where it does not:
   - a phone held upright gets the window full screen with everything stacked:
     tabs that scroll sideways, a short header, the menu, then the 360 x 460 page;
   - a phone on its side keeps AIR's two columns full screen (menu left, page right);
   - a screen too short for 635 px (tablet in split view, small laptop) keeps the
     window, only as tall as the screen allows, with its content scrolling.
   The pages keep their AIR coordinates (360 x 460); only the frame around them moves.
   ============================================================================ */

@media (max-height: 659px) and (min-width: 641px) and (min-height: 521px) {
    body .octane-card-shell.octane-catalog-window {
        height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .draggable-window:has(> .octane-catalog-window) {
        height: calc(100dvh - 16px) !important;
    }

    .octane-catalog-content-shell {
        overflow-y: auto !important;
    }

    .octane-catalog-stage {
        min-height: 460px;
    }
}

@media (max-width: 640px), (orientation: landscape) and (max-height: 520px) {
    /* Full screen: beats the generic phone centring of every draggable window. */
    body .draggable-window:has(> .octane-catalog-window) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        transform: none !important;
    }

    body .octane-card-shell.octane-catalog-window {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .octane-catalog-tabs-shell {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
    }

    .octane-catalog-tabs-shell .octane-card-tab-item {
        flex: 0 0 auto !important;
    }

    /* Header: title and one line of text, icon kept at AIR's spot. */
    .octane-catalog-standard-header {
        flex: 0 0 56px;
        height: 56px;
    }

    .octane-catalog-standard-header-icon {
        top: 9px;
    }

    .octane-catalog-standard-header-copy {
        top: 6px;
        right: 8px;
        width: auto;
    }

    .octane-catalog-standard-header-description {
        -webkit-line-clamp: 1;
        line-clamp: 1;
        max-height: 17px;
    }

    .octane-catalog-content-shell {
        padding: 6px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .octane-catalog-layout-shell {
        flex: 0 0 auto;
        width: 360px;
        max-width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .octane-catalog-layout-container {
        flex: 0 0 auto;
        height: auto;
        min-height: 460px;
        overflow: visible;
    }

    .octane-catalog-default-layout {
        width: 100%;
        height: 460px;
        min-height: 460px;
        overflow: visible;
    }

    .octane-catalog-grid:not(.octane-catalog-grid-density-standard) {
        grid-template-columns: repeat(auto-fill, minmax(var(--octane-grid-column-min-width, 47px), 1fr)) !important;
    }
}

/* Upright phone: one column, the menu above the page. */
@media (max-width: 640px) and (orientation: portrait), (max-width: 640px) and (min-height: 521px) {
    .octane-catalog-stage,
    .octane-catalog-stage.is-navigation-hidden {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .octane-catalog-sidebar {
        flex: 0 0 auto;
        width: 100%;
        max-height: 34dvh;
    }
}

/* Phone on its side: AIR's two columns, each scrolling on its own. */
@media (orientation: landscape) and (max-height: 520px) {
    .octane-catalog-standard-header {
        flex-basis: 40px;
        height: 40px;
    }

    .octane-catalog-standard-header-icon {
        top: 2px;
    }

    .octane-catalog-standard-header-copy {
        top: 6px;
    }

    .octane-catalog-standard-header-description {
        display: none;
    }

    .octane-catalog-content-shell {
        overflow-y: hidden !important;
    }

    .octane-catalog-stage {
        display: grid;
        grid-template-columns: 184px 360px;
        justify-content: center;
        height: 100%;
    }

    .octane-catalog-layout-shell {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* The narrowest phones (320 px): the page is drawn a little smaller so it fits whole. */
@media (max-width: 371px) {
    .octane-catalog-layout-shell {
        zoom: 0.85;
        max-width: none;
    }
}

/* Touch screens: rows and tabs answer to a finger without changing how they look. */
@media (pointer: coarse) {
    .octane-catalog-window .octane-catalog-navigation-shell,
    .octane-catalog-window .octane-classic-scroll-area-viewport {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .octane-catalog-window .octane-catalog-navigation-item {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .octane-catalog-window .octane-catalog-navigation-item::after {
        content: "";
        position: absolute;
        inset: -3px 0;
    }
}

/* ============================================================================
   Catalog Admin Editor window
   Compact live catalog manager that lives in its own
   draggable window, so the main catalog chrome stays identical in browse and
   admin mode (the tab strip no longer carries admin controls).
   ============================================================================ */
.octane-catalog-admin-manager {
    width: 880px;
    max-width: calc(100vw - 16px);
    color: #263842;
    font-family: Ubuntu, Arial, sans-serif;
    font-size: 11px;
}

.octane-catalog-admin-manager button,
.octane-catalog-admin-manager input,
.octane-catalog-admin-manager select,
.octane-catalog-admin-manager .octane-select-trigger {
    font-family: Ubuntu, Arial, sans-serif;
}

.octane-catalog-admin-preview-persona,
.octane-catalog-admin-bulk-grid,
.octane-catalog-admin-import-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 7px 8px;
    border: 1px solid #a8b5bd;
    border-radius: 5px;
    background: linear-gradient(180deg, #edf3f6 0%, #dce7ed 100%);
}

.octane-catalog-admin-preview-persona label,
.octane-catalog-admin-bulk-grid label {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    margin: 0;
    color: #3b505c;
    font-size: 10px;
    font-weight: 700;
}

.octane-catalog-admin-preview-persona input[type="number"],
.octane-catalog-admin-preview-persona .octane-number-input,
.octane-catalog-admin-bulk-grid input:not([type="checkbox"]),
.octane-catalog-admin-bulk-grid select,
.octane-catalog-admin-bulk-grid .octane-select-trigger,
.octane-catalog-admin-import-toolbar select,
.octane-catalog-admin-import-toolbar .octane-select-trigger {
    height: 25px;
    min-width: 74px;
    padding: 2px 7px;
    border: 1px solid #8499a5;
    border-radius: 4px;
    outline: 0;
    background: #f9fbfc;
    color: #203844;
    font: 700 10px Ubuntu, Arial, sans-serif;
}

.octane-catalog-admin-preview-persona input:focus,
.octane-catalog-admin-bulk-grid input:focus,
.octane-catalog-admin-bulk-grid select:focus,
.octane-catalog-admin-bulk-grid .octane-select-trigger:focus,
.octane-catalog-admin-import-toolbar select:focus,
.octane-catalog-admin-import-toolbar .octane-select-trigger:focus,
.octane-catalog-admin-import-export textarea:focus {
    border-color: #3e83b5;
    box-shadow: 0 0 0 2px rgba(62, 131, 181, .18);
}

.octane-catalog-admin-preview-persona input[type="checkbox"],
.octane-catalog-admin-bulk-grid input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #438ec0;
}

.octane-catalog-admin-preview-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 6px;
    max-height: 355px;
    padding-right: 3px;
    overflow: auto;
}

.octane-catalog-admin-preview-page,
.octane-catalog-admin-preview-offer {
    border: 1px solid #aab8c0;
    border-radius: 5px;
    padding: 6px 7px;
    background: #f8fafb;
}

.octane-catalog-admin-preview-page header,
.octane-catalog-admin-preview-offer {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.octane-catalog-admin-preview-page header strong,
.octane-catalog-admin-preview-offer strong {
    color: #223b48;
    font-size: 10px;
    line-height: 1.25;
}

.octane-catalog-admin-preview-page header span,
.octane-catalog-admin-preview-offer span,
.octane-catalog-admin-preview-offer small {
    color: #647985;
    font-size: 9px;
    line-height: 1.3;
}

.octane-catalog-admin-preview-offers {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.octane-catalog-admin-preview-offer.is-eligible {
    border-left: 3px solid #4a9b63;
}

.octane-catalog-admin-preview-offer.is-blocked {
    border-left: 3px solid #bd574f;
    background: #fbefee;
}

.octane-catalog-admin-preview-offer.is-blocked small {
    color: #a33d36;
    font-weight: 700;
}

.octane-catalog-admin-bulk,
.octane-catalog-admin-studio-preview,
.octane-catalog-admin-import-export {
    height: 100%;
    min-height: 0;
    color: #263842;
}

.octane-catalog-admin-import-export textarea {
    width: 100%;
    min-height: 292px;
    padding: 8px 9px;
    border: 1px solid #8499a5;
    border-radius: 5px;
    outline: 0;
    background: #f8fafb;
    color: #243945;
    resize: vertical;
    font: 11px/1.45 Consolas, "Courier New", monospace;
    tab-size: 2;
}

.octane-catalog-admin-command-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 10px 12px;
    border-bottom: 1px solid #9eafb8;
    background: linear-gradient(180deg, #f4f8fa 0%, #dce8ed 100%);
    color: #203b49;
    box-shadow: inset 4px 0 0 #7e949f, inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.octane-catalog-admin-command-bar.is-draft {
    box-shadow: inset 4px 0 0 #d99a24, inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.octane-catalog-admin-command-bar.is-blocked {
    box-shadow: inset 4px 0 0 #bd5149, inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.octane-catalog-admin-command-bar.is-clean,
.octane-catalog-admin-command-bar.is-ready {
    box-shadow: inset 4px 0 0 #4f9a67, inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.octane-catalog-admin-command-title {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.octane-catalog-admin-command-title strong {
    color: #183541;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1px;
}

.octane-catalog-admin-command-title span {
    color: #617985;
    font-size: 10px;
    font-weight: 600;
}

.octane-catalog-admin-command-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.octane-catalog-admin-command-stats > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid #adbec7;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.82);
    color: #38515e;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 1px rgba(36, 62, 75, 0.08), inset 0 1px 0 #ffffff;
}

.octane-catalog-admin-command-stats > span.is-revision {
    border-color: #a9bac3;
    background: #edf3f6;
}

.octane-catalog-admin-command-stats > span.is-actors {
    border-color: #8fb8d1;
    background: #e8f4fa;
    color: #285e7b;
}

.octane-catalog-admin-command-stats > span.is-locks {
    border-color: #aa9bc8;
    background: #f1edf8;
    color: #59477d;
}

.octane-catalog-admin-command-stats > span.has-pending {
    border-color: #d9a13a;
    background: #fff3d5;
    color: #775000;
}

.octane-catalog-admin-command-stats > span.has-error {
    border-color: #d46d65;
    background: #fde9e7;
    color: #8c302a;
}

.octane-catalog-admin-command-stats > span.has-warning {
    border-color: #d6a648;
    background: #fff6dc;
    color: #775500;
}

.octane-catalog-admin-command-stats > span.is-valid {
    border-color: #74b487;
    background: #e9f6ed;
    color: #2f7043;
}

.octane-catalog-admin-command-stats svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    fill: currentColor;
}

@media (max-width: 760px) {
    .octane-catalog-admin-command-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .octane-catalog-admin-command-stats {
        justify-content: flex-start;
    }
}

.octane-catalog-admin-manager-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 !important;
    background: var(--catalog-standard-bg, #d7d7cf) !important;
}

.octane-catalog-admin-operation-error {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border-bottom: 1px solid #b85b54;
    background: #f8d9d5;
    color: #762c27;
    font-size: 11px;
    font-weight: 700;
}

.octane-catalog-admin-operation-error svg {
    flex: 0 0 auto;
    color: #b64038;
}

/* Tab strip under the header */
.octane-catalog-admin-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #9a9a90;
}

.octane-catalog-admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border: 1px solid #8f8f86;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, #f4f4ef 0%, #dcdcd3 100%);
    color: #45453f;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.octane-catalog-admin-tab svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.octane-catalog-admin-tab:hover {
    filter: brightness(1.03);
}

.octane-catalog-admin-tab.is-active {
    background: linear-gradient(180deg, #6aa4d8 0%, #4d8bc9 100%);
    border-color: #35618f;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.octane-catalog-admin-tab.has-pending:not(.is-active) {
    box-shadow: inset 0 -2px 0 #1aa022;
}

.octane-catalog-admin-tab-count {
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(65, 141, 176, 0.2);
    color: #345f74;
    font-size: 9px;
}

.octane-catalog-admin-tab.is-active .octane-catalog-admin-tab-count {
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff;
}

.octane-catalog-admin-panel {
    flex: 1 1 auto;
    height: 460px;
    min-height: 0;
    max-height: calc(100vh - 150px);
    padding: 8px;
    overflow: hidden;
}

/* Shared buttons */
.octane-catalog-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 3px solid transparent;
    border-image-source: var(--habbo-skin-button);
    border-image-slice: 3 fill;
    border-image-width: 3px;
    border-image-repeat: stretch;
    border-radius: 0;
    background: transparent;
    color: #111111;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-admin-btn:hover {
    filter: brightness(1.04);
}

.octane-catalog-admin-btn:disabled {
    cursor: default;
    opacity: 0.5;
    filter: none;
}

.octane-catalog-admin-btn svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.octane-catalog-admin-btn.is-primary,
.octane-catalog-admin-btn.is-publish {
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-image-source: var(--habbo-skin-shiny-thick-green);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    border-image-repeat: stretch;
    background: transparent;
    color: #ffffff;
}

.octane-catalog-admin-btn.is-danger {
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
    border-image-source: var(--habbo-skin-shiny-red);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    border-image-repeat: stretch;
    background: transparent;
    color: #ffffff;
}

.octane-catalog-admin-btn.is-danger:hover {
    border-image-source: var(--habbo-skin-shiny-red-hover);
}

.octane-catalog-admin-btn.is-publish {
    height: 34px;
    padding: 0 22px;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.octane-catalog-admin-btn.is-publish.has-pending {
    box-shadow: 0 0 0 2px rgba(61, 204, 69, 0.5);
}

.octane-catalog-admin-btn.is-small {
    height: 23px;
    padding: 0 8px;
    font-size: 9px;
}

/* ---- Activity tab ---- */
.octane-catalog-admin-activity {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
}

.octane-catalog-admin-section-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #aaa9a0;
    border-radius: 5px;
    background: #f7f7f2;
}

.octane-catalog-admin-section-head > div,
.octane-catalog-admin-history-main,
.octane-catalog-admin-version-row > div,
.octane-catalog-admin-validation-row > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.octane-catalog-admin-section-head strong,
.octane-catalog-admin-history-summary,
.octane-catalog-admin-version-row strong,
.octane-catalog-admin-validation-row strong {
    color: #252521;
    font-size: 11px;
    font-weight: 700;
}

.octane-catalog-admin-section-head span,
.octane-catalog-admin-history-meta,
.octane-catalog-admin-version-row span,
.octane-catalog-admin-validation-row span,
.octane-catalog-admin-history-side > span {
    color: #75756e;
    font-size: 9px;
}

.octane-catalog-admin-history-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    overflow-y: auto;
}

.octane-catalog-admin-history-row,
.octane-catalog-admin-version-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #b7b7ae;
    border-radius: 5px;
    background: #fff;
}

.octane-catalog-admin-history-side {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
}

/* Empty / placeholder states */
.octane-catalog-admin-placeholder {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #8a8a80;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.octane-catalog-admin-placeholder.is-small {
    padding: 12px;
    font-size: 11px;
}

/* ---- Pages tab: sidebar tree + detail pane ---- */
.octane-catalog-admin-pages {
    display: grid;
    grid-template-columns: 225px minmax(0, 1fr) 220px;
    grid-template-rows: minmax(0, 1fr) 82px;
    gap: 8px;
    height: 100%;
    min-height: 0;
}

.octane-catalog-admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.octane-catalog-admin-search-row {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: center;
}

.octane-catalog-admin-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #b7b7ae;
    border-radius: 13px;
    background: #ffffff;
}

.octane-catalog-admin-search svg {
    width: 11px;
    height: 11px;
    fill: #9a9a90;
}

.octane-catalog-admin-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #20201d;
    font-size: 11px;
    outline: none;
}

.octane-catalog-admin-add {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #3f8f4e;
    border-radius: 13px;
    background: linear-gradient(180deg, #b6e6bd 0%, #8fd39a 100%);
    color: #1f6f2e;
    cursor: pointer;
}

.octane-catalog-admin-add:hover {
    filter: brightness(1.04);
}

.octane-catalog-admin-add:disabled {
    cursor: default;
    opacity: 0.5;
}

.octane-catalog-admin-add svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.octane-catalog-admin-tree {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px;
    border: 1px solid #b7b7ae;
    border-radius: 4px;
    background: #f7f7f2;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.07);
    overflow-y: auto;
}

.octane-catalog-admin-tree-row {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 26px;
    padding-right: 6px;
    border-radius: 4px;
    cursor: pointer;
}

.octane-catalog-admin-tree-row:hover {
    background: rgba(65, 141, 176, 0.1);
}

.octane-catalog-admin-tree-row.is-selected {
    background: linear-gradient(180deg, #cdeafb 0%, #a9d6ef 100%);
    box-shadow: inset 0 0 0 1px rgba(65, 141, 176, 0.5);
}

.octane-catalog-admin-tree-row.is-hidden {
    opacity: 0.55;
}

.octane-catalog-admin-tree-row.is-drag-over {
    background: rgba(65, 141, 176, 0.22);
    box-shadow: inset 0 0 0 1px rgba(65, 141, 176, 0.55);
}

.octane-catalog-admin-tree-drag {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    color: #9a9a90;
    cursor: grab;
    opacity: 0.45;
}

.octane-catalog-admin-tree-row:hover .octane-catalog-admin-tree-drag {
    opacity: 0.85;
}

.octane-catalog-admin-tree-caret {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 14px;
}

.octane-catalog-admin-tree-caret button {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b6b62;
    cursor: pointer;
}

.octane-catalog-admin-tree-caret button svg {
    width: 8px;
    height: 8px;
    fill: currentColor;
}

.octane-catalog-admin-tree-caret-spacer {
    display: inline-block;
    width: 14px;
    height: 14px;
}

.octane-catalog-admin-tree-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.octane-catalog-admin-tree-icon-empty {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #b7b7ae;
    border-radius: 2px;
    background: #ffffff;
}

.octane-catalog-admin-tree-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #20201d;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-admin-tree-count {
    flex: 0 0 auto;
    color: #9a9a90;
    font-size: 9px;
    font-weight: 600;
}

.octane-catalog-admin-detail {
    display: flex;
    min-height: 0;
    border: 1px solid #b7b7ae;
    border-radius: 4px;
    background: #eceae2;
    overflow: hidden;
}

.octane-catalog-admin-detail-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    height: 100%;
    padding: 12px;
}

.octane-catalog-admin-detail-head,
.octane-catalog-admin-detail-actions {
    flex: 0 0 auto;
}

.octane-catalog-admin-detail-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #c9c9c0;
}

.octane-catalog-admin-detail-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #c9c9c0;
    border-radius: 6px;
    background: #ffffff;
}

.octane-catalog-admin-detail-icon img {
    width: 28px;
    height: 28px;
}

.octane-catalog-admin-detail-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.octane-catalog-admin-detail-title {
    overflow: hidden;
    color: #20201d;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-admin-detail-sub {
    color: #7a7a70;
    font-size: 10px;
}

.octane-catalog-admin-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.octane-catalog-admin-detail-actions .octane-catalog-admin-btn {
    justify-content: flex-start;
}

/* ---- Offers (inside page detail) ---- */
.octane-catalog-admin-offers {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding-top: 10px;
    border-top: 1px solid #c9c9c0;
}

.octane-catalog-admin-offers-head {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.octane-catalog-admin-offers-title {
    overflow: hidden;
    color: #20201d;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-admin-offers-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    padding: 4px;
    border: 1px solid #b7b7ae;
    border-radius: 4px;
    background: #f7f7f2;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.07);
    overflow-y: auto;
}

.octane-catalog-admin-offer-row {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 42px;
    padding: 4px 6px;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.octane-catalog-admin-offer-row.is-selected {
    background: linear-gradient(180deg, #cdeafb 0%, #a9d6ef 100%);
    box-shadow: inset 0 0 0 1px rgba(65, 141, 176, 0.5);
}

.octane-catalog-admin-offer-row.is-drag-over {
    background: rgba(65, 141, 176, 0.12);
    box-shadow: inset 0 0 0 1px rgba(65, 141, 176, 0.45);
}

.octane-catalog-admin-offer-drag {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 14px;
    height: 14px;
    color: #9a9a90;
    cursor: grab;
    opacity: 0.55;
}

.octane-catalog-admin-offer-row:hover .octane-catalog-admin-offer-drag {
    opacity: 0.95;
}

.octane-catalog-admin-offer-drag svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}

.octane-catalog-admin-offer-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #d5d5cc;
    border-radius: 4px;
    background: #f4f4ef;
    box-shadow: inset 0 0 0 1px #ffffff;
}

.octane-catalog-admin-offer-icon img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-admin-offer-icon-empty {
    width: 22px;
    height: 22px;
    border: 1px dashed #c2c2ba;
    border-radius: 3px;
    background: repeating-linear-gradient(45deg, #e7e7df 0, #e7e7df 3px, #f7f7f2 3px, #f7f7f2 6px);
}

.octane-catalog-admin-offer-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #20201d;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-admin-offer-price {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    color: #60605a;
    font-size: 10px;
}

.octane-catalog-admin-offer-price-entry {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.octane-catalog-admin-offer-price-plus {
    margin: 0 1px;
    color: #9a9a90;
    font-size: 9px;
    font-weight: 700;
}

.octane-catalog-admin-offer-preview-price .octane-catalog-admin-offer-price {
    font-size: 11px;
}

/* Shared reorder + control buttons (offer rows) */
.octane-catalog-admin-manager-reorder {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 1px;
}

.octane-catalog-admin-manager-reorder button {
    display: grid;
    place-items: center;
    width: 15px;
    height: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #52819a;
    cursor: pointer;
}

.octane-catalog-admin-manager-reorder button:disabled {
    color: #c2c2ba;
    cursor: default;
}

.octane-catalog-admin-manager-reorder button svg {
    width: 8px;
    height: 8px;
    fill: currentColor;
}

.octane-catalog-admin-manager-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 1px;
    align-items: center;
}

.octane-catalog-admin-manager-controls button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #418db0;
    cursor: pointer;
}

.octane-catalog-admin-manager-controls button:hover {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.7);
}

.octane-catalog-admin-manager-controls button.danger {
    color: #b83b32;
}

.octane-catalog-admin-manager-controls button svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

/* ---- Publish tab ---- */
.octane-catalog-admin-publish {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    min-height: 0;
    padding: 16px 20px 20px;
    text-align: left;
}

.octane-catalog-admin-publish-status {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 4px;
    background: rgba(31, 111, 46, 0.12);
    color: #1f6f2e;
    font-size: 12px;
    font-weight: 700;
}

.octane-catalog-admin-publish-status.is-draft {
    background: rgba(240, 163, 24, 0.18);
    color: #8a5b00;
}

.octane-catalog-admin-inspector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border: 1px solid #9fafb8;
    border-radius: 7px;
    background: linear-gradient(180deg, #f7fafb 0%, #eaf1f4 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(36, 62, 75, 0.08);
    overflow-y: auto;
}

.octane-catalog-admin-inspector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #bdcbd2;
}

.octane-catalog-admin-inspector-head strong {
    color: #1d3a47;
    font-size: 14px;
    font-weight: 800;
}

.octane-catalog-admin-inspector-head span {
    padding: 3px 7px;
    border: 1px solid #aabcc5;
    border-radius: 7px;
    background: #ffffff;
    color: #55707d;
    font-size: 9px;
    font-weight: 700;
}

.octane-catalog-admin-inspector-data {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #c5d0d5;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.78);
}

.octane-catalog-admin-inspector-data > div {
    display: grid;
    grid-template-columns: minmax(70px, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    border-bottom: 1px solid #dce4e8;
}

.octane-catalog-admin-inspector-data > div:last-child {
    border-bottom: 0;
}

.octane-catalog-admin-inspector-data dt,
.octane-catalog-admin-inspector-data dd {
    margin: 0;
    font-size: 10px;
}

.octane-catalog-admin-inspector-data dt {
    color: #657b86;
    font-weight: 600;
}

.octane-catalog-admin-inspector-data dd {
    min-width: 0;
    overflow: hidden;
    color: #203b49;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octane-catalog-admin-inspector-data dd.is-positive {
    color: #2f7043;
}

.octane-catalog-admin-inspector-data dd.is-muted {
    color: #9a4b43;
}

.octane-catalog-admin-lock-state {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 9px;
    border: 1px solid #d3a54b;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff8e5 0%, #ffefc7 100%);
    color: #765000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.octane-catalog-admin-lock-state.is-owned {
    border-color: #74ad83;
    background: linear-gradient(180deg, #f1faf3 0%, #dff1e4 100%);
    color: #2c6e3b;
}

.octane-catalog-admin-lock-state > svg {
    width: 12px;
    height: 12px;
    margin-top: 1px;
    flex: 0 0 auto;
    fill: currentColor;
}

.octane-catalog-admin-lock-state > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.octane-catalog-admin-lock-state strong,
.octane-catalog-admin-lock-state span {
    font-size: 9px;
    line-height: 1.35;
}

.octane-catalog-admin-lock-state strong {
    font-size: 10px;
    font-weight: 800;
}

.octane-catalog-admin-inspector-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: auto;
}

.octane-catalog-admin-inspector-actions .octane-catalog-admin-btn {
    justify-content: center;
    width: 100%;
}

.octane-catalog-admin-inspector-actions .octane-catalog-admin-btn:first-child {
    grid-column: 1 / -1;
}

.octane-catalog-admin-changes-drawer {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid #9da9b1;
    border-radius: 4px;
    background: linear-gradient(180deg, #eef4f7 0%, #dce7ed 100%);
}

.octane-catalog-admin-changes-title {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: center;
}

.octane-catalog-admin-changes-title > div {
    display: flex;
    flex-direction: column;
}

.octane-catalog-admin-changes-title strong {
    color: #273845;
    font-size: 10px;
}

.octane-catalog-admin-changes-title span {
    color: #60737f;
    font-size: 8px;
}

.octane-catalog-admin-changes-feed {
    display: flex;
    flex: 1 1 auto;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.octane-catalog-admin-changes-feed > button {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid rgba(58, 84, 99, 0.22);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.7);
    text-align: left;
}

.octane-catalog-admin-changes-feed > button strong,
.octane-catalog-admin-changes-feed > button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octane-catalog-admin-changes-feed > button strong {
    color: #273845;
    font-size: 8px;
}

.octane-catalog-admin-changes-feed > button span,
.octane-catalog-admin-changes-feed > span {
    color: #697a85;
    font-size: 8px;
}

.octane-catalog-admin-publish-status.is-blocked,
.octane-catalog-admin-publish-status.is-offline {
    background: rgba(184, 59, 50, 0.14);
    color: #98342d;
}

.octane-catalog-admin-publish-status.is-ready {
    background: rgba(31, 111, 46, 0.16);
    color: #1f6f2e;
}

.octane-catalog-admin-publish-text {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
    color: #60605a;
    font-size: 11px;
    line-height: 1.5;
}

.octane-catalog-admin-publish-changes {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.octane-catalog-admin-publish-changes-head {
    flex: 0 0 auto;
    color: #20201d;
    font-size: 12px;
    font-weight: 700;
}

.octane-catalog-admin-publish-changes-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    margin: 0;
    padding: 6px;
    border: 1px solid #b7b7ae;
    border-radius: 4px;
    background: #f7f7f2;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.07);
    overflow-y: auto;
    list-style: none;
}

.octane-catalog-admin-publish-change {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.octane-catalog-admin-publish-change-summary {
    flex: 1 1 auto;
    min-width: 0;
    color: #20201d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.octane-catalog-admin-publish-change-time {
    flex: 0 0 auto;
    color: #9a9a90;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.octane-catalog-admin-publish-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    gap: 8px;
    padding-top: 4px;
}

.octane-catalog-admin-validation-list,
.octane-catalog-admin-versions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    overflow-y: auto;
}

.octane-catalog-admin-validation-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 9px;
    border: 1px solid #d9a39f;
    border-radius: 4px;
    background: #fff3f2;
}

.octane-catalog-admin-validation-row > svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #b83b32;
}

/* Problems panel: the rules are the list, the entities are the detail underneath.
   A live catalog answers with hundreds of rows, so they open one rule at a time. */
.octane-catalog-admin-validation-list .octane-catalog-admin-publish-changes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.octane-catalog-admin-validation-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #75756e;
    font-size: 9px;
    font-weight: 400;
}

.octane-catalog-admin-validation-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.octane-catalog-admin-validation-group-head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #d9a39f;
    border-radius: 4px;
    background: #fff3f2;
    color: #252521;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.octane-catalog-admin-validation-group-head:hover {
    background: #ffe9e6;
}

.octane-catalog-admin-validation-group-head > strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.octane-catalog-admin-validation-count {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 9px;
    background: #b4514b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.octane-catalog-admin-validation-group-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 16px;
}

/* The row became a button so a problem can carry you to the page it names. */
.octane-catalog-admin-validation-group-body .octane-catalog-admin-validation-row {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.octane-catalog-admin-validation-group-body .octane-catalog-admin-validation-row:disabled {
    cursor: default;
    opacity: 0.75;
}

.octane-catalog-admin-validation-group-body .octane-catalog-admin-validation-row:not(:disabled):hover {
    border-color: #b4514b;
    background: #ffe9e6;
}

/* Bundle layout (single_bundle / room_bundle): main hero item + framed "What's Included" container */
.octane-catalog-bundle-main-item {
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    padding: 4px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #e4e7df;
}

.octane-catalog-bundle-main-item > .octane-catalog-grid-offer-icon {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-bundle-frame {
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #8a8882;
    border-radius: 4px;
    background: #d9d9d5;
    box-shadow: inset 1px 1px #ffffff, inset -1px -1px #b0aea8;
}

/* Show at most 5 rows of items; scroll when the bundle holds more. Rows are pinned
   to the tile height and top-aligned so a partly-filled grid doesn't stretch. */
.octane-catalog-bundle-frame .octane-catalog-layout-bundle-grid {
    height: calc(var(--octane-grid-column-min-height, 40px) * 5 + 2rem);
    grid-template-rows: none !important;
    grid-auto-rows: var(--octane-grid-column-min-height, 40px);
    align-content: start;
}

/* Currency sits at the right of the top row on the classic golden credits panel. */
.octane-catalog-bundle-price {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    margin-inline-start: auto;
    padding: 3px 10px;
    /* 1px black outer edge, then a 2px #e3c47c ring, then the #a58d57 face. */
    border: 1px solid #000000;
    border-radius: 10px;
    background: #a58d57;
    box-shadow: inset 0 0 0 2px #e3c47c;
}

.octane-catalog-bundle-price > div {
    padding: 0 !important;
    background: transparent !important;
}

/* page_text_details sits at the top of a room bundle (e.g. "Also available in the Credit
   page") — small, muted and left-aligned, above both columns. */
.octane-catalog-bundle-details {
    color: #6b6b6b;
    line-height: 1.2;
}

/* Invisible one-line stand-in for the "What's included" header in the left column: it
   reserves the header's height so the currency plate lines up with the top of the furni
   container on the right. Kept to a single line to match the (short) real header. */
.octane-catalog-bundle-header-spacer {
    visibility: hidden;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

/* Room bundles use the classic grey pixel plate for the currency instead of the golden
   panel: a white outer edge, a thick black rounded border and a flat grey fill. */
.octane-catalog-bundle-price.octane-catalog-bundle-price--room {
    padding: 3px 10px;
    /* 1px black outer edge, then a 2px white ring, then the grey plate face. */
    border: 1px solid #000000;
    border-radius: 9px;
    background: #b7b6ae;
    box-shadow: inset 0 0 0 2px #ffffff, inset 0 6px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

/* Gift + Buy share one line at the bottom of the bundle's left column. */
.octane-catalog-bundle-actions {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.octane-catalog-bundle-actions > .octane-catalog-standard-button {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
}

/* AIR info pages with an illustration (layout_info_loyalty_xml, layout_info_duckets_xml: 360 x 460); the views
   set each layout's positions. */
.octane-catalog-layout-info-illustration {
    position: relative;
    width: 360px;
    max-width: 100%;
    height: 460px;
    max-height: 100%;
    overflow: hidden;
    color: #000;
}

.octane-catalog-layout-info-illustration__description {
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 12px;
    line-height: 15px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.octane-catalog-layout-info-illustration__description a {
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.octane-catalog-layout-info-illustration__image {
    position: absolute;
    pointer-events: none;
    image-rendering: pixelated;
}

/* AIR layout_info_rentables_xml, layout_info_recycler_xml, layout_monkey_xml (360 x 460). */
.octane-catalog-air-info {
    position: relative;
    width: 360px;
    max-width: 100%;
    height: 460px;
    max-height: 100%;
    overflow: hidden;
    color: #000;
    font-size: 12px;
    line-height: 15px;
}

.octane-catalog-air-info__border {
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-width: 6px;
    border-color: transparent;
    border-image-source: var(--habbo-skin-border-white);
    border-image-slice: 6 fill;
    border-image-width: 6px;
    border-image-repeat: stretch;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-catalog-air-info a {
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.octane-catalog-air-info img {
    image-rendering: pixelated;
}

/* info_rentables: border 17, 20 (328 x 425); the list 10, 9 inside it (309 x 407); rows 306 x 47 every 50 px. */
.octane-catalog-air-info.is-rentables .octane-catalog-air-info__border {
    top: 20px;
    left: 17px;
    width: 328px;
    height: 425px;
}

.octane-catalog-air-info__rules {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 309px;
    height: 407px;
    overflow-x: hidden;
    overflow-y: auto;
}

.octane-catalog-air-info__rule {
    position: relative;
    width: 306px;
    height: 47px;
    margin-bottom: 3px;
}

.octane-catalog-air-info__rule-icon {
    position: absolute;
    top: 3px;
    left: 1px;
}

.octane-catalog-air-info__rule-text {
    position: absolute;
    top: 3px;
    left: 31px;
    width: 232px;
    height: 44px;
    overflow: hidden;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.octane-catalog-air-info__rule-pic {
    position: absolute;
    top: 1px;
    left: 266px;
    max-width: 40px;
    max-height: 46px;
}

/* info_recycler (layout_info_recycler_xml), stretched over the catalog page: one box filled with AIR's 0xfbc362 (border
   style 2), 10 px in from the page, with the Ecotron box image and the title (u_headline_medium) side by side and the
   explanation under them, all in white as in AIR. */
.octane-catalog-air-info.is-recycler {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
}

.octane-catalog-air-info.is-recycler .octane-catalog-air-info__border {
    inset: 10px;
    display: grid;
    grid-template-columns: 57px minmax(0, 1fr);
    grid-template-rows: 57px minmax(0, 1fr);
    gap: 5px 6px;
    padding: 10px 15px 10px 14px;
    border: 1px solid #d9a443;
    border-image-source: none;
    border-radius: 6px;
    background: #fbc362;
    color: #fff;
}

.octane-catalog-air-info__recycler-teaser {
    align-self: center;
    justify-self: center;
    max-width: 57px;
    max-height: 57px;
}

.octane-catalog-air-info__recycler-title {
    grid-column: 2;
    align-self: center;
    overflow: hidden;
    font-family: 'Ubuntu Condensed', Ubuntu, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.octane-catalog-air-info__recycler-text {
    grid-column: 1 / -1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.octane-catalog-air-info.is-recycler a {
    color: inherit;
}

/* monkey: the teaser region 10, 20 (339 x 344) and the store region 10, 375 (339 x 80) are links. */
.octane-catalog-air-info__monkey-teaser,
.octane-catalog-air-info__monkey-special {
    position: absolute;
    left: 10px;
    width: 339px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.octane-catalog-air-info__monkey-teaser {
    top: 20px;
    height: 344px;
}

.octane-catalog-air-info__monkey-special {
    top: 375px;
    height: 80px;
}

.octane-catalog-air-info__monkey-teaser img,
.octane-catalog-air-info__monkey-special img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* AIR layout_trophies_xml with TrophyCatalogWidget, stretched over the catalog page: the description on top, the
   preview takes the free height, then the metals, the inscription box and the purchase row, all full width. */
.octane-catalog-air-trophies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: #000;
    font-size: 12px;
    line-height: 15px;
}

.octane-catalog-air-trophies__description {
    flex: 0 1 auto;
    max-height: 145px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.octane-catalog-air-trophies__description a {
    color: inherit;
    text-decoration: underline;
}

.octane-catalog-air-trophies__preview {
    position: relative;
    display: flex;
    flex: 1 1 135px;
    align-items: center;
    justify-content: center;
    min-height: 135px;
    background: #fff;
}

.octane-catalog-air-trophies__price {
    position: absolute;
    top: 6px;
    right: 8px;
}

.octane-catalog-air-trophies__model {
    position: absolute;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-style: solid;
    /* ctlg_trophies ctlg_prevmodel_button / ctlg_nextmodel_button: container_button style 3, habbo_skin_button_shiny. */
    border-width: 5px;
    border-image-source: var(--habbo-skin-shiny);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    background: transparent;
    color: #000000;
    font-size: 12px;
    cursor: pointer;
}

.octane-catalog-air-trophies__model:hover {
    border-image-source: var(--habbo-skin-shiny-hover);
}

.octane-catalog-air-trophies__model:active {
    border-image-source: var(--habbo-skin-shiny-pressed);
}

.octane-catalog-air-trophies__model:disabled {
    border-image-source: var(--habbo-skin-shiny-disabled);
}

/* AIR keeps the buttons 95 px apart around the middle of the preview. */
.octane-catalog-air-trophies__model.is-previous {
    left: calc(50% - 65px);
}

.octane-catalog-air-trophies__model.is-next {
    left: calc(50% + 30px);
}

.octane-catalog-air-trophies__metals {
    display: flex;
    flex: none;
    justify-content: center;
    gap: 6px;
    height: 36px;
}

.octane-catalog-air-trophies__metal {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 2px solid #fff;
    outline: 1px solid #8c8c8c;
    cursor: pointer;
}

.octane-catalog-air-trophies__metal.is-selected {
    outline: 2px solid #000;
}

.octane-catalog-air-trophies__inscription-label {
    flex: none;
    padding-left: 6px;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-air-trophies__inscription-label:empty {
    display: none;
}

.octane-catalog-air-trophies__inscription {
    flex: none;
    box-sizing: border-box;
    height: 83px;
    padding: 6px;
    border: 1px solid #8c8c8c;
    border-radius: 3px;
    background: #fff;
}

.octane-catalog-air-trophies__inscription textarea {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    resize: none;
}

.octane-catalog-air-trophies__purchase {
    display: flex;
    flex: none;
    gap: 6px;
}

.octane-catalog-air-trophies__purchase > .octane-catalog-standard-button {
    flex: 1 1 0;
}

/* AIR layout_spaces_new_xml with SpacesNewCatalogWidget, stretched over the catalog page: the room preview takes the
   free height, then the tabs, the item grid and the purchase row, all full width. */
.octane-catalog-air-spaces {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: #000;
    font-size: 12px;
}

.octane-catalog-air-spaces__preview {
    position: relative;
    flex: 1 1 240px;
    min-height: 160px;
    overflow: hidden;
}

.octane-catalog-air-spaces__tabs {
    display: flex;
    flex: none;
    height: 22px;
}

.octane-catalog-air-spaces__tab {
    flex: 1 1 0;
    height: 21px;
    padding: 0 4px;
    border-style: solid;
    border-width: 3px;
    border-image-source: var(--habbo-skin-button);
    border-image-slice: 3 fill;
    border-image-width: 3px;
    background: transparent;
    color: #111;
    font-size: 12px;
    line-height: 15px;
    cursor: pointer;
}

.octane-catalog-air-spaces__tab:hover {
    border-image-source: var(--habbo-skin-button-hover);
}

.octane-catalog-air-spaces__tab.is-active {
    border-image-source: var(--habbo-skin-button-pressed);
    font-weight: 700;
}

.octane-catalog-air-spaces__grid {
    flex: none;
    box-sizing: border-box;
    height: 155px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #b6b6b6;
    border-radius: 3px;
    background: #fff;
}

.octane-catalog-air-spaces__grid > * {
    height: 100%;
}

.octane-catalog-air-spaces__purchase {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 30px;
}

.octane-catalog-air-spaces__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* AIR layout_single_bundle_xml, stretched over the catalog page: the description on top, the teaser (with the add-on
   badge and the main product's price on it) on the left next to the special text and the bundle grid, then the
   footer box and the purchase row, all full width. The grid takes the free height. */
.octane-catalog-air-bundle {
    display: grid;
    grid-template-columns: minmax(157px, 45%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        'description description'
        'teaser special'
        'teaser grid'
        'footer footer'
        'purchase purchase';
    gap: 5px 8px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: #000;
    font-size: 12px;
    line-height: 15px;
}

.octane-catalog-air-bundle a {
    color: inherit;
    text-decoration: underline;
}

.octane-catalog-air-bundle__description {
    grid-area: description;
    max-height: 62px;
    padding: 0 6px;
    overflow-y: auto;
    white-space: pre-line;
}

.octane-catalog-air-bundle__special {
    grid-area: special;
    max-height: 45px;
    overflow-y: auto;
    white-space: pre-line;
}

.octane-catalog-air-bundle__teaser {
    grid-area: teaser;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: top left;
}

.octane-catalog-air-bundle__addon {
    position: relative;
    grid-area: teaser;
    align-self: start;
    justify-self: start;
    width: 40px;
    height: 40px;
    margin: 52px 0 0 6px;
}

/* The main product and its price as one tag on the teaser's top-left corner, readable over any picture. */
.octane-catalog-air-bundle__price {
    position: relative;
    z-index: 1;
    grid-area: teaser;
    align-self: start;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 40px;
    margin: 6px 0 0 6px;
    padding: 3px 8px 3px 4px;
    border: 1px solid #8c8c8c;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-weight: 700;
}

.octane-catalog-air-bundle__price img {
    max-width: 32px;
    max-height: 32px;
    image-rendering: pixelated;
}

/* CatalogSimplePriceWidgetView brings its own grey box; the tag is the box here. */
.octane-catalog-air-bundle__price > div {
    padding: 0;
    background: transparent;
}

.octane-catalog-air-bundle__grid {
    grid-area: grid;
    box-sizing: border-box;
    min-height: 0;
    padding: 3px 4px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #b6b6b6;
    border-radius: 3px;
    background: #fff;
}

.octane-catalog-air-bundle__footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    height: 40px;
    padding: 5px 10px;
}

.octane-catalog-air-bundle__footer img {
    max-width: 32px;
    max-height: 30px;
}

.octane-catalog-air-bundle__footer-text {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 30px;
    overflow: hidden;
}

.octane-catalog-air-bundle__purchase {
    grid-area: purchase;
    display: flex;
    gap: 6px;
}

.octane-catalog-air-bundle__purchase > .octane-catalog-standard-button {
    flex: 1 1 0;
}

/* Fixed-height rows from the top, so a short bundle doesn't stretch its tiles over the box. */
.octane-catalog-air-bundle__items {
    height: auto;
    grid-template-rows: none !important;
    grid-auto-rows: 48px;
    align-content: start;
}

/* AIR layout_roomads_xml, stretched over the catalog page: every field full width, the description box takes the
   free height, the price and the purchase button share the bottom row. */
.octane-catalog-air-roomads {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto minmax(60px, 1fr) auto auto auto;
    grid-template-areas:
        'text text'
        'categories categories'
        'name-label name-label'
        'name name'
        'description-label description-label'
        'description description'
        'room-label room-label'
        'rooms rooms'
        'price purchase';
    gap: 4px 8px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 4px 6px 0;
    box-sizing: border-box;
    overflow: hidden;
    color: #000;
    font-size: 12px;
}

.octane-catalog-air-roomads__text {
    grid-area: text;
    max-height: 42px;
    margin-bottom: 4px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 14px;
}

.octane-catalog-air-roomads__categories {
    grid-area: categories;
}

.octane-catalog-air-roomads__rooms {
    grid-area: rooms;
}

.octane-catalog-air-roomads__categories > *,
.octane-catalog-air-roomads__rooms > *,
.octane-catalog-air-roomads__name > * {
    width: 100%;
}

.octane-catalog-air-roomads__label {
    margin-top: 4px;
    font-size: 11px;
    line-height: 15px;
}

.octane-catalog-air-roomads__label.is-name {
    grid-area: name-label;
}

.octane-catalog-air-roomads__label.is-description {
    grid-area: description-label;
}

.octane-catalog-air-roomads__label.is-room {
    grid-area: room-label;
}

.octane-catalog-air-roomads__name {
    grid-area: name;
}

.octane-catalog-air-roomads__description {
    grid-area: description;
    box-sizing: border-box;
    min-height: 0;
    padding: 4px 5px;
    border: 1px solid #8c8c8c;
    border-radius: 3px;
    background: #fff;
    font: inherit;
    resize: none;
}

.octane-catalog-air-roomads__price {
    grid-area: price;
    align-self: center;
    justify-self: end;
}

.octane-catalog-air-roomads__purchase {
    grid-area: purchase;
    display: flex;
    align-items: center;
    min-width: 160px;
    padding: 6px 0;
}

.octane-catalog-air-roomads__purchase > * {
    flex: 1 1 auto;
}

/* AIR layout_frontpage_featured_xml, stretched over the catalog page: the first item as the 184 px column on the left,
   the featured list beside it taking the free height, the voucher box under the list. */
.octane-catalog-air-frontpage {
    display: grid;
    grid-template-columns: 184px 360px;
    grid-template-rows: 392px 61px;
    grid-template-areas:
        'first list'
        'first voucher';
    gap: 7px 8px;
    width: 552px;
    height: 460px;
    margin: 0 auto;
    overflow: hidden;
    color: #000;
}

/* layout_frontpage_featured: AIR's promo pictures are made at the slot size (184 x 460, 356 x 126); a hotel's own
   pictures often are not, so they cover the slot, centred, instead of leaving white around them. */
.octane-catalog-air-frontpage__first,
.octane-catalog-air-frontpage__item {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    background-color: #0e3f52;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    image-rendering: var(--octane-pixel-art, pixelated);
    cursor: pointer;
    text-align: left;
}

.octane-catalog-air-frontpage__first {
    grid-area: first;
    width: 184px;
    height: 460px;
}

.octane-catalog-air-frontpage__list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.octane-catalog-air-frontpage__item {
    flex: 0 0 126px;
    width: 356px;
    height: 126px;
}

/* text_container: a dark bar 5 px in from the bottom, as wide as its ubuntu_condensed_title in white. */
.octane-catalog-air-frontpage__title {
    position: absolute;
    bottom: 3px;
    left: 5px;
    max-width: calc(100% - 10px);
    box-sizing: border-box;
    padding: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff !important;
    font-family: 'Ubuntu Condensed', Ubuntu, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    white-space: normal;
    text-overflow: ellipsis;
}

/* bgBorder 345 x 61 at (200, 399), colour 0x51bbee: the label (u_regular) at (10, 6), the 216 x 25 input box at
   (10, 25) and the 62 x 22 redeem button at (274, 25). */
.octane-catalog-air-frontpage__voucher {
    grid-area: voucher;
    position: relative;
    box-sizing: border-box;
    width: 345px;
    height: 61px;
    margin-left: 8px;
    border-radius: 6px;
    background: #51bbee;
}

.octane-catalog-air-frontpage__voucher-label {
    position: absolute;
    top: 6px;
    left: 10px;
    width: 272px;
    height: 17px;
    overflow: hidden;
    color: #000000;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-air-frontpage__voucher > .flex {
    position: absolute;
    top: 25px;
    left: 10px;
    right: 9px;
    align-items: center;
    justify-content: space-between;
}

.octane-catalog-air-frontpage__voucher input {
    width: 216px !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 6px !important;
    border: 1px solid #7b7b7b !important;
    border-radius: 6px !important;
    background: #ffffff !important;
}

.octane-catalog-air-frontpage__voucher .octane-catalog-redeem-button {
    width: auto;
    min-width: 62px;
    white-space: nowrap;
    height: 22px;
    min-height: 22px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
}

/* Phones: AIR's fixed 552 x 460 block does not fit, so the pictures stack and take the width. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 520px) {
    .octane-catalog-air-frontpage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 200px auto 61px;
        grid-template-areas:
            'first'
            'list'
            'voucher';
        width: 100%;
        height: auto;
    }

    .octane-catalog-air-frontpage__first,
    .octane-catalog-air-frontpage__item,
    .octane-catalog-air-frontpage__voucher {
        width: 100%;
        margin-left: 0;
    }

    .octane-catalog-air-frontpage__first {
        height: 200px;
    }
}

/* AIR layout_recycler_xml + recyclerWidget_xml. The Furnimatic is pixel art at AIR's sizes, so it is not stretched:
   the title and machine are centred at the top, the widget (status, button, slots, dial) is centred at the bottom of
   the catalog page, whatever its size. Offsets are AIR's, measured from the middle of its 360 px page. */
.octane-catalog-air-recycler {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: #000;
    font-size: 12px;
}

.octane-catalog-air-recycler img {
    image-rendering: pixelated;
}

.octane-catalog-air-recycler__title {
    position: absolute;
    top: 5px;
    left: calc(50% - 129px);
}

.octane-catalog-air-recycler__machine {
    position: absolute;
    top: 58px;
    left: calc(50% - 99px);
}

.octane-catalog-air-recycler__widget {
    position: absolute;
    bottom: 0;
    left: calc(50% - 180px);
    width: 360px;
    height: 202px;
    overflow: hidden;
}

/* AIR shows the status in the catalog header; here it sits beside the button, clear of the machine. */
.octane-catalog-air-recycler__status {
    position: absolute;
    top: 41px;
    left: 220px;
    box-sizing: border-box;
    width: 130px;
    height: 30px;
    padding: 1px 4px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    line-height: 13px;
}

.octane-catalog-air-recycler .octane-catalog-air-recycler__recycle {
    position: absolute;
    top: 41px;
    left: 19px;
    width: 194px;
    height: 30px;
}

.octane-catalog-air-recycler__frame {
    position: absolute;
    top: 85px;
    height: 115px;
    background:
        url('../../assets/images/catalog/air/recycler/container-left.png') left top no-repeat,
        url('../../assets/images/catalog/air/recycler/container-right.png') right top no-repeat,
        url('../../assets/images/catalog/air/recycler/container-slice.png') left top repeat-x;
    background-origin: border-box;
}

.octane-catalog-air-recycler__frame.is-slots {
    left: 16px;
    width: 185px;
}

.octane-catalog-air-recycler__frame.is-indicator {
    left: 214px;
    width: 123px;
}

.octane-catalog-air-recycler__slots {
    position: absolute;
    top: 16px;
    left: 21px;
    width: 145px;
    height: 124px;
}

.octane-catalog-air-recycler__slot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: url('../../assets/images/catalog/air/recycler/slot-bg.png') no-repeat;
    cursor: pointer;
}

.octane-catalog-air-recycler__slot:disabled {
    cursor: default;
}

.octane-catalog-air-recycler__slot img {
    max-width: 30px;
    max-height: 30px;
}

.octane-catalog-air-recycler__dial {
    position: absolute;
    top: 2px;
    left: 15px;
}

.octane-catalog-air-recycler__pointer {
    position: absolute;
    top: 43px;
    left: 37px;
    width: 50px;
    height: 50px;
}

.octane-catalog-air-recycler__pointer img {
    position: absolute;
    inset: 0;
}

.octane-catalog-air-recycler__closed {
    position: absolute;
    inset: 0;
}

.octane-catalog-air-recycler__bubble {
    position: absolute;
    top: 98px;
    left: 107px;
    box-sizing: border-box;
    width: 155px;
    min-height: 60px;
    padding: 6px 8px;
    border: 1px solid #000;
    border-radius: 6px;
    background: #fff;
    font-size: 11px;
    line-height: 14px;
}

.octane-catalog-air-recycler__frank {
    position: absolute;
    top: 99px;
    left: 235px;
}

.octane-catalog-air-recycler__chooser {
    position: absolute;
    top: 58px;
    left: calc(50% - 160px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
    width: 320px;
    height: 200px;
    padding: 8px;
    border-style: solid;
    border-width: 6px;
    border-color: transparent;
    border-image-source: var(--habbo-skin-border-white);
    border-image-slice: 6 fill;
    border-image-width: 6px;
    border-image-repeat: stretch;
}

.octane-catalog-air-recycler__chooser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}

.octane-catalog-air-recycler__chooser-close {
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
}

.octane-catalog-air-recycler__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    overflow-y: auto;
}

.octane-catalog-air-recycler__choice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #b6b6b6;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.octane-catalog-air-recycler__choice img {
    max-width: 36px;
    max-height: 36px;
}

/* AIR layout_recycler_prizes_xml + recyclerPrizesWidgetLevelItem_xml, stretched over the catalog page: the product
   view on top, under it the scrolling list of levels, all full width. */
.octane-catalog-air-prizes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 100%;
    min-height: 0;
    color: #000;
    font-size: 12px;
}

.octane-catalog-air-prizes__view {
    position: relative;
    flex: 0 0 240px;
    height: 240px;
    overflow: hidden;
    background: #fff;
}

.octane-catalog-air-prizes__teaser {
    display: block;
    max-width: 100%;
    max-height: 240px;
    margin: 0 auto;
}

.octane-catalog-air-prizes__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.octane-catalog-air-prizes__name {
    position: absolute;
    top: 16px;
    right: 10px;
    left: 10px;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-air-prizes__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.octane-catalog-air-prizes__level {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 4px;
    padding: 5px;
    border: 1px solid #b6b6b6;
    border-radius: 3px;
    background: #fff;
}

.octane-catalog-air-prizes__level-head {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 23px;
    border-bottom: 1px solid #d0d0d0;
}

.octane-catalog-air-prizes__star {
    font-size: 15px;
    line-height: 17px;
    text-shadow: 0 0 1px #000;
}

.octane-catalog-air-prizes__items {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 5px;
}

.octane-catalog-air-prizes__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

/* The furni icon at its own size; one larger than the tile shrinks to fit instead of being cut off. */
.octane-catalog-air-prizes__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.octane-catalog-air-prizes__item.is-selected {
    border-color: #3a7ac2;
}

.octane-catalog-air-prizes__item small {
    position: absolute;
    right: 1px;
    bottom: 0;
    font-size: 9px;
}

/* AIR layout_guild_frontpage_xml, stretched over the catalog page: the title and description on top, the
   start-a-guild button centred under them, the teaser at the bottom. */
.octane-catalog-air-info.is-guild-frontpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 20px 15px 0;
}

.octane-catalog-air-info__guild-title {
    align-self: stretch;
    flex: none;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
}

.octane-catalog-air-info__guild-text {
    align-self: stretch;
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.octane-catalog-air-info .octane-catalog-air-info__guild-buy {
    flex: none;
    width: 213px;
    height: 28px;
}

.octane-catalog-air-info__guild-teaser {
    flex: none;
    max-width: 100%;
    max-height: 163px;
    margin-top: auto;
}

/* AIR layout_builders_club_frontpage / _addons / _loyalty, stretched over the catalog page: the description and the
   offer rows on the left, the Builders Club art (bc_top.png, bc_bottom.png) on the right of add-ons and loyalty. */
.octane-catalog-air-bc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        'description art'
        'list art';
    gap: 8px 10px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 10px 0 0 15px;
    overflow: hidden;
    color: #000;
    font-size: 12px;
    line-height: 15px;
}

.octane-catalog-air-bc.is-frontpage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'description'
        'list';
    padding-right: 15px;
}

.octane-catalog-air-bc a {
    color: inherit;
    text-decoration: underline;
}

.octane-catalog-air-bc__description {
    grid-area: description;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.octane-catalog-air-bc__list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 0 2px 6px 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.octane-catalog-air-bc__item {
    flex: none;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 4px;
    background: #d7d7cf;
}

.octane-catalog-air-bc__item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 25px;
    padding: 0 8px;
    border-radius: 3px;
    background: #afafa9;
    color: #fff;
    font-family: 'Ubuntu Condensed', Ubuntu, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.octane-catalog-air-bc__item-head span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.octane-catalog-air-bc__item-head img {
    width: 15px;
    height: 15px;
    image-rendering: pixelated;
}

.octane-catalog-air-bc__item-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0 0 4px;
}

.octane-catalog-air-bc__price {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 700;
}

.octane-catalog-air-bc__price small {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
}

.octane-catalog-air-bc__buy {
    min-width: 142px;
    height: 35px;
    padding: 0 10px;
    border: 1px solid #077a9c;
    border-radius: 4px;
    background: linear-gradient(#2ab3dc, #0a9bc5);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.octane-catalog-air-bc__buy:hover:not(:disabled) {
    background: linear-gradient(#3cc2ea, #10a7d3);
}

.octane-catalog-air-bc__buy.is-confirm {
    border-color: #b57b00;
    background: linear-gradient(#ffcc4d, #f0a800);
    color: #000;
}

.octane-catalog-air-bc__buy:disabled {
    border-color: #9a9a94;
    background: #c9c9c2;
    color: #5c5c58;
    cursor: default;
}

.octane-catalog-air-bc__buy.is-short:disabled {
    border-color: #a81a12;
    background: #e9a49e;
    color: #6b0c07;
}

.octane-catalog-air-bc__warning {
    color: #cc0000;
    font-weight: 700;
}

.octane-catalog-air-bc__art {
    grid-area: art;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 0;
    overflow: hidden;
}

.octane-catalog-air-bc__art img {
    max-width: 111px;
    image-rendering: pixelated;
}