/* =========================================================
   ONICE — custom layout per ViMENÙ
   Registro di alta ristorazione: nero onice + avorio,
   oro spazzolato usato solo nei dettagli. Architettonico,
   niente vetro, niente bagliori, movimento minimo.
   Mobile-first. Solo CSS, nessuna dipendenza da JavaScript.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');

/* ---------- 1. Token system ---------- */
body.custom-layout-onice-lux{
  --bg:#0D0C0B;
  --text:#F2ECE0;
  --muted:#948C7E;
  --line:rgba(201,162,39,.22);
  --card:#1C1A17;

  --primary:#C9A227;
  --primary-2:#E8CA82;
  --accent:#C9A227;
  --price:#D8B658;

  --button:transparent;
  --button-text:var(--primary);

  --md-border:rgba(242,236,224,.12);
  --md-border-strong:rgba(201,162,39,.35);
  --md-soft:#141312;
  --md-soft-2:#1A1917;
  --radius:2px;
  --md-radius:2px;
  --md-radius-sm:2px;

  --cat-nav-bg:transparent;
  --cat-nav-text:var(--muted);
  --cat-nav-active-bg:transparent;
  --cat-nav-active-text:var(--text);

  --input-bg:#161513;
  --input-border:rgba(242,236,224,.16);

  --cart-panel-bg:#0D0C0B;
  --cart-card-bg:#141312;
  --cart-border:rgba(242,236,224,.12);
  --cart-text:var(--text);
  --cart-muted:var(--muted);
  --cart-button:transparent;
  --cart-button-text:var(--primary);

  --badge-bg:transparent;
  --badge-text:var(--primary);

  font-family:'Jost',system-ui,sans-serif;
  font-weight:300;
  background:var(--bg);
  color-scheme:dark;
}

body.custom-layout-onice-lux h1,
body.custom-layout-onice-lux h2,
body.custom-layout-onice-lux .category-hero-card h2{
  font-family:'Playfair Display',serif;
  font-weight:600;
  letter-spacing:0;
}
body.custom-layout-onice-lux .hero p,
body.custom-layout-onice-lux .category-hero-content p{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:500;
}

/* piccola utility per etichette maiuscolo-spaziate, in stile packaging di lusso */
body.custom-layout-onice-lux .eyebrow,
body.custom-layout-onice-lux .table-pill,
body.custom-layout-onice-lux .cat-nav a{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:500;
}

/* ---------- 2. Hero — foto reale, duotono cinematografico, oro solo nei fili ---------- */
body.custom-layout-onice-lux .hero{
  background-image:linear-gradient(165deg,#141312,#0D0C0B);
  background-color:#0D0C0B;
  border-bottom:none!important;
  min-height:280px;
  position:relative;
  overflow:hidden;
}
body.custom-layout-onice-lux .hero::after{
  /* duotono quasi monocromo: legge ancora la foto ma la ingentilisce, niente colori accesi */
  background:
    linear-gradient(0deg, rgba(13,12,11,.92), rgba(13,12,11,.30) 60%),
    linear-gradient(90deg, rgba(13,12,11,.35), transparent 50%)!important;
  z-index:1;
}
body.custom-layout-onice-lux .hero-inner{
  position:relative; z-index:2;
  padding:40px 0 34px!important;
  text-align:center;
  animation:on-rise .8s ease both;
}
@keyframes on-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

body.custom-layout-onice-lux .logo{
  border:1px solid var(--md-border-strong)!important;
  box-shadow:none!important;
  border-radius:0!important;
  max-width:170px;
  max-height:66px;
  width:auto; height:auto;
  object-fit:contain;
  padding:12px 18px;
  background:rgba(13,12,11,.55)!important;
  margin:0 auto 6px;
}
body.custom-layout-onice-lux .hero h1{
  font-size:clamp(26px,7vw,32px);
  font-weight:600;
  color:var(--text)!important;
  margin:14px 0 4px;
}
body.custom-layout-onice-lux .hero p{
  color:rgba(216,182,88,.85)!important;
  font-size:1.05rem;
  margin:0;
}
/* filo sottile con piccolo rombo dorato al centro, sopra e sotto il titolo */
body.custom-layout-onice-lux .hero-inner::before,
body.custom-layout-onice-lux .hero-inner::after{
  content:"";
  display:flex; align-items:center; justify-content:center;
  height:1px; margin:16px auto; width:100%; max-width:220px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.6),transparent);
}
body.custom-layout-onice-lux .eyebrow,
body.custom-layout-onice-lux .table-pill{
  display:inline-flex;
  background:transparent!important;
  border:1px solid var(--md-border-strong)!important;
  color:var(--primary)!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:8px 16px!important;
  margin:8px 0 0!important;
}

