/* ==========================================================================
   MaisonDealer — My Account / Wish List header dropdowns
   Premium, minimal, calm. Scoped to .md-acc (added on the .user-info wrapper
   in common/header.twig) so nothing else on the site is touched. The same
   markup is moved into the mobile header by theme.js (swapChildren), so this
   styling covers desktop AND mobile from one source.
   ========================================================================== */

.md-acc {
  --md-accent: #cc9966;
  --md-dark: #232323;
  --md-line: #ececec;
  --md-muted: #8a8a8a;
  --md-soft: #faf8f6;
}

/* line-icon look everywhere (theme forces fill on header svgs — override it) */
.md-acc .md-acc__icon svg,
.md-acc .md-acc__li {
  fill: none !important;
  stroke: currentColor;
}

/* ---------- trigger icon ---------- */
.md-acc .md-acc__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px;
  color: var(--md-dark);
  background: none;
  border: 0;
}
.md-acc .md-acc__trigger::after { display: none; }      /* kill bootstrap caret */
.md-acc .md-acc__icon { display: inline-flex; }
.md-acc .md-acc__icon svg {
  width: 23px;
  height: 23px;
  color: var(--md-dark);
  transition: color .18s ease, transform .18s ease;
}
.md-acc .md-acc__trigger:hover .md-acc__icon svg,
.md-acc .dropdown.show .md-acc__icon svg { color: var(--md-accent); }

/* account icon: its outline circle fills less of the viewBox than the other
   glyphs, so render it a touch larger to match the magnifier/cart visible size */
#_desktop_user_info .md-acc__icon svg,
#_mobile_user_info .md-acc__icon svg { width: 26px; height: 26px; stroke-width: 1.1; }
.md-acc .md-acc__trigger .user-name { color: var(--md-dark); font-size: 13px; }

/* ---------- dropdown panel ---------- */
.md-acc .md-acc__menu {
  min-width: 224px;
  padding: 8px;
  margin-top: 12px;
  border: 1px solid var(--md-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px -22px rgba(35, 35, 35, .35);
}

/* ---------- items ---------- */
.md-acc .md-acc__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--md-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.md-acc .md-acc__item:hover,
.md-acc .md-acc__item:focus {
  background: var(--md-soft);
  color: var(--md-dark);
}
.md-acc .md-acc__item:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 1px; }
.md-acc .md-acc__li {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--md-muted);
  transition: color .15s ease;
}
.md-acc .md-acc__item:hover .md-acc__li,
.md-acc .md-acc__item:focus .md-acc__li { color: var(--md-accent); }
.md-acc .md-acc__item span { display: inline-block; }

/* separator + logout accent */
.md-acc .md-acc__sep {
  height: 1px;
  margin: 7px 12px;
  background: var(--md-line);
}
.md-acc .md-acc__item--logout:hover,
.md-acc .md-acc__item--logout:focus { color: #b23b2e; }
.md-acc .md-acc__item--logout:hover .md-acc__li,
.md-acc .md-acc__item--logout:focus .md-acc__li { color: #b23b2e; }

/* ---------- desktop: roomier spacing between header icons ---------- */
@media (min-width: 992px) {
  .desktop-custominfo { white-space: nowrap; }
  #_desktop_seach_widget,
  #_desktop_user_info,
  #_desktop_wishlist_info,
  #_desktop_cart { margin-left: 12px; }
}

/* ---------- mobile: center the logo exactly on the page ----------
   The left icon group (90px) is narrower than the right group (3 icons),
   so the in-flow logo sits ~14px left of centre — exactly half the column
   width difference, constant across viewports. Nudge it right by that much
   with a transform (no reflow, so the side groups stay put). */
@media (max-width: 991.98px) {
  #_mobile_logo { transform: translateX(14px); }
}

/* ---------- mobile: bigger touch targets ---------- */
@media (max-width: 991.98px) {
  .md-acc .md-acc__icon svg { width: 25px; height: 25px; }
  #_desktop_user_info .md-acc__icon svg,
  #_mobile_user_info .md-acc__icon svg { width: 28px; height: 28px; }
  .md-acc .md-acc__menu { min-width: 230px; padding: 8px; border-radius: 14px; }
  .md-acc .md-acc__item { padding: 14px 16px; font-size: 15px; }
  .md-acc .md-acc__li { width: 19px; height: 19px; flex-basis: 19px; }
}