/* V21.16 unified account/cart/language utilities */
.mbm-utilities{position:absolute!important;right:clamp(12px,3.8vw,65px);top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;z-index:60;font-family:Arial,sans-serif;line-height:1.3}
.mbm-utilities .language-switch{display:flex!important;align-items:center;justify-content:flex-end;gap:5px;position:static!important;margin:0!important}
.mbm-utilities .language-switch button{border:0;background:none;padding:3px 2px;cursor:pointer;color:#51463F;font:12px Arial,sans-serif}
.mbm-utilities .language-switch button.active-lang{font-weight:bold;text-decoration:underline;text-underline-offset:3px}
.mbm-quicklinks{display:flex;gap:14px;align-items:center;white-space:nowrap}
.mbm-quicklinks a,.mbm-quicklinks button{border:0;background:none;text-decoration:none;color:#51463F;font:11px Arial,sans-serif;letter-spacing:.04em;cursor:pointer;padding:4px 0}
.mbm-quicklinks a:hover,.mbm-quicklinks button:hover{text-decoration:underline}
.mbm-utilities~.header-controls .account-link,.mbm-utilities~.header-controls .cartbtn{display:none!important}
.header .mbm-utilities{margin:0!important}
.v21-aboutheader,.header,body>header,body>header.header{position:relative}
@media(max-width:760px){.mbm-utilities{right:9px;top:6px;gap:3px}.mbm-quicklinks{gap:9px}.mbm-quicklinks a,.mbm-quicklinks button{font-size:9px}.mbm-utilities .language-switch button{font-size:10px}.header .header-wordmark{max-width:55vw;overflow:hidden;text-overflow:ellipsis}}
/* Heritage photograph: no heavy rectangular mat */
body[data-page="login"] .auth-aside .heritage-photo{background:none;border:0;padding:0;aspect-ratio:4/3;overflow:hidden}
body[data-page="login"] .auth-aside .heritage-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
body[data-page="login"] .auth-aside h2{font-size:clamp(32px,3.5vw,50px);line-height:1.1}
body[data-page="login"] .auth-aside h2:after{content:'— ♡ —';display:block;color:#C89F9F;font-size:23px;font-weight:normal;letter-spacing:9px;margin:15px auto 6px}
body[data-page="login"] .auth-aside .auth-text{margin-bottom:24px}
@media(max-width:760px){body[data-page="login"] .auth-aside .heritage-photo{aspect-ratio:5/4}}

/* V21.24 — Mobile header: separate language/account/cart from the wordmark.
   Desktop layout is unchanged. */
@media (max-width: 760px) {
  body .header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 12px 14px 20px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body .header .logo-link,
  body .header .v13-logo { display: none !important; }
  body .header .mbm-utilities {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 19px !important;
    z-index: 4 !important;
  }
  body .header .mbm-utilities .language-switch {
    align-self: flex-end !important;
    justify-content: flex-end !important;
    position: static !important;
  }
  body .header .mbm-quicklinks {
    align-self: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    white-space: normal !important;
  }
  body .header .mbm-quicklinks a,
  body .header .mbm-quicklinks button {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  body .header .header-wordmark {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(30px, 8vw, 47px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  body .header .header-controls {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body .header .v21-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px 18px !important;
    width: 100% !important;
    font-size: 12px !important;
  }
  body .header::after { display: none !important; }
}

/* V21.25: enforce independent mobile header rows, overriding older grid rules */
@media screen and (max-width: 760px) {
  html body header.header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center !important;
    align-items: start !important;
    row-gap: 16px !important;
    padding: 14px 12px 22px !important;
    height: auto !important; min-height: 0 !important;
  }
  html body header.header > .logo-link,
  html body header.header > .v13-logo { display: none !important; }
  html body header.header > .mbm-utilities {
    grid-column: 1 !important; grid-row: 1 !important;
    position: static !important; inset: auto !important;
    transform: none !important; order: initial !important;
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 9px !important;
    width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
    justify-self: stretch !important;
  }
  html body header.header > .mbm-utilities .language-switch {
    position: static !important; align-self: flex-end !important;
    margin: 0 !important; transform: none !important;
  }
  html body header.header > .mbm-utilities .mbm-quicklinks {
    display: flex !important; justify-content: center !important;
    align-self: center !important; flex-wrap: wrap !important;
    gap: 8px 22px !important; white-space: normal !important;
  }
  html body header.header > .mbm-utilities .mbm-quicklinks a,
  html body header.header > .mbm-utilities .mbm-quicklinks button {
    font-size: 11px !important; white-space: nowrap !important;
  }
  html body header.header > .header-wordmark {
    grid-column: 1 !important; grid-row: 2 !important;
    position: static !important; inset: auto !important;
    transform: none !important; order: initial !important;
    justify-self: center !important; align-self: center !important;
    display: block !important; width: auto !important;
    max-width: 100% !important; overflow: visible !important;
    margin: 0 !important; padding: 0 !important;
    font-size: clamp(31px, 8vw, 47px) !important;
    line-height: 1.1 !important; white-space: nowrap !important;
    text-align: center !important;
  }
  html body header.header > .header-controls {
    grid-column: 1 !important; grid-row: 3 !important;
    display: block !important; position: static !important;
    order: initial !important; justify-self: stretch !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important;
  }
  html body header.header > .header-controls .v21-nav {
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 0 16px !important; width: 100% !important;
    font-size: clamp(10px, 2.7vw, 13px) !important;
  }
  html body header.header::after { display: none !important; }
}