/** Shopify CDN: Minification failed

Line 613:8 Unexpected "66%"
Line 645:8 Unexpected "15%"
Line 647:8 Unexpected "35%"
Line 649:8 Unexpected "55%"
Line 651:8 Unexpected "75%"
Line 653:8 Unexpected "85%"
Line 655:8 Unexpected "95%"
Line 657:8 Unexpected "100%"
Line 671:8 Unexpected "100%"
Line 698:8 Unexpected "100%"
... and 1 more hidden warnings

**/
:root, body{
    --kh-bg:#F5F2EB; --kh-sand:#EAE4D8; --kh-ink:#2B2724; --kh-muted:#6B645C; --kh-greige:#D9D2C5;
    --kh-green:#2D5A3D; --kh-green-deep:#1B4332; --kh-sage:#E4EBE2; --kh-terra:#A6573C; --kh-terra-dark:#8C4730;
    --fx-radius:5px !important; --fx-radius-lg:5px !important; --fx-radius-sm:5px !important;
    /* ancora TUTTE le variabili font del tema a Jost */
    --main-font:'Jost',sans-serif; --main-font-family:'Jost',sans-serif; --ft-font:'Jost',sans-serif;
    --sidebar-font:'Jost',sans-serif; --hus-font:'Jost',sans-serif; --fx-font:'Jost',sans-serif;
    /* sfondi del tema: tutto avorio uniforme (via il grigio freddo #f8f9fa, niente patch piu scure) */
    --fx-bg-secondary:#F5F2EB !important;   /* avorio come la pagina */
    --fx-bg-hover:#EDE9E0 !important;        /* avorio leggermente piu scuro solo in hover */
  }
  /* ---- FONT: Jost ovunque (icone Prestige = SVG) ---- */
  html body{ font-family:'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important; }
  html body [class]{ font-family:'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important; }
  /* ---- FONT: Fraunces (serif) sui titoli grandi ---- */
  html body h1, html body h2,
  html body [class][class][class][class][class]:is(
    .fx-category-title,.fx-carousel-title,.hp-cat-title,.civetta-banner__title,
    .hero-grid__title,.fd-title,.cf-title,.gc-title,.shw-title,
    .Slideshow__Title,.SectionHeader__Heading,.fx-featured-title,.logo-section__title,
    .fx-product-title,.ProductMeta__Title
  ),
  html body .hero-grid__title [class]{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-weight:500 !important; letter-spacing:-0.01em !important;
    font-variation-settings:'opsz' 96,'SOFT' 50,'WONK' 0 !important;
  }
  /* ---- TITOLI CARD PRODOTTO uniformi -> Fraunces (alcune card usano <h5> SENZA classe = restavano
         Jost; altre .fx-product-title = gia' Fraunces). Ora tutte uguali. ---- */
  html body .fx-product-standard-card h5,
  html body .fx-product-standard-card .fx-product-title,
  html body .fx-product-standard-card [class*="product-title" i],
  html body .fx-product-standard-card [class*="card-title" i],
  html body .fx-product-standard-card [class*="ProductItem__Title" i]{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-weight:500 !important; letter-spacing:-0.01em !important;
    font-variation-settings:'opsz' 96,'SOFT' 50,'WONK' 0 !important;
  }
  /* ---- MENU/NAV/DRAWER -> Jost (batte il Montserrat del CSS base) ---- */
  html body [class][class][class][class]:is(.Heading,.nav-link,.Collapsible__Button,.Drawer__Title,.u-h1,.u-h2,.u-h3,.u-h4,.u-h5,.u-h6,[class*="drawer" i],[class*="empty" i]){
    font-family:'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
  }
  /* ---- CORPO 16px + prezzi tabulari ---- */
  html body{ font-size:16px; color:var(--kh-ink); }
  html body p, html body .Rte, html body .Rte p, html body li,
  html body [class*="description" i], html body [class*="paragraph" i]{ font-size:16px !important; line-height:1.55 !important; }
  html body [class*="price" i]{ font-variant-numeric:tabular-nums; }
  /* ---- SOTTOTITOLI coerenti: stesso tortora + 16px (esclusi quelli su foto/verde) ---- */
  html body [class*="subtitle" i]:not([class*="hero" i]):not(.Newsletter__Subtitle):not([class*="banner" i]),
  html body [class*="subheading" i]:not([class*="hero" i]):not([class*="banner" i]),
  html body .fd-sub, html body .cf-sub, html body .gc-sub, html body .shw-sub, html body .pr-sub{
    color:var(--kh-muted) !important; font-size:16px !important;
    font-family:'Jost', -apple-system, sans-serif !important;
    font-variation-settings:normal !important; font-style:normal !important;
  }
  /* ---- FIX CTA invisibili (testo bianco su avorio) -> verde leggibile ---- */
  html body .logo-section-cta-btn, html body .fx-discover-btn{ color:var(--kh-green) !important; }
  /* ---- PALETTE: base avorio (incluso header) ---- */
  html body, html body .PageContainer, html body .Main, html body .Wrapper,
  html body .Header, html body .Header--center, html body .shopify-section--header,
  html body .Section, html body [class*="-section" i], html body .PageTransition,
  html body .homeup-stats, html body .trust-badges, html body .fx-featured-background,
  html body .Modal, html body .Search{ background-color:var(--kh-bg) !important; }
  /* ---- FOOTER: sabbia (non bianco), newsletter resta verde ---- */
  html body .Footer, html body .premium-footer, html body .Footer__Bottom,
  html body .Footer__Aside, html body .Footer__Content{ background-color:var(--kh-bg) !important; }
  /* sfondi grigi freddi residui -> avorio uniforme */
  html body .fx-product-hero, html body .fx-page, html body .fx-product-content,
  html body .fx-drawer-main, html body .Drawer__Main, html body .fx-card-image-container,
  html body .fx-config-container, html body .fx-configurator{ background-color:var(--kh-bg) !important; }
  /* preview prodotto (div senza classe dentro showcase): raggio 16px vecchio + #EEE -> 5px + avorio */
  html body .fx-product-showcase > div, html body .fx-product-visual > div{
    border-radius:5px !important; overflow:hidden !important; background-color:var(--kh-bg) !important;
  }
  html body .fx-product-showcase img, html body .fx-product-visual img{ border-radius:5px !important; }
  /* ---- RAGGIO 5px + NIENTE OMBRE ---- */
  html body [class][class][class][class]{ border-radius:5px !important; box-shadow:none !important; text-shadow:none !important; }
  html body [class][class][class][class]:is(
    [class*="swatch" i],[class*="avatar" i],[class*="circle" i],
    .fx-dot,.fx-number,.fx-step-number,.fx-trust-mini-icon,.fx-live-dot,.fx-particle,
    .fx-loading-spinner,.hu-chat-avatar,.fx-zoom-close,.cart-badge,.wishlist-badge,
    .Header__Icon,.QuantitySelector__Button,.fx-wishlist-btn,.fx-wishlist-btn-inline,
    .fx-share-btn,li.dot,.video-play-overlay
  ){ border-radius:50% !important; }
  /* ELEMENTI A TUTTA LARGHEZZA / STRUTTURALI: raggio 0 (non devono essere tondi) */
  html body [class][class][class][class]:is(
    .kh-car,.kh-amb-track,.kh-amb-slide,.civetta-banner,.civetta-banner__bg,
    .Slideshow,.Slideshow__Carousel,.Slideshow__Slide,.Footer,.premium-footer,
    .Footer__NewsletterWrapper,.Header,.fx-product-hero,.PageContainer,.fx-page,
    .Section,[class*="-section" i],.Main,.Wrapper,.homepage-hero-grid,.PageOverlay,
    .PageTransition,[class*="hero-grid__bg" i],[class*="__bg" i]
  ){ border-radius:0 !important; }
  /* KH 2026-09-18: overlay dietro i drawer/menu in avorio */
  .PageOverlay{ background:rgba(245,242,235,0.92) !important; }
  /* RAGGIO SOLO SUL CONTENITORE ESTERNO: voci/righe/divisori interni squadrati */
  html body [class][class][class][class]:is(
    .fx-acc-item,.fx-acc-header,.fx-acc-body,.fx-acc-content,[class*="acc-item" i],
    [class*="accordion-item" i],[class*="accordion__item" i],[class*="collapsible" i],
    [class*="__row" i],[class*="-row" i],[class*="divider" i],[class*="separator" i],
    hr,td,th,.fx-spec-row,.fx-detail-row,.fx-option-row
  ){ border-radius:0 !important; }
  /* contenitori accordion/tab: ritagliano i contenuti interni ai bordi arrotondati */
  html body .fx-specs-table, html body .fx-accordion, html body .Accordion,
  html body .fx-tab-content, html body .fx-tabs-container{ overflow:hidden !important; }
  /* IMMAGINI e SLIDE: raggio 0 (seguono il contenitore, non si arrotondano da sole) */
  html body img, html body picture, html body video{ border-radius:0 !important; }
  html body [class][class][class][class]:is(
    img,video,picture,.flickity-cell,.flickity-slider
  ){ border-radius:0 !important; }
  /* ⭐⭐ VERA CAUSA (kh-collection-styles.css righe 6088-6126): l'immagine ha translateZ(0)+will-change:
     transform+backface-visibility:hidden A RIPOSO -> layer di composizione permanente che NON viene
     ritagliato dal contenitore -> angoli quadri in TUTTI i browser. Fix: DE-PROMUOVO l'immagine (tolgo
     il layer proprio) SENZA toccarne il border-radius(0) -> rientra nel contenitore che la ritaglia. */
  html body [class][class][class][class]:is(
    .CardImage--primary,.CardImage--secondary,.fx-card-image-primary,.fx-card-image-secondary,[class*="CardImage" i]
  ){ border-radius:0 !important; transform:none !important;
     will-change:auto !important; -webkit-backface-visibility:visible !important; backface-visibility:visible !important; }
  /* card/contenitori immagine: overflow hidden per ritagliare l'immagine ai bordi arrotondati della card */
  html body .fx-product-standard-card, html body .fx-card-image-container, html body .CardImageContainer,
  html body .fx-style-card, html body .ProductItem, html body .ProductItem__ImageWrapper,
  html body .hero-grid__item{ overflow:hidden !important; }
  /* INTERNI della card a 0 (testo dritto, niente tacca): arrotonda la card esterna */
  html body [class][class][class][class]:is(
    .ProductCard__Content,.fx-product-card-content,.fx-product-link,.fx-card-image-wrapper,.CardImage
  ){ border-radius:0 !important; }
  /* CONTENITORE IMMAGINE card: top arrotondato 5px, ritaglio pulito dell'immagine (che riempie 100%). */
  html body [class][class][class][class]:is(
    .fx-card-image-container,.CardImageContainer,.ProductItem__ImageWrapper,[class*="ImageContainer" i]
  ){ border-radius:5px 5px 0 0 !important; overflow:hidden !important;
     clip-path:inset(0 round 5px 5px 0 0) !important; position:relative !important; }
  /* ⭐ VERO FIX ANGOLI HOVER: in hover la card si solleva con transform:translateY(-4px). Quel transform
     ricompone il layer e nel Chrome dell'utente fa sbucare l'immagine absolute fuori dal ritaglio tondo
     -> angoli quadri SOLO in hover. Tolgo il transform dall'hover (senza toccare l'immagine) e sollevo
     con margin (nessun nuovo layer): il ritaglio tondo del contenitore regge anche in hover. */
  html body .fx-product-standard-card{ transition:margin-top .18s ease, border-color .18s ease !important; }
  html body .fx-product-standard-card:hover,
  html body .fx-product-standard-card:hover a,
  html body .fx-product-standard-card:hover .fx-card-image-container{ transform:none !important; }
  html body .fx-product-standard-card:hover [class*="CardImage" i]{
     transform:none !important; will-change:auto !important;
     -webkit-backface-visibility:visible !important; backface-visibility:visible !important; }
  html body .fx-product-standard-card:hover{ margin-top:-4px !important; }
  /* ⭐⭐⭐ VERA CAUSA HOVER (intuizione utente): il WRAPPER del carosello (.ProductList--carousel /
     .fx-featured-carousel) ha overflow:auto e il suo bordo ALTO coincide col bordo alto delle card.
     Quel taglio e' una linea DRITTA: quando la card si alza, i px superiori (angoli tondi) finiscono
     sopra la linea e vengono TAGLIATI -> angoli quadri in hover. Fix: sposto il bordo-taglio del
     wrapper piu' in alto con padding-top compensato da margin-top negativo (a video non cambia nulla,
     ma il sollevamento non viene piu' tagliato). */
  html body .ProductList--carousel,
  html body [class*="ProductList--carousel" i],
  html body [class*="-carousel" i]:not([class*="amb" i]):not([class*="Slideshow" i]):not([class*="slide" i]):not([class*="ambient" i]),
  html body [class*="products-grid" i], html body [class*="product-standard-grid" i],
  html body [class*="related-carousel" i], html body [class*="featured-carousel" i],
  html body [class*="recently" i], html body [class*="recommend" i]{
     padding-top:16px !important; margin-top:-16px !important; }
  /* LINEE / ACCENTI / SOTTOLINEATURE / SEPARATORI sottili: raggio 0 (niente "pillole") */
  html body [class][class][class][class]:is(
    .header-accent-line,[class*="accent-line" i],[class*="accent" i],[class*="-line" i],
    [class*="__line" i],[class*="underline" i],[class*="indicator" i],[class*="divider" i],
    [class*="separator" i],[class*="rule" i],.kh-sec,hr
  ){ border-radius:0 !important; }
  /* TAB: nessun raggio (la sottolineatura verde del tab attivo deve essere dritta) */
  html body [class][class][class][class]:is(
    .fx-tab-btn,[class*="tab-btn" i],[class*="tab-button" i],.fx-tab,[class*="tab-item" i],
    [class*="tab-link" i],.fx-tabs-nav,.fx-tabs-container
  ){ border-radius:0 !important; }
  /* ====== RESET COMPLETO: tutto cio' che NON e' card/pulsante/box/input -> raggio 0 ====== */
  html body [class][class][class][class]:is(
    hr,.kh-sec,.header-accent-line,[class*="divider" i],[class*="separator" i],[class*="accent" i],
    [class*="-line" i],[class*="__line" i],[class*="underline" i],[class*="indicator" i],[class*="rule" i],
    [class*="progress" i],.Slideshow__ProgressBar,
    [class*="header" i],[class*="footer" i],[class*="action-bar" i],[class*="toolbar" i],[class*="__bar" i],
    [class*="recap" i],[class*="sticky" i],[class*="filters" i],[class*="filter-header" i],.kh-trust-info,
    [class*="slide" i],[class*="Slide"],[class*="carousel" i],[class*="slideshow" i],[class*="Slideshow"],
    .flickity-viewport,.flickity-slider,.flickity-cell,
    .Header,.Footer,.Section,[class*="-section" i],.PageContainer,.fx-page,.Main,.Wrapper,
    .homepage-hero-grid,.civetta-banner,.fx-product-hero,.kh-car,.kh-amb-track,.kh-amb-slide
  ){ border-radius:0 !important; }
  /* DOTS / PALLINI / INDICATORI carosello: tondi-pill (DOPO il reset, cosi vince) */
  html body [class][class][class][class]:is(
    .hero-indicator,[class*="hero-indicator" i],.dot,li.dot,.fx-dot,.fx-live-dot,
    [class*="__dot" i],[class*="-dot" i],.flickity-page-dots>*,[class*="page-dots" i]>*,
    [class*="indicators" i]>*,[class*="pagination" i]>*,[class*="bullet" i]
  ){ border-radius:9999px !important; }
  /* CONTROLLI slideshow/carosello (frecce, volume, play): pulsanti 5px, il reset li aveva azzerati */
  html body [class][class][class][class]:is(
    .Slideshow__Arrow,.Slideshow__Volume,.Slideshow__Play,.Slideshow__Pause,[class*="__arrow" i],
    [class*="-arrow" i],[class*="arrow" i],.flickity-prev-next-button,[class*="nav-btn" i],
    [class*="slider-btn" i],[class*="carousel-btn" i],
    .Slideshow__ScrollMouse,.Slideshow__ScrollDown,[class*="ScrollMouse" i],[class*="scroll-mouse" i]
  ){ border-radius:5px !important; }
  html body .fx-product-form,html body .fx-price-card,html body .fx-product-standard-card,
  html body .fx-style-card,html body .fx-category-landing-icon{ border:1px solid var(--kh-greige) !important; }
  /* CARD PRODOTTO: raggio 5px (dalla globale). Sfondo card -> beige pagina cosi' l'angolo tondo si
     FONDE (niente triangolo bianco); area testo bianca col suo bg. */
  html body [class][class][class][class]:is(.fx-product-standard-card){ background:var(--kh-bg) !important; }
  html body [class][class][class][class]:is(.fx-product-standard-card) .fx-product-card-content{ background:#fff !important; }
  /* ---- PULSANTI: sentence-case, Jost 500, h52, verde solido ---- */
  html body .fx-config-btn-standalone,html body .Button--primary,html body .Button,
  html body .Form__Submit,html body .Header__SubmitButton,html body [class*="AddToCart" i],
  html body .fx-add-to-cart,html body .Cart__Checkout,html body .fx-checkout-btn{
    text-transform:none !important; letter-spacing:normal !important;
    font-weight:500 !important; font-size:16px !important; min-height:52px !important;
  }
  html body .fx-config-btn-standalone,html body .Button--primary,html body [class*="AddToCart" i],
  html body .Cart__Checkout,html body .fx-add-to-cart,html body .fx-checkout-btn{
    background:var(--kh-green) !important; background-image:none !important;
    border:1px solid var(--kh-green) !important; color:#fff !important;
  }
  /* ---- ACCENTO TERRACOTTA: WhatsApp / parla con noi ---- */
  html body [class*="whatsapp" i], html body [class*="preventivo" i],
  html body .fx-sample-btn, html body .kh-campione-btn{
    background:var(--kh-terra) !important; background-image:none !important;
    border:1px solid var(--kh-terra) !important; color:#fff !important;
  }
  /* ---- CART DRAWER: pulsante "Scopri le Categorie" (.fx-discover-btn) aveva testo verde su sfondo
         verde (gradiente) = INVISIBILE. Lo rendo verde solido + testo bianco. La regola CTA-invisibili
         (testo verde) NON deve valere qui perche' lo sfondo e' verde. ---- */
  html body #sidebar-cart .fx-discover-btn,
  html body #sidebar-cart a.fx-discover-btn{
    color:#fff !important;
    background:var(--kh-green) !important; background-image:none !important;
    border:1px solid var(--kh-green) !important;
    text-transform:none !important; letter-spacing:normal !important;
    font-weight:500 !important; min-height:52px !important;
  }
  /* il pulsante "Acquista"/checkout resta verde solido bianco (gia' ok), uniformo eventuale gradiente */
  html body #sidebar-cart .fx-checkout-btn, html body #sidebar-cart .Cart__Checkout{
    background:var(--kh-green) !important; background-image:none !important;
    border:1px solid var(--kh-green) !important; color:#fff !important;
  }
  /* CART DRAWER: header BIANCO -> avorio (era la "striscia bianca"). Drawer avorio ma STACCATO dalla
     pagina (avorio su avorio si fondeva) con bordo sinistro + ombra. */
  html body #sidebar-cart{
    background:var(--kh-bg) !important;
    border-left:1px solid var(--kh-greige) !important;
    box-shadow:-12px 0 34px rgba(0,0,0,0.16) !important;
    border-radius:0 !important;   /* pannello drawer: angoli esterni VIVI (no raggio) */
  }
  html body #sidebar-cart .Drawer, html body #sidebar-cart .Drawer__Content,
  html body #sidebar-cart .Drawer__Main{ border-radius:0 !important; }
  /* close × e badge fiducia (Spedizione Sicura/Pagamento Protetto) nel drawer: squadrati 5px (erano 50%) */
  html body #sidebar-cart .fx-close-btn, html body #sidebar-cart .Drawer__Close,
  html body #sidebar-cart .fx-trust-mini-icon{ border-radius:5px !important; }
  html body #sidebar-cart .Drawer__Header,
  html body #sidebar-cart .Drawer__Header--bordered{
    background:var(--kh-bg) !important; border-bottom:1px solid var(--kh-greige) !important;
  }
  /* CART DRAWER: TOGLI il quadrato verde dietro l'icona del carrello vuoto (solo icona, niente box) */
  html body #sidebar-cart .fx-empty-icon{
    background:transparent !important; background-image:none !important;
    box-shadow:none !important; border:0 !important;
  }
  /* CART DRAWER: card ARTICOLO (.ultra-cart-search-item) era bianca squadrata senza bordo -> stile
     brand come le card prodotto: raggio 5px + bordo greige, sfondo bianco. */
  html body #sidebar-cart .ultra-cart-search-item{
    border-radius:5px !important; border:1px solid var(--kh-greige) !important;
    background:#fff !important; box-shadow:none !important;
  }
  /* immagine articolo: raggio 5px + bordo greige (era 10px + grigio chiaro) */
  html body #sidebar-cart .ultra-cart-item-image{
    border-radius:5px !important; border:1px solid var(--kh-greige) !important;
  }
  /* ---- CART DRAWER: LAYOUT card articolo (16/09) ---- */
  /* header: nome protagonista a sx, cestino defilato a dx (quantita' spostata giu' nel footer) */
  html body #sidebar-cart .ultra-cart-item-header{
    display:flex !important; align-items:flex-start !important;
    justify-content:space-between !important; gap:8px !important;
  }
  html body #sidebar-cart .ultra-cart-item-title{ flex:1 1 auto !important; min-width:0 !important; }
  html body #sidebar-cart .ultra-cart-item-title a{
    font-weight:600 !important; color:var(--kh-ink) !important;
    font-family:'Fraunces', Georgia, serif !important;
    font-variation-settings:'opsz' 96,'SOFT' 50,'WONK' 0 !important;
  }
  html body #sidebar-cart .ultra-cart-remove-compact{
    position:static !important; color:var(--kh-muted) !important; opacity:.5 !important;
    flex:0 0 auto !important; background:transparent !important; border:0 !important; box-shadow:none !important;
    padding:2px !important; margin:0 !important;
  }
  html body #sidebar-cart .ultra-cart-remove-compact:hover{ opacity:1 !important; color:var(--kh-terra) !important; }
  /* riga FOOTER: quantita' a sx + totale riga a dx, separatore sopra */
  html body #sidebar-cart .ultra-cart-item-footer-row{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:12px !important; margin-top:12px !important; padding-top:12px !important;
    border-top:1px solid var(--kh-greige) !important;
  }
  html body #sidebar-cart .ultra-cart-item-footer-row .CartItem__QuantitySelector{
    position:static !important; margin:0 !important; flex:0 0 auto !important;
  }
  html body #sidebar-cart .ultra-cart-item-footer-row .QuantitySelector{
    display:inline-flex !important; align-items:center !important;
  }
  /* totale riga: verde, grande, in evidenza (a dx) */
  html body #sidebar-cart .ultra-cart-item-footer-row .ultra-cart-item-price-container{
    position:static !important; margin:0 !important; text-align:right !important; flex:0 0 auto !important;
  }
  html body #sidebar-cart .ultra-cart-item-footer-row .ultra-cart-price-current{
    font-size:20px !important; font-weight:600 !important; color:var(--kh-green) !important;
    font-variant-numeric:tabular-nums !important;
  }
  html body #sidebar-cart .ultra-cart-item-footer-row .ultra-cart-price-compare{
    font-size:13px !important; color:var(--kh-muted) !important; text-decoration:line-through !important; margin-left:6px !important;
  }
  /* card articolo: RESPIRO dai bordi laterali (aveva padding orizzontale di soli 2px) */
  html body #sidebar-cart .ultra-cart-search-item{ padding:16px !important; }
  /* pulsanti quantità (+/-) e cestino: SQUADRATI 5px (erano tondi 50%, incoerenti col brand).
     Specificità alta per battere #sidebar-cart .ultra-cart-qty-compact .QuantitySelector__Button del tema. */
  html body #sidebar-cart .ultra-cart-qty-compact .QuantitySelector__Button,
  html body #sidebar-cart .ultra-cart-item-header .ultra-cart-remove-compact,
  html body #sidebar-cart .ultra-cart-item-footer-row .ultra-cart-remove-compact{ border-radius:5px !important; }
  /* ===== HEADER LOGO: STOP alla scala CSS 1.9x (era LEI a sfocare il logo: ingrandiva un raster
     piccolo). Senza scala, il logo si mostra alla sua dimensione vera e lo srcset 2x/3x del tema
     lo serve nitido. ===== */
  html body .Header__LogoImage, html body .Header__Logo,
  html body .Header--isSticky .Header__LogoImage, html body .is-scrolled .Header__LogoImage{
    transform:none !important;
  }
  html body .Header__LogoImage{ width:auto !important; height:auto !important; max-width:100% !important; }
  /* ===== HEADER a DUE RIGHE (desktop >=1000px): logo centrato sopra, menu sotto ===== */
  @media (min-width:1000px){
    html body .Header--center .Header__Wrapper{ flex-wrap:wrap !important; row-gap:2px !important; position:relative !important; }
    html body .Header--center .Header__FlexItem--logo{ order:-1 !important; flex:1 0 100% !important; justify-content:center !important; margin:0 !important; }
    html body .Header--center .left-section{ order:1 !important; justify-content:center !important; }
    html body .Header--center .right-section{ order:2 !important; }
    /* icone in ALTO a destra: spostate SU con transform (restano nel flusso -> header non collassa) */
    html body .Header--center .Header__SecondaryNav{ transform:translateY(-181px) !important; }
    /* barra ricerca sulla STESSA RIGA del menu, ma staccata dal bordo inferiore (era top:55->258; ora ~217) */
    html body .Header--center .search-container.desktop-search-right{ top:18px !important; }
  }
  /* ===== MOBILE (<=768px): header piu' ALTO cosi' il logo INTERO si vede grande (no scale 1.9, no taglio) ===== */
  @media (max-width:768px){
    /* header 'fixed' delle pagine prodotto/collezione ha height:75px fissa -> il logo (140px) sforava sotto lo sfondo.
       Forzo height:auto+min-height cosi' lo sfondo cresce a contenere il logo (come in home, che e' 'sticky'). Il
       paddingTop del body lo ricalcola kh-header.js da offsetHeight, quindi il contenuto resta offsettato correttamente. */
    html body .Header,
    html body .Header--isSticky,
    html body .is-scrolled .Header{ height:auto !important; min-height:140px !important; }
    html body .Header__Wrapper{ min-height:140px !important; }
    html body .Header__FlexItem--logo{ overflow:visible !important; }
    html body .Header__LogoImage,
    html body .Header--isSticky .Header__LogoImage,
    html body .is-scrolled .Header__LogoImage{
      transform:none !important; width:auto !important; height:auto !important; max-height:104px !important; max-width:78vw !important;
    }
  }
  /* ===== HEADER CHE SI STRINGE ALLO SCROLL: logo STESSA dimensione ma si nasconde la scritta HOME UP/ELEVATE (clip), MENU+ICONE restano ===== */
  /* TRANSIZIONE UNIFICATA e naturale: stessa durata+curva su altezza header, ritaglio logo e top del menu -> si muovono in lockstep, morbido e bidirezionale.
     L'altezza va animata sul .Header (lo SFONDO visibile): il tema sovrascrive la transition del .Header__Wrapper lasciando solo 'padding', quindi il wrapper scatterebbe. */
  html body .Header{ transition: min-height .38s cubic-bezier(.4,0,.2,1), height .38s cubic-bezier(.4,0,.2,1) !important; will-change:min-height; }
  html body .Header.kh-shrunk{ box-shadow:0 2px 10px rgba(0,0,0,.06) !important; }
  html body .Header__Logo, html body .Header__LogoLink{ transition: height .38s cubic-bezier(.4,0,.2,1) !important; will-change:height; }
  /* ⚠️ kh-header.js applica un PARALLAX inline al link (transform:translateY 0->4.5px nello scroll 0-90) -> il marchio scivolava giu'. Lo annullo. */
  html body .Header__LogoLink{ transform:none !important; }
  html body .Header__MainNav{ transition: top .38s cubic-bezier(.4,0,.2,1) !important; will-change:top; }
  @media (min-width:1000px){
    /* min-height sul .Header (sfondo) in ENTRAMBI gli stati -> l'altezza anima invece di scattare */
    html body .Header:not(.kh-shrunk){ min-height:276px !important; }
    html body .Header.kh-shrunk{ min-height:198px !important; }
    /* TOP del menu ESPLICITO anche da INTERO (non solo shrunk): altrimenti tornando su il menu salta (usa l'inline del JS) e il testo del logo lo sovrappone. Cosi' anima simmetrico in sync col logo. */
    html body .Header:not(.kh-shrunk) .Header__MainNav{ top:232px !important; }
    html body .Header:not(.kh-shrunk) .Header__Logo,
    html body .Header:not(.kh-shrunk) .Header__LogoLink{ height:198px !important; overflow:hidden !important; }
  }
  /* CLIP: il logo NON viene ridimensionato. Ritaglio il contenitore all'altezza del solo marchio
     (top ~118px del logo), cosi' spariscono SOLO la scritta HOME UP + il rombo + ELEVATE. Marchio identico. */
  html body .Header.kh-shrunk .Header__Logo,
  html body .Header.kh-shrunk .Header__LogoLink{ overflow:hidden !important; display:block !important; }
  html body .Header.kh-shrunk .Header__LogoImage{ vertical-align:top !important; }
  /* Il menu resta ASSOLUTO in entrambi gli stati (come nell'intero): NIENTE cambio statico<->assoluto = niente scatto.
     Animo solo il suo TOP (sotto il marchio) insieme all'altezza -> morbido e simmetrico su/giu'. x=0 identico all'intero (left:0). (transition definita sopra, unificata) */
  @media (min-width:1000px){
    /* altezze ESPLICITE in entrambi gli stati cosi' l'header anima l'altezza in modo simmetrico */
    html body .Header:not(.kh-shrunk) .Header__Wrapper{ min-height:276px !important; }
    /* NON tocco il padding (l'intero ha padding-top:3 messo dal JS e il tema lo anima): lasciandolo invariato il MARCHIO resta FERMO in cima, si accorcia solo il basso */
    html body .Header.kh-shrunk .Header__Wrapper{ min-height:198px !important; align-items:flex-start !important; }
    html body .Header.kh-shrunk .Header__Logo,
    html body .Header.kh-shrunk .Header__LogoLink{ height:130px !important; }
    /* menu assoluto, stessa x dell'intero (left:0 width:100%), top scelto per ~28px di spazio dalle gambe (animato) */
    html body .Header.kh-shrunk .Header__MainNav{ position:absolute !important; left:0 !important; right:auto !important; width:100% !important; top:159px !important; bottom:auto !important; transform:none !important; }
    /* ricerca sparisce (menu + icone restano) */
    html body .Header.kh-shrunk .search-container.desktop-search-right{ display:none !important; }
    /* ICONE nella STESSA identica posizione dell'header intero (y=22, right=32) -> non si spostano */
    html body .Header.kh-shrunk .right-section{ position:absolute !important; top:22px !important; right:32px !important; margin:0 !important; }
    html body .Header.kh-shrunk .right-section .Header__SecondaryNav{ transform:none !important; }
    html body .Header.kh-shrunk .header-texture{ height:100% !important; }
  }
  @media (max-width:768px){
    /* il logo su mobile e' centrato (left:50%;top:50%;translate(-50%,-50%)). Lo ANCORO in alto (top fisso) togliendo il translateY,
       mantenendo il centraggio orizzontale (translateX-50%): cosi' il marchio NON si sposta durante lo shrink. */
    html body .Header__FlexItem--logo{ top:14px !important; transform:translateX(-50%) !important; }
    /* altezza ESPLICITA in entrambi gli stati -> il ritaglio ANIMA (non scatta) */
    html body .Header:not(.kh-shrunk) .Header__Logo,
    html body .Header:not(.kh-shrunk) .Header__LogoLink{ height:104px !important; overflow:hidden !important; }
    html body .Header.kh-shrunk{ min-height:85px !important; height:auto !important; }
    html body .Header.kh-shrunk .Header__Wrapper{ min-height:85px !important; }
    html body .Header.kh-shrunk .Header__Logo,
    html body .Header.kh-shrunk .Header__LogoLink{ height:69px !important; }
    html body .Header.kh-shrunk .search-container,
    html body .Header.kh-shrunk .mobile-search-modal{ display:none !important; }
  }
  /* ===== FIX TITOLO COPERTO sulle PAGINE (template-page): il tema imposta un padding-top del body sbagliato (~55px)
     mentre l'header fixed e' alto ~277px -> il titolo finiva sotto l'header. Forzo l'offset = altezza header pieno.
     (home usa lo spaziatore -> padding 0; prodotto e' gia' 277 ok, non toccato) ===== */
  /* padding-top FISSO su tutti i template con header fixed (NON home, che usa lo spaziatore) -> stabile, niente flicker
     quando l'header si stringe (il tema lo cambiava dinamicamente causando oscillazione su/giu'). */
  @media (min-width:769px){ html body:not(.template-index){ padding-top:277px !important; } }
  @media (max-width:768px){ html body:not(.template-index){ padding-top:141px !important; } }
  /* PRODOTTO: .fx-page aveva padding-top:80px (residuo vecchia clearance header) che, sommato al padding-top del body,
     creava spazio vuoto sopra il carosello ambientale -> azzero, l'ambientale torna a filo sotto l'header. */
  html body.template-product .fx-page{ padding-top:0 !important; }
  /* COLLEZIONI: il blocco titolo (.fx-category-info) aveva margin-top:130px -> titolo troppo basso. Stacco uniforme ~44px. */
  html body.template-collection .fx-category-main{ padding-top:0 !important; }
  html body.template-collection .fx-category-info{ margin-top:24px !important; }
  @media (max-width:768px){ html body.template-collection .fx-category-info{ margin-top:14px !important; } }
  /* loghi brand del carosello: dimensione UNIFORME (IMEX renderizzava ~196px vs ~100px degli altri) */
  html body .fx-collections-nav-bar img{ max-width:100px !important; max-height:48px !important; width:auto !important; height:auto !important; object-fit:contain !important; }
  /* IMEX aveva un override specifico (transform:scale(1.4)+max 140/70) -> annullo per uniformarlo */
  html body .fx-collection-nav-item[data-brand="imex-brand"] .fx-collection-nav-img,
  html body .fx-collection-nav-item[data-brand="imex-brand"] .fx-collection-nav-img img{ transform:none !important; max-width:100px !important; max-height:48px !important; }
  /* titoli sezione collezione ("Esplora per Brand/Categoria") piu' grandi come le pagine (erano 18px) + Jost come le h2 pagine */
  /* .fx-carousel-title e' forzato Fraunces da una regola precedente con hack [class]x5 -> la batto con [class]x5 + .template-collection (specificita' superiore) per metterlo in Jost */
  html body.template-collection [class][class][class][class][class]:is(.fx-carousel-title){ font-size:24px !important; line-height:1.3 !important; font-family:'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important; }
  @media (max-width:768px){ html body.template-collection [class][class][class][class][class]:is(.fx-carousel-title){ font-size:21px !important; } }
  /* TUTTI i titoli delle pagine (h1 titolo + h2/h3/h4 sezioni e card) in FRAUNCES (il replace Montserrat->Jost aveva reso Jost i titoli h1/h4). Scoping al wrapper pagina per non toccare il cart drawer. */
  html body.template-page h1,
  html body.template-page :is(.chisiamo-page,.cookie-page,.faq-page,.legale-page,.resi-page,.privacy-page,.spedizione-page,.contatto-page,.termini-page,.tracking-page,.shw-page-block) h1{ font-family:'Fraunces', Georgia, 'Times New Roman', serif !important; }
  /* titoli sezione/card (h2/h3/h4) in JOST (l'H1 resta Fraunces come hero) */
  html body.template-page :is(.chisiamo-page,.cookie-page,.faq-page,.legale-page,.resi-page,.privacy-page,.spedizione-page,.contatto-page,.termini-page,.tracking-page,.shw-page-block) :is(h2,h3,h4){ font-family:'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important; }
  /* titoli di sezione/card piu' GRANDI e visibili (erano piccolissimi: h2 ~14px, h4 ~12px) - senza esagerare */
  html body.template-page :is(.chisiamo-page,.cookie-page,.faq-page,.legale-page,.resi-page,.privacy-page,.spedizione-page,.contatto-page,.termini-page,.tracking-page,.shw-page-block) h2{ font-size:24px !important; line-height:1.3 !important; }
  html body.template-page :is(.chisiamo-page,.cookie-page,.faq-page,.legale-page,.resi-page,.privacy-page,.spedizione-page,.contatto-page,.termini-page,.tracking-page,.shw-page-block) h3{ font-size:20px !important; line-height:1.3 !important; }
  html body.template-page :is(.chisiamo-page,.cookie-page,.faq-page,.legale-page,.resi-page,.privacy-page,.spedizione-page,.contatto-page,.termini-page,.tracking-page,.shw-page-block) h4{ font-size:16.5px !important; line-height:1.35 !important; }
  @media (max-width:768px){
    html body.template-page :is(.chisiamo-page,.cookie-page,.faq-page,.legale-page,.resi-page,.privacy-page,.spedizione-page,.contatto-page,.termini-page,.tracking-page,.shw-page-block) h2{ font-size:21px !important; }
    html body.template-page :is(.chisiamo-page,.cookie-page,.faq-page,.legale-page,.resi-page,.privacy-page,.spedizione-page,.contatto-page,.termini-page,.tracking-page,.shw-page-block) h3{ font-size:18px !important; }
  }
  /* stacco UNIFORME del titolo sotto l'header su tutte le pagine (alcune erano troppo attaccate, altre troppo basse) */
  html body.template-page .chisiamo-page,
  html body.template-page .cookie-page,
  html body.template-page .faq-page,
  html body.template-page .legale-page,
  html body.template-page .resi-page,
  html body.template-page .privacy-page,
  html body.template-page .spedizione-page,
  html body.template-page .contatto-page,
  html body.template-page .termini-page,
  html body.template-page .tracking-page,
  html body.template-page .shw-page-block{ padding-top:44px !important; margin-top:0 !important; }
  @media (max-width:768px){
    html body.template-page .chisiamo-page,
    html body.template-page .cookie-page,
    html body.template-page .faq-page,
    html body.template-page .legale-page,
    html body.template-page .resi-page,
    html body.template-page .privacy-page,
    html body.template-page .spedizione-page,
    html body.template-page .contatto-page,
    html body.template-page .termini-page,
    html body.template-page .tracking-page,
    html body.template-page .shw-page-block{ padding-top:28px !important; }
  }
  /* KH 2026-09-18: VIDEO SLIDESHOW squadrato (no border-radius sui contenitori, pulsanti restano rotondi) */
  html body .shopify-section--slideshow .Slideshow,
  html body .shopify-section--slideshow .Slideshow--fullscreen,
  html body .shopify-section--slideshow .Slideshow__Wrapper,
  html body .shopify-section--slideshow .Slideshow__Slide,
  html body .shopify-section--slideshow .Carousel,
  html body .shopify-section--slideshow .Carousel__Cell,
  html body .shopify-section--slideshow .Slideshow__VideoWrapper,
  html body .shopify-section--slideshow .Slideshow__Video,
  html body .shopify-section--slideshow .Slideshow__Image,
  html body .shopify-section--slideshow .Image--contrast,
  html body .shopify-section--slideshow > section,
  html body .shopify-section--slideshow [class*="Slide" i]:not(.Slideshow__Arrow):not(.Slideshow__Volume):not(.Slideshow__ScrollMouse):not(.video-play-overlay){ border-radius:0 !important; }
/* HOME UP LOADING SCREEN STYLES - RESPONSIVE COMPLETO SENZA GRIGLIA */
    :root {
        --homeup-primary: #2D5A3D;--homeup-primary-light: #4A7A5A;--homeup-primary-dark: #1B4332;--homeup-white: #ffffff;--homeup-black: #2d3436;--homeup-gray: #636e72;--homeup-light-gray: #ddd;--homeup-gradient: linear-gradient(135deg,#2D5A3D,#4A7A5A);--homeup-font: 'Jost',-apple-system,BlinkMacSystemFont,sans-serif;/* Variabili responsive dinamiche */
        --homeup-scale: 1;--homeup-logo-size: 250px;--homeup-logo-img-size: 220px;--homeup-progress-width: 300px;--homeup-title-size: clamp(2.5rem,6vw,6rem);--homeup-container-padding: 1rem;--homeup-furniture-size: 40px;--homeup-ring-1-size: 180px;--homeup-ring-2-size: 200px;--homeup-ring-3-size: 220px;}

    /* 📱 VIEWPORT E SCROLL */
    html {
        height: 100dvh;overflow-x: hidden;max-width: 100%;scrollbar-width: auto;scrollbar-color: #2D5A3D rgba(45, 90, 61,0.1);}

    body {
        min-height: 100dvh;overflow-x: hidden;max-width: 100%;position: relative;scrollbar-width: auto;scrollbar-color: #2D5A3D rgba(45, 90, 61,0.1);}

    /* Scrollbar - WebKit browsers */
    ::-webkit-scrollbar {
        width: 20px;}
    ::-webkit-scrollbar:horizontal {
        display: none;height: 0;}
    ::-webkit-scrollbar-track {
        background: rgba(45, 90, 61,0.1);border-radius: 10px;}
    ::-webkit-scrollbar-thumb {
        background: #2D5A3D;border-radius: 10px;}
    ::-webkit-scrollbar-thumb:hover {
        background: #1B4332;}

    /* Previeni overflow da tutti gli elementi */
    * {
        max-width: 100vw;box-sizing: border-box;}

    /* Fix per iOS Safari e altri browser mobile */
    @supports (-webkit-touch-callout: none) {
        html {
            height: -webkit-fill-available;}

        body {
            min-height: -webkit-fill-available;}
    }

    /* Gestione Safe Areas per iPhone */
    @media screen and (max-width: 768px) {
        html {
            height: 100vh;height: calc(100vh + env(safe-area-inset-bottom));}

        body {
            min-height: 100vh;min-height: calc(100vh + env(safe-area-inset-bottom));padding-bottom: env(safe-area-inset-bottom);}

        /* Container principale sempre a schermo pieno */
        .PageContainer {
            min-height: 100vh;min-height: calc(100vh + env(safe-area-inset-bottom));}
    }

    /* Prevenzione overscroll orizzontale su mobile (mantiene pull-to-refresh nativo) */
    @media screen and (max-width: 768px) {
        html,body {
            overscroll-behavior-x: none;overscroll-behavior-y: auto;-webkit-overflow-scrolling: touch;overflow-x: hidden !important;max-width: 100vw !important;position: relative;}
    }

    /* Ottimizzazioni performance - Hardware acceleration */
    

    /* Fix per browser mobile - elimina striscia grigia */
    @supports (-webkit-touch-callout: none) {
        
    }

    /* Supporto per iOS Safari */
    @supports (height: 100dvh) {
        
    }

    /* Fix per notch iPhone */
    @supports (padding: max(0px)) {
        
    }

    

    

    /* ═══ OVERRIDE PREMIUM — nasconde elementi rumorosi, mantiene testo ═══ */
    /* Rimuovi: icone mobili, orb sfondo, anelli logo, glow, badge AI, tagline */
    
    
    

    
    

    /* Testo — appare subito, niente delay lunghi */
    
    
    
    
    
    
    
    
    

    /* Progress bar — sottile ed elegante, 2px */
    
    
    

    /* Content entra più veloce */
    

    
    
    

    /* Background Effects - Ottimizzato (SENZA GRIGLIA) */
    

    

    

    

    

    
        66% { transform: translate3d(clamp(-10px,-2vw,-20px),clamp(10px,2vw,20px),0) scale3d(0.9,0.9,1);}
    

    /* Floating Furniture Particles - Ottimizzato */
    

    

    

    /* Alternate colors - black items */
    .homeup-table,.homeup-lamp,.homeup-wardrobe,.homeup-mirror,.homeup-sink,.homeup-toilet,.homeup-window {
        color: rgba(45,52,54,0.7);}

    .homeup-table svg,.homeup-lamp svg,.homeup-wardrobe svg,.homeup-mirror svg,.homeup-sink svg,.homeup-toilet svg,.homeup-window svg {
        filter: drop-shadow(0 2px 8px rgba(45,52,54,0.3));}

    /* Individual furniture items positioning with better spacing */
    .homeup-chair { left: 6%;animation-delay: 0s;animation-duration: 12s;}
    .homeup-table { left: 14%;animation-delay: 2s;animation-duration: 13s;}
    .homeup-lamp { left: 22%;animation-delay: 4s;animation-duration: 11s;}
    .homeup-sofa { left: 30%;animation-delay: 6s;animation-duration: 14s;}
    .homeup-wardrobe { left: 38%;animation-delay: 8s;animation-duration: 12s;}
    .homeup-shelf { left: 46%;animation-delay: 10s;animation-duration: 13s;}
    .homeup-mirror { left: 54%;animation-delay: 1s;animation-duration: 15s;}
    .homeup-sink { left: 62%;animation-delay: 3s;animation-duration: 11s;}
    .homeup-faucet { left: 70%;animation-delay: 5s;animation-duration: 12s;}
    .homeup-toilet { left: 78%;animation-delay: 7s;animation-duration: 14s;}
    .homeup-window { left: 86%;animation-delay: 9s;animation-duration: 13s;}
    .homeup-door { left: 94%;animation-delay: 11s;animation-duration: 12s;}

    
        15% {
            transform: translate3d(0,90vh,0) rotate(60deg) scale3d(1.05,1.05,1);opacity: 1;}
        35% {
            transform: translate3d(0,60vh,0) rotate(120deg) scale3d(1.1,1.1,1);opacity: 1;}
        55% {
            transform: translate3d(0,30vh,0) rotate(180deg) scale3d(1.15,1.15,1);opacity: 1;}
        75% {
            transform: translate3d(0,10vh,0) rotate(240deg) scale3d(1.1,1.1,1);opacity: 1;}
        85% {
            transform: translate3d(0,-5vh,0) rotate(280deg) scale3d(1,1,1);opacity: 0.8;}
        95% {
            opacity: 0.3;transform: translate3d(0,-25vh,0) rotate(320deg) scale3d(0.8,0.8,1);}
        100% {
            transform: translate3d(0,-50vh,0) rotate(360deg) scale3d(0,0,1);opacity: 0;}
    

    /* Main Content */
    

    
    

    /* Logo Container */
    

    
        100% {
            opacity: 1;transform: scale(1) rotate(0deg);}
    

    

    
    

    

    

    /* Cerchi responsive */
    

    

    

    
    

    

    /* Animazione CSS per mobile - SEMPLIFICATA */
    
        100% { transform: rotate(360deg);}
    

    
        100% { -webkit-transform: rotate(360deg);}
    

    

    /* Brand Text */
    

    

    

    

    

    

    

    

    

    

    

    

    
    

    /* AI Badge */
    

    

    
    

    

    
    

    
    

    

    

    
    

    /* Progress Bar */
    

    
    

    

    

    

    
    

    

    /* Loading Text - Sempre visibile e ben posizionato */
    

    
    

    /* MEDIA QUERIES RESPONSIVE COMPLETE */

    /* iPhone SE e dispositivi molto piccoli */
    @media (max-width: 320px) {
        :root {
            --homeup-logo-size: 140px;--homeup-logo-img-size: 110px;--homeup-progress-width: 180px;--homeup-furniture-size: 20px;--homeup-ring-1-size: 120px;--homeup-ring-2-size: 140px;--homeup-ring-3-size: 160px;--homeup-container-padding: 0.75rem;}

        

        

        

        

        

        
    }

    /* Telefoni in portrait */
    @media (max-height: 667px) and (max-width: 414px) {
        :root {
            --homeup-logo-size: 160px;--homeup-logo-img-size: 130px;--homeup-container-padding: 0.5rem;}

        

        
    }

    /* Telefoni piccoli */
    @media (max-width: 480px) {
        :root {
            --homeup-logo-size: 160px;--homeup-logo-img-size: 130px;--homeup-progress-width: 200px;--homeup-furniture-size: 25px;--homeup-ring-1-size: 140px;--homeup-ring-2-size: 160px;--homeup-ring-3-size: 180px;--homeup-container-padding: 1rem;}

        

        

        

        

        

        

        

        
    }

    /* Telefoni medi */
    @media (min-width: 481px) and (max-width: 768px) {
        :root {
            --homeup-logo-size: 200px;--homeup-logo-img-size: 170px;--homeup-progress-width: 250px;--homeup-furniture-size: 30px;--homeup-ring-1-size: 150px;--homeup-ring-2-size: 170px;--homeup-ring-3-size: 190px;}

        

        

        

        

        
    }

    /* Tablet portrait */
    @media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
        :root {
            --homeup-logo-size: 280px;--homeup-logo-img-size: 250px;--homeup-progress-width: 350px;--homeup-furniture-size: 45px;--homeup-ring-1-size: 200px;--homeup-ring-2-size: 220px;--homeup-ring-3-size: 240px;}

        

        
    }

    /* Tablet landscape */
    @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
        :root {
            --homeup-logo-size: 220px;--homeup-logo-img-size: 190px;--homeup-progress-width: 300px;--homeup-furniture-size: 35px;}

        

        

        

        
    }

    /* Desktop piccolo */
    @media (min-width: 1025px) and (max-width: 1440px) {
        :root {
            --homeup-logo-size: 300px;--homeup-logo-img-size: 270px;--homeup-progress-width: 400px;--homeup-furniture-size: 50px;--homeup-ring-1-size: 220px;--homeup-ring-2-size: 240px;--homeup-ring-3-size: 260px;}

        

        
    }

    /* Desktop grande */
    @media (min-width: 1441px) {
        :root {
            --homeup-logo-size: 350px;--homeup-logo-img-size: 320px;--homeup-progress-width: 450px;--homeup-furniture-size: 60px;--homeup-ring-1-size: 250px;--homeup-ring-2-size: 270px;--homeup-ring-3-size: 290px;}

        

        
    }

    /* Orientamento landscape per telefoni */
    @media (max-height: 500px) and (orientation: landscape) {
        :root {
            --homeup-logo-size: 120px;--homeup-logo-img-size: 100px;--homeup-container-padding: 0.5rem;}

        

        

        

        

        

        

        

        

        
    }

    /* Schermi molto grandi */
    @media (min-width: 1920px) {
        :root {
            --homeup-logo-size: 400px;--homeup-logo-img-size: 370px;--homeup-progress-width: 500px;--homeup-furniture-size: 70px;}

        

        
    }

    /* Schermi 4K */
    @media (min-width: 2560px) {
        :root {
            --homeup-logo-size: 500px;--homeup-logo-img-size: 470px;--homeup-progress-width: 600px;--homeup-furniture-size: 80px;}

        

        
    }

    /* Riduzione movimento per utenti sensibili */
    @media (prefers-reduced-motion: reduce) {
        

        

        

        
    }

    /* High DPI displays */
    @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
        
    }

    /* LOGICA DI CARICAMENTO PERFEZIONATA */

    /* Di default il preloader è nascosto */
    

    /* Blocco totale quando c'è la classe no-loader */
    

    /* Gestione menu mobile */
    .shopify-section--header {
        transition: transform 0.3s ease,opacity 0.3s ease,visibility 0.3s ease;}

    body.is-drawer-open .shopify-section--header,body.drawer-is-open .shopify-section--header,body[data-drawer-open="true"] .shopify-section--header,body[aria-expanded="true"] .shopify-section--header,body.has-active-drawer .shopify-section--header,body.menu-drawer-open .shopify-section--header,html.is-drawer-open .shopify-section--header {
        opacity: 0 !important;visibility: hidden !important;transform: translateY(-100%) !important;position: absolute !important;pointer-events: none !important;z-index: -1 !important;}

    .Drawer__Container,.Drawer,.mobile-menu-drawer,#sidebar-menu,.drawer {
        z-index: 9999 !important;}

    /* Accessibilità migliorata */
    @media (prefers-contrast: high) {
        

        

        
    }

    /* Supporto per browser più vecchi */
    @supports not (height: 100dvh) {
        
    }

    @supports not (gap: 1rem) {
        

        

        

        
    }
    /* OVERRIDE: Stile TAG per tutti i badge sconto */

    .fx-discount-badge,.ultra-mobile-price-discount,.ultra-desktop-price-discount,span.ultra-mobile-price-discount,span.ultra-desktop-price-discount {

        background: #E12D2D !important;color: white !important;font-family: 'Jost',sans-serif !important;font-size: 0.7rem !important;font-weight: 700 !important;padding: 0.25rem 0.5rem 0.25rem 0.9rem !important;border-radius: 0 3px 3px 0 !important;line-height: 1 !important;-webkit-mask: radial-gradient(circle 3.5px at 5px 50%,transparent 75%,rgba(0,0,0,0.2) 85%,rgba(0,0,0,0.6) 92%,black 100%) 85%,rgba(0,0,0,0.6) 92%,black 100%) 96%,black 100%) !important;mask: radial-gradient(circle 3.5px at 5px 50%,transparent 75%,rgba(0,0,0,0.2) 85%,rgba(0,0,0,0.6) 92%,black 100%) 96%,black 100%) !important;}