/* ---------- 3. Ricerca + nav categorie: sottolineatura, non pillole ---------- */
body.custom-layout-onice-lux .searchbar{
  background:var(--bg)!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.custom-layout-onice-lux #search{background:transparent!important;color:var(--text)!important;}
body.custom-layout-onice-lux #clearSearch{
  background:transparent!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
  color:var(--text)!important;
}
body.custom-layout-onice-lux .sticky-category-bar{
  background:rgba(13,12,11,.94)!important;
  border-bottom:1px solid var(--line)!important;
}
body.custom-layout-onice-lux .cat-nav a{
  background:transparent!important;
  color:var(--cat-nav-text)!important;
  border:none!important;
  border-bottom:2px solid transparent!important;
  border-radius:0!important;
  padding:10px 12px!important;
}
body.custom-layout-onice-lux .cat-nav a.active{
  background:transparent!important;
  color:var(--text)!important;
  border-bottom:2px solid var(--primary)!important;
  font-weight:500;
}

/* ---------- 4. Card categoria: piatte, filo sottile, niente colore di sfondo ---------- */
body.custom-layout-onice-lux .category-hero-card{
  background:var(--card)!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.35)!important;
}
body.custom-layout-onice-lux .category-color-card{
  background:var(--card)!important;
  border-left:2px solid var(--cat-color,var(--primary))!important;
}
body.custom-layout-onice-lux .category-hero-content p{color:rgba(216,182,88,.75)!important;}
body.custom-layout-onice-lux .category-icon-bg{
  background:transparent!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
  color:var(--primary)!important;
}

/* ---------- 5. Card prodotto: architettoniche, ben distinte dallo sfondo ---------- */
body.custom-layout-onice-lux .product{
  background:var(--card)!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.35)!important;
}
body.custom-layout-onice-lux .product.is-soldout{opacity:.5;}
body.custom-layout-onice-lux .product-image-wrap,
body.custom-layout-onice-lux .product-image-wrap img{
  border-radius:0!important;
  filter:saturate(.92) contrast(1.03);
}
body.custom-layout-onice-lux .product h3{
  font-family:'Playfair Display',serif;
  font-weight:600;
}
body.custom-layout-onice-lux .product .product-action-row .price strong{
  font-family:'Playfair Display',serif;
  color:var(--price)!important;
  font-weight:600;
  letter-spacing:.02em;
}
body.custom-layout-onice-lux .product-badges .badge,
body.custom-layout-onice-lux .badge{
  background:transparent!important;
  color:var(--primary)!important;
  border:1px solid rgba(201,162,39,.4)!important;
  border-radius:0!important;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px!important;
  font-family:'Jost',system-ui,sans-serif!important;
  font-weight:500!important;
  padding:5px 10px!important;
  box-shadow:none!important;
}
body.custom-layout-onice-lux .badge.soldout-badge{
  color:var(--muted)!important;
  border:1px solid var(--md-border)!important;
}

/* ---------- 6. Bottoni: contorno sottile, si riempie solo al passaggio del mouse ---------- */
body.custom-layout-onice-lux button.add,
body.custom-layout-onice-lux .add,
body.custom-layout-onice-lux #sendOrder,
body.custom-layout-onice-lux .btn-primary{
  background:transparent!important;
  color:var(--primary)!important;
  border:1px solid var(--primary)!important;
  border-radius:0!important;
  font-weight:500!important;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.82rem!important;
  transition:background-color .25s ease,color .25s ease!important;
}
body.custom-layout-onice-lux .btn-secondary,
body.custom-layout-onice-lux .qty button,
body.custom-layout-onice-lux .option-qty button{
  background:transparent!important;
  color:var(--text)!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
}

/* ---------- 7. Carrello ---------- */
body.custom-layout-onice-lux .cart-fab{
  background:var(--bg)!important;
  color:var(--primary)!important;
  border:1px solid var(--primary)!important;
  border-radius:0!important;
  box-shadow:0 10px 30px rgba(0,0,0,.5)!important;
}
body.custom-layout-onice-lux .cart-panel{
  background:var(--cart-panel-bg)!important;
  border-left:1px solid var(--cart-border)!important;
  border-radius:0!important;
}
body.custom-layout-onice-lux .cart-item{
  background:var(--cart-card-bg)!important;
  border:1px solid var(--cart-border)!important;
  border-radius:0!important;
}
body.custom-layout-onice-lux .cart-panel input,
body.custom-layout-onice-lux .cart-panel select,
body.custom-layout-onice-lux .cart-panel textarea{
  background:var(--input-bg)!important;
  border:1px solid var(--input-border)!important;
  border-radius:0!important;
  color:var(--text)!important;
}

