/* =========================================================================
   ANTEPRIMA CATALOGO (22/10/2026) - riquadro del furni selezionato
   Palco grafite con luce, nome Jost, prezzo con icona, frecce tonde.
   Va con /havoo/havoo-anteprima.js (toglie muri e pavimento ai furni,
   rende trasparente il fondo nero del motore, aggiunge prezzo e suggerimento).
   Per tornare a com'era: togliere i due file da index.html.
   ========================================================================= */

.octane-catalog-window .octane-catalog-product-view:has(> .octane-catalog-offer-panel) {
    flex: 0 0 266px !important;
    height: 266px !important;
    min-height: 266px !important;
    max-height: 266px !important;
    border-radius: 8px;
}

/* la griglia dei furni e posizionata fissa (top 245px nel CSS di Octane): scende sotto l'anteprima */
.octane-catalog-window .octane-catalog-default-layout:has(.octane-catalog-offer-panel) .octane-catalog-grid-shell {
    top: 272px !important;
    height: auto !important;
}

/* elenco dei furni sotto: bordo leggero e barra di scorrimento sottile moderna
   (al posto di quella pixel con le frecce su e giu) */
.octane-catalog-window .octane-catalog-default-layout .octane-catalog-grid-shell {
    border: 1px solid #DADBE3 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
}
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar {
    grid-template-rows: 4px minmax(0, 1fr) 4px;
    width: 10px;
    right: 2px;
}
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar-button {
    width: 10px;
    height: 4px;
    background: none !important;
    pointer-events: none;
}
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar-track {
    background: rgba(40, 43, 53, 0.06) !important;
    border-radius: 99px;
}
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar-thumb {
    width: 10px;
    border-radius: 99px;
    background: rgba(40, 43, 53, 0.35) !important;
    transition: background 0.15s;
}
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar-thumb:hover,
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar-thumb:active {
    background: #E08A12 !important;
}
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar-thumb::before,
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scrollbar-thumb::after {
    display: none;
}
.octane-catalog-window .octane-catalog-grid-shell .octane-classic-scroll-area:has(> .octane-classic-scrollbar[data-visible="true"]) > .octane-classic-scroll-area-viewport {
    padding-right: 14px !important;
}

.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) {
    border-radius: 8px;
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #3D3F50 0%, #282B35 100%);
}

/* luce arancio e ombra morbida solo quando si vede il furni da solo */
.octane-catalog-window .octane-catalog-offer-preview.hv-palco-furni {
    background:
        radial-gradient(ellipse 46% 40% at 50% 58%, rgba(224, 138, 18, 0.30), rgba(224, 138, 18, 0) 70%),
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #3D3F50 0%, #282B35 100%);
}
.octane-catalog-window .octane-catalog-offer-preview.hv-palco-furni::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 66%;
    width: 150px;
    height: 26px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
}
/* piastrelle isometriche sotto il furni, come la griglia della pagina di accesso
   di havoo.net (rombi 64x32 = una casella del gioco), sfumate verso i bordi.
   Il rombo centrale cade sul punto dell'ombra (50%, 66%). */
