/* Announcement bar, sticky header, search, menus and the mobile drawer. */

.announcement { background: var(--yms-white); border-bottom: 1px solid var(--yms-line); }
.announcement__text {
  margin: 0; padding-block: 0.3rem;
  text-align: center; color: var(--yms-ink);
  font-size: 0.9375rem; letter-spacing: 0.0375rem; line-height: 1.8;
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--yms-ink); color: var(--yms-white);
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.75rem 0.25rem;
}
.site-header__logo { display: block; line-height: 0; }
.site-header__logo img { width: 130px; height: auto; }
.site-header__menu-toggle { display: none; }

.site-search {
  position: relative; display: flex; align-items: center;
  width: 100%; max-width: 620px; justify-self: center;
  background: var(--yms-white); border-radius: 7px;
}
.site-search__input {
  flex: 1; min-width: 0; height: 2.375rem;
  padding: 0 0.75rem; border: 0; border-radius: 7px; background: transparent;
  color: var(--yms-ink); font: 400 0.875rem/1 var(--yms-font); letter-spacing: 0.02em;
}
.site-search__input::placeholder { color: rgba(var(--yms-ink-rgb), 0.6); }
.site-search__input:focus { outline: none; }
.site-search:focus-within { box-shadow: 0 0 0 2px var(--yms-gold); }
.site-search__button {
  display: grid; place-items: center; width: 2.5rem; height: 2.375rem;
  border: 0; background: none; color: rgba(var(--yms-ink-rgb), 0.6); cursor: pointer;
}
.site-search__button .icon { width: 1.1rem; height: 1.1rem; }

.site-header__icons { display: flex; align-items: center; gap: 1.25rem; }
.site-header__icon { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--yms-white); }
.site-header__icon:hover { color: var(--yms-gold); }
.site-header__icon .icon { width: 1.9rem; height: 1.9rem; }
.cart-count {
  position: absolute; right: 0; bottom: 0.25rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
  border-radius: 999px; background: var(--yms-gold); color: var(--yms-ink);
  font-size: 0.7rem; font-weight: 700; line-height: 1.15rem; text-align: center; letter-spacing: 0;
}

/* Desktop menu */
.site-nav__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 1.3rem; margin: 0; padding: 0 0 0.25rem; list-style: none; }
.site-nav .menu-item { position: relative; }
/* Two groups: shopping (Musical Instruments, Pro Audio, Brand Stores) | Events, Blog, Contact us */
.site-nav__list > .menu-brand-stores { margin-inline-end: 2.7rem; }
.site-nav .menu-item--depth-0 > .menu-link,
.site-nav .menu-details--depth-0 > summary {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.75rem 0.5rem; line-height: 1.4;
  color: var(--yms-white); font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; list-style: none;
}
.site-nav summary::-webkit-details-marker, .drawer-nav__list summary::-webkit-details-marker { display: none; }
.site-nav .menu-item--depth-0 > .menu-link:hover,
.site-nav .menu-details--depth-0 > summary:hover,
.site-nav .menu-details--depth-0[open] > summary span { text-decoration: underline; text-underline-offset: 0.3em; }
.site-nav .menu-brand-stores > details > summary { color: rgba(255, 255, 255, 0.62); }
.site-nav .menu-details--depth-0 > summary .icon--chevron-down { display: none; }
.site-nav .menu-brand-stores > details > summary .icon--chevron-down { display: block; }
.site-nav .icon-chevron, .site-nav .icon--chevron-down { width: 0.75rem; height: 0.5rem; transition: transform 0.15s ease; }
.site-nav details[open] > summary .icon--chevron-down { transform: rotate(180deg); }

