/* Account-adjacent tools use the same component on desktop and mobile. */
.front-header .front-actions { gap:12px!important; }
.front-header .dp-header-tools { display:flex; align-items:center; flex:0 0 auto; gap:12px; }
.front-header .dp-header-notifications { flex:0 0 auto; }
.front-header .dp-header-icon {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 44px; width:44px; min-width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--action); box-shadow:none!important;
  cursor:pointer; text-decoration:none; list-style:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.front-header .dp-header-icon::-webkit-details-marker { display:none; }
.front-header .dp-header-icon:hover,
.front-header .dp-header-notifications[open]>.dp-header-icon {
  background:#EEF4FF; border-color:#B2C5FF; color:var(--action-hover);
}
.front-header :is(.dp-header-icon,.dp-notifications-close,.dp-notification-item):focus-visible {
  outline:2px solid var(--action); outline-offset:3px;
}
.front-header .dp-header-icon svg { display:block; flex:none; }
.front-header .dp-header-count {
  position:absolute; top:-7px; inset-inline-end:-7px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 5px; box-sizing:border-box;
  border:2px solid var(--surface); border-radius:999px;
  background:#D92D20; color:#fff; font:700 11px/1 Tahoma,Arial,sans-serif;
  direction:ltr; white-space:nowrap; pointer-events:none;
}
.front-header .dp-header-count:empty { display:none; }
.front-header .dp-notifications-panel {
  position:absolute; z-index:1100; top:calc(100% + 14px); inset-inline-end:0;
  width:min(380px,calc(100vw - 32px)); box-sizing:border-box;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--surface); color:var(--ink); text-align:start;
  font-family:var(--site-font-family); box-shadow:0 14px 36px rgba(16,24,40,.12);
}
.front-header .dp-notifications-heading {
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:18px; border-bottom:1px solid var(--line-soft); background:var(--surface);
}
.front-header .dp-notifications-heading>div { min-width:0; }
.front-header .dp-notifications-heading h2 {
  display:flex; align-items:center; gap:9px; margin:0; padding:0;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1.8; color:var(--ink);
}
.front-header .dp-notifications-total {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; min-height:24px; padding:2px 6px; border-radius:8px;
  background:#EEF4FF; color:var(--action); font:700 12px/1.4 Tahoma,Arial,sans-serif;
}
.front-header .dp-notifications-heading p { margin:6px 0 0; font-size:11px; line-height:1.8; color:var(--muted); }
.front-header .dp-notifications-close {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 32px; width:32px; height:32px; padding:0;
  border:1px solid var(--line); border-radius:9px; background:var(--surface);
  color:var(--muted); font-size:12px; cursor:pointer; box-shadow:none!important;
}
.front-header .dp-notifications-close:hover { border-color:var(--action); color:var(--action); }
.front-header .dp-notifications-list {
  list-style:none; margin:0; padding:6px 16px;
  max-height:min(360px,55vh,calc(100dvh - 250px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
}
.front-header .dp-notifications-list>li { margin:0; padding:0; border-bottom:1px solid var(--line-soft); }
.front-header .dp-notifications-list>li:last-child { border-bottom:0; }
.front-header .dp-notification-item {
  display:flex; align-items:flex-start; gap:12px; padding:14px 4px;
  color:var(--ink-700); font-size:12px; line-height:1.9; text-align:start; border-radius:8px;
}
.front-header a.dp-notification-item:hover { background:var(--bg); color:var(--ink); }
.front-header .dp-notification-icon {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 34px; width:34px; height:34px; border-radius:10px;
  background:#EEF4FF; color:var(--action); font-size:15px;
}
.front-header .dp-notification-message { flex:1; min-width:0; overflow-wrap:anywhere; }
.front-header .dp-notification-message p { margin:0; }
.front-header .dp-notification-arrow { flex:none; margin-top:8px; color:var(--muted); font-size:10px; }
html[dir="rtl"] .front-header .dp-notification-arrow { transform:rotate(180deg); }
.front-header .dp-notifications-empty { padding:30px 20px; text-align:center; }
.front-header .dp-notifications-empty>span {
  display:inline-grid; place-items:center; width:50px; height:50px;
  border-radius:16px; background:#EEF4FF; color:var(--action); font-size:26px;
}
.front-header .dp-notifications-empty p { margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.9; }
body.front-dark .front-header .dp-header-icon { color:var(--link); }
body.front-dark .front-header .dp-header-icon:hover,
body.front-dark .front-header .dp-header-notifications[open]>.dp-header-icon { background:#1D2939; border-color:#6172F3; color:#C7D7FE; }
body.front-dark .front-header :is(.dp-notifications-total,.dp-notification-icon,.dp-notifications-empty>span) { background:#1D2939; color:#A4BCFD; }
@media(max-width:1100px) {
  .front-header .dp-header-notifications { position:static; }
  .front-header .dp-notifications-panel { top:calc(100% + 8px); }
  body.front-site .front-mobile-account-group { gap:12px!important; }
}
/* Give the account tools their own row on small screens, keeping the logo legible. */
@media(max-width:600px) {
  body.front-site .front-header .front-mobile-nav {
    grid-template-columns:42px minmax(0,1fr) 42px;
    grid-template-rows:auto auto; gap:8px; padding:6px 0 12px!important;
  }
  body.front-site .front-header .front-mobile-account-group {
    grid-column:1 / -1!important; grid-row:2!important; justify-content:flex-end;
    width:100%!important; padding-top:6px; border-top:1px solid var(--line-soft);
  }
  .front-header .front-mobile-account-group>.front-lang-switcher { margin-inline-end:auto!important; }
  .front-header .dp-notifications-panel { inset-inline:0; width:100%; }
  body.front-site .front-header .front-mobile-account-group>.front-mobile-icon-btn {
    width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important;
  }
}
@media(prefers-reduced-motion:reduce) { .front-header .dp-header-icon { transition:none; } }