.octane-catalog-window .octane-catalog-offer-preview.hv-palco-furni::after {
    content: "";
    position: absolute;
    left: calc(50% - 224px);
    top: calc(66% - 112px);
    width: 448px;
    height: 224px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M0 16 32 0 64 16 32 32Z' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 64px 32px repeat;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 75%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

/* classe di rarita (creata da havoo-anteprima.js), in alto a destra;
   per i LTD scende sotto la targa con il numero */
.octane-catalog-window .hv-rarita {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 11;
    padding: 5px 10px;
    border-radius: 99px;
    font-family: Jost, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
}
.octane-catalog-window .hv-rarita.is-esotico {
    top: 44px;
}
.octane-catalog-window .hv-rarita.is-comune { background: rgba(166, 169, 184, 0.28); border: 1px solid rgba(166, 169, 184, 0.45); }
.octane-catalog-window .hv-rarita.is-raro { background: #2F7FD8; }
.octane-catalog-window .hv-rarita.is-leggendario { background: #E08A12; }
.octane-catalog-window .hv-rarita.is-esotico { background: linear-gradient(90deg, #9B6BFF, #D65DB1); }

/* Octane legge il colore di fondo di questo div per «pulire» il disegno della stanza:
   un colore pieno serve perche le luci (strati additivi) non diventino riquadri neri.
   background-clip: text lo rende invisibile; havoo-anteprima.js poi rende trasparenti
   i pixel di esattamente questo colore (46, 48, 59), cosi sotto si vede il palco. */
.octane-catalog-window .octane-catalog-offer-preview > .shadow-room-previewer {
    z-index: 1;
    background: rgb(46, 48, 59) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    cursor: grab;
    touch-action: none;
}
.octane-catalog-window .octane-catalog-offer-preview > .shadow-room-previewer.hv-gira {
    cursor: grabbing;
}

/* nome, descrizione, etichette */
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-preview-details {
    top: 12px;
    left: 14px;
    width: auto;
    right: 120px;
    height: auto;
    max-height: 110px;
    font-family: Figtree, sans-serif;
}
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-details-name {
    font-family: Jost, sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    line-height: 21px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-details-description {
    margin-top: 2px;
    font-family: Figtree, sans-serif !important;
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #C9CBD6 !important;
}
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-details-duration {
    margin-top: 3px;
    font-family: Figtree, sans-serif;
    font-size: 11px;
    color: #F2B45A;
}
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-details-badges {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-capability,
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-capability.is-no-trade,
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-capability.is-no-recycle {
    width: auto;
    height: auto;
    padding: 4px 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #E9EAF0;
    font-family: Figtree, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
}
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-capability img {
    display: none;
}
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-capability.is-no-trade::after {
    content: "Non scambiabile";
}
/* «Non riciclabile» tolto su richiesta (22/10) */
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-product-capability.is-no-recycle {
    display: none;
}

/* targa dei rari: in alto a destra, dove prima c'erano le frecce */
.octane-catalog-window .octane-catalog-offer-preview:not(.is-badge) .octane-catalog-preview-limited {
    top: 8px;
    right: 8px;
}

/* prezzo con icona della valuta (creato da havoo-anteprima.js) */
.octane-catalog-window .hv-prezzo {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px 6px 9px;
    border-radius: 99px;
    background: rgba(20, 22, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    font-family: Jost, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    pointer-events: none;
}
.octane-catalog-window .hv-prezzo img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
}
.octane-catalog-window .hv-prezzo span {
    color: #fff !important;
    font: inherit !important;
}
.octane-catalog-window .hv-prezzo .hv-piu {
    color: #A6A9B8 !important;
    font-weight: 500;
    margin: 0 1px;
}
/* arco con frecce attorno alla base del furni (si gira trascinando) */
.octane-catalog-window .hv-suggerimento {
    position: absolute;
    left: 50%;
    top: 72%;
    width: 160px;
    height: 44px;
    transform: translate(-50%, -30%);
    z-index: 0; /* dietro il furni (il canvas sta sopra, trasparente) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}
/* da fermo non si vede: compare quando scegli un furni (classe messa dal JS per 2 s)
   e quando passi sopra con il mouse */
.octane-catalog-window .hv-suggerimento.hv-appena {
    opacity: 0.4;
}
.octane-catalog-window .hv-suggerimento svg {
    display: block;
    width: 100%;
    height: 100%;
}
.octane-catalog-window .octane-catalog-offer-preview:hover .hv-suggerimento {
    opacity: 0.4;
}
.octane-catalog-window .octane-catalog-offer-preview:has(.hv-gira) .hv-suggerimento {
    opacity: 0;
}

/* ===== PREZZI NELLA GRIGLIA: icone nitide 16 px (wallet -16) e prezzo centrato ===== */
.octane-catalog-window .octane-catalog-grid-price-currency[src*="wallet/-1."] {
    content: url("https://assets.havoo.net/assets/images/wallet/-1-16.png");
}
.octane-catalog-window .octane-catalog-grid-price-currency[src*="wallet/5."] {
    content: url("https://assets.havoo.net/assets/images/wallet/5-16.png");
}
.octane-catalog-window .octane-catalog-grid-price-currency[src*="wallet/101."] {
    content: url("https://assets.havoo.net/assets/images/wallet/101-16-13.png");
}
.octane-catalog-window .octane-catalog-grid-density-standard .octane-catalog-grid-price-currency {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    image-rendering: auto;
}
.octane-catalog-window .octane-catalog-grid-density-standard .octane-catalog-grid-price.is-single-price {
    left: 0 !important;
    width: 100% !important;
}
.octane-catalog-window .octane-catalog-grid-density-standard .octane-catalog-grid-price.is-single-price .octane-catalog-grid-price-entry {
    width: 100% !important;
    justify-content: center !important;
    gap: 3px !important;
}
.octane-catalog-window .octane-catalog-grid-price-amount {
    font-family: Jost, sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* ===== RIGA QUANTITA E PREZZO: stile grafite al posto dei pulsanti pixel ===== */
.octane-catalog-window .octane-catalog-standard-spinner-label,
.octane-catalog-window .octane-catalog-total-price-label {
    font-family: Figtree, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6B6E7E !important;
}
.octane-catalog-window button.octane-catalog-standard-spinner-button {
    border-radius: 6px !important;
    background-color: #3D3F50 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important;
    transition: background-color 0.15s, transform 0.1s;
}
.octane-catalog-window button.octane-catalog-standard-spinner-button-less,
.octane-catalog-window button.octane-catalog-standard-spinner-button-less:hover,
.octane-catalog-window button.octane-catalog-standard-spinner-button-less:active,
.octane-catalog-window button.octane-catalog-standard-spinner-button-less:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.octane-catalog-window button.octane-catalog-standard-spinner-button-more,
.octane-catalog-window button.octane-catalog-standard-spinner-button-more:hover,
.octane-catalog-window button.octane-catalog-standard-spinner-button-more:active,
.octane-catalog-window button.octane-catalog-standard-spinner-button-more:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6 2v8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.octane-catalog-window button.octane-catalog-standard-spinner-button:hover:not(:disabled) {
    background-color: #E08A12 !important;
}
.octane-catalog-window button.octane-catalog-standard-spinner-button:active:not(:disabled) {
    transform: scale(0.92);
}
.octane-catalog-window button.octane-catalog-standard-spinner-button:disabled {
    opacity: 0.35;
}
.octane-catalog-window .octane-catalog-standard-spinner-input-frame {
    top: 1px;
    left: 79px;
    width: 28px;
    height: 22px;
    box-sizing: border-box;
    border: 1px solid #DADBE3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.octane-catalog-window .octane-catalog-standard-spinner-input-frame::before {
    display: none !important;
}
.octane-catalog-window .octane-catalog-standard-spinner-value {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 20px !important;
    text-align: center !important;
    font-family: Jost, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #282B35 !important;
}
/* prezzo totale: numero in Jost e icona della moneta nitida */
.octane-catalog-window .octane-catalog-total-price-value .octane-catalog-standard-price-text {
    font-family: Jost, sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-top: 2px;
}
.octane-catalog-window .octane-catalog-total-price-value .octane-currency-icon {
    background-size: 16px 16px !important;
}
.octane-catalog-window .octane-catalog-total-price-value [data-currency-type="-1"] .octane-currency-icon {
    background-image: url("https://assets.havoo.net/assets/images/wallet/-1-16.png") !important;
}
.octane-catalog-window .octane-catalog-total-price-value [data-currency-type="5"] .octane-currency-icon {
    background-image: url("https://assets.havoo.net/assets/images/wallet/5-16.png") !important;
}
.octane-catalog-window .octane-catalog-total-price-value [data-currency-type="101"] .octane-currency-icon {
    background-image: url("https://assets.havoo.net/assets/images/wallet/101-16-13.png") !important;
}

/* frecce di rotazione: due pulsanti tondi grafite in basso al centro
   (sono i pulsanti veri del client: girano il furni in tutte le direzioni) */
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 12px;
    width: auto;
    height: 32px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls button.octane-catalog-preview-btn,
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls button.octane-catalog-preview-region {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(20, 22, 28, 0.55) !important;
    color: #fff;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls button:hover:not(:disabled) {
    background: #E08A12 !important;
    border-color: #E08A12 !important;
    filter: none;
}
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls button:active:not(:disabled) {
    transform: scale(0.92);
}
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls button:disabled {
    opacity: 0.4 !important;
}
/* icona freccia circolare disegnata (SVG come maschera, colore bianco) */
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls button.octane-catalog-preview-btn::before {
    content: "";
    inset: 8px;
    border: 0;
    border-image-source: none !important;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.6-5.9'/%3E%3Cpath d='M4 3.5v4.5h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.6-5.9'/%3E%3Cpath d='M4 3.5v4.5h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls button.octane-catalog-preview-btn.is-right::before {
    transform: scaleX(-1);
}
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls .octane-catalog-preview-arrow {
    display: none !important;
}
/* lente e azione dell'avatar (effetti, vestiti): stesse icone, centrate nel tondo */
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls .octane-icon.icon-zoom-more {
    top: 4px;
    left: 9px;
}
.octane-catalog-window .octane-catalog-offer-preview .octane-catalog-preview-controls .octane-catalog-preview-action-icon {
    top: 4px;
    left: -5px;
}