.menu-panel {
  position: absolute; left: 0; top: calc(100% - 0.25rem); z-index: 60;
  min-width: 18rem; padding: 0.6rem;
  background: var(--yms-white); color: var(--yms-ink);
  border-radius: var(--yms-radius-lg); box-shadow: var(--yms-shadow);
}
.menu-panel__list, .menu-sub { margin: 0; padding: 0; list-style: none; }
.menu-panel .menu-link,
.menu-panel summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.75rem; border-radius: var(--yms-radius-sm);
  color: var(--yms-ink); font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; list-style: none;
}
.menu-panel .menu-link:hover, .menu-panel summary:hover { background: var(--yms-surface-lilac); color: var(--yms-ink); }
.menu-panel .menu-sub { margin: 0.1rem 0 0.4rem 0.75rem; padding-left: 0.4rem; border-left: 2px solid #e4def0; }
.menu-panel .menu-sub .menu-link { padding-block: 0.5rem; }
.menu-panel .menu-sub .menu-link { font-weight: 700; }
.menu-panel .is-current > .menu-link { color: var(--yms-purple); }

/* Brand Stores panel */
.menu-brand-stores .menu-panel {
  left: 50%; transform: translateX(-50%); width: min(38.75rem, 90vw); padding: 0.75rem;
  border: 1px solid #e7e1d9; border-radius: 8px;
}
.menu-brand-stores .menu-panel__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.brand-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; height: 100%; min-height: 9.25rem;
  padding: 1rem; border: 1px solid #eeebe7; border-radius: 5px;
  color: #29252d; text-decoration: none; background: var(--yms-white);
}
.brand-card:hover { border-color: #cfc6d9; color: #29252d; box-shadow: 0 4px 14px rgba(var(--yms-ink-rgb), 0.08); }
.brand-card__logo { display: flex; align-items: center; min-height: 2.3rem; }
.brand-card__logo img { display: block; box-sizing: content-box; width: 96px; height: auto; padding: 9px 12px; border-radius: 4px; background: #26242a; }
.brand-card__name { font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; }
.brand-card__desc { color: #69626b; font-size: 0.8125rem; line-height: 1.4; }
.brand-card__cta { color: #59515c; font-size: 0.6875rem; font-weight: 650; }
.menu-drawer .brand-card { min-height: 0; }

/* Drawer (mobile menu): opens under the header, which stays in view; the menu button turns into a close button. */
.menu-drawer[hidden] { display: none; }
.menu-drawer { position: fixed; inset: var(--yms-drawer-top, 112px) 0 0 0; z-index: 45; }
.menu-drawer__panel {
  height: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--yms-white); color: var(--yms-ink);
}
.drawer-nav__list, .menu-drawer .menu-sub { margin: 0; padding: 0; list-style: none; }
.drawer-nav__list { padding: 1.25rem 0 0.5rem; }
.menu-drawer .menu-link, .menu-drawer summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.5rem; color: var(--yms-ink); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; list-style: none;
}
.menu-drawer .menu-sub { padding-left: 1rem; background: var(--yms-surface-lilac); }
.menu-drawer .menu-sub--level-2 { background: var(--yms-white); }
.menu-drawer .menu-sub .menu-link, .menu-drawer .menu-sub summary { padding-block: 0.65rem; }
.menu-drawer details[open] > summary .icon--chevron-down { transform: rotate(180deg); }
.menu-drawer .icon--chevron-down { width: 0.8rem; height: 0.55rem; }
.menu-drawer .menu-item--brand { padding: 0.4rem 1.5rem 0.4rem 0.5rem; }
.menu-drawer__account { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding: 1rem 1.5rem; border-top: 1px solid var(--yms-line); background: var(--yms-surface-lilac); color: var(--yms-ink); font-weight: 700; text-decoration: none; }
.menu-drawer__account .icon { width: 1.4rem; height: 1.4rem; }
.site-header__menu-close { display: none; }
body.drawer-open .site-header__menu-open { display: none; }
body.drawer-open .site-header__menu-close { display: grid; }
body.drawer-open { overflow: hidden; }

/* Small screens: menu button, centred logo, search on its own row */
@media (max-width: 989px) {
  :root { --yms-header-height: 112px; }
  .site-header__top {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "toggle logo icons" "search search search";
    gap: 0.5rem 0.75rem;
    padding-block: 0.5rem 0.75rem;
  }
  .site-header__menu-toggle {
    grid-area: toggle; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--yms-white); cursor: pointer;
  }
  .site-header__menu-toggle .icon { width: 1.6rem; height: 1.6rem; }
  .site-header__logo { grid-area: logo; justify-self: center; }
  .site-header__logo img { width: 96px; }
  .site-search { grid-area: search; max-width: none; }
  .site-header__icons { grid-area: icons; gap: 0.25rem; }
  .site-header__icon .icon { width: 1.6rem; height: 1.6rem; }
  .site-nav { display: none; }
  .site-header__icon--account { display: none; }
  .announcement__text { font-size: 0.8125rem; line-height: 1.45; padding-block: 0.45rem; }
  .site-search { width: auto; justify-self: stretch; margin-inline: 0.875rem; }
  body.drawer-open .whatsapp-float { display: none; }
}