/* =========================================================
   GIANEDAVI - gd-zindex-fixes.css
   Tema: takorabo/gian2025
   Root progetto:
   /var/www/vhosts/gianedavicollezioni.com/httpdocs

   NOTE IMPORTANTI
   - Questo file contiene fix z-index, mobile nav overlay e override icone header.
   - Evitare duplicazioni: qui ogni blocco è unico e coerente col markup reale.
   ========================================================= */


/* =========================================================
   VARS
   ========================================================= */
:root {
  --gd-nav-width: min(390px, 88vw);

  /* Assets SVG (path relativo a web/css -> web/images) */
  --gd-ico-search: url("../images/gd/gd_search_gian.svg");
  --gd-ico-user:   url("../images/gd/gd_user_gian.svg");
  --gd-ico-cart:   url("../images/gd/gd_cart_gian.svg");
  --gd-logo:       url("../images/gd/gd_logo_gian.svg");
}


/* =========================================================
   PREHEADER
   ========================================================= */
.gianedavi-preheader {
  position: relative !important;
  z-index: 200 !important;
}


/* =========================================================
   BLUR/OVERLAY GLOBALE TEMA (body::before)
   ========================================================= */
body::before {
  z-index: 400 !important;
}


/* =========================================================
   HEADER BASE LAYERING
   ========================================================= */
.page-header,
.header.content,
.header.panel {
  position: relative !important;
  z-index: 9000 !important;
}

/* Toggle hamburger */
.nav-toggle,
.action.nav-toggle {
  position: relative !important;
  z-index: 9500 !important;
}


/* =========================================================
   MOBILE NAV (drawer) + OVERLAY
   ========================================================= */
@media (max-width: 1024px) {

  /* 1) Stato CHIUSO: forza fuori schermo (capolino OFF) */
  html:not(.nav-open) .nav-sections,
  html:not(.nav-open) .sections.nav-sections {
    left: -100% !important;
    right: auto !important;
  }

  /* 2) Stato APERTO: menu sopra overlay */
  html.nav-open .nav-sections,
  html.nav-open .sections.nav-sections {
    z-index: 9200 !important;
    width: var(--gd-nav-width) !important;
  }

  /* 3) Disattiva click su html::before (pseudo overlay non gestibile bene dal JS) */
  html.nav-open::before {
    pointer-events: none !important;
  }

  /* 4) Overlay reale Magento/Luma: ha handler JS per la chiusura */
  .nav-overlay {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;

    /* copre SOLO la parte a destra del menu */
    left: var(--gd-nav-width) !important;
    right: 0 !important;

    z-index: 9100 !important;          /* sotto al menu (9200) */
    pointer-events: auto !important;   /* deve prendere il click */
  }
}

/* Submenu sopra al drawer */
.navigation .submenu,
.navigation .level0 .submenu,
.navigation .level0 .submenu .submenu,
.nav-sections .navigation .submenu {
  z-index: 9300 !important;
}


/* =========================================================
   MODALI / POPUP / MINICART
   ========================================================= */
.modal-popup,
.modal-slide,
.ui-dialog,
.mage-dropdown-dialog,
.dropdown-dialog,
.block-minicart,
.minicart-wrapper .block-minicart,
.minicart-wrapper .mage-dropdown-dialog,
.page-wrapper .mage-dropdown-dialog {
  z-index: 9999 !important;
}

.modals-overlay,
.modal-custom-overlay,
.overlay,
._show ~ .modals-overlay {
  z-index: 9998 !important;
}


/* =========================================================
   HEADER PANEL sopra a logo/content (lingue/account nel panel)
   ========================================================= */

/* barra top (lingue/account) sopra */
.page-header .panel.wrapper,
.page-header .header.panel,
.header.panel,
.panel.wrapper {
  position: relative !important;
  z-index: 40000 !important;
}

/* contenuto header (logo + search ecc.) sotto al panel */
.page-header .header.content,
.header.content {
  position: relative !important;
  z-index: 30000 !important;
}