/* ---------- 8. Modale ---------- */
body.custom-layout-onice-lux #productModal .modal-box{
  background:var(--card)!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
  box-shadow:0 30px 80px rgba(0,0,0,.6)!important;
}
body.custom-layout-onice-lux .modal-close{
  background:transparent!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
  color:var(--text)!important;
}
/* intestazione del popup: nel codice base resta sempre chiara, qui la riportiamo scura */
body.custom-layout-onice-lux #productModal .modal-product-head{
  background:var(--card)!important;
  border-bottom:1px solid var(--line)!important;
}
body.custom-layout-onice-lux #productModal .modal-product-head h2{
  font-family:'Playfair Display',serif;
  color:var(--text)!important;
}
body.custom-layout-onice-lux .modal-description{
  color:var(--muted)!important;
}
/* etichetta "kicker": stessa lingua visiva del resto, non più una pillola scollegata */
body.custom-layout-onice-lux .modal-kicker{
  background:transparent!important;
  color:var(--primary)!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
  font-weight:500!important;
}
body.custom-layout-onice-lux #productModal .modal-base-price{
  background:var(--primary)!important;
  color:var(--bg)!important;
  border-radius:0!important;
  font-family:'Playfair Display',serif;
  font-weight:600;
}
body.custom-layout-onice-lux #productModal fieldset{
  background:var(--md-soft)!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
}
body.custom-layout-onice-lux #productModal fieldset legend{
  color:var(--text)!important;
}
body.custom-layout-onice-lux #productModal fieldset legend em{
  background:transparent!important;
  color:var(--primary)!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
}
body.custom-layout-onice-lux .option-choice{
  background:var(--card)!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
}
body.custom-layout-onice-lux .option-choice b{color:var(--primary)!important;}
body.custom-layout-onice-lux .qty{
  background:var(--md-soft)!important;
  border:1px solid var(--md-border)!important;
}
body.custom-layout-onice-lux .qty b{color:var(--text)!important;}
body.custom-layout-onice-lux .empty-options{
  background:var(--md-soft)!important;
  border:1px dashed var(--md-border-strong)!important;
  color:var(--muted)!important;
}
body.custom-layout-onice-lux .modal-actions{
  background:linear-gradient(180deg,transparent,var(--card) 40%)!important;
  border-top:1px solid var(--md-border)!important;
}
body.custom-layout-onice-lux .btn-primary{
  background:var(--primary)!important;
  color:var(--bg)!important;
}

/* ---------- 9. Legende e footer ---------- */
body.custom-layout-onice-lux .allergen-legend,
body.custom-layout-onice-lux .allergen-grid article,
body.custom-layout-onice-lux .feature-legend-item{
  background:var(--card)!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
}
body.custom-layout-onice-lux .business-info-block{
  background:var(--card)!important;
  border:1px solid var(--md-border)!important;
  border-radius:0!important;
}
body.custom-layout-onice-lux .business-socials a{
  background:transparent!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
  color:var(--primary)!important;
}
body.custom-layout-onice-lux .back-top{
  background:var(--bg)!important;
  border:1px solid var(--md-border-strong)!important;
  border-radius:0!important;
  color:var(--primary)!important;
}
body.custom-layout-onice-lux footer{
  border-top:1px solid var(--line);
  padding-top:24px;
  background:var(--bg)!important;
}

/* ---------- 10. Accessibilità e movimento ---------- */
body.custom-layout-onice-lux a:focus-visible,
body.custom-layout-onice-lux button:focus-visible,
body.custom-layout-onice-lux input:focus-visible{
  outline:1px solid var(--primary)!important;
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  body.custom-layout-onice-lux *{animation:none!important;transition:none!important;}
}

/* interazioni reali solo con mouse: niente hover "incollato" al tocco */
@media (hover:hover) and (pointer:fine){
  body.custom-layout-onice-lux button.add:hover,
  body.custom-layout-onice-lux .add:hover,
  body.custom-layout-onice-lux #sendOrder:hover,
  body.custom-layout-onice-lux .btn-primary:hover{
    background:var(--primary)!important;
    color:#0D0C0B!important;
  }
  body.custom-layout-onice-lux .cat-nav a:hover{
    color:var(--text)!important;
  }
  body.custom-layout-onice-lux .product{
    transition:border-color .3s ease;
  }
  body.custom-layout-onice-lux .product:hover{
    border-color:var(--md-border-strong)!important;
  }
  body.custom-layout-onice-lux .category-hero-card{
    transition:border-color .3s ease;
  }
  body.custom-layout-onice-lux .category-hero-card:hover{
    border-color:var(--md-border-strong)!important;
  }
}