/* ════════════════════════════════════════════════════════════════
   DB MOBILE HEADER — Topbar + Drawer con drill-down slide laterale
   Attivo solo a <= 991px. Desktop intoccato.
   ══════════════════════════════════════════════════════════════ */

/* Default desktop: nasconde tutto il mobile */
.db-mtopbar,
.db-mdrawer,
.db-mdrawer-backdrop {
  display: none !important;
}

@media (max-width: 991px) {

  /* ── Nasconde topbar e navbar desktop ──────────────────────── */
  .db-site-header .db-topbar,
  .db-site-header .db-navbar {
    display: none !important;
  }

  .db-site-header {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ── Mobile top bar ────────────────────────────────────────── */
  .db-mtopbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 8px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background .25s ease, border-bottom-color .25s ease,
                -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
    position: relative;
    z-index: 100;
  }
  .db-site-header.is-scrolled .db-mtopbar {
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: rgba(0,0,0,0.04);
  }

	.db-mtopbar-burger,
	.db-mtopbar-cart {
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		-webkit-tap-highlight-color: transparent;
		padding: 10px;
		color: #1d1d1f;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		position: relative;
		flex: 0 0 auto;
		line-height: 0;
		outline: none;
	}
/* Hover: solo su dispositivi che lo supportano davvero (no touch) */
  @media (hover: hover) {
    .db-mtopbar-burger:hover,
    .db-mtopbar-cart:hover {
      background: transparent !important;
      color: #009EE3 !important;
    }
    .db-mtopbar-burger:hover svg,
    .db-mtopbar-cart:hover svg {
      stroke: #009EE3;
    }
  }
  /* :focus-visible mostra il colorato SOLO se l'utente naviga da tastiera,
     NON quando viene tappato col dito su mobile */
  .db-mtopbar-burger:focus-visible,
  .db-mtopbar-cart:focus-visible {
    color: #009EE3 !important;
    outline: 2px solid rgba(0,158,227,0.4);
    outline-offset: 2px;
  }
  .db-mtopbar-burger:focus-visible svg,
  .db-mtopbar-cart:focus-visible svg {
    stroke: #009EE3;
  }
  /* :focus generico (quello che resta dopo il tap) → niente di niente */
  .db-mtopbar-burger:focus,
  .db-mtopbar-cart:focus {
    background: transparent !important;
    color: #1d1d1f !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .db-mtopbar-burger:focus svg,
  .db-mtopbar-cart:focus svg {
    stroke: #1d1d1f;
  }
  /* :active = mentre il dito sta premendo → feedback tattile cyan */
  .db-mtopbar-burger:active,
  .db-mtopbar-cart:active {
    color: #009EE3 !important;
  }
  .db-mtopbar-burger:active svg,
  .db-mtopbar-cart:active svg {
    stroke: #009EE3;
  }
	.db-mtopbar-burger svg,
	.db-mtopbar-cart svg {
		display: block;
		transition: stroke .2s ease, color .2s ease;
	}

  .db-mtopbar-logo {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 8px;
  }
  .db-mtopbar-logo img {
    max-width: 150px;
    width: auto;
    height: auto;
    display: block;
  }

  .db-mtopbar-cart .db-cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #009EE3;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }

  /* ── Drawer backdrop ───────────────────────────────────────── */
  .db-mdrawer-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 9998;
  }
  .db-mdrawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Drawer ────────────────────────────────────────────────── */
  .db-mdrawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    overflow: hidden;
  }
  .db-mdrawer.is-open { transform: translateX(0); }

  .db-mdrawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex: 0 0 auto;
  }
  .db-mdrawer-logo img {
    max-width: 130px; height: auto; display: block;
  }
  .db-mdrawer-close {
    background: transparent; border: none; padding: 6px;
    color: #1d1d1f; cursor: pointer; display: inline-flex;
    line-height: 0;
  }

  .db-mdrawer-search {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex: 0 0 auto;
  }
  .db-mdrawer-search form,
  .db-mdrawer-search .woocommerce-product-search {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
  }
  .db-mdrawer-search input[type="search"],
  .db-mdrawer-search input.search-field {
    width: 100% !important;
    height: 42px;
    padding: 0 44px 0 16px;
    background: #f5f5f7;
    border: 1px solid transparent !important;
    border-radius: 21px;
    font-size: 14px;
    color: #1d1d1f;
    -webkit-appearance: none;
    appearance: none;
    transition: background .2s, border-color .2s;
    box-shadow: none;
  }
  .db-mdrawer-search input[type="search"]:focus,
  .db-mdrawer-search input.search-field:focus {
    outline: none;
    background: #fff;
    border-color: #009EE3 !important;
  }
  .db-mdrawer-search button[type="submit"],
  .db-mdrawer-search input[type="submit"] {
    position: absolute;
    top: 0; right: 0;
    height: 42px; width: 42px;
    background: transparent;
    border: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
  }
  .db-mdrawer-search label.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px,1px,1px,1px);
  }

  /* ════════════════════════════════════════════════════════════
     DRILL-DOWN NAV — pannelli che slidano lateralmente (iOS-style)
     ════════════════════════════════════════════════════════════ */

  .db-mdrawer-nav {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #fff;
  }

  .db-mnav-stack {
    position: absolute;
    inset: 0;
  }

  .db-mnav-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
  }
  /* Pannello attualmente visibile */
  .db-mnav-panel.is-active { transform: translateX(0); }
  /* Pannello che è "andato indietro" (rimasto a sinistra) */
  .db-mnav-panel.is-back   { transform: translateX(-100%); }

  /* Header dei sub-pannelli (Back + Titolo) */
  .db-mnav-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #fafafa;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .db-mnav-back {
    background: transparent;
    border: none;
    padding: 6px 8px;
    margin-left: -8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #009EE3;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
  }
  .db-mnav-back svg { flex-shrink: 0; }
  .db-mnav-back:hover { color: #007ab3; }
  .db-mnav-back > span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .db-mnav-panel-title {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: .01em;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .db-mnav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 12px !important;
  }
  .db-mnav-item {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .db-mnav-item:last-child { border-bottom: none; }

.db-mnav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 20px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f !important;
    text-decoration: none !important;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    box-sizing: border-box;
    margin: 0;
  }
  button.db-mnav-link {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .db-mnav-link:hover,
  .db-mnav-link:focus {
    background: rgba(0,158,227,0.06);
    outline: none;
    color: #009EE3 !important;
  }
  .db-mnav-link > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .db-mnav-chevron {
    width: 8px;
    height: 13px;
    flex-shrink: 0;
    color: #c7c7cc;
  }

  /* "Vedi tutto" link in cima ai sub-pannelli */
  .db-mnav-overview {
    display: block;
    padding: 12px 20px;
    background: #fafafa;
    color: #009EE3 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .db-mnav-overview:hover { background: rgba(0,158,227,0.06); }

  /* Drawer footer */
  .db-mdrawer-foot {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 auto;
    background: #fafafa;
  }
  .db-mdrawer-account {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1d1d1f !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
  }
  .db-mdrawer-account svg { flex-shrink: 0; }
  .db-mdrawer-lang {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .db-mdrawer-lang-link {
    display: inline-flex;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color .15s;
    line-height: 0;
  }
  .db-mdrawer-lang-link.is-active {
    border-color: #009EE3;
  }
  .db-mdrawer-lang-link img {
    display: block;
    width: 22px;
    height: 15px;
  }

  body.db-drawer-open {
    overflow: hidden;
    position: relative;
  }
}

/* ════════════════════════════════════════════════════════════════
   FIX STICKY HEADER — neutralizza overflow:hidden su #page
   che impedisce a position:sticky del masthead di funzionare.
   Vale per desktop + mobile.
   ════════════════════════════════════════════════════════════════ */
#page.hfeed.site {
  overflow: visible !important;
  /* overflow-x: clip evita scroll orizzontale ma NON rompe sticky.
     Sostituisci con `hidden` se devi supportare browser molto vecchi. */
  overflow-x: clip !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX .db-nav (barra nera dei prodotti) — sticky sotto l'header
   anziché sovrapposta. Vale desktop + mobile.
   ════════════════════════════════════════════════════════════════ */

/* Mobile: header alto 56px */
@media (max-width: 991px) {
  .db-nav {
    top: 56px !important;
    z-index: 9985 !important; /* sotto db-site-header (9990) */
  }
}

/* Desktop: header alto ~109px (topbar 60 + navbar 49) */
@media (min-width: 992px) {
  .db-nav {
    top: 109px !important;
    z-index: 9985 !important;
  }
}