/* logo sotto al panel */
.page-header .logo,
.page-header .logo img,
.logo,
.logo img {
  position: relative !important;
  z-index: 30010 !important;
}

/* switcher e dropdown sopra (dentro panel) */
.switcher,
.switcher-language,
.switcher-store,
.switcher .options {
  position: relative !important;
  z-index: 45000 !important;
}

.switcher .options .dropdown,
.switcher .options ul.dropdown,
.switcher .options .action.toggle + ul,
.switcher .options .action.toggle + .dropdown {
  position: absolute !important;
  z-index: 46000 !important;
}


/* =========================================================
   LOGO (background-image)
   - non cambia config Magento
   - nasconde solo visivamente l'img, ma resta nel DOM
   ========================================================= */
.page-header .header.content .logo img {
  opacity: 0 !important;
}

.page-header .header.content .logo {
  display: block;
  width: 260px;      /* regola se serve */
  height: 70px;      /* regola se serve */
  background-image: var(--gd-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* =========================================================
   HEADER ICONS v3 - DEFINITIVO (NO LINK NASCOSTI GLOBALMENTE)
   - Search: solo icona (nasconde input)
   - Account: robusto logged-out (header.links href) + logged-in (customer-welcome)
   - Cart: icona + counter intatto
   ========================================================= */

/* RESET: spegne le icone native (icon-font/pseudo) SOLO sugli elementi target */
.page-header .block-search .action.search:before,
.page-header .minicart-wrapper .action.showcart:before,
.page-header .customer-welcome .action.switch:before,
.page-header .header.links a[href*="/customer/account/"]:before {
  display: none !important;
  content: none !important;
  background: none !important;
}


/* =========================
   SEARCH (solo icona) - JS SAFE
   NON usare display:none su field/control (Magento JS la rompe)
   ========================= */

/* Mantieni field/control nel DOM, ma invisibili e non ingombranti */
.page-header .block-search .field.search,
.page-header .block-search .control {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Bottone: resta stabile e cliccabile */
.page-header .block-search .action.search {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* La tua SVG come icona */
.page-header .block-search .action.search::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--gd-ico-search) no-repeat center / contain !important;
}

/* =========================
   ACCOUNT (robusto: logged-out + logged-in)
   ========================= */

/* Logged-out: link semplice in header.links */
.page-header .header.links a[href*="/customer/account/"] {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;   /* nasconde testo "Sign In"/"My Account" */
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

.page-header .header.links a[href*="/customer/account/"]::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--gd-ico-user) no-repeat center / contain !important;
}

/* Logged-in: customer-welcome (se presente nel tema) */
.page-header .customer-welcome .action.switch {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

.page-header .customer-welcome .action.switch::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--gd-ico-user) no-repeat center / contain !important;
}


/* =========================
   CART (icona + counter)
   ========================= */
.page-header .minicart-wrapper .action.showcart {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important; /* nasconde testo, non counter */
  line-height: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

.page-header .minicart-wrapper .action.showcart::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--gd-ico-cart) no-repeat center / contain !important;
}

