@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/*
 * designer/hoplix-picker.css
 * Restyle "our-product" del picker prodotto Hoplix-driven nel designer (Direzione A).
 * SOLO ASPETTO: non tocca il layout Lumise (sidebar categorie + griglia prodotti), nessun
 * monkey-patch JS. Caricato DOPO app.css e custom.css in pagine/create-productv2.php, quindi
 * a parita' di specificita' (2 ID) vince. Scope: #lumise-lightbox #lumise-change-products-wrp.
 */

#lumise-lightbox #lumise-change-products-wrp{
  --hx-bg:#fbf8f3; --hx-surface:#ffffff; --hx-surface-2:#f5f1e9;
  --hx-border:#e7dfd2; --hx-border-2:#d8cdbb;
  --hx-ink:#211d16; --hx-ink-2:#5a5347; --hx-muted:#938a7c;
  --hx-accent:#f6891f; --hx-accent-soft:#fdeede;
  --hx-shadow-card:0 1px 2px rgba(40,28,12,.05),0 4px 14px rgba(40,28,12,.07);
  --hx-shadow-hover:0 2px 4px rgba(40,28,12,.06),0 12px 26px rgba(40,28,12,.14);
  background:var(--hx-bg) !important;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
#lumise-lightbox #lumise-change-products-wrp *{ font-family:inherit; }

/* ===== Sidebar categorie: da scura a chiara ===== */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"]{
  background:var(--hx-surface-2);
  border-right:1px solid var(--hx-border);
  padding:8px;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"]>h3{
  background:transparent; color:var(--hx-muted);
  font-size:11.5px; font-weight:700; letter-spacing:.08em;
  padding:14px 12px 8px;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"] li{
  color:var(--hx-ink-2); font-size:14px; font-weight:600;
  border-radius:10px; margin:1px 0; padding:10px 12px;
  border-bottom:none;
  transition:background .12s ease,color .12s ease;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"] li:hover{
  background:var(--hx-accent-soft); color:var(--hx-ink);
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"] li.active{
  background:var(--hx-accent) !important; color:#ffffff !important;
  box-shadow:0 2px 8px rgba(246,137,31,.28);
}
/* la freccetta font-lumise stona con lo stile pulito */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"] li[data-lv="0"]:before{ display:none; }

/* ===== Header ricerca ===== */
#lumise-lightbox #lumise-change-products-wrp h3[data-view="top"]{
  background:var(--hx-surface); border-bottom:1px solid var(--hx-border);
  padding:12px 3%;
}
#lumise-lightbox #lumise-change-products-wrp h3[data-view="top"] input{
  height:40px; width:60%; max-width:440px; background:var(--hx-surface);
  border:1px solid var(--hx-border); border-radius:11px; padding:0 14px;
  font-size:14px; color:var(--hx-ink);
  transition:border-color .12s ease, box-shadow .12s ease;
}
#lumise-lightbox #lumise-change-products-wrp h3[data-view="top"] input:focus{
  background:var(--hx-surface); border-color:var(--hx-accent);
  box-shadow:0 0 0 3px var(--hx-accent-soft);
}

/* ===== Area prodotti + card (stile our-product) ===== */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"]{
  background:var(--hx-bg); padding:22px 1.5% 0;
}
/* la card vera e' SOLO il prodotto (li[data-id]); paginazione/noitem esclusi */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-id]{
  background:var(--hx-surface);
  border:1px solid var(--hx-border);
  border-radius:15px;
  box-shadow:var(--hx-shadow-card);
  overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-id]:not([data-current="true"]):hover{
  transform:translateY(-2px);
  box-shadow:var(--hx-shadow-hover) !important;
  border-color:var(--hx-border-2);
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="thumbn"]{
  width:100%; background:#ffffff; position:relative; display:block;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="thumbn"]>img{
  padding:10px; box-sizing:border-box; width:100%; object-fit:contain; display:block;
  transition:opacity .3s ease;
}
/* immagini storefront (come /custom/): default + hover con crossfade */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="thumbn"] .hoplix-img-hover{
  position:absolute; top:0; left:0; width:100%; height:100%;
  padding:10px; box-sizing:border-box; object-fit:contain; background:#ffffff;
  opacity:0; pointer-events:none;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li.has-hover-img:hover span[data-view="thumbn"] .hoplix-img-default{ opacity:0; }
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li.has-hover-img:hover span[data-view="thumbn"] .hoplix-img-hover{ opacity:1; }
/* hover pulito = swap immagine: via l'overlay "Start designing" di Lumise */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="thumbn"]:after{ display:none !important; }
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="thumbn"]:hover:after{ opacity:0 !important; }
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="name"]{
  color:var(--hx-ink); font-weight:700; font-size:13.5px; letter-spacing:-.01em;
  padding:12px 12px 14px; line-height:1.3;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="price"]{
  color:var(--hx-accent) !important; font-weight:700;
}
/* check "prodotto corrente" (arancio, come custom.css) + ombra morbida */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-current="true"]:after{
  background:var(--hx-accent) !important; box-shadow:0 2px 8px rgba(246,137,31,.4);
}
/* "Nessun prodotto" */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="noitem"]{
  color:var(--hx-muted);
}

/* ===== Paginazione (riga piena, non una card) ===== */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="pagination"]{
  width:100% !important;
  margin:6px 0 4px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  border-top:1px solid var(--hx-border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  height:auto !important;
  float:none !important;
  clear:both !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="pagination"] ul{
  margin:14px 0 6px !important; padding:0; text-align:center;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="pagination"] ul li{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 11px; margin:0 3px;
  border:1px solid var(--hx-border); border-radius:10px;
  background:var(--hx-surface); color:var(--hx-ink-2);
  font-size:13.5px; font-weight:600; cursor:pointer;
  box-shadow:none; vertical-align:middle;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="pagination"] ul li:hover{
  border-color:var(--hx-accent); color:var(--hx-accent); background:var(--hx-accent-soft);
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="pagination"] ul li.lumise-color{
  background:var(--hx-accent) !important; color:#ffffff !important;
  border-color:var(--hx-accent) !important; border-radius:10px !important;
  cursor:default; font-weight:700;
}