/* Keep the original link text accessible and replace only its visual treatment.
   This remains stable across the React and native WooCommerce shared shells. */
#oracle-stone-root .header > a.logo,
#oracle-stone-root .footer-brand > a.logo {
  display: block !important;
  flex: 0 1 246px;
  width: 246px;
  max-width: 100%;
  min-width: 0;
  height: 58px;
  padding: 0 !important;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  background: url('assets/oracle-and-stone-reversed.svg') left center / contain no-repeat !important;
  border: 0;
  border-radius: 0;
  text-shadow: none;
}
#oracle-stone-root .header > a.logo > *,
#oracle-stone-root .footer-brand > a.logo > * { display: none !important; }
#oracle-stone-root .footer-brand > a.logo { width: 280px; height: 66px; }
html:not(.dark) body.os-brand-light #oracle-stone-root .header > a.logo {
  background-image: url('assets/oracle-and-stone-primary.svg') !important;
}
@media (min-width: 851px) and (max-width: 1100px) {
  #oracle-stone-root .header > a.logo { flex-basis: 212px; width: 212px; height: 50px; }
}
@media (max-width: 850px) {
  #oracle-stone-root .header > a.logo { flex: 0 1 220px; width: 220px; height: 52px; }
}
@media (max-width: 480px) {
  #oracle-stone-root .header > a.logo { flex-basis: 190px; width: 190px; height: 45px; }
  #oracle-stone-root .footer-brand > a.logo { width: 260px; height: 61px; }
}
@media (max-width: 360px) {
  #oracle-stone-root .header > a.logo { flex-basis: 164px; width: 164px; height: 42px; }
}
@media print {
  #oracle-stone-root a.logo { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}