/* counter resta visibile anche con font-size:0 sul parent */
.page-header .minicart-wrapper .action.showcart .counter {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* testo "My Cart" (se presente) nascosto accessibile */
.page-header .minicart-wrapper .action.showcart .text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   GD_HEADER_FORCE_V2
   - Account: target nel PANEL e nei link header (logged-out / logged-in)
   - Search: solo icona JS-safe (NO display:none / NO offscreen su control/field)
   - Cart: icona + counter intatto
   ========================================================= */

/* ---------- SEARCH (JS-safe): input invisibile ma presente ---------- */
html body .page-wrapper .page-header .block-search {
  display: inline-flex !important;
  align-items: center !important;
}

/* NON nascondere .control/.field (il JS ci lavora sopra) */
html body .page-wrapper .page-header .block-search .control,
html body .page-wrapper .page-header .block-search .field.search {
  display: block !important;
}

/* Riduci l'input a 0 senza rimuoverlo dal layout JS */
html body .page-wrapper .page-header .block-search input#search,
html body .page-wrapper .page-header .block-search .input-text {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Bottone search sempre visibile come icona */
html body .page-wrapper .page-header .block-search .action.search {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Spegne eventuale glyph del tema e impone SVG */
html body .page-wrapper .page-header .block-search .action.search:before,
html body .page-wrapper .page-header .block-search .action.search::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("../images/gd/gd_search_gian.svg") !important;
}

/* ---------- ACCOUNT: PANEL + HEADER LINKS + customer-welcome ---------- */
/* Logged-out spesso sta nel panel: .panel.wrapper / .header.panel */
html body .page-wrapper .page-header .panel.wrapper .header.links a[href*="/customer/account/"],
html body .page-wrapper .page-header .header.panel .header.links a[href*="/customer/account/"],
/* fallback classico */
html body .page-wrapper .page-header .header.links a[href*="/customer/account/"],
/* Logged-in: customer-welcome */
html body .page-wrapper .page-header .customer-welcome .action.switch {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-size: 0 !important;  /* nasconde testo */
  line-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .page-wrapper .page-header .panel.wrapper .header.links a[href*="/customer/account/"]::before,
html body .page-wrapper .page-header .header.panel .header.links a[href*="/customer/account/"]::before,
html body .page-wrapper .page-header .header.links a[href*="/customer/account/"]::before,
html body .page-wrapper .page-header .customer-welcome .action.switch::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("../images/gd/gd_user_gian.svg") !important;
}

/* ---------- CART: icona + counter ---------- */
html body .page-wrapper .page-header .minicart-wrapper .action.showcart {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important; /* nasconde testo */
  line-height: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .page-wrapper .page-header .minicart-wrapper .action.showcart::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("../images/gd/gd_cart_gian.svg") !important;
}

/* counter resta visibile */
html body .page-wrapper .page-header .minicart-wrapper .action.showcart .counter {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* GD_SIGNATURE_HEADER_FORCE_V2 */

/* =========================================================

/* =========================================================

/* =========================================================

/* =========================================================

/* =========================================================
   GD_ACCOUNT_PANEL_SINGLE_V1 (DOM REALE)
   Panel: ul.header.links contiene:
   - /customer/account/        (My Account)  -> NASCONDI
   - /customer/account/login/  (Sign In)    -> TIENI
   - /customer/account/create/ (Create)     -> NASCONDI
   ========================================================= */

/* NASCONDI My Account (root) e Create SOLO nel panel header links */
html body .page-wrapper .page-header .panel.wrapper ul.header.links > li > a[href*="/customer/account/"] {
  /* default: nascondo TUTTI gli /customer/account/* ... */
  display: none !important;
}

/* ...poi RI-MOSTRO SOLO il login */
html body .page-wrapper .page-header .panel.wrapper ul.header.links > li > a[href*="/customer/account/login/"] {
  display: inline-flex !important;
}

/* Iconizza SOLO il login (così non rischi duplicazioni) */
html body .page-wrapper .page-header .panel.wrapper ul.header.links > li > a[href*="/customer/account/login/"] {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html body .page-wrapper .page-header .panel.wrapper ul.header.links > li > a[href*="/customer/account/login/"]::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: url("../images/gd/gd_user_gian.svg") no-repeat center / contain !important;
}

/* GD_SIGNATURE_ACCOUNT_PANEL_SINGLE_V1 */

/* =========================================================
   GD_SEARCH_CLICK_FIX_V1
   Il div #gd-search-overlay NON deve mai bloccare la lente quando è "chiuso"
   DOM reale: <div id="gd-search-overlay" class="gd-search-overlay" aria-hidden="true">
   ========================================================= */

/* Stato CHIUSO: overlay completamente inerte */
html body #gd-search-overlay.gd-search-overlay[aria-hidden="true"]{
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 0 !important;
}

/* Stato APERTO: overlay attivo (supporto sia aria-hidden che classi comuni) */
html body #gd-search-overlay.gd-search-overlay[aria-hidden="false"],
html body #gd-search-overlay.gd-search-overlay.is-open,
html body #gd-search-overlay.gd-search-overlay.is-active,
html body #gd-search-overlay.gd-search-overlay._show{
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 99990 !important;
}

/* La lente deve stare sempre sopra ai layer header */
html body .page-wrapper .page-header .block-search .action.search{
  position: relative !important;
  z-index: 99991 !important;
}

/* GD_SIGNATURE_SEARCH_CLICK_FIX_V1 */

/* =========================================================
   GD_SEARCH_SIZE_V1
   Ridimensionamento lente
   ========================================================= */

/* Riduce box cliccabile */
html body .page-wrapper .page-header .block-search .action.search{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
}

/* Riduce SVG */
html body .page-wrapper .page-header .block-search .action.search::before{
  width: 18px !important;
  height: 18px !important;
}

/* GD_SIGNATURE_SEARCH_SIZE_V1 */

/* =========================================================
   GD_SEARCH_SHRINK_V1
   Il container .block.block-search non deve restare largo 265px
   ========================================================= */

/* Il blocco search deve occupare solo la larghezza dell'icona */
html body .page-wrapper .page-header .block.block-search{
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 0 0 10px !important; /* spacing rispetto alle altre icone */
}

/* I wrapper dell'input non devono occupare spazio (ma restano nel DOM per il JS) */
html body .page-wrapper .page-header .block.block-search .control,
html body .page-wrapper .page-header .block.block-search .field.search{
  display: inline-flex !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Input a larghezza zero (già fatto, lo ribadisco per sicurezza) */
html body .page-wrapper .page-header .block.block-search input#search,
html body .page-wrapper .page-header .block.block-search .input-text{
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* GD_SIGNATURE_SEARCH_SHRINK_V1 */

/* =========================================================
   GD_HEADER_CENTER_LOGO_V1
   Centra il logo nella header.content
   ========================================================= */

html body .page-header .header.content{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Logo centrato */
html body .page-header .header.content .logo{
  margin: 0 auto !important;
}

/* Sposta search e minicart a destra assoluti */
html body .page-header .header.content .block.block-search{
  position: absolute !important;
  right: 60px !important;
}

html body .page-header .header.content .minicart-wrapper{
  position: absolute !important;
  right: 20px !important;
}


/* GD_SIGNATURE_CENTER_LOGO_V1 */
/* Logo centrato */
html body .page-header .header.content .logo {
  margin: 0 auto !important;
}

/* ==================================================
   GD_HEADER_BOTTOM_SPACE_V1
   Aggiunge 30px sotto header.content
   ================================================== */
html body .page-header .header.content{
  padding-bottom: 30px !important;
}
/* GD_SIGNATURE_HEADER_BOTTOM_SPACE_V1 */

/* === FIX ICONA USER: order flex dentro gd-header-right === */
/* Nasconde header.links nativo dall header (gestito da gd-header-right) */
.page-header .header.links {
    display: none !important;
}

/* Ordine corretto: search=1, minicart=2, user=3 */
.page-header .header.content .gd-header-right > .block.block-search {
    order: 1 !important;
}
.page-header .header.content .gd-header-right > .minicart-wrapper {
    order: 2 !important;
}
.page-header .header.content .gd-header-right > li.authorization-link,
.page-header .header.content .gd-header-right > .authorization-link,
.page-header .header.content .gd-header-right > li.link.authorization-link {
    order: 3 !important;
}

/* customer-welcome (loggato): posizionato come ultimo nel gd-header-right */
.page-header .customer-welcome {
    display: flex !important;
    align-items: center !important;
    order: 3 !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    float: none !important;
}
/* Posiziona customer-welcome in fondo al gd-header-right */
.page-header .header.content .gd-header-right ~ .customer-welcome,
.page-header .customer-welcome {
    float: none !important;
}

/* Override logo margin-bottom dal tema base */
@media (min-width: 768px) {
.logo { margin-bottom: 0 !important; }
}