/* AUZAN STORE — V9 Notification Sync + Precision Drawer
   Loaded after V8. Keeps the V8 cart/product fixes intact. */

:root{
  --v9-green:#047857;
  --v9-green-soft:#ecfdf5;
  --v9-navy:#0f172a;
  --v9-line:#e2e8f0;
  --v9-muted:#64748b;
}

/* Seller strip: keep store identity/rating, remove redundant country label. */
body.storefront-v4 .market-seller-strip .seller-meta small{display:none!important}
body.storefront-v4 .market-seller-strip .seller-meta{justify-content:center!important}
body.storefront-v4 .market-seller-strip .seller-meta b{line-height:1.2!important}

/* Notification button sits beside cart and uses the same visual system. */
body.storefront-v4 .notification-trigger{color:#0f5e4c!important}
body.storefront-v4 .notification-trigger svg{fill:none!important;stroke:currentColor!important}
body.storefront-v4 .notification-trigger .badge-count{
  position:absolute!important;
  right:-5px!important;
  top:-7px!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:#047857!important;
  color:#fff!important;
  border:2px solid #fff!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:0 3px 8px rgba(4,120,87,.22)!important;
}
body.storefront-v4 .notification-trigger .badge-count.hidden{display:none!important}

/* ===== Notification drawer: viewport-safe on desktop/tablet/mobile ===== */
body.storefront-v4 .notification-drawer-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:265!important;
  display:block!important;
  overflow:hidden!important;
  background:rgba(15,23,42,.56)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease!important;
}
body.storefront-v4 .notification-drawer-overlay.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body.storefront-v4 .notification-drawer{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  width:min(440px,100vw)!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  overflow:hidden!important;
  border:0!important;
  border-left:1px solid rgba(226,232,240,.96)!important;
  border-radius:24px 0 0 24px!important;
  background:#fff!important;
  box-shadow:-28px 0 80px rgba(15,23,42,.22)!important;
  transform:translate3d(100%,0,0)!important;
  transition:transform .26s cubic-bezier(.2,.8,.2,1)!important;
}
body.storefront-v4 .notification-drawer-overlay.open .notification-drawer{
  transform:translate3d(0,0,0)!important;
}
body.storefront-v4 .notification-drawer .drawer-header{
  min-height:78px!important;
  margin:0!important;
  padding:16px 18px!important;
  padding-top:max(16px,env(safe-area-inset-top))!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border-bottom:1px solid var(--v9-line)!important;
  background:rgba(255,255,255,.98)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  z-index:3!important;
}
body.storefront-v4 .notification-drawer .drawer-header>div{min-width:0!important}
body.storefront-v4 .notification-drawer .drawer-header h3{
  margin:0!important;
  color:var(--v9-navy)!important;
  font-size:21px!important;
  line-height:1.15!important;
  font-weight:950!important;
}
body.storefront-v4 .notification-drawer .drawer-header .muted{
  display:block!important;
  margin-top:3px!important;
  color:var(--v9-muted)!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:650!important;
  white-space:normal!important;
}
body.storefront-v4 .notification-drawer-close{
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--v9-line)!important;
  border-radius:14px!important;
  background:#f8fafc!important;
  color:#334155!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:900!important;
  cursor:pointer!important;
}
body.storefront-v4 .notification-drawer-close:hover{background:#f1f5f9!important;color:#0f172a!important}

body.storefront-v4 .notification-toolbar{
  min-height:54px!important;
  margin:0!important;
  padding:9px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border-bottom:1px solid #eef2f7!important;
  background:#fff!important;
  z-index:2!important;
}
body.storefront-v4 .notification-sync-label{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  color:#64748b!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:750!important;
}
body.storefront-v4 .notification-sync-dot{
  width:8px!important;height:8px!important;flex:0 0 8px!important;border-radius:50%!important;
  background:#10b981!important;box-shadow:0 0 0 4px rgba(16,185,129,.10)!important;
}
body.storefront-v4 .notification-toolbar .btn{
  flex:0 0 auto!important;
  min-height:34px!important;
  padding:7px 11px!important;
  border-radius:11px!important;
  font-size:10.5px!important;
  font-weight:850!important;
}
body.storefront-v4 .notification-drawer .notification-list{
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  background:#f8fafc!important;
}
body.storefront-v4 .notification-list>.empty{
  min-height:190px!important;
  margin:0!important;
  padding:28px 20px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  text-align:center!important;
  border:1px dashed #cbd5e1!important;
  border-radius:20px!important;
  background:#fff!important;
  color:#64748b!important;
}
body.storefront-v4 .notification-list>.empty strong{font-size:14px!important;color:#334155!important}
body.storefront-v4 .notification-list>.empty p{margin:5px 0 0!important;font-size:12px!important;line-height:1.45!important}
body.storefront-v4 .notification-empty-icon{font-size:28px!important;margin:0 0 5px!important}

body.storefront-v4 .notification-item{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  margin:0!important;
  padding:13px!important;
  border:1px solid #e2e8f0!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 2px 7px rgba(15,23,42,.025)!important;
  cursor:pointer!important;
  outline:none!important;
  overflow:hidden!important;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
body.storefront-v4 .notification-item+.notification-item{margin-top:10px!important}
body.storefront-v4 .notification-item:hover,
body.storefront-v4 .notification-item:focus-visible{
  border-color:#a7f3d0!important;
  box-shadow:0 10px 24px rgba(15,23,42,.07)!important;
  transform:translateY(-1px)!important;
}
body.storefront-v4 .notification-item.pinned{
  border-color:#bbf7d0!important;
  background:linear-gradient(135deg,#f0fdf4,#ffffff)!important;
}
body.storefront-v4 .notification-item-icon,
body.storefront-v4 .notification-product-image{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  color:#047857!important;
  font-size:20px!important;
}
body.storefront-v4 .notification-product-image img{
  width:100%!important;
  height:100%!important;
  padding:2px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
body.storefront-v4 .notification-item-content{min-width:0!important;overflow:hidden!important}
body.storefront-v4 .notification-item-head{
  min-width:0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:8px!important;
}
body.storefront-v4 .notification-item-head strong{
  min-width:0!important;
  color:#1e293b!important;
  font-size:13px!important;
  line-height:1.3!important;
  font-weight:900!important;
  overflow-wrap:anywhere!important;
}
body.storefront-v4 .notification-item-head small{
  flex:0 0 auto!important;
  max-width:92px!important;
  color:#94a3b8!important;
  font-size:9px!important;
  line-height:1.3!important;
  font-weight:700!important;
  text-align:right!important;
  white-space:normal!important;
}
body.storefront-v4 .notification-item p{
  margin:6px 0 9px!important;
  color:#64748b!important;
  font-size:11.5px!important;
  line-height:1.48!important;
  font-weight:600!important;
  overflow-wrap:anywhere!important;
}
body.storefront-v4 .notification-product-chip{
  max-width:100%!important;
  padding:5px 8px!important;
  display:inline-flex!important;
  border-radius:999px!important;
  background:#ecfdf5!important;
  color:#047857!important;
  font-size:9.5px!important;
  line-height:1.25!important;
  font-weight:850!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body.storefront-v4 .notification-action{
  margin-top:8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#047857!important;
  font-size:10.5px!important;
  font-weight:900!important;
}

@media(max-width:720px){
  body.storefront-v4 .market-mobile-actions{gap:6px!important}
  body.storefront-v4 .market-mobile-actions .market-icon-btn{width:44px!important;height:44px!important;border-radius:14px!important}
  body.storefront-v4 .notification-drawer-overlay{padding:0!important}
  body.storefront-v4 .notification-drawer{
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  body.storefront-v4 .notification-drawer .drawer-header{
    min-height:68px!important;
    padding:12px 14px!important;
    padding-top:max(12px,env(safe-area-inset-top))!important;
  }
  body.storefront-v4 .notification-drawer .drawer-header h3{font-size:19px!important}
  body.storefront-v4 .notification-drawer .drawer-header .muted{font-size:10.5px!important}
  body.storefront-v4 .notification-drawer-close{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border-radius:13px!important}
  body.storefront-v4 .notification-toolbar{min-height:50px!important;padding:8px 14px!important}
  body.storefront-v4 .notification-sync-label{font-size:9.5px!important}
  body.storefront-v4 .notification-toolbar .btn{font-size:9.5px!important;min-height:32px!important;padding:6px 9px!important}
  body.storefront-v4 .notification-drawer .notification-list{padding:10px 12px calc(18px + env(safe-area-inset-bottom))!important}
  body.storefront-v4 .notification-list>.empty{min-height:160px!important;border-radius:18px!important}
  body.storefront-v4 .notification-item{grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important;padding:11px!important;border-radius:16px!important}
  body.storefront-v4 .notification-item-icon,
  body.storefront-v4 .notification-product-image{width:48px!important;height:48px!important;min-width:48px!important;border-radius:13px!important}
  body.storefront-v4 .notification-item-head strong{font-size:12px!important}
  body.storefront-v4 .notification-item-head small{max-width:78px!important;font-size:8px!important}
  body.storefront-v4 .notification-item p{font-size:10.5px!important;margin:5px 0 8px!important}
  body.storefront-v4 .notification-product-chip{font-size:8.8px!important}
  body.storefront-v4 .notification-action{font-size:9.8px!important}
}

@media(max-width:380px){
  body.storefront-v4 .market-mobile-actions{gap:4px!important}
  body.storefront-v4 .market-mobile-actions .market-icon-btn{width:40px!important;height:40px!important;border-radius:13px!important}
  body.storefront-v4 .market-brand-copy strong{font-size:13px!important}
  body.storefront-v4 .market-brand-copy small{display:none!important}
  body.storefront-v4 .notification-sync-label{max-width:145px!important}
}